概述
CSS样式单导入和优缺点
CSS样式单可以控制HTML文档的显示，在HTML文档中，CSS主要有四种引入方式：链接外部样式文件，导入外部样式文件，使用内部样式定义以及内联样式。
1.引入外部样式文件
外部引入CSS样式文件是通过标签实现的，它只能位于HTML文档的head标签内，且必须有href属性，用于指定需要引入的CSS文件的绝对路径
<link type="text/css" rel="stylesheet" href="CSS样式文件的绝对地址">link元素中type用于规定链接文档的MIME类型，rel属性用于规定被链接文档与当前文档之间的关系，如alternate用于定义交替出现的链接，appendix定义文档的附加信息等，此外还有一些可选属性，用于做一些除加载CSS文件的其他事情，有兴趣的同学可以多找找资料。
link元素是XHMTL中的标签，当HTML页面被渲染时，link引用的CSS文件会被同时加载，我们也可以通过JavaScript控制DOM去改变link元素的CSS内容，如
<div id="test"></div>
<script type="text/javascript">
var div = document.getElenemtByid("test")
div.style.backgroundColor = "yellow";
</script>2.导入外部样式单
导入外部样式单的功能与链接外部样式单的功能差不多，只是语法上存在差别。导入外部样式单主要通过@import方式导入CSS文件，有两种导入方式
a、在style元素中导入CSS文件
<style type="text/css">
@import "CSS样式文件的绝对地址";
@import url("样式文件的绝对地址");
</style> url可省略，所以只需指定样式单地址即可，在标准CSS的语法中，@import还有sMedia属性，用于指定CSS的可作用的设备，目前还没得到广泛的支持，所以sMedia可以不写。
b、在CSS文件中再导入CSS文件
/*某个CSS文件*/
@import "另一个CSS文件的地址";
.test{
width: 100px;
height: 100px;
line-height: 20px;
background-color: red;
}在CSS文件中再导入CSS文件，会给服务器造成太大的文件请求压力，最好不要这样做。
@import是由CSS提供的一种导入样式的方式，当页面被加载时，@import会等到页面全部被加载完成时再加载CSS样式，所以在页面还未加载完成期间，页面还没有CSS样式效果，会导致“屏闪”，通过@import导入的CSS样式是无法用DOM去控制的。
3.使用内联样式
内联样式即只在某个元素内使用style属性，它只针对这个元素，而不会影响整个文件，所以可以控制某个HTML元素的外观表现，适合用于代码调试
<div style="color: #ccc; width: 200px; height: 100px;"></div>style是一种HTML元素共有的属性，在项目开发中最好不要使用style属性，因为style定义的CSS样式直接嵌在HTML文档中，当项目中某个CSS样式出现问题(所谓的BUG)，开发者很难确定错误到底是出现在HTML中还是在CSS文件中，这会给开发者团队带来巨大的困扰（ps：其他的也一样，比如尽量不要在JS代码中写入CSS样式或者添加HTML元素；不要在HTML文件中使用script内嵌JS代码，最好的解决方法是隐藏元素JS再控制显示此元素，或者JS改变CSS的class以改变样式）。
4.使用内部CSS样式
HTML还提供了style标签以控制页面的显示样式，如下
<style type="css/text">
.text{
font-size: 20px;
padding-left: o;
margin: 0 auto;
}
</style>
<body>
<div class="text"></div>
</body>style元素位于head标签内部，type属性指定CSS代码的文档类型。使用内部CSS样式必须为有选择器，常见的选择器有ID选择器，类（伪类CSS3新增）选择器，元素选择器，子选择器，属性选择器等，优先级ID > 类（伪类）> 元素（内联样式定义的CSS样式优先级最高，大于ID，但它不是一种选择器，所以此处没拿来比较），其他的选择器越详细，优先级越高，如属性选择器比元素选择器更能精确定位，故属性选择器优先级高。
style元素和内联样式一样，会造成代码混乱，不易查错，也会给文档加载带来巨大负担。
总结：使用CSS样式时，尽量将CSS代码与HTML代码分离，即最好使用引入外部CSS文件的方式。
最后
以上就是开放板栗为你收集整理的CSS的四种引入方式与特点的全部内容，希望文章能够帮你解决CSS的四种引入方式与特点所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复