1. CSS 基础之定位（选择）元素大法CSS 是由于描述 HTML 文档外观和布局的样式语言。它的引入方式有三种：

CSS 基础之定位（选择）元素大法

CSS（层叠样式表）是用于描述 HTML（超文本标记语言）或 XML（可扩展标记语言）文档外观和布局的 样式语言。

1 引入 CSS 的方式

1.1 内联样式

直接在 HTML 元素的 style 属性 中 定义样式。

<!--示例代码 1-->
<p style="color: blue; font-size: 14px;">这是一段蓝色、14px大小的文字。</p>

优点：样式只应用于 当前元素，优先级高；
缺点：如果 多个元素 需要 相同样式，代码会很繁琐，不利于维护。

1.2 内部样式表

在 HTML 文件的 <head> 标签内 使用 <style> 标签 来 定义样式。

<!--示例代码 2-->
<head>
    <style>
        p {
            color: blue;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <p>这是一段蓝色、14px大小的文字。</p>
</body>

内部样式表 可以对 整个页面中的元素 进行样式定义，相较于内联样式更方便管理 同类型元素 的样式，但对于 多个页面 来说，仍然 不够高效。

1.3 外部样式表

将 CSS 代码保存为一个独立的 .css 文件，然后在 HTML 文件的 <head> 标签 中通过 <link> 标签引入。

/*styles.css*/
p {
    color: blue;
    font-size: 14px;
}

<!--示例代码 3-->
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <p>这是一段蓝色、14px大小的文字。</p>
</body>

外部样式表 是 最常用的方式，它可以方便地在多个 HTML 文件中 复用样式，使得 样式管理 更加高效和集中。

2 选择器

CSS 选择器用于定位（选择）HTML 文档中要应用样式的元素的模式。

2.1 基本选择器

1 元素选择器

直接以 HTML 元素名称 作为选择器，用于选择页面中所有 该类型 的元素。

如上述示例代码 2 中，p 选择器会选中所有的 <p> 段落元素，并设置所有与段落元素的文字颜色为蓝色，文字大小为 14px。

2 类选择器

通过在 HTML 元素中 定义 class 属性，然后在 CSS 中使用以 . 开头 的 类选择器 来选择具有该类的元素。

/*styles.css*/
.highlight { 
    background-color: yellow; 
}

<!--示例代码 4-->
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <p class="highlight">这是一段高亮的文字。</p>
</body>

3 ID 选择器

在 HTML 元素中 定义 id 属性，然后在 CSS 中使用以 # 开头 的 ID 选择器 来选择特定的元素。

/*styles.css*/
.highlight { 
    background-color: yellow; 
}

<!--示例代码 4-->
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <p id="highlight">这是一段高亮的文字。</p>
</body>

2.2 组合选择器

1 后代选择器

用空格分隔的两个或多个选择器， parent-selector child-selector：表示父元素（parent-selector）内的所有子元素（包括子元素、孙元素等）（child-selector）。

`div p { font-size: 14px; }`

表示选择 所有在 <div> 元素内部 的 <p> 元素，并将它们的字体大小设置为 14 像素。

2 子选择器

用 > 符号 分隔的两个选择器， parent-selector > child-selector：表示父元素（parent-selector）的 直接子元素（child-selector）。

ul > li { list-style-type: square; }

将无序列表（<ul>）中的 直接子元素 列表项（<li>）的项目符号设置为方形。与 后代选择器 不同的是，它只选择 直接子元素，不包括孙元素等更深层次的后代。

3 相邻兄弟选择器

用 + 符号 分隔的两个选择器，first-selector + second-selector：表示紧跟在第一个元素（first-selector）之后的同层第二个元素（second-selector）。

h1 + p { margin-top: 0; }

表示如果有一个 <p> 元素紧跟在 <h1> 元素之后，那么这个 <p> 元素的上外边距设置为 0。

2.3 伪类选择器

1 链接伪类

:link、:visited、:hover、:active，它们用于定义超链接在不同状态下的样式：

:link 表示 未访问 的链接；
:visited 表示 已访问 的链接；
:hover 表示 鼠标悬停在链接上 的状态；
:active 表示链接被激活（鼠标按下未松开）的状态。

a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; text - decoration: underline; }
a:active { color: green; }

2 结构伪类

:first-child、:last-child、:nth-child(n) 等，它们是根据元素在文档结构中的位置来选择元素：

:first-child 选择 父元素 的 第一个 子元素；
:last-child选择 父元素 的 最后一个 子元素；
:nth - child(n) 可以选择 父元素 的 第 n 个 子元素，其中 n 可以是数字、关键字（如 even 表示偶数位置、odd 表示奇数位置）或表达式（如 3n + 1）。

这些伪类在处理列表、表格等具有 规则结构的 元素的样式时非常有用，可以根据 元素的位置 实现不同的样式效果。

li:first-child { font - weight: bold; }

表示会将列表（<ul>或<ol>）（父元素）中的 第一个列表项（子元素）加粗。

2.4 伪元素选择器

以 :: 开头，如 ::before、::after、::first - letter、::first - line 等。它们用于创建一些在 文档树 中 没有实际对应 的 虚拟元素，并且可以为它们添加样式。

p::before { content: ">> "; }

表示在每个 <p> 段落元素的 开头添加 >> 内容。content 属性 是必须的，用于指定 伪元素 要显示的内容。

h1::first-letter { font-size: 200%; }

表示将 <h1> 标题元素的 第一个字母 的字体大小设置为原来的 200%，这种方式可以用于制作首字下沉等效果。

3 基本样式和属性

3.1 颜色和背景

颜色属性：可以使用以下方式，来设置文本颜色（color）、边框颜色（border - color）等：

颜色名称（如 red、blue 等）；
十六进制值（如 #FF0000 表示红色）；
RGB 值（如 rgb(255, 0, 0) 表示红色）或 RGBA 值（如 rgba(255, 0, 0, 0.5) 表示半透明红色）。

背景属性：

background-color 用于设置元素的 背景颜色；
background-image 用于设置 背景图像（如background - image: url('image.jpg');）；
background - repeat 用于控制背景图像 是否重复（如 background-repeat: no-repeat; 表示背景图像 不重复）。

3.2 字体

字体族 font-family 用于指定：

字体的类型，如 sans-serif、serif、monospace等；
具体的 字体名称，如 font-family: Arial, sans-serif;，表示 优先使用 Arial 字体，如果没有则使用 sans-serif 字体族中的其他字体。

3.3 元素中的文本

文本对齐 text-align 用于设置文本在元素中的 水平对齐方式：

left
right
center
justify（两端对齐）等

例如，text-align: center; 会使文本在元素 中间对齐。

文本装饰 text-decoration 可以添加或去除文本的

下划线（underline）；
删除线（strikethrough）等

例如，text-decoration: none; 可以去除链接默认的 下划线。

1. CSS 基础之 定位（选择）元素大法

CSS 基础之 定位（选择）元素大法