html怎么调用css文件？调用就三种，记住link就行

你写了一个html文件，调用浏览器打开，调用发现页面丑得没法看。调用标题挤在左上角，调用文字贴着边框，调用背景白得刺眼。调用这时候你需要的调用是一份css文件——但问题是，怎么让html知道css的调用存在？

答案其实就一句话：在html的<head>标签里写一行<link>。这行代码像一根电线，调用把样式表的调用电流接到html的电路板上。具体写法是调用：

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

rel="stylesheet"是告诉浏览器，这个文件是调用样式表，不是调用别的什么乱七八糟的东西。href就是调用路径，你css文件的地址。如果css文件跟html文件在同一个文件夹里，直接写文件名就行。要是css放在css子文件夹里，就得写"css/style.css"。要是放在网上，就写完整的URL，像这样：

<link href="https://example.com/style.css" rel="stylesheet">

这是外部调用，最常用的一种。好处是样式和内容分离，改样式不用动html，维护起来省心。你写十个页面，共用一个css文件，想改全站字体颜色，改一个文件就完事。我见过一些新手，把样式直接写在html里，改一个页面要翻半天代码，那种痛苦我懂。

第二种方式，内部样式。在<head>里加一对<style>标签，css代码直接写在里面。像这样：

<style> body {  background-color: #f0f0f0; } </style>

这种方式适合单页面，或者你就想临时调试一下。但说实话，用多了html会变得臃肿，代码看着也乱。我见过一些老项目，内部样式写了上千行，整个head部分长得像裹脚布。

第三种，内联样式。直接在html标签的style属性里写css。比如：

<p style="color: red; font-size: 16px;">这段文字是红色的</p>

这种方式最直接，也最没效率。你写十个段落，每个段落都要单独写样式，代码重复得你想骂人。而且内联样式的优先级最高，会覆盖外部文件里的设置。你调试的时候发现改了css没反应，八成就是有内联样式在捣乱。

我的建议是，老老实实用第一种，外部链接。项目稍微大一点，你就知道这有多香。css文件可以压缩，可以缓存，还可以用预处理器写完了再编译。内部样式和内联样式，顶多算个应急工具。

还有个细节你可能没注意，<link>标签除了加载css，还能干别的事。比如加载网站的图标（favicon），或者预加载一些资源。但最核心的用途，就是绑定样式表。

对了，还有@import也能引入css文件，在style标签或者css文件里写@import url("another.css")。但这玩意儿性能不好，它得等页面加载完了才去请求，会拖慢渲染速度。能用link就尽量别用@import，这是很多前端踩过的坑。

最后说一句，写完link记得检查路径。大小写错了、文件名拼错了，样式加载不出来，页面就裸奔了。用浏览器的开发者工具（按F12），切换到Network面板，看css文件有没有加载成功，状态码是不是200。要是404，你就得回头看看路径了。

本文地址：http://www.79wt.cn/news/622a499373.html