CSS及选择器归纳

来源：互联网发布：手机一碰就响的软件编辑：程序博客网时间：2024/06/06 12:59

今天把ＣＳＳ样式表的分类和选择器分类做一个总结和归纳，供初学者参考：

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

}

0 0