文章目录
1. CSS的三大特性1.1 层叠性（Cascading）1.2 继承性（Inheritance）1.2.1 常见的可继承的CSS属性1.2.2 如何查看某个CSS属性是否可继承
1.3 优先级（Specificity）
2. 颜色表示法2.1 颜色名2.2 rgb和rgba2.2.1 rgb2.2.2 rgba
2.3 HEX和HEXA2.3.1 HEX2.3.2 HEXA
2.4 HSL和HSLA2.4.1 色相环2.4.2 HSL2.4.3 HSLA2.4.4 示例代码
3. 常用的字体属性3.1 字体大小3.2 字体族3.2.1 衬线字体和非衬线字体3.2.2 sans-serif3.2.3 注意事项3.2.4 示例代码
3.3 字体风格3.4 字体粗细3.5 字体复合属性
4. 常用的文本属性4.1 文本颜色4.2 文本间距4.3 文本修饰4.3.1 常见的文本修饰属性4.3.2 如何去掉超链接的下划线
4.4 文本缩进4.5 文本水平对齐4.6 细说font-size属性4.7 行高4.7.1 行高的定义4.7.2 行高的设置方法4.7.3 示例代码4.7.4 行高的应用场景
4.8 vertical-align
视频教程：
87_CSS_三大特性
1. CSS的三大特性
1.1 层叠性（Cascading）
当样式的优先级和重要性都相同时，位于 CSS 文件后面或在 HTML 文件中后面定义的样式将覆盖前面定义的样式
CSS 的层叠性是指当多个样式规则应用于同一个 HTML 元素时，浏览器如何决定哪些样式应该应用到该元素上
1.2 继承性（Inheritance）
继承性指的是子元素会从父元素继承某些 CSS 属性
1.2.1 常见的可继承的CSS属性
在 CSS 中，有些属性会被子元素继承，而有些则不会。以下是一些常见的可继承的 CSS 属性：
字体属性：
font-familyfont-sizefont-stylefont-variantfont-weightfontline-heightletter-spacingtext-aligntext-indenttext-transformwhite-spaceword-spacing 文本属性：
colordirectiontext-shadowvisibilitycursor 列表属性：
list-stylelist-style-typelist-style-positionlist-style-image 表格布局属性：
border-collapseborder-spacingcaption-sideempty-cells
1.2.2 如何查看某个CSS属性是否可继承
在 VsCode、WebStorm、IDEA 等软件中，将鼠标悬浮在 CSS 属性上，向下滚动找到 developer. mozilla. org 关键字，点击后就会跳转到 MDN 网站
在 MDN 网站中可以看到具体的 CSS 元素是否可继承
1.3 优先级（Specificity）
!important > 内联样式 > ID选择器 > 类选择器、属性选择器、伪类选择器 > 元素选择器 > 通配选择器 > 继承属性
优先级决定了当多个规则应用于同一个元素时，哪一个规则会被浏览器应用
计算权重时需要注意，并集选择器的每一个部分是分开算的
#header, .nav li {
color: blue;
}
上述代码等价于
#header {
color: blue;
}
.nav li {
color: blue;
}
2. 颜色表示法
2.1 颜色名
CSS 定义了一系列标准的颜色名，可以直接在 CSS 代码中使用。这些颜色名是预定义的，不需要额外的解释或转换
颜色名参考网站：https://developer.mozilla.org/en-US/docs/Web/CSS/named-color
2.2 rgb和rgba
2.2.1 rgb
RGB代表“红-绿-蓝”（Red-Green-Blue），它是一种加色模型，通过混合不同强度的红色、绿色和蓝色光来创建各种颜色。在RGB模型中，每个颜色通道的值范围从0到255，其中0表示该颜色通道没有光（即最暗），255表示该颜色通道的光是最亮的
R（红色）：红色通道的强度，取值范围是0-255G（绿色）：绿色通道的强度，取值范围是0-255B（蓝色）：蓝色通道的强度，取值范围是0-255
RGB示例：#FF6347（十六进制）或 rgb(255, 99, 71)（函数表示法）表示珊瑚色。
2.2.2 rgba
在RGBA颜色模型中，"A"代表Alpha。Alpha是一个术语，用于描述颜色的透明度级别
RGBA是在RGB的基础上增加了一个Alpha通道，代表“红-绿-蓝-Alpha”。Alpha通道用于控制颜色的透明度
R（红色）：同RGBG（绿色）：同RGBB（蓝色）：同RGBA（Alpha）：透明度通道，取值范围是0.0到1.0，其中0.0表示完全透明，1.0表示完全不透明
RGB示例：#FF6347（十六进制）或 rgb(255, 99, 71)（函数表示法）表示珊瑚色。
2.3 HEX和HEXA
2.3.1 HEX
HEX颜色表示法是使用六位十六进制数字来定义颜色的一种方式。它不包含透明度信息，只表示颜色的红、绿、蓝三个颜色通道。标准的HEX颜色代码格式如下：
#RRGGBB
RR：两位十六进制数，表示红色（Red）通道的强度，范围是 00 到 FFGG：两位十六进制数，表示绿色（Green）通道的强度，范围是 00 到 FFBB：两位十六进制数，表示蓝色（Blue）通道的强度，范围是 00 到 FF
例如，#FF0000 表示纯红色，#00FF00 表示纯绿色，#0000FF 表示纯蓝色
2.3.2 HEXA
IE 浏览器只支持 HEX，不支持 HEXA
HEXA颜色表示法是在HEX的基础上增加了两位十六进制数字来表示透明度（Alpha）通道。HEXA颜色代码的格式如下：
#RRGGBBAA
RR、GG、BB：与HEX表示法中的含义相同AA：两位十六进制数，表示透明度（Alpha）通道的强度，范围是 00（完全透明）到 FF（完全不透明）
例如，#FF000080 表示半透明的红色，其中透明度为50%（因为十六进制的80等于十进制的128，而128/255大约等于0.5）
2.4 HSL和HSLA
HSL 和 HSLA 是两种颜色表示法，它们基于人对颜色的感知，而不是像 RGB 或 HEX 那样基于光的物理属性
2.4.1 色相环
2.4.2 HSL
HSL 代表色调（Hue）、饱和度（Saturation）和亮度（Lightness）。HSL 颜色模型是圆柱坐标中的一个圆锥形色彩空间，它将颜色描述为三个维度：
H（色调，Hue）：色调是色彩的基本属性，它决定了颜色的种类，比如红色、黄色或蓝色。在 HSL 中，色调用角度来表示，范围是 0° 到 360°。其中，0° 或 360° 表示红色，120° 表示绿色，240° 表示蓝色S（饱和度，Saturation）：**饱和度是指颜色的纯度，它描述了颜色中灰色成分的多少。**饱和度的范围是 0% 到 100%，其中 0% 表示灰色（没有颜色），100% 表示完全饱和的颜色L（亮度，Lightness）：亮度描述了颜色的明亮程度。亮度的范围也是 0% 到 100%，其中 0% 表示黑色，50% 表示正常亮度，100% 表示白色
HSL 颜色表示法的格式如下：
hsl(H, S%, L%)
例如，hsl(120deg, 100%, 50%) 表示纯绿色
2.4.3 HSLA
HSLA 是 HSL 的扩展，增加了 Alpha 通道，用于表示颜色的透明度。HSLA 颜色模型在 HSL 的基础上增加了一个参数：
A（Alpha）：Alpha 通道定义了颜色的透明度。它的值是一个介于 0.0（完全透明）和 1.0（完全不透明）之间的十进制数。
HSLA 颜色表示法的格式如下：
hsla(H, S%, L%, A)
例如，hsla(120deg, 100%, 50%, 0.3) 表示半透明的纯绿色，其中透明度为 30%
HSL 和 HSLA 颜色模型的优势在于它们更符合人类对颜色的感知。调整色调、饱和度和亮度可以让设计师更容易地创建和调整颜色方案。而 Alpha 通道的加入使得 HSLA 能够处理透明度，这在网页设计和图形设计中非常有用
2.4.4 示例代码
HSL和HSLA
3. 常用的字体属性
3.1 字体大小
Chrome 浏览器默认支持的最小文字为 12px，默认的文字大小为 16px ，当文字大小为 0px 时文字将会消失不同浏览器默认支持的字体大小可能不一致，所以最好给一个明确的值，不要用默认大小通常以给 body 设置 font-size 属性，这样 body 中的其他元素就都可以继承了
3.2 字体族
3.2.1 衬线字体和非衬线字体
衬线字体是指在字母笔画末端有小的装饰性线条的字体。这些装饰线条称为“衬线”。衬线字体通常被认为更易于阅读长篇文章，因为衬线可以帮助引导视线从一个字母移动到下一个字母非衬线字体是指没有这些装饰性衬线的字体。它们的特点是简洁、现代，通常用于标题和小段文本，因为它们在屏幕上更容易阅读
3.2.2 sans-serif
在CSS中，如果你指定sans-serif作为font-family的值，浏览器会使用它所预装的一个默认的sans-serif字体。例如：
body {
font-family: sans-serif;
}
这行代码告诉浏览器，对于body元素中的文本，使用默认的sans-serif字体。如果用户系统中安装了特定的sans-serif字体，浏览器可能会选择那个字体；如果没有，它会回退到系统默认的sans-serif字体
3.2.3 注意事项
使用字体的英文名字兼容性会更好，具体的英文名可以自行查询，或在电脑的设置里去寻找（如果字体名包含空格，必须使用引号包裹起来）可以设置多个字体，按照从左到右的顺序逐个查找，找到就用，没有找到就使用后面的，且通常在最后写上 serif（衬线字体）或 sans-serif（非衬线字体）windows 系统中默认的字体是微软雅黑
3.2.4 示例代码
字体族
这是一段使用衬线字体的文本。衬线字体在字母笔画末端有装饰性线条，通常被认为更易于阅读长篇文章。
这是一段使用非衬线字体的文本。非衬线字体没有装饰性衬线，看起来更简洁现代，适合标题和小段文本。
3.3 字体风格
在CSS中，字体风格（font-style）是一个常用的属性，用于指定文本的字体样式。以下是font-style属性的一些常见值：
normal：这是默认值，表示文本使用正常字体样式，没有倾斜
p {
font-style: normal;
}
italic：这个值会使文本倾斜，表示斜体。如果当前字体没有设计斜体版本，浏览器可能会使用倾斜（oblique）样式作为替代
em {
font-style: italic;
}
oblique：这个值也会使文本倾斜，但它与italic有所不同。oblique是通过倾斜正常字体来模拟斜体效果，而不是使用专门设计的斜体字体。如果当前字体没有斜体版本，使用oblique和italic通常看起来效果相似
.oblique-text {
font-style: oblique;
}
在实际使用中，italic通常用于强调或引用文本，而oblique则较少使用，更多作为italic的替代方案。大多数时候，开发者会使用normal和italic这两个值来控制文本的字体风格
3.4 字体粗细
在CSS中，字体粗细（font-weight）属性用于指定字体的相对粗细程度。以下是一些常用的font-weight属性值：
normal：这是默认值，通常等同于400的粗细值
p {
font-weight: normal;
}
bold：这个值会使字体加粗，通常等同于700的粗细值
strong {
font-weight: bold;
}
bolder：这个值会使字体比其父元素的字体更粗。如果父元素的字体粗细是400，那么bolder通常会变成700
.bolder-text {
font-weight: bolder;
}
lighter：这个值会使字体比其父元素的字体更细。如果父元素的字体粗细是400，那么lighter通常会变成300
.lighter-text {
font-weight: lighter;
}
100 - 900：这些是数值，用于指定字体的具体粗细。其中，400是正常粗细，700是加粗
.weight-100 {
font-weight: 100;
}
.weight-200 {
font-weight: 200;
}
/* ... */
.weight-900 {
font-weight: 900;
}
在实际使用中，normal和bold是最常用的两个值，用于控制文本的正常和加粗显示。数值100到900提供了更细致的控制，但并非所有字体都支持这些粗细级别。当使用数值时，最好确保所选字体支持这些特定的粗细
3.5 字体复合属性
在CSS中，字体复合属性（font）允许你在一个声明中设置所有字体属性。这个属性是一个简写属性，可以包含以下子属性的值：
font-stylefont-weightfont-sizeline-heightfont-family
以下是一个使用字体复合属性的例子：
这是一个使用字体复合属性的文本示例。
在这个例子中，.复合字体样式 类的 font 属性设置了以下值：
italic：字体样式为斜体bold：字体粗细为粗体16px：字体大小为16像素1.5：行高为字体大小的1.5倍'微软雅黑', sans-serif：字体族，首选字体为“微软雅黑”，如果不可用，则使用任何sans-serif字体
需要注意的是，在使用字体复合属性时，font-size 和 font-family 是必须的，其他属性如果没有指定，则会使用默认值。而且，除了 font-size 和 line-height 之外，其他属性的顺序可以随意调整。如果省略了 line-height，但提供了 font-size，则 line-height 会使用默认值
4. 常用的文本属性
4.1 文本颜色
在CSS中，字体颜色是通过 color 属性来设置的。这个属性可以接受多种颜色值，包括颜色名、十六进制代码、RGB、RGBA、HSL 和 HSLA 值
4.2 文本间距
在CSS中，文本间距可以通过以下属性来设置：
letter-spacing：用于设置字符之间的间距word-spacing：用于设置单词之间的间距line-height：用于设置行与行之间的间距
以下是一个HTML示例，展示了如何使用这些属性来设置文本间距：
这是默认间距的文本。
这是增加了字符间距的文本。
这是增加了单词间距的文本。
这是增加了行间距的文本。
在这个例子中：
.normal-spacing 类应用了默认的字符间距、单词间距和行间距.increased-letter-spacing 类将字符间距设置为2像素.increased-word-spacing 类将单词间距设置为4像素.increased-line-height 类将行间距设置为当前字体大小的1.8倍
这些属性可以单独使用，也可以组合使用，以实现不同的文本排版效果
4.3 文本修饰
4.3.1 常见的文本修饰属性
在CSS中，文本修饰可以通过以下属性来设置：
text-decoration：用于设置文本的下划线、上划线、删除线等装饰效果text-decoration-color：用于设置文本装饰线的颜色text-decoration-style：用于设置文本装饰线的样式（如实线、虚线、波浪线等）
以下是一个HTML示例，展示了如何使用这些属性来设置文本修饰：
这是带下划线的文本。
这是带上划线的文本。
这是带删除线的文本。
这是带有复合装饰的文本。
在这个例子中：
.underline 类为文本添加了下划线。.overline 类为文本添加了上划线。.line-through 类为文本添加了删除线。.complex-decoration 类为文本同时添加了下划线和上划线，并设置了装饰线的颜色为红色，样式为波浪线
这些属性可以灵活组合使用，以实现不同的文本修饰效果
4.3.2 如何去掉超链接的下划线
text-decoration: none;
点击以下链接将跳转到百度，但链接没有下划线：
4.4 文本缩进
在CSS中，文本缩进可以通过text-indent属性来设置。以下是一个HTML示例，展示了如何使用text-indent属性来缩进段落文本：
文本缩进
这是一个缩进的段落。首行缩进了2em的距离，通常用于文章或章节的开始，以增加可读性。
这是一个没有缩进的普通段落，用于对比。
在这个例子中，.indented 类通过text-indent: 2em;属性设置了文本缩进。2em意味着首行缩进是当前字体大小的两倍。通常，em是相对于当前字体大小的单位，因此这是一个相对单位，可以保持缩进与字体大小的一致性
当应用于段落或其他块级元素时，text-indent属性将首行文本向内缩进指定的距离。这个属性常用于文章或文档的开始，以区分章节或段落的开头
4.5 文本水平对齐
在CSS中，文本的水平对齐主要使用text-align属性来控制。以下是一些常用的text-align属性值，用于设置文本的水平对齐方式：
left: 左对齐，使文本靠左排列
right: 右对齐，使文本靠右排列
center: 居中对齐，使文本在水平方向上居中
justify: 两端对齐，使文本在左右边界之间均匀分布，除非最后一行
以下是一个HTML示例，演示了如何使用这些属性值来设置文本的水平对齐：
文本水平对齐
左对齐：这是一个左对齐的文本段落。
右对齐：这是一个右对齐的文本段落。
居中对齐：这是一个居中对齐的文本段落。
两端对齐：这是一个两端对齐的文本段落。请注意，两端对齐通常适用于多行文本，使文本的左边缘和右边缘都对齐。
在这个示例中，我们定义了四个类，每个类分别应用不同的text-align属性值。然后，我们将这些类应用到不同的段落上，以展示不同的文本对齐效果
4.6 细说font-size属性
由于字体设计的原因，文字最终呈现的大小，并不一定与 font-size 的值一致，可能偏大，也可能偏小。例如:font-size 设为 40px 时，最终呈现的文字可能比40px 大，也可能比 40px 小通常情况下，文字相对字体设计框，并不是垂直居中的，通常都靠下一些
视频教程：103_CSS_细说font-size
4.7 行高
视频教程：104_CSS_常用文本属性_行高_概念
4.7.1 行高的定义
行高指的是两行文本基线之间的垂直距离。它不仅包括文字本身的高度，还包括文字上下的空白区域
4.7.2 行高的设置方法
像素值：直接使用像素值来设置行高，例如 line-height: 20px;无单位数值：使用一个无单位的数值，这个数值会与元素的font-size相乘来得到行高，例如 line-height: 1.5;，如果font-size是16px，则行高将是24px（16px * 1.5）百分比：使用百分比值，这个百分比值是基于元素的font-size来计算的，例如 line-height: 150%;数值：使用数值，这个数值会被解释为元素的font-size的倍数，例如 line-height: 1.5;
4.7.3 示例代码
/* 设置行高为20像素 */
p {
line-height: 20px;
}
/* 设置行高为字体大小的1.5倍 */
h1 {
line-height: 1.5;
}
/* 设置行高为150% */
.small-text {
font-size: 12px;
line-height: 150%;
}
4.7.4 行高的应用场景
行高（line-height）在CSS中的应用场景非常广泛，以下是一些常见的使用场景：
增强文本可读性
段落文本：在文章或博客的段落中，适当的行高可以确保文本不会显得过于拥挤，从而提高可读性
长篇文章：对于包含大量文本的页面，设置合适的行高可以帮助读者更容易地跟踪阅读
垂直居中
单行标题：在单行标题或按钮文本中，将line-height设置为与容器高度相同的值可以实现文本的垂直居中
导航菜单：导航菜单中的文字通常需要垂直居中，通过调整行高可以轻松实现这一点
4.8 vertical-align
视频教程：107_CSS_常用文本属性_vertical-align
vertical-align 对块级元素（div、h1 - h6、p、ul、ol、li）不起作用
vertical-align 是CSS中的一个属性，用于指定行内元素（inline elements）或表格单元格（table cells）的垂直对齐方式。这个属性对于调整文本、图像和其他行内元素在行框内的垂直位置非常有用
以下是一些 vertical-align 属性的常见值：
baseline：默认值，使元素的基线与父元素的基线对齐top：使元素的顶部与行框的顶部对齐middle：使元素的中部与父元素的基线加上父元素字母 X 的一半对齐（参考本文的 细说font-size 部分）bottom：使元素的底部与行框的底部对齐