HTML如何引入CSS？三种样式表链接方法教程-html教程-PHP中文网

HTML如何引入CSS？三种样式表链接方法教程

絕刀狂花

发布： 2025-06-30 12:58:01

原创

297人浏览过

html引入css的方法主要有三种：行内样式、内部样式表和外部样式表。1. 行内样式直接在html标签内使用style属性，优点是简单且优先级高，但不易维护，适合少量使用；2. 内部样式表在html的<head>中使用<style>标签定义，适用于单个页面，便于修改但无法复用；3. 外部样式表通过<link>引入独立的.css文件，易于维护和跨页面复用，推荐用于大型项目。css优先级为行内样式最高，接着是内部或外部样式表（后定义的覆盖先定义的），浏览器默认样式最低。优化css加载可通过将<link>放在<head>、使用媒体查询、压缩文件、cdn加速等方式实现，避免使用@import以提升性能。

HTML如何引入CSS？三种样式表链接方法教程

直接点说，HTML引入CSS就是给网页穿衣服，让它变得好看。方法不少，但掌握这几种就够用了。

解决方案

行内样式 (Inline Styles)

立即学习“前端免费学习笔记（深入）”；

这是最直接的方法，直接在HTML标签里用style属性写CSS。
```
<p   style="max-width:90%">这段文字是蓝色的。</p>
```
登录后复制
优点：简单粗暴，优先级高。缺点：不易维护，代码冗余，不推荐大量使用。
内部样式表 (Internal Stylesheet)

在HTML文档的<head>部分使用<style>标签嵌入CSS代码。
```
<!DOCTYPE html>
<html>
<head>
  <title>内部样式表</title>
  <style>
    p {
      color: green;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <p>这段文字是绿色的。</p>
</body>
</html>
```
登录后复制
优点：方便在单个页面内修改样式。缺点：只适用于当前页面，无法在多个页面共享样式。
外部样式表 (External Stylesheet)

将CSS代码写在一个独立的.css文件中，然后在HTML文档中使用<link>标签引入。
```
<!DOCTYPE html>
<html>
<head>
  <title>外部样式表</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <p>这段文字的样式在 styles.css 文件中定义。</p>
</body>
</html>
```
登录后复制
styles.css文件内容：
```
p {
  color: red;
  font-size: 20px;
}
```
登录后复制
优点：易于维护，可以在多个页面共享样式，提高代码复用率。强烈推荐！缺点：需要额外加载CSS文件，可能影响页面加载速度（但通常可以忽略）。

CSS优先级：行内样式、内部样式表和外部样式表哪个优先级最高？

CSS优先级是个老生常谈的问题，但搞清楚它能避免很多样式冲突的麻烦。简单来说，优先级顺序是：行内样式 > 内部/外部样式表（后定义的覆盖先定义的）> 浏览器默认样式。

行内样式: 直接写在HTML标签里的style属性，优先级最高，谁也干不过它，除非用!important。
内部/外部样式表: 如果选择器一样，后定义的样式会覆盖先定义的。如果选择器不一样，那就看选择器的具体性（Specificity）了，这个比较复杂，涉及到ID选择器、类选择器、标签选择器等。
浏览器默认样式: 这是浏览器自带的样式，优先级最低，基本可以忽略。

举个例子：

火山方舟

火山引擎一站式大模型服务平台，已接入满血版DeepSeek

查看详情

<!DOCTYPE html>
<html>
<head>
  <title>CSS优先级</title>
  <style>
    p { /* 内部样式表 */
      color: blue;
    }
  </style>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <p style="color: green;">这段文字是什么颜色？</p>
</body>
</html>

登录后复制

styles.css文件内容：

p { /* 外部样式表 */
  color: red;
}

登录后复制

最终，这段文字会显示绿色，因为行内样式的优先级最高。

如何选择合适的CSS引入方式？

选择哪种引入方式，主要看你的项目规模和需求。

小型项目或单页应用: 如果只是一个简单的页面，用内部样式表或者行内样式都可以，方便快捷。
大型项目: 强烈推荐使用外部样式表。把CSS代码放在单独的文件里，方便维护和管理，也方便在多个页面共享样式。

另外，还可以结合实际情况，灵活运用。比如，某些特殊的样式，只在一个地方用到，就可以用行内样式；通用的样式，就放在外部样式表里。

外部样式表引入后，如何避免CSS加载阻塞页面渲染？

CSS加载会阻塞页面渲染，这是个事实。但我们可以通过一些方法来优化：

将<link>标签放在<head>里: 这是最佳实践，浏览器会尽早发现CSS文件，并行下载。
使用媒体查询 (Media Queries): 只在特定设备或条件下加载CSS文件，比如只在打印时加载打印样式。
```
<link rel="stylesheet" href="print.css" media="print">
```
登录后复制
CSS文件压缩: 减小CSS文件的大小，缩短加载时间。可以使用一些工具来压缩CSS代码，比如在线压缩工具或构建工具。
使用CDN: 将CSS文件放在CDN上，利用CDN的缓存和加速，提高加载速度。
避免使用@import: @import会阻塞CSS文件的并行下载，影响页面加载速度。尽量使用<link>标签引入CSS文件。