WEBSTORM前端 —— 第2章：CSS —— 第2节：文字控制属性与CSS特性

一、文字控制属性

1.color

[2. font-size](#2. font-size)

[3. font-family](#3. font-family)

[4. font-weight](#4. font-weight)

[5. font-style](#5. font-style)

[6. text-align](#6. text-align)

[7. text-decoration](#7. text-decoration)

[8. line-height](#8. line-height)

[9. letter-spacing](#9. letter-spacing)

[10. text-transform](#10. text-transform)

[11. text-indent](#11. text-indent)

[（1）层叠的概念](#（1）层叠的概念)

一、文字控制属性

1.`color`

作用：设定文字的颜色。
用法：color: value;
属性值 ：可以是颜色名称（如 red、blue）、十六进制值（如 #FF0000）、RGB 值（如 rgb(255, 0, 0)）、RGBA 值（如 rgba(255, 0, 0, 0.5)）等。

css 复制代码

p {
    color: blue;
}

2. font-size

作用：设置文字的大小。
用法：font-size: value;
属性值 ：可以是绝对大小（如 px、pt）、相对大小（如 em、rem、%）等。

css 复制代码

h1 {
    font-size: 32px;
}

3. `font-family`

作用：指定文字的字体。
用法：font-family: value;
属性值 ：可以是字体名称（如 Arial、Times New Roman），多个字体用逗号分隔，以提供备用字体。

css 复制代码

body {
    font-family: Arial, sans-serif;
}

4. `font-weight`

作用：设置文字的粗细。
用法：font-weight: value;
属性值 ：可以是关键字（如 normal（正常）、bold（加粗）、bolder、lighter）或数字（如 100 - 900）（400：正常；700：加粗）。

css 复制代码

strong {
    font-weight: bold;
}

5. `font-style`

作用：设置文字的样式，如斜体。
用法：font-style: value;
属性值 ：normal（正常）、italic（斜体）、oblique（倾斜）。

css 复制代码

em {
    font-style: italic;
}

6. `text-align`

作用：设置文字的水平对齐方式。
用法：text-align: value;
属性值 ：left（左对齐）、right（右对齐）、center（居中对齐）、justify（两端对齐）。

css 复制代码

p {
    text-align: center;
}

7. `text-decoration`

作用：设置文字的装饰线，如下划线、删除线等。
用法：text-decoration: value;
属性值 ：可以是 none（无装饰线）、underline（下划线）、overline（上划线）、line-through（删除线）等。

css 复制代码

a {
    text-decoration: none;
}

8. `line-height`

作用：设置行高，即每行文字之间的垂直间距。
用法：line-height: value;
属性值 ：可以是数值（如 1.5）、长度值（如 20px）或百分比（如 150%）。

css 复制代码

p {
    line-height: 1.5;
}

9. `letter-spacing`

作用：设置文字中字符之间的间距。
用法：letter-spacing: value;
属性值 ：可以是长度值（如 2px）、百分比等。

css 复制代码

h2 {
    letter-spacing: 2px;
}

10. `text-transform`

作用：控制文字的大小写转换。
用法：text-transform: value;
属性值 ：none（无转换）、uppercase（全部大写）、lowercase（全部小写）、capitalize（每个单词首字母大写）。

css 复制代码

h3 {
    text-transform: uppercase;
}

11. `text-indent`

作用：text-indent 属性用于设置块级元素首行文本的缩进距离。
用法：语法为：text-indent: value;
属性值

长度值：可以使用固定的长度单位，如 px（像素）、em（相对于元素的字体大小）、rem（相对于根元素的字体大小）等。

百分比：相对于包含块的宽度。例如 text-indent: 5%; 表示首行缩进为包含块宽度的 5%。

负值：可以使用负值使首行文本向左突出显示。例如 text-indent: -10px;

css 复制代码

<!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（字体样式）等。

css 复制代码

body {
    font-family: Arial, sans-serif;
    font-size: 16px;
}

在上述代码中，body 元素下的所有子元素都会继承 font-family 和 font-size 属性。

文本相关属性 ：color（文本颜色）、text-align（文本对齐方式）、line-height（行高）等。

css 复制代码

p {
    color: blue;
    text-align: center;
}

这里，p 元素内的所有子元素都会继承 color 和 text-align 属性。

（2）不可继承的属性

也有许多 CSS 属性是不会被继承的，例如：

盒模型相关属性：width（宽度）、height（高度）、margin（外边距）、padding（内边距）、border（边框）等。

css 复制代码

div {
    width: 200px;
    border: 1px solid black;
}

div 元素的子元素不会继承 width 和 border 属性。

（3）控制继承性

可以使用一些特殊的属性值来控制继承行为：

inherit：强制元素继承父元素的属性值。

css 复制代码

span {
    color: inherit;
}

在这个例子中，span 元素会继承其父元素的 color 属性值。

initial：将属性值设置为该属性的初始值。

css 复制代码

p {
    color: initial;
}

这里，p 元素的 color 属性会被设置为浏览器默认的颜色。

unset：如果属性是可继承的，则使用继承值；如果是不可继承的，则使用初始值。

css 复制代码

li {
    font-size: unset;
}

li 元素的 font-size 属性会根据其父元素的 font-size 来继承，若不可继承则使用初始值。

通过理解和运用 CSS 的继承性，你能够更高效地编写样式代码，减少冗余。

②层叠性

（1）层叠的概念

在实际的网页开发中，一个元素可能会受到多个 CSS 规则的影响，这些规则可能来自不同的样式表（外部样式表、内部样式表），也可能来自不同的选择器。层叠性就是用来处理这些规则冲突的机制，它会根据一定的规则来确定最终应用到元素上的样式。

（2）特点

Ⅰ.相同的属性会覆盖：后面的CSS属性覆盖前面的CSS属性

Ⅱ.不同的属性会叠加：不同的CSS属性都生效

（3）层叠的规则

Ⅰ.重要性

CSS 中有一个特殊的声明 !important，带有 !important 的声明会覆盖其他没有 !important 的声明。例如：

css 复制代码

p {
    color: blue !important; /* 这条规则会覆盖其他没有!important的color声明 */
}
p {
    color: red;
}

在上述代码中，段落文本的颜色会是蓝色，因为 color: blue !important 具有更高的重要性。

Ⅱ.特殊性

当没有 !important 声明时，CSS 会根据选择器的特殊性来决定哪个规则生效。特殊性是一个衡量选择器权重的指标，它由四个部分组成：内联样式、ID 选择器、类选择器（包括属性选择器和伪类选择器）、元素选择器（包括伪元素选择器）。特殊性的计算方式是：内联样式的权重最高，ID 选择器次之，然后是类选择器，最后是元素选择器。例如：

css 复制代码

/* 特殊性: 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 选择器的特殊性最高。

Ⅲ.源顺序

当多个规则的重要性和特殊性都相同时，最后定义的规则会生效。例如：

css 复制代码

p {
    color: red;
}
p {
    color: blue; /* 最终段落文本颜色为蓝色 */
}

（4）示例代码

以下是一个完整的 HTML 和 CSS 示例，展示了层叠性的应用：

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）示例

以下是一些示例代码，帮助你理解优先级的计算规则：

css 复制代码

<!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，则该样式会具有最高优先级：

css 复制代码

p {
    color: blue !important; /* 即使有其他选择器，这个颜色也会生效 */
}

但要注意，过度使用 !important 会破坏样式表的结构和可维护性，建议尽量避免使用。

通过了解 CSS 优先级的规则，你可以更好地控制元素的样式，避免样式冲突和意外的显示效果。

WEBSTORM前端 —— 第2章：CSS —— 第2节：文字控制属性与CSS特性

一、文字控制属性

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`

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`

（1）层叠的概念