css引⼊的⽅式有哪些_四种css的引⼊⽅式与特点
在⽹页中css主要负责html⽂档的样式显⽰，⽬前css主要有4种引⼊⽅式：⾏内式、内嵌式、导⼊式、链接式。
1.⾏内式
⾏内式也叫内联样式，是指标记的style属性中设定CSS样式，这种⽅式没有体现出CSS的优势，不推荐使⽤。例如：
<div ></div>
style定义的CSS样式直接嵌在HTML⽂档中，当项⽬中某个CSS样式出现问题(所谓的BUG)，开发者很难确定错误到底是出现在HTML中还是在CSS⽂件中，这会给开发者团队带来巨⼤的困扰。
2.内嵌式
HTML提供了style标签以控制页⾯的显⽰样式，style元素位于head标签内部，type属性指定CSS代码的⽂档类型。例如：
css文件怎么写<style type="css/text">
.text{
font-size: 20px;
padding-left: o;
margin: 0 auto;
}
</style>
<body>
<div class="text"></div>
</body>
这种⽅式和⾏内式【内联样式】⼀样，会造成代码混乱，不易查错，也会给⽂档加载带来巨⼤负担。
3.导⼊式
导⼊外部样式单的功能与链接外部样式单的功能差不多，只是语法上存在差别。导⼊外部样式单主要通过@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去控制的。
4.链接式
也就是将⼀个.css⽂件引⼊到HTML⽂件中，但它与导⼊式不同的是链接式使⽤HTML规则引⼊外部CSS⽂件，它在⽹页的<head></head>标签对中使⽤<link>标记来引⼊外部样式表⽂件，使⽤语法如下：
<link type="text/css" rel="stylesheet" href="CSS样式⽂件的地址">
必须有href属性，⽤于指定需要引⼊的CSS⽂件的路径。使⽤链接式时与导⼊式不同的是它会以⽹页⽂件主体装载前装载CSS⽂件，因此显⽰出来的⽹页从⼀开始就是带样式的效果的，它不会象导⼊式那样先显⽰⽆样式的⽹页，然后再显⽰有样式的⽹页，这是链接式的优点。
总结
使⽤CSS样式时，尽量将CSS代码与HTML代码分离，css的引⼊最好使⽤链接式，即最好使⽤引⼊外部CSS⽂件的⽅式。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。