HTML引入CSS样式三种方法及优先级
方法
css的样式引用由3种方式。分别为内联定义、链入内部CSS和链入外部CSS。有一点注意,样式表放在不同的地方,产生作用的范围不同(以下会说明)。
内联定义
内联定义,即在对象的标记内使用对象的style属性定义适用的样式表属性,格式定义为 :<div style="内容"><div>,如下示例
浏览器此时显示内容
链入内部CSS
CSS内链接是由<style></style>标记对放在<head></head>中,在<style>中有一个类型属性type,后面接test/css,表示CSS文本,语法格式如下:
<style type="text/css">
/*这里写CSS内容*/
</style>
示例如下:
效果图如下:
链接外部CSS
css外链接是把CSS文件放在网页外面,通过链接<link>使CSS文件对本网页的样式有效,就相当于C语言的.h文件喽。
<link>里面的属性有type、rel、href,其中type固定为text/css,rel(即样式表)固定为stylesheet,href自然指的就是css文件的地址了,语法格式为:
<link type="text/css" rel="stylesheet" href="css文件的存放地址">
示例代码如下:
web.css内容为
效果如下
三种样式范围及优先级
简而言之吧,
链接外部CSS:作用在引用该CSS文件的网页中。
链接内部CSS:只作用在该CSS文件的网页中。
内联定义:只作用在定义该样式的div层中,对其它层无效。
三种样式优先级
不知道以“优先级”这个词来形容是否合适,专业的如果看到莫怪。下面以代码效果说明:
我在外部CSS文件内定义class的div1背景颜色为红色,内部CSS定义为黑色,内联定义为绿色,效果图如下:
显示为绿色,好吧,内联定义优先级最高。
然后我再把内联定义去掉,比较一下内部CSS和外部CSS的优先级,如下
此时效果图如下:
恩,就这样了,内部CSS次之,外部CSS优先级最低。重要的话说三遍,优先级:内联定义最高、内部CSS次之、外部CSS优先级最低。或许我提优先级的时候,很多人感觉想想也应该是这样。恩,我也这样想的,不过还是验证一下呗,大周末的也没事儿,斗地主也没豆子了。
后语
脑袋里还有些对div模糊的,想写,不过下节写background的知识。