html外部链接css代码

把CSS写在HTML的<style>标签里，页面一多就变成复制粘贴灾难。链接改一个颜色，外部得翻遍所有文件。链接外部链接CSS就是外部来解决这个问题的——把所有样式抽到一个独立的.css文件里，HTML只负责结构，链接CSS只负责外观。外部

具体怎么做？链接在HTML的<head>里加一行<link>标签，指向那个CSS文件。外部就这么简单。链接

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>我的外部页面</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>标题</h1> <p>正文内容</p> </body> </html>

关键就是<link rel="stylesheet" href="style.css">这一行。rel属性告诉浏览器“这是链接一个样式表”，href指向文件路径。外部路径可以是链接相对路径，比如css/style.css，外部也可以是绝对路径或完整的URL。

路径写错，页面就裸奔

我见过不少新手把href写成herf或者scr，浏览器根本不认。还有一种情况：HTML文件和CSS文件不在同一层目录，路径没写对。比如HTML在根目录，CSS在css/子目录里，就得写成href="css/style.css"。少写一个斜杠，样式就加载不出来。

怎么判断有没有加载成功？打开浏览器开发者工具，看Network面板里那个.css文件是不是200状态码。如果是404，路径肯定有问题。或者直接看页面——如果所有文字都变成默认的Times New Roman，背景白得刺眼，那基本就是CSS没生效。

为什么不用@import

CSS里也能引入外部文件，用@import url("style.css");。但这玩意儿有坑。浏览器解析到@import时，得等主CSS文件下载完才发现还有别的文件要下，等于串行加载。而<link>是并行下载，页面渲染更快。另外@import在旧版IE里还有兼容问题。所以除非有特殊需求，否则老老实实用<link>。

媒体查询和外部CSS的配合

<link>标签还能直接做响应式加载。比如只在打印时应用某个样式表：

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

或者只在窄屏时加载：

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

不过现在更常见的做法是把媒体查询写在同一个CSS文件里，减少HTTP请求。但如果你有一个特别大的样式表只针对特定设备，用media属性分开加载反而更高效。

一个真实的小翻车

去年帮朋友看一个静态页面，CSS死活不生效。文件路径没错，文件名也对，link标签写得规规矩矩。折腾了半小时，最后发现——他把style.css文件保存成了style.css.txt，Windows默认隐藏扩展名。浏览器请求style.css，服务器上根本没有这个文件。改成真正的.css后缀，问题消失。

所以写完<link>之后，最好在浏览器地址栏直接访问一下CSS文件的URL，确认能显示纯文本的CSS代码。如果显示404或者下载了一个文件，那就得检查服务器配置或文件本身。

外部链接CSS没什么高深的技术，核心就是<link>标签加正确的路径。但恰恰是这种基础操作，写错一个字母就全盘失效。多检查几遍，比事后debug省事得多。

(责任编辑：探索)