css的四种使⽤⽅式
记住我
⽅式⼀:内联样式
内联样式,也叫⾏内样式,指的是直接在style属性中添加CSS
⽰例:
<DIV ></DIV>
不建议使⽤这种⽅式,它只能改变当前标签的样式,如果想要多个<DIV>拥有相同的样式,你不得不重复得为每⼀个<DIV>添加相同得样式如果想要修改⼀种样式,⼜不得不修改所有style中的代码,很显然,内联⽅式的使⽤会导致HTML代码变得冗长,使得⽹页难以维护.
⽅式⼆:嵌⼊样式
嵌⼊⽅式是指的在HTML中的<style>标签中书写CSS代码
⽰例:
<head>
<style>
.content {
background: red;
}
</style>
</head>
嵌⼊式的CSS只对当前⽹页有效,因为CSS代码是在HTML⽂件中,所以会使得代码⽐较集中,当我们写模板⽹页时会⽐较有利,因为查看模板代码的⼈可以⼀⽬了然的的查看HTML结构和CSS样式,因为嵌⼊的CSS只对当前的HTML⽂件有效,所以当多个页⾯要使⽤相同的CSS代码时,这样写会导致代码冗余,当页⾯较多时也不利于维护
⽅式三:链接样式
链接⽅式是指在HTML引⼊外部的CSS⽂件
⽰例:
<head>
<link rel="stylesheet" type="text/CSS" href="style.CSS">
</head>
这是最常见的也是最推荐的引⼊CSS样式,使⽤这种⽅式,所有的CSS代码只存在单独的CSS⽂件中,所以具有良好的维护性.并且CSS代码只存在于CSS⽂件中CSS⽂件会在第⼀次加载时引⼊,以后切换页⾯时只需要加载HTML⽂件
⽅式四:导⼊样式
导⼊样式指的是使⽤CSS规则引⼊外部的CSS⽂件
⽰例:
<style>
@import url(style.CSS);
</style>
或者写在CSS 样式中
@charset "utf-8";
@import url(style.CSS);
*{ margin:0; padding:0;}
.notice-link a{ color:#999;}
⽐较导⼊⽅式与链接⽅式
link是属于HTML,通过<link>标签中的href属性来引⼊外部⽂件,⽽@import属于CSS导致语句应该写在CSS中,并且写在CSS的头部,否则⽆法正确的导⼊外部⽂件;
@import是CSS2.1才出现的概念,所以如果浏览器版本⽐较低,⽆法正确导⼊外部样式⽂件
当HTML⽂件被加载时,link引⽤的⽂件会同时被加载,⽽@import引⽤的⽂件会等页⾯加载完成后再被加载,
建议:尽量使⽤<link>标签导⼊外部CSS⽂件,避免或者少使⽤其他的三种⽅式