跳到主要内容位置

引入 CSS

要给 HTML 页面添加样式，需要先引入 CSS，常见的在 HTML 中引入 CSS 的方式有 3 种：

  • inline 行内样式。
  • 使用 <style> 标签。
  • 使用 <link> 标签。

现在我们分别来看一下如何使用这 3 种方式，先不用关注示例中 CSS 代码的含义，后面我们会逐一讲到。

inline 行内样式​

行内样式就像它的名字一样，是直接在 HTML 标签中添加样式，通过 HTML 标签的 style 属性，例如下方代码所示：

<p style="color:hsl(214deg, 100%, 60%)">这是一段有颜色的字体。</p>

预览：

style 标签​

使用 <style> 标签编写的样式，只能在当前 HTML 页面中使用，只会美化它其中的元素。一般的，我们把 <style> 标签放到 <head/> 标签中：

<html>
  <head>
    <style>
      ul {
        margin-top: 20px;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>列表项</li>
      <li>列表项</li>
      <li>列表项</li>
    </ul>
  </body>
</html>

预览：

最后一种方式是使用 <link> 标签引入，这时，CSS 是写在单独的文件中的，这个文件以 .css 结尾，里面是一些 CSS 样式。假设 HTML 和 CSS 文件结构是这样的：

project
  |-- index.html
  |-- style.css

那么在 index.html 文件里，<head> 标签中，我们可以用下面的语法引入 style.css 文件：

<link rel="stylesheet" href="style.css" />

这里的：

  • rel 是说我们引入的是什么样的文件，这里指定值为 stylesheet 标明引入的是 CSS 样式表。
  • href 用于指定 CSS 文件路径，可以是网络上的 URL，可以是本地的目录，因为 style.css 和 index.html 在同一个目录，所以这里使用了相对路径引入了 style.css 文件。
信息

我们可以通过编写多个 <link> 标签，引入多个外部的 CSS 文件，例如引入 normalize.css 第三方 CSS 库，再引入自己的 style.css 文件等。如果样式有冲突，会以后面的样式为准。

小结​

在实际项目开发中，推荐用第 3 种来引入 CSS 文件，以使得 HTML 文件的代码更简洁，并且 CSS 可以进行复用。如果是练习的项目，代码量比较小，那么就推荐使用第 2 种。第 1 种方式会涉及到选择器优先级的机制，尽量不要使用。

最近更新于
提示

一系列的课程让你成为高级前端工程师。课程覆盖工作中所有常用的知识点和背后的使用逻辑，示例全部都为工作项目简化而来，学完即可直接上手开发！

即使你已经是高级前端工程师，在课程里也可能会发现新的知识点和技巧，让你的工作更加轻松！

《React 完全指南》课程，连载中现只需 48 元（领取优惠券）点击查看详情。

《Vue 3.x 全家桶完全指南与实战》课程，包括 Vue 3.x、TypeScript、Vue Router 4.x、Vuex 4.x 所有初级到高级的语法特性详解，让你完全胜任 Vue 前端开发的工作。点击查看详情。

《React即时通信UI实战》课程，利用 Storybook、Styled-components、React-Spring 打造属于自己的组件库。

《JavaScript 基础语法详解》本人所著图书，包含 JavaScript 全面的语法知识和新特性， 可在京东、当当、淘宝等各大电商购买