CSS(级联样式表)
CSS概念
Cascading Style Sheets (CSS)是一种样式表语言,定义HTML文件的外观,定义布局.
CSS与HTML的关系
HTML是网页的内容;CSS定义页面的样式.
CSS的三类样式表:
1)行间样式表
概念:在HTMl文档的body标签中.
样板:<标签名称 style=“属性1:属性值1;属性2:属性值2;属性3:属性值3”>
2)内联样式表
概念:在HTML文档的head标签中,用style标签定义.
<!--
<style>
标签名称{
属性1:属性值1;属性2:属性值2}
body {
background-color:yellow;}
p {
color:blue;}
</style>
-->
3)外部样式表
概念:放在.css为扩展名的文件中,直接用标签定义,后在通过link标签链接到HTML文档中.(使用率最高)
<!--
标签名称{
属性1:属性值1;属性2:属性值2}
<link href="" rel="stylesheet"> (rel=relationship)
-->
CSS选择器
概念:将分离后的样式表与网页内容联系,用于实现对HTML的控制.
分类:
1)标签选择器:
可以选择页面中的所有标签.
2)类选择器:
通过标签的class属性值选中标签
.row0{color:red;}
3)id选择器:
#top{color:blue;}
4)通配选择器:
优先级最低的 但是高优先级的只能覆盖相同属性,不能覆盖特有的
*{ }
选择器的优先级(低到高):
通用选择器(*)<元素(类型)选择器<类选择器<属性选择器<伪类<ID 选择器<内联样式
5)选择器的组合:
.row0,.row1{text-align:center}
6)后代选择器:
用于选中指定标签的指定后代标签
语法: 祖先标签 后代标签{}
7)子标签选择器:
用于选中指定父标签的指定子标签
语法: 父标签 > 子标签{}
8)相邻标签选择器:
选中指定标签的相邻标签
语法:选择相邻选择器:标签+相邻标签{}
9)兄弟选择器:
选中