对三种样式表优先级的认识

引入css样式表有三种:
1.**内部样式表**    
内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义,其基本语法格式如下:
<head>
<style type="text/CSS">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
style>
head>

 2.**行内式**
        是通过标签的style属性来设置元素的样式,其基本语法格式如下:

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 

3.外部样式表
是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中,
通过link标签将外部样式表文件链接到HTML文档中,其基本语法格式如下:


测试优先级.html
代码如下:




Document





看我是什么颜色


知道我是什么颜色了吧


外部颜色.css
代码如下:
div{
color: red;
}

运行结果:
这里写图片描述

当我把代码片与代码片进行互换位置后,结果如下:
这里写图片描述

从这里可以看出行内式优先级是最高的,而内部样式表和外部样式表是看位置情况而定,由于HTML自顶向下执行,后执行的会把前面的覆盖掉。

你可能感兴趣的:(学习)