[学习交流] 【上海校区】前端——使用外部CSS样式单的两种方法：link...

写代码最重要的一点便是可读性要高，如果我们把所有的代码都写在一个程序里面，那么当出现问题的时候就会对我们排错造成一定的困扰。因此，在写网页的时候我们可以通过CSS样式单来控制HTML文档的显示。这里有如下四种使用CSS样式单的方式：

链接外部样式文件	彻底将样式文件与HTML文档分离，样式文件需要额外引入，一批样式可控制多份文档。
导入外部样式文件	功能与上一种类似，只是用@import来引入外部样式单。
使用内部样式定义	此方式通过在HTML文档Head定义样式单部分来实现。每批CSS样式单只可控制一份文档。
使用行内样式	这种方式将样式行内定义到具体的HTML元素，用于精确地控制一个HTML元素的表现。只控制单个HTML元素。

使用外部样式单是一个减少主程序代码量的好方法，主要有链接外部样式文件和导入外部样式文件两种方式，即link和@import两种方式。
1、Link的用法语法：<link href="url路径" rel="stylesheet" type="text/css" >
示例：<link href="common.css" rel="stylesheet" type="text/css" >
Link是HTML文件中的标签，在<head>标签中使用，通过上面的语法导入css样式表单，从而链接外部CSS表单。
2、@import的用法语法：@import url (样式单地址) sMedia；
示例：

<style type="text/css">
@import"out.css";
@import url("mycss.css");
</style>

上文语法格式中的url可以省略，因此使用@import导入样式表单只需要指定样式单地址即可。而sMedia用于指定该样式单仅对某种显示设备有效，而目前大多数浏览器并不支持sMedia设置。
link和@import的异同点主要为以下几点：1、link是HTML文件中的标签，在<head>中引入CSS文件。
2、@import是CSS中的一个@规则，只能出现在css文件中或者HTML文件中的<style>标签中。
3、link和@import一样，都可以定义媒体查询。

从功能上来看，link和@import很类似，那为什么还要支持两种语法？
因为以前很多浏览器并不支持@import导入，一些CSS开发人员会把一些浏览器可能不支持的高级CSS属性放在外部样式单中倒入。这样才能保证只有支持@import的浏览器才会导入这些高级的CSS属性。
但实际上，由于某些浏览器在导入外部样式单的时候会导致“屏闪”，因此开发者尽量避免使用@import导入外部样式单，推荐使用link来链接外部样式单。此外，在非模块化开发时尽量不要使用@import。因为@import引入样式在所在的CSS文件加载完成之后再加载。下面进行详细讲述。
在正常开发时，所有CSS文件都需要引入。如果某个CSS文件中使用了@import，浏览器需要下载这个CSS并进行解析，如果解析完发现有另外的CSS文件需要下载，又继续去下载，再解析，这样大大地增加了用户的等待时间。
而在模块化开发中，webpack等工具进行开发时，会合并CSS文件，如果CSS文件之前有相互依赖，可以直接用@import引入。最后再合并文件，构建最终文件，因此在最终文件中不会出现@import。
综上所述，推荐使用link标签使用外部CSS样式单。
---------------------本文来自一只野生饭卡丘的CSDN 博客，全文地址请点击：https://blog.csdn.net/Searchin_R ... 885?utm_source=copy

不二晨 · 不二晨

奈斯

帐号		自动登录	找回密码
密码			加入黑马

[学习交流] 【上海校区】前端——使用外部CSS样式单的两种方法：link...

1 个回复