今天把CSS样式表的分类和选择器分类做一个总结和归纳,供初学者参考:
1.样式表的分类:
A)行类样式:写在HTML标签里面
例如:<h1 style=”样式规则.......”></h1>,此例使用行类样式
B)内嵌样式:写在<head></head>之间
例如:<style type=”text/css”>
H1{
样式规则;
...............................
}
</style>
C)外部样式:写在外部,HTML页面要使用时链接或者导入
例如:链接<link ...........................>
导入:: <style type="text/css">
@import url("style/index.css");
</style>
2.选择器
A)HTML选择器:选择器的名字就是HTML标签名
B)CLASS选择器:以.号开头,引用时使用class=”类名”
C)ID选择器:以#开头,引用时使用ID=”ID名”
3.A标签样式
名称 | 涵义 |
a或a:link | 链接静止状态 |
a:hover | 鼠标悬停 |
a:active | 鼠标正在点击 |
a:visited | 鼠标点击后 |
4.选择器的分类:
1. HTML选择器:选择器的名字就是HTML标签
2. 类选择器:以.号开头命名,引用时使用class=“类名”
3. ID选择器:以#号开头,引用时使用“ID=选择器名”
4.群组选择器: |
例如:h2,li,.myca{ } 表示h2和li和类选择器都采用同一种样式 |
5.包含选择器(也叫后代选择器) |
例如:#d1 ul li{ } 表示包含在d1下面的ul下面,ul下面的li采用此样式 |
6.子元素选择器 |
例如:h1 > em{ color:red } <h1><span>这是<em>第一</em>个H1</span></h1> <h1>这是<em>第二</em>个H1</h1> 表示第2个em会起作用,第一个不会起作用 |
7.相邻兄弟选择器 |
例如:h1+p{ } 表示“紧跟在h1后面的段落起作用,h1和p拥有共同的父亲” |
8.通配符选择器* |
例如:*{ font-size:12px; } 表示网页中所有的元素都采用这种样式 实际应用中,下面的情况比较常见: *{ margin:0; Padding:0 } |