CSS详细学习笔记

1. CSS简介

CSS（Cascading Style Sheets，层叠样式表）是一种用于控制HTML文档外观和格式的样式表语言。它通过定义HTML元素的样式规则，可以实现对网页布局、字体、颜色、间距等外观特性的统一控制，从而使网页更加美观、易读和具有个性化的风格。

1.2 CSS的引入方式

1.2.1 内联样式

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

示例：

html 复制代码

<p style="color: red; font-size: 16px;">这是一段红色的文本，字体大小为16px。</p>

优点：样式与HTML元素紧密关联，直观且易于理解；对单个元素的样式控制非常方便。
缺点：样式代码分散在HTML文档中，不利于维护和复用；如果多个元素需要相同的样式，需要重复编写代码，增加了代码冗余。

1.2.2 内部样式表

定义：在HTML文档的<head>部分使用<style>标签定义样式。

示例：

html 复制代码

<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）：
css 复制代码
```
p {
  color: green;
  font-size: 12px;
}
```
HTML文件：

html 复制代码

<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p>这是一段绿色的文本，字体大小为12px。</p>
</body>

优点：样式代码完全独立于HTML文档，便于维护和复用；可以在多个HTML页面中共享同一套样式，提高开发效率；易于实现样式的全局修改和更新。
缺点：需要额外的文件管理和维护；如果CSS文件加载失败，可能会影响页面的显示效果。

2. CSS选择器

CSS选择器用于选择HTML文档中的元素，以便为其应用样式规则。选择器的种类繁多，每种选择器都有其特定的用途和特点。

2.1 标签选择器

定义：通过HTML标签名称选择元素。
示例：
css 复制代码
```
p {
  color: red;
}
```
特点：选择范围较广，适用于对所有相同标签的元素进行统一设置，但不够具体，可能会对页面中所有该标签的元素产生影响。

2.2 类选择器

定义：通过HTML元素的class属性选择元素。

示例

css 复制代码

.my-class {
  color: blue;
}

html 复制代码

<p class="my-class">这是一段蓝色的文本。</p>

特点：具有较高的灵活性和复用性，可以为多个元素指定相同的样式；通过类名可以更具体地选择元素，避免对其他元素产生影响。

2.3 ID选择器

定义：通过HTML元素的id属性选择元素。

示例：

css 复制代码

#my-id {
  color: green;
}

html 复制代码

<p id="my-id">这是一段绿色的文本。</p>

特点：具有最高的选择器优先级**，只能用于选择页面中具有唯一id的元素；在页面中id值必须是唯一的**，因此可以精确地控制单个元素的样式。

2.4 属性选择器

定义：通过HTML元素的属性及其值选择元素。

示例：

css 复制代码

[type="text"] {
  border: 1px solid black;
}

html 复制代码

<input type="text">

特点：可以根据元素的具体属性及其值进行选择，具有较强的针对性和灵活性；适用于对具有特定属性的元素进行样式设置。

2.5 伪类选择器

定义：用于选择元素的特定状态或位置。
示例：
css 复制代码
```
a:hover {
  color: red;
}
```
特点：可以为元素的不同状态或位置添加特殊的样式，增强页面的交互性和视觉效果；例如，:hover伪类可以为鼠标悬停状态的元素设置样式。

2.6 伪元素选择器

定义：用于选择元素的特定部分或创建虚拟元素。

示例：

css 复制代码

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

特点：可以在元素的前后插入虚拟内容或对元素的特定部分进行样式设置，丰富页面的布局和效果；例如，::before和::after伪元素可以用于添加装饰性内容。

2.7 分组选择器

定义：通过逗号分隔多个选择器，为它们应用相同的样式规则。
示例：
css 复制代码
```
h1, h2, h3 {
  color: purple;
}
```
特点：可以减少重复的样式代码，提高样式的复用性。

2.8 后代选择器

定义：选择某个元素的后代元素。

示例：

css 复制代码

.container p {
  color: orange;
}

html 复制代码

<div class="container">
  <p>这是一段橙色的文本。</p>
</div>

特点：可以精确地选择特定上下文中的元素，避免对其他元素产生影响。

2.9 子代选择器

定义：选择某个元素的直接子元素。

示例：

css 复制代码

.container > p {
  color: pink;
}

html 复制代码

<div class="container">
  <p>这是一段粉色的文本。</p>
  <div>
    <p>这段文本不会变色。</p>
  </div>
</div>

特点：与后代选择器类似，但只选择直接子元素，不包括更深层次的后代元素。

2.10 相邻兄弟选择器

定义：选择某个元素的紧邻兄弟元素。

示例：

css 复制代码

h1 + p {
  color: cyan;
}

html 复制代码

<h1>标题</h1>
<p>这是一段青色的文本。</p>

特点：只能选择紧邻的兄弟元素，不包括其他兄弟元素。

2.11 通用兄弟选择器

定义：选择某个元素的所有兄弟元素。

示例：

css 复制代码

h1 ~ p {
  color: lime;
}

html 复制代码

<h1>标题</h1>
<p>这是一段绿色的文本。</p>
<p>这段文本也会变绿。</p>

特点：可以选择所有兄弟元素，而不仅仅是紧邻的兄弟元素。