CSS:Cascading Stytle Sheets;层叠样式表
样式定义如何显示HTML元素,样式存储在样式表内,通过样式表实现内容与表现分离。外部样式表常常被存储在CSS文件里面。所以引用CSS的第一种方法就是引用CSS文件中的样式。
利用头部的link标签引入外部样式表
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
浏览器从文件mystyle.css中读取到样式,并根据此文件格式化文件。.css文件可以用文本编辑很方便。
插播一个CSS的使用语法
CSS语法包括选择器,加一条或多条声明。且声明之间用分号隔开,并被大括号括住。
p {color:red;text-align:center;}
dadads{XXXXXX;YYYYYY}
上面的代码是对于段落进行样式的设置,颜色为红色,行文居中。选择器也可以是自定义的,在下面的id和class选择器可以说到
利用style标签在元素里面或者头部定义内部样式表
-
头部的方式
用下面的代码实现对文档和文档中的段落标签做设置
<style>
body{background-color: aqua;}
p{color: brown;}
</style>
- 元素内部设置
直接在表里面添加属性style就可以对此标签做设置
<h2 style="color: blue;width: 250px;">这是一个二级标题,以及下面段落的说明</h2>
利用id选择器和class选择器设置CSS
<style>
#para1
{
text-align:center;
color:red;
}
.center
{
text-align:center;
}
</style>
用#+样式名来设置id选择器,当然在文档中,标签头里面用id="样式名"来设置此标签的样式
用.+样式名来设置class选择器,在文档中,在标签头里面用class="样式名"来设置标签的样式
<body>
<h1 id="para1">标题居中</h1>
<p class="center">段落居中。</p>
</body>
多重样式则么办
加入内部样式和外部样式同时对一个标签设置样式,那么内部样式会继承外部样式表的设置,相同属性内部样式表优先,不同的样式表继承添加上。
样式表的优先级
优先规则
- 最近的祖先样式比其他的祖先样式高
下面的代码最终显示内容是黑色的,由son类选择器设置
<div style="color: red">
<div style="color: blue">
<div class="son">dasdads</div>
</div>
</div>
- 直接样式比祖先样式高
下面的代码最后显示内容是蓝色的
<div style="color: red">
<div class="son" style="color: blue">dasda</div>
</div>
- 优先级关系:内联样式 (标签头里面:style="")> ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
- 外部样式表和内部样式表发生冲突时,样式表在HTML文件中越在下面优先级越高。