CSS 基础

什么是 CSS?

CSS（Cascading Style Sheets）是层叠样式表，用于设置网页的外观。

CSS 语法

h1 { /* h1 是选择器 */
  color: red; /* 颜色设置成红色(字体颜色) */
  font-size: 5em; /* 字体大小5em */
}

HTML 模板

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>开始学习 CSS</title>
  </head>

  <body>
    <h1>我是一级标题</h1>

    <p>
      这是一个段落文本。在文本中有一个 <span>span element</span> 并且还有一个
      <a href="https://example.com">链接</a>.
    </p>

    <p>这是第二段。包含了一个 <em>强调</em> 元素。</p>

    <ul>
      <li>项目 1</li>
      <li>项目 2</li>
      <li>项目 <em>三</em></li>
    </ul>
  </body>
</html>

如何使用 CSS

HTML 链接 CSS 文件

创建文件 style.css

h1 {
  color: red;
  font-size: 5em;
}

修改 HTML 模版

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>开始学习 CSS</title>
    <link rel="stylesheet" href="style.css" /> <!-- 引入 CSS -->
  </head>

  <body>
    <h1>我是一级标题</h1>

    <p>
      这是一个段落文本。在文本中有一个 <span>span element</span> 并且还有一个
      <a href="https://example.com">链接</a>.
    </p>

    <p>这是第二段。包含了一个 <em>强调</em> 元素。</p>

    <ul>
      <li>项目 1</li>
      <li>项目 2</li>
      <li>项目 <em>三</em></li>
    </ul>
  </body>
</html>

内联 CSS

<div style="background: red"></div>

嵌入

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>开始学习 CSS</title>
    <style>
        h1 {
            color: red;
            font-size: 5em;
        }
    </style>
  </head>

  <body>
    <h1>我是一级标题</h1>

    <p>
      这是一个段落文本。在文本中有一个 <span>span element</span> 并且还有一个
      <a href="https://example.com">链接</a>.
    </p>

    <p>这是第二段。包含了一个 <em>强调</em> 元素。</p>

    <ul>
      <li>项目 1</li>
      <li>项目 2</li>
      <li>项目 <em>三</em></li>
    </ul>
  </body>
</html>

导入

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>开始学习 CSS</title>
    <style>
        @import url(style.css);
    </style>
  </head>

  <body>
    <h1>我是一级标题</h1>

    <p>
      这是一个段落文本。在文本中有一个 <span>span element</span> 并且还有一个
      <a href="https://example.com">链接</a>.
    </p>

    <p>这是第二段。包含了一个 <em>强调</em> 元素。</p>

    <ul>
      <li>项目 1</li>
      <li>项目 2</li>
      <li>项目 <em>三</em></li>
    </ul>
  </body>
</html>

选择器

选择器用于标识当前规则应用于与那些 HTML 元素.

类型选择器

h1 { /* HTML元素的标签 */
}

类选择器

类选择器方便复用 CSS 的规则

.box { /* box 是类名 */
}

使用 box 类名

<div class="box"></div>

ID 选择器

ID 在一个页面只能有一个

#unique { /* unique是id */
}

使用 unique ID

<div id="unique"></div>

属性选择器

根据元素上的属性是否存在选择元素

a[title] { /* a标签上有title属性, title的值不确定 */
}
a[title="user"] { /* a标签上有title属性, title的值要是user */
}
a[title~="u"] { /* a标签上有title属性, title的值至少包含u, 如果有多个值用空格分割 */
}
a[title|="u"] { /* a标签上有title属性, title的值可以是u, 或者是以u开始的后接连字符, 如u-test, title不能有多个值 */
}

a[title^="u"] { /* a标签上有title属性, title的值以u开头, title可以有多个值 */
}

a[title$="u"] { /* a标签上有title属性, title的值以u结尾, title可以有多个值 */
}
a[title*="u"] { /* a标签上有title属性, title的值包含至少一个u */
}

属性的匹配默认是大小写敏感的, 如果要使用大小写不敏感进行匹配, 在中括号中添加 i

li[class^="a" i] {
  color: red;
}

伪类选择器

伪类用于指定元素的特殊样式

a:hover {
  color: red;
}

伪元素选择器

选择元素的一部分

a::first-line { /* 选择a标签的第一行 */
  color: red;
}

关系选择器

后代选择器：用空格组合两个选择器 body div，选择 body 中的 div 元素（可以是子元素的子元素的子元素……）。
子代选择器：用 > 连接两个选择器 body>div，选择 body 的子元素 div。
兄弟选择器：用 + 连接 div+img，选择 div 后面相邻的 img。
通用兄弟选择器：用 ~ 连接 div~img，选择 div 后面的 img。

全局选择器

* 选中文档中所有内容，或者父元素中的所有元素。

@规则

CSS 函数

层叠

层叠(覆盖)如果两条规则的优先级一样, 那么后面的规则将覆盖前面的规则

<html>
    <head>
        <style>
            h1 {
                color: red;
            }
            h1 {
                color: blue;
            }
        </style>
    </head>
    <body>
        <h1>This is my heading.</h1>
    </body>
</html>

最终 This is my heading. 是蓝色的

优先级

CSS 的计算中, 最后每一个元素的每一个 CSS 属性都会有值

优先级相同时，后写的规则会覆盖先写的规则，优先级更高的选择器会覆盖更低的选择器。

参考资料

MDN CSS（访问日期：2026-05-31）
MDN CSS selectors（访问日期：2026-05-31）
MDN CSS pseudo-classes（访问日期：2026-05-31）
MDN CSS pseudo-elements（访问日期：2026-05-31）