目录
一、文字控制属性
1.color
2. font-size
3. font-family
4. font-weight
5. font-style
6. text-align
7. text-decoration
8. line-height
9. letter-spacing
10. text-transform
11. text-indent
二、调试工具——浏览器
三、CSS特性
①继承性
（1）可继承的属性
（2）不可继承的属性
（3）控制继承性
②层叠性
（1） 层叠的概念
（2）特点
（3）层叠的规则
Ⅰ.重要性
Ⅱ.特殊性
Ⅲ.源顺序
（4）示例代码
③优先级
（1）优先级的计算规则
（2）优先级的计算方法
（3）示例
一、文字控制属性
1.color
-
作用：设定文字的颜色。
-
用法：
color: value; -
属性值：可以是颜色名称（如
red、blue）、十六进制值（如#FF0000）、RGB 值（如rgb(255, 0, 0)）、RGBA 值（如rgba(255, 0, 0, 0.5)）等。
p {color: blue;
}2. font-size
-
作用：设置文字的大小。
-
用法：
font-size: value; -
属性值：可以是绝对大小（如
px、pt）、相对大小（如em、rem、%）等。
h1 {font-size: 32px;
}3. font-family
-
作用：指定文字的字体。
-
用法：
font-family: value; -
属性值：可以是字体名称（如
Arial、Times New Roman），多个字体用逗号分隔，以提供备用字体。
body {font-family: Arial, sans-serif;
}4. font-weight
-
作用：设置文字的粗细。
-
用法：
font-weight: value; -
属性值：可以是关键字（如
normal（正常）、bold（加粗）、bolder、lighter）或数字（如100-900）（400：正常；700：加粗）。
strong {font-weight: bold;
}5. font-style
-
作用：设置文字的样式，如斜体。
-
用法：
font-style: value; -
属性值：
normal（正常）、italic（斜体）、oblique（倾斜）。
em {font-style: italic;
}6. text-align
-
作用：设置文字的水平对齐方式。
-
用法：
text-align: value; -
属性值：
left（左对齐）、right（右对齐）、center（居中对齐）、justify（两端对齐）。
p {text-align: center;
}7. text-decoration
-
作用：设置文字的装饰线，如下划线、删除线等。
-
用法：
text-decoration: value; -
属性值：可以是
none（无装饰线）、underline（下划线）、overline（上划线）、line-through（删除线）等。
a {text-decoration: none;
}8. line-height
-
作用：设置行高，即每行文字之间的垂直间距。
-
用法：
line-height: value; -
属性值：可以是数值（如
1.5）、长度值（如20px）或百分比（如150%）。
p {line-height: 1.5;
}9. letter-spacing
-
作用：设置文字中字符之间的间距。
-
用法：
letter-spacing: value; -
属性值：可以是长度值（如
2px）、百分比等。
h2 {letter-spacing: 2px;
}10. text-transform
-
作用：控制文字的大小写转换。
-
用法：
text-transform: value; -
属性值：
none（无转换）、uppercase（全部大写）、lowercase（全部小写）、capitalize（每个单词首字母大写）。
h3 {text-transform: uppercase;
}11. text-indent
-
作用：
text-indent属性用于设置块级元素首行文本的缩进距离。 -
用法：语法为：
text-indent: value; -
属性值
长度值：可以使用固定的长度单位，如 px（像素）、em（相对于元素的字体大小）、rem（相对于根元素的字体大小）等。
百分比：相对于包含块的宽度。例如 text-indent: 5%; 表示首行缩进为包含块宽度的 5%。
负值：可以使用负值使首行文本向左突出显示。例如 text-indent: -10px;
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>p {text-indent: 2em;font-size: 16px;}</style>
</head><body><p>这是一个段落，使用了 text-indent 属性来实现首行缩进。通过设置合适的缩进值，可以让段落的排版更加美观和易读。</p><p>第二个段落同样应用了 text-indent 属性，它也会有相同的首行缩进效果。</p>
</body></html>二、调试工具——浏览器
（1）作用：检查，调试代码，帮助程序员发现并解决问题
（2）打开工具：①浏览器窗口任意位置/选择标签，点鼠标右键的检查
②浏览器右上角3个点，更多工具，点击开发者工具
三、CSS特性
①继承性
子级默认继承父级的文字控制属性
（1）可继承的属性
以下是一些常见的可继承的 CSS 属性：
字体相关属性：font-family（字体族）、font-size（字体大小）、font-weight（字体粗细）、font-style（字体样式）等。
body {font-family: Arial, sans-serif;font-size: 16px;
}在上述代码中，body 元素下的所有子元素都会继承 font-family 和 font-size 属性。
文本相关属性：color（文本颜色）、text-align（文本对齐方式）、line-height（行高）等。
p {color: blue;text-align: center;
}这里，p 元素内的所有子元素都会继承 color 和 text-align 属性。
（2）不可继承的属性
也有许多 CSS 属性是不会被继承的，例如：
盒模型相关属性：width（宽度）、height（高度）、margin（外边距）、padding（内边距）、border（边框）等。
div {width: 200px;border: 1px solid black;
}div 元素的子元素不会继承 width 和 border 属性。
（3）控制继承性
可以使用一些特殊的属性值来控制继承行为：
inherit：强制元素继承父元素的属性值。
span {color: inherit;
}在这个例子中，span 元素会继承其父元素的 color 属性值。
initial：将属性值设置为该属性的初始值。
p {color: initial;
}这里，p 元素的 color 属性会被设置为浏览器默认的颜色。
unset：如果属性是可继承的，则使用继承值；如果是不可继承的，则使用初始值。
li {font-size: unset;
}li 元素的 font-size 属性会根据其父元素的 font-size 来继承，若不可继承则使用初始值。
通过理解和运用 CSS 的继承性，你能够更高效地编写样式代码，减少冗余。
②层叠性
（1） 层叠的概念
在实际的网页开发中，一个元素可能会受到多个 CSS 规则的影响，这些规则可能来自不同的样式表（外部样式表、内部样式表），也可能来自不同的选择器。层叠性就是用来处理这些规则冲突的机制，它会根据一定的规则来确定最终应用到元素上的样式。
（2）特点
Ⅰ.相同的属性会覆盖：后面的CSS属性覆盖前面的CSS属性
Ⅱ.不同的属性会叠加：不同的CSS属性都生效
（3）层叠的规则
Ⅰ.重要性
CSS 中有一个特殊的声明 !important，带有 !important 的声明会覆盖其他没有 !important 的声明。例如：
p {color: blue !important; /* 这条规则会覆盖其他没有!important的color声明 */
}
p {color: red;
}在上述代码中，段落文本的颜色会是蓝色，因为 color: blue !important 具有更高的重要性。
Ⅱ.特殊性
当没有 !important 声明时，CSS 会根据选择器的特殊性来决定哪个规则生效。特殊性是一个衡量选择器权重的指标，它由四个部分组成：内联样式、ID 选择器、类选择器（包括属性选择器和伪类选择器）、元素选择器（包括伪元素选择器）。特殊性的计算方式是：内联样式的权重最高，ID 选择器次之，然后是类选择器，最后是元素选择器。例如：
/* 特殊性: 0,0,0,1 */
p {color: red;
}
/* 特殊性: 0,0,1,0 */
.class-name {color: blue;
}
/* 特殊性: 0,1,0,0 */
#id-name {color: green;
}如果一个段落元素同时应用了上述三个规则，且没有内联样式，那么它的文本颜色会是绿色，因为 #id-name 选择器的特殊性最高。
Ⅲ.源顺序
当多个规则的重要性和特殊性都相同时，最后定义的规则会生效。例如：
p {color: red;
}
p {color: blue; /* 最终段落文本颜色为蓝色 */
}（4）示例代码
以下是一个完整的 HTML 和 CSS 示例，展示了层叠性的应用：
<!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>/* 元素选择器，特殊性: 0,0,0,1 */p {color: red;}/* 类选择器，特殊性: 0,0,1,0 */.my-paragraph {color: blue;}/* 带有!important的声明 */p {color: green !important;}</style>
</head><body><p class="my-paragraph">这段文本的颜色由层叠性决定。</p>
</body></html>在这个示例中，由于 color: green !important 具有最高的重要性，所以段落文本的颜色会是绿色。即使 .my-paragraph 类选择器的特殊性高于元素选择器 p，但 !important 声明会覆盖它。
通过理解和运用 CSS 的层叠性，你可以更好地控制网页的样式，避免样式冲突。
③优先级
（1）优先级的计算规则
CSS 优先级是根据选择器的类型和数量来计算的，主要分为以下几个等级（从低到高）：
-
元素选择器、伪元素选择器：例如
p、div、::before、::after等，单个元素选择器的优先级较低。 -
类选择器、属性选择器、伪类选择器：例如
.class-name、[type="text"]、:hover等，它们的优先级高于元素选择器。 -
ID 选择器：例如
#id-name，ID 选择器的优先级高于类选择器和元素选择器。 -
内联样式：直接写在 HTML 元素的
style属性中的样式，例如<p style="color: red;">，内联样式的优先级高于其他选择器。 -
!important：在样式声明后面加上
!important可以使该样式具有最高优先级，会覆盖其他所有规则，但不建议滥用，因为它会使样式表难以维护。
（2）优先级的计算方法
优先级可以用四个数值来表示：(内联样式, ID选择器数量, 类选择器/属性选择器/伪类选择器数量, 元素选择器/伪元素选择器数量)。比较两个选择器的优先级时，从左到右依次比较每个数值，数值大的优先级高。
（3）示例
以下是一些示例代码，帮助你理解优先级的计算规则：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS Priority Example</title><style>/* 元素选择器 */p {color: blue;}/* 类选择器 */.my-class {color: green;}/* ID选择器 */#my-id {color: red;}/* 内联样式会覆盖上述所有样式 */</style>
</head><body><p>这是一个普通的段落，颜色为蓝色。</p><p class="my-class">这是一个带有类名的段落，颜色为绿色。</p><p id="my-id">这是一个带有ID的段落，颜色为红色。</p><p style="color: purple;">这是一个带有内联样式的段落，颜色为紫色。</p>
</body></html>代码解释
-
第一个段落使用了元素选择器
p，颜色为蓝色。 -
第二个段落使用了类选择器
.my-class，颜色为绿色，因为类选择器的优先级高于元素选择器。 -
第三个段落使用了 ID 选择器
#my-id，颜色为红色，因为 ID 选择器的优先级高于类选择器和元素选择器。 -
第四个段落使用了内联样式，颜色为紫色，因为内联样式的优先级高于其他选择器。
（4）!important 的使用
如果在样式声明后面加上 !important，则该样式会具有最高优先级：
p {color: blue !important; /* 即使有其他选择器，这个颜色也会生效 */
}但要注意，过度使用 !important 会破坏样式表的结构和可维护性，建议尽量避免使用。
通过了解 CSS 优先级的规则，你可以更好地控制元素的样式，避免样式冲突和意外的显示效果。
