CSS详细学习笔记
1. CSS简介
CSS（Cascading Style Sheets，层叠样式表）是一种用于控制HTML文档外观和格式的样式表语言。它通过定义HTML元素的样式规则，可以实现对网页布局、字体、颜色、间距等外观特性的统一控制，从而使网页更加美观、易读和具有个性化的风格。
1.2 CSS的引入方式
1.2.1 内联样式
-
定义：直接在HTML元素的
style属性中定义样式。 -
示例：
<p style="color: red; font-size: 16px;">这是一段红色的文本，字体大小为16px。</p> -
优点：样式与HTML元素紧密关联，直观且易于理解；对单个元素的样式控制非常方便。
-
缺点：样式代码分散在HTML文档中，不利于维护和复用；如果多个元素需要相同的样式，需要重复编写代码，增加了代码冗余。
1.2.2 内部样式表
-
定义：在HTML文档的
<head>部分使用<style>标签定义样式。 -
示例：
<head><style>p {color: blue;font-size: 14px;}</style> </head> <body><p>这是一段蓝色的文本，字体大小为14px。</p> </body> -
优点：样式代码集中在一个地方，便于管理和维护；可以对整个HTML文档中的元素进行统一的样式设置。
-
缺点：仅适用于单个HTML文档，无法在多个页面之间共享样式；如果需要修改样式，需要在每个HTML文档中分别修改。
1.2.3 外部样式表
-
定义：将样式代码写在一个独立的
.css文件中，然后通过<link>标签引入HTML文档。 -
示例：
-
CSS文件（styles.css）：
p {color: green;font-size: 12px; }HTML文件：
-
<head><link rel="stylesheet" href="styles.css"> </head> <body><p>这是一段绿色的文本，字体大小为12px。</p> </body> -
优点：样式代码完全独立于HTML文档，便于维护和复用；可以在多个HTML页面中共享同一套样式，提高开发效率；易于实现样式的全局修改和更新。
-
缺点：需要额外的文件管理和维护；如果CSS文件加载失败，可能会影响页面的显示效果。
2. CSS选择器
CSS选择器用于选择HTML文档中的元素，以便为其应用样式规则。选择器的种类繁多，每种选择器都有其特定的用途和特点。
2.1 标签选择器
-
定义：通过HTML标签名称选择元素。
-
示例：
p {color: red; } -
特点：选择范围较广，适用于对所有相同标签的元素进行统一设置，但不够具体，可能会对页面中所有该标签的元素产生影响。
2.2 类选择器
-
定义：通过HTML元素的
class属性选择元素。 -
示例
.my-class {color: blue; }<p class="my-class">这是一段蓝色的文本。</p> -
特点：具有较高的灵活性和复用性，可以为多个元素指定相同的样式；通过类名可以更具体地选择元素，避免对其他元素产生影响。
2.3 ID选择器
-
定义：通过HTML元素的
id属性选择元素。 -
示例：
#my-id {color: green; }<p id="my-id">这是一段绿色的文本。</p> -
特点：具有最高的选择器优先级，只能用于选择页面中具有唯一
id的元素；在页面中id值必须是唯一的，因此可以精确地控制单个元素的样式。
2.4 属性选择器
-
定义：通过HTML元素的属性及其值选择元素。
-
示例：
[type="text"] {border: 1px solid black; }<input type="text"> -
特点：可以根据元素的具体属性及其值进行选择，具有较强的针对性和灵活性；适用于对具有特定属性的元素进行样式设置。
2.5 伪类选择器
-
定义：用于选择元素的特定状态或位置。
-
示例：
a:hover {color: red; } -
特点：可以为元素的不同状态或位置添加特殊的样式，增强页面的交互性和视觉效果；例如，
:hover伪类可以为鼠标悬停状态的元素设置样式。
2.6 伪元素选择器
-
定义：用于选择元素的特定部分或创建虚拟元素。
-
示例：
p::before {content: ">> ";color: blue; } -
特点：可以在元素的前后插入虚拟内容或对元素的特定部分进行样式设置，丰富页面的布局和效果；例如，
::before和::after伪元素可以用于添加装饰性内容。
2.7 分组选择器
-
定义：通过逗号分隔多个选择器，为它们应用相同的样式规则。
-
示例：
h1, h2, h3 {color: purple; } -
特点：可以减少重复的样式代码，提高样式的复用性。
2.8 后代选择器
-
定义：选择某个元素的后代元素。
-
示例：
.container p {color: orange; }<div class="container"><p>这是一段橙色的文本。</p> </div> -
特点：可以精确地选择特定上下文中的元素，避免对其他元素产生影响。
2.9 子代选择器
-
定义：选择某个元素的直接子元素。
-
示例：
.container > p {color: pink; }<div class="container"><p>这是一段粉色的文本。</p><div><p>这段文本不会变色。</p></div> </div> -
特点：与后代选择器类似，但只选择直接子元素，不包括更深层次的后代元素。
2.10 相邻兄弟选择器
-
定义：选择某个元素的紧邻兄弟元素。
-
示例：
h1 + p {color: cyan; }<h1>标题</h1> <p>这是一段青色的文本。</p> -
特点：只能选择紧邻的兄弟元素，不包括其他兄弟元素。
2.11 通用兄弟选择器
-
定义：选择某个元素的所有兄弟元素。
-
示例：
h1 ~ p {color: lime; }<h1>标题</h1> <p>这是一段绿色的文本。</p> <p>这段文本也会变绿。</p> -
特点：可以选择所有兄弟元素，而不仅仅是紧邻的兄弟元素。