1、构造CSS规则
CSS主要由3个基本部分组成:对象、属性、值。
对象,指定了对哪些网页元素进行设置,也称作:选择器。
HTML的标签样式是通过不同的CSS选择器进行控制的。
选择器有三大种类:基本选择器、复合选择器、特殊选择器。
--基本选择器:标签选择器、id选择器、类选择器。
一个HTML页面由很多不同的标签组成,标签选择器是不可少的,
h1,p,div {
color : red;
font-size : 25px;
}
标签选择器的名称 声明 声明
tagName {属性 : 值; 属性 : 值}
- 类选择器
.className {属性 : 值;属性 : 值;}
类选择器的名称可以有用户自己定义,属性和值都跟标签选择器一样。
.myred {
color : red;
font-size : 20px;
}
.myblue {
color : blue;
font-size : 21px;
}
.mygreen {
color : green;
font-size : 22px;
}
类选择器的使用:
<p class="myred"> class选择器</p>
<p class="myblue"> class选择器</p>
如果某个标签使用特殊的,有别于其他的样式,可以使用类选择器。
- ID选择器
#idName {属性 : 值; 属性 : 值;}
ID 选择器只能在html 页面中使用一次,针对性更强
在html 的标签中只需利用ID 属性,就可以直接调用CSS 中的ID 选择器
<style>
#bold{
font-weight:bold;
}
#green{
font-size:30px;
color:#009900;
}
</style>
<body>
<p id="bold">ID 选择器1</p>
<p id="green">ID 选择器2<p>
<p id="green">ID 选择器3<p>
<p id="bold green">ID 选择器4</p>
</body>
应该养成良好的编写习惯,一个id 只能赋予一个html 标签。
-- 复合选择器
复合选择器就是两个或多个基本选择器,通过不同方式连接而成的选择器,它包括交集选择器、并集选择器和后
代选择器。
- 交集复合选择器由两个选择器直接连接构成,其结果是选中二者各自元素范围的交集。其中第一个必须是标签选
择器,第二个必须是类选择器或者ID 选择器。这两个选择器之间不能有空格,必须连续书写。
这种方式构成的选择器,将选中同时满足前后二者定义的元素,也就是前者说定义的标签类型,并且指定了后者
的类别或者id 的元素,因此被称为交集选择器。
p{...}
.special{...}
p.special{...} // 这就是交集复合选择器
<p class="special">这里就使用了交集选择器</p>
- 与交集选择器一样,还有一种并集选择器,或者称为集体声明。它的结果是同时选中各个基本选择器所选择的范
围。任何形式的选择器(包括标签选择器、类选择器、ID 选择器)都可以作为并集选择器的一部分。
并集选择器是多个选择器通过逗号连接而成的。在声明各种CSS 选择器时,如果某些选择器的风格是完全相同
的,或者部分相同,就可以利用并集选择器同时声明风格相同的CSS 选择器。
h1,h2,h3,h4,p,div{...} // 并集选择器
- 在CSS 选择器中,还可以通过嵌套的方式对特殊位置的HTML 标签进行声明,例如当<p>与</p>之间包含
<span></span>标签时,就可以使用后代选择器进行相应的控制。后代选择器的写法就是把外层的标签写在前面,
内层的标签写在后面,之间用空格分隔,当标签发生嵌套时,内层的标签就成为外层标签的后代。
p span{...}
span{...}