首页 > 代码库 > css 初引

css 初引

<style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Hannotate SC" } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Hannotate SC"; min-height: 17.0px } span.s1 { }</style>

标签选择器:

作用:根据选择器的名称,选中页面中所有的HTML标签

li{

color: blue;

}

类选择器

写法: .class名{}

调用:在HTML标签中,使用class="class名"调用选择器

优先级,class选择器大于标签选择器

*/

.li1{

color: red;

}

id选择器:

写法:#id名{}

调用:在html标签中,用id="id名"来调用

优先级:id选择器大于class选择器

#first{

color: green;

}

选择器注意事项

1.写法不同:class选择器使用.声明,id选择器用#声明

2.优先级不同:作用于同一个标签时:id>class>标签选择器

3.在同一个HTML文件中,id是唯一的,所以id选择器只能作用于一个标签上.但是class可以作用于N个.

选择器的命名规则

只能有字母/数字/下划线/减号组成

开头不能是数字

 

通用选择器:

写法: *{}

作用:选中页面,所有标签,包括html

优先级:最低,小于标签选择器

*{

background-color: blueviolet;

}

选择器优先级排序:

* 首选遵循的是近者优先的原则,哪个选择器作用于最里层标签,哪个生效

* 当作用于同一层标签时,优先级排序↓

* id>class>标签>通用选择器(作用于同一个标签上)

* 权重:

* 标签选择器 1

* class选择器 10

* id选择器 100

* 行级样式表 1000

* 例如:

* .div1 #div2 .div3 #div4 #li{}

* .div1 #div2 #div3 #div4 #li{}

* 如果计算的优先级相同,后写的选择器生效。

* 注意:只有交集 后代 子代选择器才参与优先级的累加,而并集选择器相当于写了多个选择器,所以不参与总的累加

 

ul li{

color: aquamarine;

}

交集选择器

写法:两个选择器紧挨着没有任何分隔,选择器1选择器2选择器3....{}

作用效果:一个标签要满足交集选择器,则必须满足交集选择器中出现的所有选择器  

#first.li1{

color: aliceblue;

}

并集选择器

*写法:选择器1,选择器2,..{}

*生效规则:只要满足并集选择器的任意一个,即可生效。 

   

 

#first,.li1{

color: cadetblue;

}

后代选择器

写法:选择器1 选择器2 选择器3{}选择器之间用空格隔开

生效规则:必须满足后一个选择器是前一个选择器的后代才可以生效.(子代/孙代/重孙..)

ul .li1{

color: red;

}

子代选择器

写法:选择器1>选择器2>选择器3{}选择器之间用>隔开

生效规则:必须满足后一个选择器是前一个选择器的直接子代才可以生效,隔代即中间包含其它标签不会生效.

ul>.li1{

color: red;

}

引入css的三种方式

1.行级样式表:在HTML标签中,使用styl=""形式

缺点:不符合w3c内容和表现分离的要求

代码杂乱,不利于后期维护

2.内部样式表:在header标签中使用<style>标签包裹css代码

<head>

<style type="text/css">

</style>

</head>

3.外部样式表:讲css代码,全部写到一个css文件中,使用link标签,将html文件与css文件关联。

<link rel="stylesheet" href="http://www.mamicode.com/css/.." />

css 初引