如何使用 CSS

CSS 信息定义了元素的外观和展现方式，当浏览器获取到 CSS 样式时，会根据 CSS 的定义渲染 HTML 元素。

使用 CSS 的 3 种方法：

内联 CSS：直接写在 HTML 元素的 style 属性中。
内部 CSS：写在 HTML 文档的 <style> 元素节点中。
外部 CSS: 写在一个独立的 css 文件中，在 HTML 文档中通过 <link> 元素导入文件。

内联 CSS

内联 CSS 在 HTML 元素的 style 属性中定义只应用到元素本身的 CSS 样式。

内联样式在元素的 style 属性中定义：

<!DOCTYPE html>
<html>
  <body>
    <h1 style="color:blue;text-align:center;">一级标题</h1>
    <p style="color:red;">这里是正文。</p>
  </body>
</html>

!! 不推荐使用内联 CSS。此方法不但将内容和展现混来起来不利于维护，并且不能发挥 CSS 的全部实力。

内部 CSS

内部 CSS 定义在 HTML 文档 <head> 部分的 <style> 元素内。内部 CSS 只负责所在的 HTML 页面的样式。

定义在 <style> 元素中的内部样式：

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-color: linen;
      }

      h1 {
        color: maroon;
        margin-left: 40px;
      }
    </style>
  </head>
  <body>
    <h1>一级标题</h1>
    <p>这里是正文。</p>
  </body>
</html>

外部 CSS

外部 CSS 是一个独立的 css 文件，通过 HTML 文档 <head> 部分的 <link> 元素引入到文档中

多个 HTML 文件中可共享一个外部 CSS 文件。一个 HTML 文件也可以引入多个外部 CSS 文件。

通过 <link> 元素引入外部 CSS 文件：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="mystyle.css" />
  </head>
  <body>
    <h1>一级标题</h1>
    <p>这里是正文。</p>
  </body>
</html>

外部 CSS 文件的后缀名是 .css。

mystyle.css 文件的内容：

body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}

CSS 样式优先级

当为 HTML 元素指定了多个样式时，哪个优先级最高呢？

以下排序按照优先级从高到低排列：

内联样式（在 HTML 元素内）
外部和内部样式表（在 head 部分，后出现的规则会覆盖先前的规则）
浏览器默认

内联样式具有最高优先级，会覆盖外部和内部样式以及浏览器默认值。

一般而言，越是靠后的规则优先级别越高，除非某个规则指定了 !important。

查看 CSS 优先级章节了解更多更详细的关于优先级的信息。

如何使用 CSS

内联 CSS

内部 CSS

外部 CSS

CSS 样式优先级

目录