外链样式

学习

外链样式

2026-02-23/0/ 编辑

外链样式

什么是外链样式

外链样式是将 CSS 样式写在一个独立的 .css 文件中,然后通过 <link> 标签引入到 HTML 文件中。

语法

HTML 文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>外链样式</title>
  <link rel="stylesheet" href="./css/index.css" />
</head>
<body>
  <h1>h1</h1>
  <p>单独放一个css文件</p>
</body>
</html>

CSS 文件 (css/index.css)

h1 {
  color: red;
  font-size: 24px;
}

p {
  color: #333;
}

<link> 标签属性

属性值描述
relstylesheet必需,定义当前文档与被链接文档的关系
hrefURL必需,指定 CSS 文件的路径
typetext/css可选,指定文档类型(HTML5 中可省略)
mediascreen, print可选,指定媒体类型

路径写法

相对路径

<!-- 同一目录 -->
<link rel="stylesheet" href="style.css" />

<!-- 子目录 -->
<link rel="stylesheet" href="./css/style.css" />

<!-- 上级目录 -->
<link rel="stylesheet" href="../style.css" />

绝对路径

<!-- 绝对路径 -->
<link rel="stylesheet" href="/css/style.css" />

<!-- 完整 URL -->
<link rel="stylesheet" href="https://example.com/css/style.css" />

优点

1. 结构和样式分离

<!-- HTML 文件只负责结构 -->
<html>
  <body>
    <h1>标题</h1>
    <p>段落</p>
  </body>
</html>

<!-- CSS 文件只负责样式 -->
/* style.css */
h1 { color: red; }
p { color: blue; }

2. 样式复用

<!-- 多个 HTML 文件可以共用同一个 CSS 文件 -->
<link rel="stylesheet" href="common.css" />

3. 便于维护

/* 只需要修改一个文件,所有页面都会生效 */
:root {
  --primary-color: #007bff;
}

4. 浏览器缓存

<!-- CSS 文件会被浏览器缓存,提高二次访问速度 -->
<link rel="stylesheet" href="style.css" />

缺点

1. 需要额外的 HTTP 请求

首次加载需要请求 CSS 文件。

2. 需要管理多个文件

需要同时维护 HTML 和 CSS 文件。

实际应用

场景1: 多页面网站

<!-- index.html -->
<link rel="stylesheet" href="common.css" />
<link rel="stylesheet" href="home.css" />

<!-- about.html -->
<link rel="stylesheet" href="common.css" />
<link rel="stylesheet" href="about.css" />

场景2: 响应式设计

<link rel="stylesheet" href="main.css" />
<link rel="stylesheet" href="mobile.css" media="(max-width: 768px)" />

场景3: 打印样式

<link rel="stylesheet" href="screen.css" />
<link rel="stylesheet" href="print.css" media="print" />

最佳实践

1. 目录结构

project/
├── index.html
├── about.html
└── css/
    ├── reset.css
    ├── common.css
    ├── home.css
    └── about.css

2. 模块化引入

<!-- reset.css - 样式重置 -->
<link rel="stylesheet" href="css/reset.css" />

<!-- common.css - 公共样式 -->
<link rel="stylesheet" href="css/common.css" />

<!-- page.css - 页面特定样式 -->
<link rel="stylesheet" href="css/page.css" />

3. 使用版本号避免缓存

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

注意事项

1. 确保 CSS 文件存在

检查 href 路径是否正确。

2. 确保使用 rel="stylesheet"

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

3. 放在 <head> 标签中

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

学习要点

  1. 推荐方式: 外链样式是最推荐的方式
  2. 语法: <link rel="stylesheet" href="...">
  3. 优点: 分离、复用、维护、缓存
  4. 最佳实践: 模块化管理,目录结构清晰
猜你喜欢