引导者

## CSS 简介### 什么是 CSS？CSS (层叠样式表) 是一种用于描述网页呈现样式的语言，它决定了网页在屏幕上的显示效果，例如颜色、字体、布局等。### 为什么使用 CSS？

内容与样式分离:

将网页内容与样式分离，使得网页结构更清晰，易于维护和修改。

代码简洁，提高开发效率:

使用 CSS 可以用更少的代码实现更丰富的样式效果，提高开发效率。

页面加载速度更快:

CSS 文件可以被浏览器缓存，减少页面加载时间，提升用户体验。

更好的用户体验:

CSS 可以实现各种页面效果，提升网页的美观度和用户体验。

易于维护和更新:

修改 CSS 文件即可改变整个网站的样式，无需修改每个网页的 HTML 代码。### CSS 语法CSS 规则由选择器和声明块组成：```css 选择器 {属性1: 值1;属性2: 值2;... } ```

选择器:

用于选择要应用样式的 HTML 元素。

声明块:

包含一条或多条声明，每条声明由属性和值组成。

属性:

指定要设置的样式属性。

值:

指定属性的值。### CSS 选择器CSS 选择器用于选择要应用样式的 HTML 元素，常见的 CSS 选择器包括：

元素选择器:

选择所有指定类型的 HTML 元素，例如 `p` 选择所有 `

` 元素。

类选择器:

选择所有具有指定 class 属性值的 HTML 元素，例如 `.example` 选择所有 class 属性值为 "example" 的元素。

ID 选择器:

选择具有指定 ID 属性值的 HTML 元素，例如 `#header` 选择 ID 属性值为 "header" 的元素。

后代选择器:

选择指定元素的后代元素，例如 `ul li` 选择所有 `

` 元素下的 `
• ` 元素。

  子元素选择器:

  选择指定元素的直接子元素，例如 `div > p` 选择所有 `

  ` 元素的直接子元素 `

  `。### CSS 属性CSS 提供了大量的属性，可以用于控制 HTML 元素的各种样式，例如：

  颜色:

  `color`, `background-color` 等。

  字体:

  `font-size`, `font-family`, `font-weight` 等。

  文本:

  `text-align`, `text-decoration`, `line-height` 等。

  边框:

  `border`, `border-width`, `border-color` 等。

  边距:

  `margin`, `padding` 等。

  布局:

  `display`, `position`, `float` 等。### CSS 使用方法CSS 可以通过以下三种方式添加到 HTML 文档中：

  内联样式:

  将 CSS 代码直接写在 HTML 元素的 style 属性中。

  内部样式表:

  将 CSS 代码写在 HTML 文档的 `