当前位置： 首页 > news >正文

CSS样式基础样式选择器(案例+代码实现+效果图)

news 2025/12/24 21:41:30

目录

1.css样式的规则

2.引入css样式的方式

1)行内式

2)内嵌式

3)外链式

1-link导入

2-@import导入

4)总

3.css基础选择器

1)标签选择器

案例：使用标签选择器编写一个圆

1.代码

2.效果

2)类选择器 

案例：使用类选择器为div添加背景色

1.代码 

2.效果

3)id选择器

案例使用id选择器做一个三角形

1.代码

2.效果

1.css样式的规则

css的作用是对页面的样式进行修改,这就需要我们能够找到对应的标签，引入选择器概念，选择器作用就是标记标签，标记之后可以用css进行对标签进行修饰

注: div是盒子模型,color属性是控制字体的颜色，font-size是控制字体的大小

2.引入css样式的方式

1)行内式

  通过style属性设置标签样式.

2)内嵌式

将css写在head标签中，并且使用style标签

效果图:

3)外链式

1-link导入

通过link标签引入外部的css样式对标签进行修改

效果图

2-@import导入

在style标签通过 @import 导入外部文件

<style type="text/css">

    @import "css路径"

</style>

<style type="text/css">

    @import url(css路径)

</style>

4)总

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Css引入的方式</title>

    <style>

        p{

            color: blue;

        }

    </style>

    <!-- 使用link标签 -->

    <link rel="stylesheet" href="./style.css"></link>

</head>

<body>

    <!-- 内联样式    -->

     <h2>内联式</h2>

    <div style="

        width: 200px;

        height: 200px;

        background-color: cadetblue;

        ">

    </div>

    <hr color="red" size="5" />

    <!-- 内嵌式 -->

     <p >这是内嵌式的p标签</p>

     <hr color="green" size="5" />

     <!-- 外链式 -->

     <h1>这是外联式的标签h1</h1>



 

</body>

</html>

h1{

    color: aqua;

}

效果图

3.css基础选择器

1)标签选择器

        通过标签名字进行标记，并且进行修饰

案例：使用标签选择器编写一个圆

1.代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>标签选择器</title>

    <style>

        div{

            background-color: aqua;

            border: 50%;

            width: 200px;

            height: 200px;

           

        }

    </style>

</head>

<body>

    <div >

    </div>

   

</body>

</html>

注： border-radius: 50%; 这个是边框的弯曲程度

        background-color这个属性是标签的背景颜色        

2.效果

2)类选择器 

        通过标签的class属性进行标注

案例：使用类选择器为div添加背景色

1.代码 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>类选择器</title>

    <style>

        .myBox{

            width: 200px;

            height: 200px;

            background-color: cadetblue;

        }

    </style>

</head>

<body>

    <!-- 这是一个正方形 -->

    <div class="myBox">

    </div>

   

</body>

</html>

2.效果

3)id选择器

      通过标签的id属性进行选择标注  

注：id选择器使用#进行标识，后面是名字

案例使用id选择器做一个三角形

1.代码

注: border-left 是左边的边框

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>id选择器</title><style>#myDiv {width: 0px;height: 0px;border-left: 100px solid transparent;border-right: 100px solid transparent;border-top: 200px solid rgb(25, 128, 231);}#myDiv2 {width: 0px;height: 0px;border-left: 100px solid transparent;border-right: 100px solid transparent;border-bottom: 200px solid rgb(25, 128, 231);}#myDiv3{width: 0px;height: 0px;border-top: 100px solid transparent;border-bottom: 100px solid transparent; border-left: 200px solid rgb(248, 129, 32);}#myDiv4{width: 0px;height: 0px;border-top: 100px solid transparent;border-bottom: 100px solid transparent; border-right: 200px solid rgb(248, 129, 32);}</style>
</head>
<body><!-- 倒三角 --><div id="myDiv"></div><!-- 正三角 --><div id="myDiv2"></div><!-- 左三角 --><div id="myDiv3"></div><!-- 右三角 --><div id="myDiv4"></div>
</body>
</html>

2.效果

相关文章：

CSS样式基础样式选择器(案例+代码实现+效果图)

目录 1.css样式的规则 2.引入css样式的方式 1)行内式 2)内嵌式 3)外链式 1-link导入 2-import导入 4)总 3.css基础选择器 1)标签选择器 案例&#xff1a;使用标签选择器编写一个圆 1.代码 2.效果 2)类选择器 案例&#xff1a;使用类选择器为div添加背景色 1.代码 2.效果 3)id…...

编程日记 2024/10/9 2:09:20

Linux系统编程—I/O缓冲区(C语言实现)

I/O缓冲区 进程的I/O缓冲区机制是计算机操作系统中一个重要的概念&#xff0c;它涉及到数据在内存和外设之间的传输。以下是关于进程的I/O缓冲区机制的详细解释&#xff1a; 1.定义与作用 定义&#xff1a;I/O缓冲区是指在内存里开辟的一块区域&#xff0c;用来存放接收用户输…...

编程日记 2024/10/9 2:05:15

MySQL多表查询：行子查询

先看我的表数据 dept表 emp表 行子查询 子查询返回的结果是一行&#xff08;可以是多列&#xff09;, 这种子查询称为行子查询 常用的操作符: , <>, IN, NOT IN 例子1. 查询与“张无忌” 的薪资及直属领导相同的员工信息 拆解成两个问题 a. 查询"张无忌"…...

编程日记 2024/10/9 2:03:10

.NET CORE程序发布IIS后报错误 500.19

发布IIS后浏览时报错误500.19&#xff0c;同时配置文件web.config的路径中也存在问号“?”。 可能原因&#xff1a;没有安装运行时...

编程日记 2024/10/9 2:02:10

Qt 6 相比 Qt 5 的主要提升与更新

自从 Qt 6 发布以来&#xff0c;作为 Qt 框架的一个重大版本更新&#xff0c;它在多个核心方面进行了深度优化和改进。与 Qt 5 相比&#xff0c;Qt 6 不仅提升了性能&#xff0c;还改进了对现代硬件和图形 API 的支持&#xff0c;并增强了开发者的工作流程。本文将详细介绍 Qt …...

编程日记 2024/10/9 2:01:09

【数据结构】介绍

介绍数据结构 数据结构是计算机科学中重要的概念&#xff0c;是指组织和管理数据的方式。它涉及到数据的存储、操作和访问等操作。数据结构可以分为线性结构、树形结构和图形结构等。 线性结构是最简单的数据结构之一(本玄也是这样觉得(*&#xffe3;▽&#xffe3;*))&#…...

编程日记 2024/10/9 2:00:08

论医疗类系统全国运营推广策略

一、线上推广 搜索引擎优化&#xff08;SEO&#xff09;- 重点策略 持续更新网站内容&#xff0c;包括系统功能介绍、成功案例、行业新闻等&#xff0c;提高网站的权重和流量。进行搜索引擎优化&#xff08;SEO&#xff09;&#xff0c;确定与医疗机构辅助系统相关的关键词&a…...

编程日记 2024/10/9 1:58:04

Redis入门第一步：认识Redis与快速安装配置

认识Redis与快速安装配置&#x1f343; Redis是什么&#x1f432; 1.Redis的背景&#x1f38d; Redis&#xff08;Remote Dictionary Server&#xff09;译为"远程字典服务"&#xff0c;它是一款基于内存实现的键值型 NoSQL 数据库&#xff0c; 通常也被称为数据结…...

编程日记 2024/10/9 1:55:01

ES postman操作全量修改，局部修改，删除

全量修改 修改需要调用的url 地址是http://192.168.1.108:9200/shopping/_doc/1001&#xff0c;调用方法使用put 只修改指定的需求的内容的请求方式 post方式就是局部修改 http://192.168.1.108:9200/shopping/_update/1001&#xff0c;请求方式post 上图是只修改id 为1001数…...

编程日记 2024/10/9 1:51:58

社区交流礼仪 | 提问的艺术

唠唠闲话 2021 年通过 Julia 社区了解到开源&#xff0c;自此开始融入开源社区&#xff0c;学习和体验这种独特的协作模式与交流文化&#xff0c;受益良多。本篇文章为开源新手必读&#xff0c;文章中探讨的交流模式&#xff0c;不仅对参与开源项目的协作有所帮助&#xff0c;…...

编程日记 2024/10/9 1:49:57

极客兔兔Gee-Cache Day5

HTTPPool 既可以是服务端&#xff0c;也可以是客户端&#xff0c;这取决于特定的使用场景和上下文&#xff1a; 作为客户端&#xff1a;当本地缓存没有找到需要的数据时&#xff0c;HTTPPool 需要作为客户端&#xff0c;通过 httpGetter &#xff08;实现了 PeerGetter 接口&am…...

编程日记 2024/10/9 1:47:54

【IPv6】IPv6地址格式及地址分类（组播、单播、任播）整理

IPv6地址格式 IPv6 地址从 IPv4 地址的 32 bits 扩展到 128 bits&#xff0c;IPv6 地址的表示、书写方式也从 IPv4 的点分十进制&#xff0c;修改16进制的冒号分割 IPv4 点分格式(.) 192.168.11.11 IPv6 冒号分割(:) 2408:8459:3032:0000:0000:0000:0001:a9fd IPv6 的规范…...

编程日记 2024/10/9 1:44:52

Linux数据备份

1、Linux服务器中哪些数据需要备份 1&#xff09;Linux系统重要数据&#xff1a; ①/root/目录&#xff0c;管理员家目录 ②/home/目录&#xff0c;普通用户家目录 ③/etc/目录 &#xff0c;系统重要的配置文件保存目录 2&#xff09;安装服务的数据&#xff1a;例apache①…...

编程日记 2024/10/9 1:43:50

回到原点再出发

原文What Goes Around Comes Around作者Michael Stonebraker & Joseph M. Hellerstein其他译文https://zhuanlan.zhihu.com/p/111322429 1. 摘要 本文总结了近35年来的数据模型方案&#xff0c;分成9个不同的时代&#xff0c;讨论了每个时代的方案。我们指出&#xff0c;…...

编程日记 2024/10/9 1:42:49

SimpleFoc以及SVPWM学习补充记录

SimpleFoc SimpleFOC移植STM32&#xff08;一&#xff09;—— 简介 FOC控制的过程是这样的&#xff1a; 对电机三相电流进行采样得到 Ia,Ib,Ic。将 Ia,Ib,Ic 经过Clark变换得到 I_alpha I_beta。将 I_alpha I_beta 经过Park变换得到 Id,Iq。计算 Id,Iq 和其设定值 Id_ref 和…...

编程日记 2024/10/9 1:41:48

免费 Oracle 各版本 离线帮助使用和介绍

文章目录 Oracle 各版本 离线帮助使用和介绍概要在线帮助下载离线文档包&#xff1a;解压离线文档&#xff1a;访问离线文档&#xff1a;导航使用&#xff1a;目录介绍Install and Upgrade&#xff08;安装和升级&#xff09;&#xff1a;Administration&#xff08;管理&#…...

编程日记 2024/10/9 1:40:46

刷题 二叉树

二叉树的核心思想 - 递归 - 将问题分解为子问题 题型 递归遍历迭代遍历层序遍历 bfs&#xff1a;队列各种递归题目&#xff1a;将问题分解为子问题二叉搜索树 - 中序遍历是递增序列 TreeNode* &prev 指针树形dp 面试经典 150 题 - 二叉树 104. 二叉树的最大深度 广度优…...

编程日记 2024/10/9 1:38:44

操作系统 | 学习笔记 | 王道 | 4.1 文件系统基础

4.文件管理 4.1 文件系统基础 4.1.1 文件的基本概念 定义 文件是以计算机硬盘为载体的存储在计算机上的信息集合&#xff0c;在用户进行的输入、输出中&#xff0c;以文件位基本单位。 文件管理系统是实现的文件的访问、修改和保存&#xff0c;对文件维护管理的系统。 文件的…...

编程日记 2024/10/9 1:37:43

var let const 之间的区别

在JavaScript中&#xff0c;var、let 和 const 是用于声明变量的三种关键字。它们之间有几个重要的区别&#xff1a; 1. 作用域 var: 声明的变量具有函数作用域&#xff0c;即在整个函数内都可以访问。如果在代码块内&#xff08;如if或for&#xff09;使用var&#xff0c;该…...

编程日记 2024/10/9 1:34:40

【springboot】简易模块化开发项目整合Swagger2

接上一项目【springboot】简易模块化开发项目整合MyBatis-plus&#xff0c;进行拓展项目 1.新建模块 右键项目→New→Module&#xff0c;新建一个模块 父项目选择fast-demo&#xff0c;命名为fast-demo-config&#xff0c;用于存放所有配置项 添加后&#xff0c;项目结构如图…...

编程日记 2024/10/9 1:33:39

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

编程新知 2025/12/13 1:32:15

Hive 存储格式深度解析：从 TextFile 到 ORC，如何选对数据存储方案？

在大数据处理领域&#xff0c;Hive 作为 Hadoop 生态中重要的数据仓库工具&#xff0c;其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式&#xff0c;很多开发者常常陷入选择困境。本文将从底…...

编程新知 2025/12/6 10:54:35

JAVA后端开发——多租户

数据隔离是多租户系统中的核心概念&#xff0c;确保一个租户&#xff08;在这个系统中可能是一个公司或一个独立的客户&#xff09;的数据对其他租户是不可见的。在 RuoYi 框架&#xff08;您当前项目所使用的基础框架&#xff09;中&#xff0c;这通常是通过在数据表中增加一个…...

编程新知 2025/12/18 8:35:12

嵌入式学习笔记DAY33（网络编程——TCP）

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...

编程新知 2025/12/22 2:26:36

推荐 github 项目:GeminiImageApp(图片生成方向，可以做一定的素材)

推荐 github 项目:GeminiImageApp(图片生成方向&#xff0c;可以做一定的素材) 这个项目能干嘛? 使用 gemini 2.0 的 api 和 google 其他的 api 来做衍生处理 简化和优化了文生图和图生图的行为(我的最主要) 并且有一些目标检测和切割(我用不到) 视频和 imagefx 因为没 a…...

编程新知 2025/12/23 19:00:17

A2A JS SDK 完整教程：快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

编程新知 2025/12/12 8:42:24

在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能

1. 开发环境准备 ​​安装DevEco Studio 3.1​​&#xff1a; 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK ​​项目配置​​&#xff1a; // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...

编程新知 2025/12/13 6:14:10

解决：Android studio 编译后报错\app\src\main\cpp\CMakeLists.txt‘ to exist

现象&#xff1a; android studio报错&#xff1a; [CXX1409] D:\GitLab\xxxxx\app.cxx\Debug\3f3w4y1i\arm64-v8a\android_gradle_build.json : expected buildFiles file ‘D:\GitLab\xxxxx\app\src\main\cpp\CMakeLists.txt’ to exist 解决&#xff1a; 不要动CMakeLists.…...

编程新知 2025/12/15 0:46:42

BLEU评分：机器翻译质量评估的黄金标准

BLEU评分&#xff1a;机器翻译质量评估的黄金标准 1. 引言 在自然语言处理(NLP)领域&#xff0c;衡量一个机器翻译模型的性能至关重要。BLEU (Bilingual Evaluation Understudy) 作为一种自动化评估指标&#xff0c;自2002年由IBM的Kishore Papineni等人提出以来&#xff0c;…...

编程新知 2025/12/1 16:55:47

Spring Security 认证流程——补充

一、认证流程概述 Spring Security 的认证流程基于 过滤器链&#xff08;Filter Chain&#xff09;&#xff0c;核心组件包括 UsernamePasswordAuthenticationFilter、AuthenticationManager、UserDetailsService 等。整个流程可分为以下步骤&#xff1a; 用户提交登录请求拦…...

编程新知 2025/12/23 21:18:55