关键词：
文章目录
1. CSS 基本介绍
1.1 认识 CSS
CSS（Cascading Style Sheets）：
- CSS，即层叠样式表是一种用来表现 HTML（标准通用标记语言的一个应用）或 XML标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
- CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
- CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 多个样式定义可层叠为一个，即同一个元素可以应用多个样式，这些样式之间会产生叠加
1.2 CSS 基本语法规范
1.2.1 基本语法
选择器
一条/N条声明
- 选择器：绝对针对谁修改
- 声明：决定修改的内容
- 声明的属性是以键值对的形式写的，其中不同键值对之间以分号区号，每个键值对的键和值以冒号区分
内部样式示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test1</title>
<style>
p
/* 设置字体颜色 */
color: green;
/* 设置字体大小 */
font-size: 30px;
</style>
</head>
<body>
<p>我绿了</p>
</body>
</html>
- CSS 代码可以放到一个专门的 style 标签里面（内部样式），style 标签本身放到页面的任意位置，一般是放到 head 标签中
- CSS 中的注释符是
/* */，可以使用快捷键Ctrl + / - 上述示例中，选择器为段落标签 p，声明的内容包含将字体颜色 color 设置为 green，将字体大小 font-size 设置为 30px
1.2.2 样式风格
-
紧凑风格
p color: green; font-size: 30px; -
展开风格（推荐）
p color: green; font-size: 30px;
1.2.3 样式大小写
由于在 CSS 中不区分大小写，因此
- 在开发时，统一使用小写字母
- 属性名也是使用脊柱命名法，即一个属性若是由多个单词构成，中间用 - 隔开
1.2.4 空格规范
- 冒号后面带空格
- 选择器和 符号之间带有空格
1.3 引入方式
1.3.1 内部样式
基本介绍： 将 CSS 代码放到一个专门的 style 标签里面，style 标签本身可以放到页面的任意位置，一般是放到 head 标签中
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test1</title>
<style>
p
/* 设置字体颜色 */
color: green;
/* 设置字体大小 */
font-size: 30px;
</style>
</head>
<body>
<p>我绿了</p>
</body>
</html>
优点： 内部样式能够实现样式和页面结构分离
缺点： 样式和页面结构分离的不够彻底，尤其是 CSS 内容较多时
1.3.2 行内样式
基本介绍： 将 CSS 代码以 style 属性的方式写到标签中
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test1</title>
</head>
<body>
<p style="color: green ;font-size: 30px">我绿了</p>
</body>
</html>
优点： 适合写简单的样式
缺点： 只针对某个标签生效，不能写太复杂的样式
注意： 行内样式的优先级较高，会覆盖其它样式
1.3.3 外部样式
基本介绍： 实际开发中最常用的方式，先创建一个 CSS 文件，再使用 link 标签引入 CSS
示例代码：
-
创建一个 CSS 文件（这里创建一个 style.css），里面写具体样式的内容
p color: green; font-size: 30px; -
在 HTML 文件中，通过 link 标签引入写好的 CSS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>test1</title> <link rel="stylesheet" href="style.css"> </head> <body> <p>我绿了</p> </body> </html>- link 标签中的 rel 属性值固定为 stylesheet
- link 标签中的 href 属性值为 CSS 的路径
优点： 外部样式可以使样式和页面结构彻底分离
缺点：使用外部样式会受到浏览器缓存影响，修改之后不一定立刻生效
补充： 浏览器的缓存知识
浏览器的缓存是计算机中一种常见的提升性能的技术手段。网页依赖的资源（HTML/CSS/JS/图片/字体等）通常是从服务器上获取的，如果频繁访问该网站，那么这些外部资源就没必要反复从服务器获取，就可以使用缓存先存起来（即存到本地磁盘上），再次访问就可以直接从磁盘读取资源，从而提高访问效率。
可以通过
Ctrl + F5强制刷新页面，使得浏览器重新获取 CSS 文件
2. 选择器
2.1 选择器的功能
CSS 选择器用于选中页面中指定的标签元素。就好比打游戏时，你要先选中攻击的敌人，之后才能给予对方你想造成的伤害。
2.2 选择器的种类
这里主要将选择器分成两大类，八小类来进行介绍
- 基础选择器：由单个选择器构成的
- 标签选择器
- 类选择器
- id 选择器
- 通配符选择器
- 复合选择器：将多种基础选择器结合起来使用
- 后代选择器
- 子选择器
- 并集选择器
- 伪类选择器
除了上述介绍的八种选择器，CSS 中还有很多其它的选择器，这里只具体介绍这八种常用的选择器
参考文档：https://www.w3school.com.cn/cssref/css_selectors.asp
2.3 基础选择器
2.3.1 标签选择器
基本介绍： 选择器的对象为某个标签，选中后就能对所有该标签的内容进行修改
特点： 能快速为同一类标签的内容进行修改，但是不能差异化选择
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test1</title>
<style>
p
color: green;
font-size: 30px;
div
color: red;
font-size: 50px;
</style>
</head>
<body>
<p>我绿了</p>
<div>我红了</div>
</body>
</html>
2.3.2 类选择器
基本介绍： 可以对标签设置一个或多个类 class 属性，然后选择器的对象可以为某个类名，选中后就能对所有属于该类的标签内容进行修改
语法细节：
- 标签中设置的 class 属性的值：不能使用纯数字、中文、标签名来命名
- 如果 class 属性的值过长，可以使用 - 分割
- 一个类可以被多个标签使用，一个标签也可以使用多个类（多个类名之间使用空格分割）
- CSS 中使用点号 . 开头表示类选择器，点好 . 后面是具体的类名
特点： 可以差异化表示不同的标签，可以让多个标签使用同一个样式
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test1</title>
<style>
.red
color: red;
.green
color: green;
.font-size
font-size: 30px;
</style>
</head>
<body>
<p class="red">我红了</p>
<p class="green">我绿了</p>
<div class="red font-size">我红了</div>
</body>
</html>
2.3.3 id 选择器
基本介绍： 可以对每个标签设置一个 id 属性，然后选择器的对象可以为 id 名，选中后就能对是某个 id 的标签的内容进行修改
语法细节：
- 每个标签都只能设置一个 id 属性，且 id 属性值是唯一的
- CSS 中使用 # 开头表示 id 选择器，# 后面是具体的 id 值
特点： 通过 id 选择器能选择具体的某个标签进行内容的修改
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test1</title>
<style>
#one
color: red;
#two
color: green;
</style>
</head>
<body>
<p id="one">我红了</p>
<p id="two">我绿了</p>
</body>
</html>
2.3.4 通配符选择器
基本介绍： 选择器的对象是 * 所表示的就是通配符选择器，它能够选取所有的标签。常用来清楚浏览器的默认样式
特点： 通配符选择器能让页面的所有标签都被修改
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test1</title>
<style>
*
color: red;
</style>
</head>
<body>
<p>我红了</p>
<div>我也红了</p>
<p>我们都红了</p>
</body>
</html>
2.3.5 基础选择器小结
| 选择器 | 作用 | 特点 | 优先级 |
|---|---|---|---|
| 标签选择器 | 能够选出所有相同的标签 | 不能差异化选择 | 较低 |
| 类选择器 | 能够选出一个或多个同类标签 | 根据需求选择，最灵活，最常用 | 较高 |
| id 选择器 | 能够选出某个唯一 id 的标签 | 同一个 id 在一个 HTML 中只能出现一次 | 最高 |
| 通配符选择器 | 能够选出所有标签 | 特殊清空使用（如清楚浏览器的默认样式） | 最低 |
由于选择器可以组合使用，因此在基础选择器中有一个优先级（即对元素的针对性，针对性越强，优先级就越高），组合的基础选择器会按照优先级更高的显示修改的内容
不过由于 CSS 还有复合选择器，所以优先级其实是有一个复杂的计算规则的，这个要根据具体情况判断
2.4 复合选择器
2.4.1 后代选择器
基本介绍： 后代选择器的选择对象为某个父元素的某个子元素（包括孙子元素）
语法细节：
元素1 元素2 样式声明
- 元素1是父级，元素2是子级
- 元素1和元素2之间要使用空格分割
- 后代选择器只会影响元素2，不会影响元素1
- 后代选择器不仅仅可以是标签选择器的组合，还可以是类选择器或 id 选择器的组合
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test1</title>
<style>
ul li
color: red;
.green li
color: green;
</style>
</head>
<body>
<ul>
<li>弥豆子</li>
<li>弥豆子</li>
<li>弥豆子</li>
</ul>
<ol class="green">
<li>善逸</li>
<li>善逸</li>
<li>善逸</li>
</ol>
</body>
</html>
2.4.2 子选择器
基本介绍： 和后代选择器类似，选择器的对象为某个父元素的子元素，但是只能是子元素，不能是孙子元素
语法细节：
元素1>元素2 样式声明
- 元素1是父级，元素2是子级
- 元素1和元素2之间用 > 隔开
- 子选择器只选亲儿子，不选孙子元素
示例代码：
<!DOCTYPE html>
<html lang="en">两万字带你认识黑客在kali中使用的工具
目录前言一、信息收集工具二、脆弱性分析工具三、漏洞利用工具四、嗅探与欺骗工具五、密码攻击工具六、权限提升工具七、Web应用工具八、无线攻击工具九、硬件黑客工具十、维持访问工具十一、取证工具十二、逆向工程工... 查看详情
硬核两万字文章带你c++入门(代码片段)
C++入门文章目录C++入门C++关键字命名空间C++输入&输出缺省参数缺省参数概念缺省参数分类全缺省参数半缺省参数函数重载函数重载概念名字修饰extern"C"引用引用概念引用特性常引用引用的使用场... 查看详情
❤️大学三年沉淀，把我的学习经验分享给你，爆肝万字带你走进编程世界！❤️(代码片段)
Hello，大家好，我是Alex。时光匆匆，暑假过的很快，转眼又到了大学的开学季，我也是又混进了我们学院的新生群，发现大家对计算机充满着迷之向往，啊哈哈哈，不过没有人带着入门还是很容易... 查看详情
一篇博文：带你typescript入门，两万字肝爆，建议收藏！(代码片段)
前言ts是什么？ts其实是TypeScript的一个简称，就跟JavaScript简称为js一样，官方给的解释是，ts它是js的超集，其实js的代码本质上都是ts编译的，例如写一个js代码document.write()，上面的提示就是ts，如... 查看详情
web三件套超多动图带你入门html
文章目录1.HTML基本介绍1.1认识HTML1.2HTML的标签概念1.3HTML文件基本结构1.4快速生成代码框架1.5浏览器的开发者工具2.HTML常见标签2.1注释标签2.2标题标签2.3段落标签2.4换行标签2.5格式化标签2.6图片标签2.7超链接标签2.8表格标签2.9列表... 查看详情
web三件套javascript入门知识（超多动图超详解）(代码片段)
文章目录1.认识JavaScript1.1JavaScript基本介绍1.2JavaScript、HTML和CSS之间的关系1.3JavaScript的运行过程1.4JavaScript的组成2.JavaScript前置知识2.1JavaScript的书写形式2.1.1行内式2.1.2内嵌式2.1.3外部式2.2JavaScript的注释2.3JavaScript的输入输出方式2.3.... 查看详情
clickhouse-01.万字带你快速入门使用ck(代码片段)
文章目录学习目标1.Clickhouse简介1.1历史背景1.1.1版本号历史1.2特性1.2.1真正的列式数据库管理系统1.2.2数据压缩1.2.3数据的磁盘存储1.2.4多核心并行处理1.2.5多服务器分布式处理1.2.6支持SQL1.2.7向量引擎1.2.8实时的数据更新1.2.9索引1.2.... 查看详情
小曾带你深入浅出机器学习（小白入门必备，近3万字带你了解机器学习）
文章目录初识机器学习入门分类回归算法浅析逻辑回归初探损失函数什么是损失函数？损失函数、代价函数和目标函数三者的区别损失函数的Pytorch实现与机制常用损失函数类型1、nn.CrossEntropyLoss数学原理功能与使用2、nn.NLLLos... 查看详情
前端三件套——css基础网页开发必备知识(代码片段)
...1f353;前言上文笔者对HTML做了较为全面的总结，前端三件套三下五除二，我们就干掉三分之 查看详情
建议收藏系列爆肝3w字带你理解什么叫运维~(代码片段)
什么是运维目录什么是运维术语名词管理规划优化安全告警监控系统/平台规范linux发行版运维第一工具-shell编程shell历史执行脚本基本语法变量文件名代换（Globbing）：*?[]命令代换：`或$()算术代换：$(())转... 查看详情
spring万字带你深入学习面向切面编程aop(代码片段)
文章目录前言AOP简介AOP入门案例AOP工作流程AOP切入点表达式AOP通知类型AOP通知获取数据总结前言 今天我们来学习AOP,在最初我们学习Spring时说过Spring的两大特征，一个是IOC,一个是AOP,我们现在要学习的就是这个AOP。AOP简介... 查看详情
前端三件套html+css+js基础知识内容笔记(代码片段)
文章目录HTML基础HTML5标签doctype标签html标签head标签meta标签title标签body标签文本和超链接标签标题标签段落标签换行标签水平标签强调标签图片标签与超链接标签图片标签超链接标签音频标签视频标签音频标签视频标签列表、div... 查看详情
前端三件套html+css+js基础知识内容笔记(代码片段)
文章目录HTML基础HTML5标签doctype标签html标签head标签meta标签title标签body标签文本和超链接标签标题标签段落标签换行标签水平标签强调标签图片标签与超链接标签图片标签超链接标签音频标签视频标签音频标签视频标签列表、div... 查看详情
湖仓一体电商项目：3万字带你从头开始搭建12个大数据项目基础组件(代码片段)
文章目录一、搭建Zookeeper1、上传zookeeper并解压,配置环境变量2、在node3节点配置zookeeper3、将配置好的zookeeper发送到node4,node5节点4、各个节点上创建数据目录，并配置zookeeper环境变量5、各个节点创建节点ID6、各个节点启动zookee... 查看详情
handler面试必问八大题：如何深挖原理进大厂？1万+字带你详细剖析！(代码片段)
Handler一直是面试过程中的常客，我们今天来看看围绕Handler究竟能玩出那些花儿来。Handler机制几乎是Android面试时必问的问题，虽然看过很多次handler源码，但是有些面试官问的问题却不一定能够回答出来，趁着机... 查看详情
挑战全网最全的工作流文档万字带你掌握flowable工作流所有业务概念(代码片段)
1.什么是工作流审批根据本人的理解，就是审批流程管理。2.什么是flowable1.官方解释官方解释如下：Flowable项目提供了一套核心的开源业务流程引擎，这些引擎紧凑且高效。它们为开发人员、系统管理员和业务用户提... 查看详情
近万字带你了解“c++“stl中的各种容器(代码片段)
目录1.array容器 vector和array镶嵌使用4.链表容器（list）是一个库封装好的一个双向链表5.priority_queue:优先队列6.map和multimap7.set和multiset1.array容器包含头文件#include<array>才能使用简单来说他就是一个数组知识c++中... 查看详情
一文带你入门flinksql(代码片段)
文章目录一文带你入门flinksql写在前面环境准备正文遇到的一些问题错误一错误二错误三一文带你入门flinksql写在前面本次实战主要是通过FlinkSQLClient消费kafka的实时消息，再用各种SQL操作对数据进行查询统计。环境准备具体... 查看详情