html如何引用外部css样式

哈，提到HTML的<LINK>元素，这可是网页制作的老朋友了。
我记得刚接触这个的时候，那感觉就像是找到了一个强大的魔法工具。

你说的对，外部样式表是通过<LINK>元素连接到HTML文档的，一般放在<HEAD>部分。
像这样：
<LINK REL="StyleSheet" HREF="style.css" TYPE="text/css" MEDIA="screen"> <LINK REL="StyleSheet" HREF="color-8 b.css" TYPE="text/css" TITLE="8 -bitColorStyle" MEDIA="screen,print"> <LINK REL="AlternateStyleSheet" HREF="color-2 4 b.css" TYPE="text/css" TITLE="2 4 -bitColorStyle" MEDIA="screen,print"> <LINK REL="StyleSheet" HREF="aural.css" TYPE="text/css" MEDIA="aural">
这里有几个关键点：
1 . TYPE="text/css"告诉浏览器这个文件是CSS样式表。
2 . MEDIA属性可以指定样式表应用的范围，比如screen（默认值，用于屏幕）、print（用于打印）等。
3 . REL="StyleSheet"表示这是默认样式表，而REL="AlternateStyleSheet"则表示这是备用样式表。

我还记得有一次，我在做一个网站的时候，想要根据不同的设备展示不同的样式。
结果在Netscape Navigator 4 .x上出了点问题，因为那个浏览器会忽略除了screen以外的MEDIA值。
所以我只能重新调整代码，确保MEDIA属性只包含screen。

而且，如果浏览器不支持某个特定的样式表类型，比如text/css，它会直接忽略掉这个样式表。
所以，给服务器配置CSS文件的时候，确保Content-type是text/css是个好习惯。

至于备用样式表，现在的浏览器大多数都不怎么支持用户切换，所以这块其实用得不太频繁。

还有一点，如果你想要把多个样式表合并成一个，需要在每个样式表中使用相同的TITLE属性。
比如：
<LINK REL="StyleSheet" HREF="basics.css" TITLE="Contemporary"> <LINK REL="StyleSheet" HREF="tables.css" TITLE="Contemporary"> <LINK REL="StyleSheet" HREF="forms.css" TITLE="Contemporary">
这样，浏览器就会把它们作为一个组合样式来应用。

最后，虽然现在用得少，但还得提一下Microsoft Internet Explorer 3 不支持通过链接的样式表中的BODY背景图像或颜色。
所以如果考虑到这一点，你可以提供一个内联样式或使用BODY的BACKGROUND属性。

哦，对了，这让我想起了一个笑话。
有一次，我在做一个网站，老板特别强调要有一个很酷的背景图像。
结果我按照他的要求做出来后，IE3 的用户看页面全是空白。
哈哈，那时候真是笑掉大牙了。

在html文档中引用外部样式表的正确位置是什么

哎，你说的这些点都对，但感觉有点太书面化了，像教科书里抄的。
咱们换个方式聊聊？
上周有个客户问我，为啥他网站加载有点慢，我看了下代码，发现他整个样式表都扔在<body>标签最后了。
我就跟他解释啊，你想想看，浏览器解析HTML是按顺序来的，从上往下。
你把CSS放在的时候就能碰到样式表，一边解析HTML一边同步加载CSS，这样用户看到页面的时候样式是跟上的，不会出现那种先白屏然后慢慢变好看的“闪烁”现象。

我之前在一个老项目里踩过坑，把CSS放<body>后面，刚开始用户看到的就是一堆乱码或者没样式的元素，等CSS加载完又重新渲染一遍，用户直说看着难受。
这叫啥？这叫“无样式内容闪烁”（FOUC），挺形象的。

当然啦，现在浏览器技术进步了，能并行加载资源，不完全是“先加载HTML再加载CSS”那么简单了。
但总的来说，把CSS放在能让浏览器早点拿到样式的信息，渲染的时候就不会卡壳，用户体验就好很多。
而且，代码规范上大家都这么干，以后你或者别人维护起来也更方便。

特殊情况嘛，比如做那种极简加载页，确实可以先把最关键的几行CSS直接写进<head>，保证内容能立刻显示，其他不急的样式表再异步加载。
但这个得自己把握，别弄得太复杂了反而更慢。

反正你看着办吧，把外部样式表放<head>里，基本上不出错。
我还在想这个问题，为啥有些人就是不听呢？可能是一开始没学明白，后来习惯了也就这样了。