css的四种使用方式
方式一:内联样式
内联样式,也叫行内样式,指的是直接在style属性中添加CSS
示例:
<DIV style="display: none;background:red"></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文件,避免或者少使用其他的三种方式