CSS（Cascading Style Sheets）代表 层叠样式表。其中，样式定义为如何显示HTML元素，它通常储存在样式表，将样式添加到HTML中，能够解决内容与表现分离的问题。由于网页是多层结构，通过CSS可分别为网页的每一层设置样式，而多个样式定义可层叠为一个。

¶Chapter 1. 样式表的引入

¶1.0 CSS属性书写顺序

布局定位属性：display（首个）/position/float/clear/visibility/overflow
自身属性：width/height/margin/padding/border/background
文本属性：color/font/text-decoration/text-align/vertical-align/ white-space / break-word
其他属性（CSS3）：content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient

¶1.1 内联样式（行内样式）（不推荐！）

在标签内部通过style属性来设置元素的样式，而样式只能对一个标签生效，维护不方便，开发不推荐大量使用内联样式。

其 style 即为标签的属性，在双引号中间，写法要符合 CSS 规范。

1	`<p style="color:red; font-size:60px;"> … </p>`

¶1.2 内部样式表

将样式编写到<head>内部的<style>标签里，通过CSS的选择器来选中元素并为其设置样式。另外，在style标签内部的内容不属于HTML，它属于CSS，因此需要遵循CSS的规范。

对于方案二，内部样式表的局限性在于，只能对一个网页起作用，不能跨页面进行复用。

<style>
p{
    color: green;
    font-size:50px;
}
</style>

¶1.3 外部样式表（最佳方案）

可以将CSS样式编写到一个外部的CSS文件(其拓展名为.CSS)，然后在多个HTML文件中通过标签<link>来引入外部的CSS文件，从而使得样式可在不同页面之间进行复用。

此外，将样式编写到外部的CSS文件中，可以使用到浏览器的缓存机制，加快网页的加载速度，提高用户的体验

对于HTML文件：

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

其中 rel 定义当前文档与被链接文档之间的关系，此处指定为 stylesheet，表示被链接的文档是一个样式表文件。

或者这样引入：

<head>
    ...
    <style>
        @import "css/mycss.css";
    </style>
    ...
</head>

对于CSS文件：

/*没错，直接来*/
p {
    color:red;
    font-size:50px;
}

TIPS：CSS的注释为/* ... */（~~C++党狂喜~~）

¶Chapter2. 选择器

CSS规则由两个主要部分组成：选择器，声明块（一条/多条的声明）。其中，选择器可以选中页面中的指定（你需要改变样式的）元素。对于声明块的每条声明，它由一个样式属性和一个值组成，每一条声明总是以分号;结束。

¶2.1 常用选择器

元素选择器：根据标签名来选中指定的元素
语法：标签名{...}
例子：
1
p{ color:red; }; h1{...}; div{...};
id选择器：根据元素的id属性值选中一个元素，一个id值尽量不重复使用
语法：对于CSS，#id属性值{...}；相对应地，HTML中的<body>内，<选中元素 id="…">
例子：
1
2
/*对于CSS*/ #abc{ color: red; }
1
2
 <p id = "abc"> 6666 </p>
类选择器：根据元素的class属性值选中一组元素，不同于id选择器，它可重复地使用，类选择器可以为一个元素指定多个class属性。
语法：.class属性值{ … }
例子：
1
2
/*对于CSS*/ .blue{ color: blue; }
1
2
3
4
5
 <h1 class = "blue"> HELLO </h1> <p class = "blue"> 6666 </p> <p> ... </p> <p class = "blue"> 23333 </p>
通配选择器：选中页面中的所有元素
语法：*{ … } 例子略。

¶2.2 复合选择器

交集选择器：选中同时复合多个条件的元素。如果交集选择器存在元素选择器，必须使用元素选择器开头。

语法：选择器1选择器2选择器3…选择器n { … }

例子：

对于CSS

div.red{ font-size:30px; } 
/* 将class为red且为div的元素的字体大小设置为30px。即 元素选择器.类选择器 */
.a.b.c{ color:blue; }
div#box1{ ... } /*虽然开发时不会这样用*/

对于HTML

1	`<div class = "red2 a b c grey"> 我变蓝了 </div>`

结果，“我变蓝了”真的变为蓝色

选择器分组(并集选择器)：选择多种选择器对应的元素，注意到多个选择器用,分隔。
语法：选择器1,选择器2,选择器n{ ... }
例子：
1
2
3
#a2, .pp, h1, span, div.red{ color: green; }

¶2.3 关系选择器

子元素选择器：选中指定父元素的指定子元素，注意它只要满足该关系即可选择，eg:存在多个div > span，都会被选上
语法：父元素 > 子元素 > 子元素的子元素 > … { ... }
举例：
对于CSS
1
div > span{ color : red; }
对于HTML
1
2
3
4
5
6
7
8
<div> <p> <span> span1 </span>  </p> <div> <div> <span> span2 </span>  </div>
TIPS： $VSCode$ 中输入ul > li * 3 再按tab，就能得到下方的代码
1
2
3
4
5
<ul> <li> </li> <li> </li> <li> </li> </ul>
后代元素选择器：选中指定元素内的指定所有后代元素
语法： 祖先后代
例子：
1
div span { color:skyblue; }

选择下一个兄弟

语法：前一个+下一个

例子：

1	`plate + apple { ... } /于是选中了碟子挨着的apple/`

选择下面所有兄弟

语法：兄 ~ 弟

例子：

1	`bento ~ pickle { ... } /于是选中了bento后面的两个pickle/`

¶2.4 属性选择器

语法	作用	举例
`元素名[属性名] {…}`	选择含有指定属性名的元素，如果不写元素名，相当于通配	`p[hello]{ ...}`
`元素名[属性名 = 属性值] {…}`	选择含有指定属性名和属性值的元素	`p[title = hello]{...}`
`元素名[属性名^=属性值] {…}`	选择属性值以指定值开头的元素	:smile:
`元素名[属性名$=属性值] {…}`	选择属性值以指定值结尾的元素	:smile:
`元素名[属性名*=属性值] {…}`	选择属性值中含有某值的元素	:smile:

¶2.5 伪类选择器

伪类一般用 : 开头，通常用于描述一个元素的特殊状态，如第二个子元素，被点击的元素，鼠标移入的元素，…

语法	作用	举例
`:first-child`	选择第一个子元素	`ul > li : first-child{ ... }`
`:last-child`	选择最后一个子元素	:smile:
`:nth-child(x)`	选择第x个子元素，其中x为特殊值	`ul > li:nth-child(2n) {...}` 或者 `ul > li :nth-child(even)`

再举例：

1	`plate > orange: first - child { ... }`

注意，以上这些伪类是根据当前所有子元素进行排序的，比如

1
2
3

ul > li : first - child{
     ...
}

<ul>
    <span> .. </span> <!--由于<ul>的第一个元素是<span>-->
    <li> ... </li> <!--作为第二个元素的<li>不受CSS的作用-->
    ...
</ul>

下面三个的伪类选择器，与上面的选择器作用基本一致，唯一区别在于，它们是在同类型元素中进行排序的

语法	作用	举例
`:first-of-type`	:smile:	:smile:
`:last-of-type`	:smile:	:smile:
`:nth-of-type`	:smile:	:smile:
`:not`	否定伪类，将符合条件的元素从选择器中去除	`ul > li:not(:nth-child(3)){...} /除了ul的第三个元素以外都是如此样式/`

¶[附]：关于超链接的伪类（状态）

前两个伪类，为超链接独有，而后两个状态可适用于所有元素。

语法	作用	举例
`:link`	表示未访问过的链接(正常的链接)	`a:link{ color : red; }`
`:visited`	表示访问过的链接，但由于隐私原因，该伪类只能修改链接的颜色
`:active`	表示鼠标点击的状态
`:hover`	表示鼠标移入的状态

如图，设置该链接元素的父元素设置:hover，就能实现鼠标移到该栏时显示不同的颜色。

¶2.6 伪元素选择器

伪元素一般使用::作开头，表示页面中某些元素的特殊位置，如：首字母、第二行。

语法	作用	举例
`::frist-letter`	选择第一个字母	:smile:
`::first-line`	选择第一行	:smile:
`::selection`	表示鼠标选中的内容，比如网页选中一段的效果	:smile:
`::before`	元素的开始，必须结合`content`属性使用，从而凭借CSS为原来的HTML添加内容，可以搭配HTML的`<p>`使用	见下
`::after`	元素的结束，与上同理	:smile:

div::before{
    content: 'abc';
    color: rgb(21, 94, 230);
}

显示效果为，前面的"abc"是在CSS添加的，且无法被选中。而后面的"Hello, World"来自于HTML中。

¶Chapter 3. 样式的继承与冲突

¶3.1 样式表的层叠

当应用两条同级别的规则到一个元素时，写在后面的规则就是实际执行的规则，如下：

h1 {
    color: red;
}
/* 实际执行的下面这个选择器 */
h1 {
    color: blue;
}

¶3.2 样式的继承

为一个元素设置的样式同时也会应用到它的后代元素上。继承是发生在祖先后代之间的，利用继承，我们可将一些通用的样式统一设置到共同的祖先元素上。

注意，并不是所有样式都会被继承，如背景相关、布局相关的样式不会被继承。

CSS 为控制继承提供四个特殊的通用属性值：

inherit： “开启继承”，使子元素属性和父元素相同
initial：设置属性值和浏览器默认样式相同，若浏览器默认样式中未设置且该属性是自然继承的，那么会设置为 inherit
unset：将属性重置为自然值，也就是如果属性是自然继承那么就是 inherit，否则和 initial 一样。

¶3.3 多重样式优先级：

样式的冲突：当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值，此时发生样式的冲突，此时用哪个样式是由选择器的权重决定(权重大，优先级更高，优先显示)

CSS 的优先级就是分配给指定的CSS声明的一个权重，它是浏览器是通过判断哪些属性值与元素最相关以决定并应用到该元素上的。

以下为优先级递减的选择器列表：

	权重
继承的样式	没有优先级
通用选择器（`*`）	$0,0,0,0$
元素(类型)选择器	$0,0,0,1$
类选择器	$0,0,1,0$
属性选择器	:smile:
伪类	:smile:
ID 选择器	$0,1,0,0$
内联样式	$1,0,0,0$

优先级法则：

!important 规则被应用在一个样式声明中时,该样式声明会覆盖CSS中任何其他的声明, 无论它处在声明列表中的哪里（开发慎用emmmm）
当权值相等时，后出现的样式表设置要优于先出现的样式表设置；
创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式，即内联样式( $Inline\ style$ ) > 内部样式表（ $Internal\ style\ sheet$ ） > 外部样式表（ $External\ style\ sheet$ ） > 浏览器默认样式
对于复合选择器，其权重是由组成的选择器的权重相加得到的；
对于分组选择器，其权重是内部的选择器各自计算的；
注意，选择器的累加不会超过该选择器的最大的数量级，如类选择器的累加结果再高，也不会超过id选择器

¶Chapter 4. 字体

¶4.1 字体的大小

调整字体大小时，最常用的单位是：

px（像素）：将像素的值赋予给文本。由于是绝对单位，因而在任何情况下页面上文本所计算出来的像素值是一样的。
浏览器的 font-size 标准设置的值为 16 px。
em：1em = 当前元素的父元素上设置的字体大小
rem：单位的效果与 em 类似，但 1rem = HTML 中的根元素（<html>）的字体大小，而不是父元素。

¶4.2 字体的属性

字体的简写属性：大部分元素中的font属性可以设置字体相关的所有属性，其中行高如果省略不写，就会使用默认值，其语法：font: 其他属性字体大小/行高字体族 ，其中后两个属性的位置必须在倒数二个，代码举例如下：
1
2
3
div{
    font:italic/*font-style*/ bold/*字重font-weight*/  50px/2 'Consolas', Times, serif;
}

font-weight：用于设置文本字体的粗细。
color：用于设置字体颜色
font-family：字体族，浏览器会自动使用下面类别的字体
- serif：衬线字体
- sans-serif：非衬线字体
- monospace：等宽字体
字体名内部有空格时需在外部加 '' ，font-family可同时指定多个字体，多个字体间用 , 分隔，字体生效时优先使用第一种字体，若第一种无法使用则使用第二种，以此类推。
1
2
3
4
5
p{ color:red; font-size:40px; font-family:'Courier New', Consolas, monospace; }

@font-face：可将服务器中的字体直接提供给用户去使用，代码示例如下：

@font-face{
    font-family:'myfont';/*指定字体的名字*/
    src:url(); /*服务器字体的路径*/
}
/*在某个元素中*/
p{
    font-family:myfont;
}

¶4.3 行高

字体框：可理解为字体存在的格子，设置font-size实际上设置字体框的高度

行高(line-height)指的是文字占有的实际高度，会在字体框上下平均分配（无论行高设置多大，字体始终在其中间）。

可以通过line-height属性来设置行高，属性值*的单位为px或em，或者整数（代表字体的指定倍数）。

行间距 = 行高(line-height) - 字体大小(font-size)，如下图：

当行高（line-height）等于文本高度（height）时，就能够使文本垂直居中！

¶4.4 文本样式

文本的水平对齐(text-align)：

left/right/center/justify，其中 justify 为将文本展开，改变单词间的差距，使所有文本行的宽度相同。

元素垂直对齐方式(vertical-align)：其可选值有：

baseline ：默认值基线对齐
由于图片默认会与基线对齐，然而图片的基线并不是在边框最底部的，视觉上能看到缝隙，需要设置顶部对齐或底部对齐
top ：顶部对齐(子元素的顶部和父元素的顶部对齐)
bottom ：底部对齐
middle ：居中对齐 (子元素的中线与父元素的x的中线对齐)

其他文本样式：

text-decoration 设置文本修饰，可选值：
属性值描述
none 默认，无装饰线
underline 下划线
line-through 删除线
overline 上划线
white-space 设置网页如何处理空白，可选值：
- normal ：正常
- nowrap ：不换行
- pre：保留空白（不会过滤空白符，保留原格式）

属性值	描述
`none`	默认，无装饰线
`underline`	下划线
`line-through`	删除线
`overline`	上划线

实例：给长文本尾部带上省略号，下面样式缺一不可：

.box2{
    width: 200px;
    white-space: nowrap; /*不换行*/
    overflow: hidden; /*裁剪*/
    text-overflow: ellipsis; /*文本溢出的样式，ellipsis省略号*/
}

¶4.5 图标字体(iconfont)

通过使用字体的形式来使用图标（能如字体一般调整大小或颜色，因为它为矢量图故不易失真）。前往fontawesome网站下载相关文件，将css和webfonts文件移动到项目中且必须在同一级文件夹中，并将all.css引入到网页中：<link rel = "stylesheet" href = "路径" >

通过类名来选择图标字体。
<i class = "fab ..." style = "font-size:...."></i>和<i class = "fas ...">，省略号为你所要选择的图标
通过伪元素来设置图标字体。
1. 找到要设置图标的元素通过before或after选中

在content中设置字体的编码(‘fXXX’)
设置字体的样式（font-family,font-weight）

代码举例如下：在CSS文件中，

li::before{
    content: '\f368'; /*打开文档查到该图标的编号*/
    font-family: 'Font Awesome 5 Brands'; /*找到fab/fas对应的字体*/
    color: blue; 
    ...
}

在HTML文件中，

<ul>
    <li> 
        <i class = "fas"> </i>
        HELLO WORLD!
    </li>
</ul>