- ID和类
- 使用层叠
- 分组
- 继承
- 上下文选择器
- CSS度量
1.ID
---将ID和选择器结合
新的或已有的ID可以和选择器相结合,从而为样式表添加更多的控制。
下面定义一个基本的H2
/**/
/* Basic heading style*/
h2
{...} {
color: #333;
font-size: 16px;
}
h2
{...} {
color: #333;
font-size: 16px;
}
这个样式表示适合也大多数的<h2>标题的。但是如果要突出主要的<h2>,那么可以用下面的样式表
/*
Adjust the color of h2 when used as a title
*/
h2#title
{
color : #f00 ;
}
h2#title
{
color : #f00 ;
}
这样做html中就可以这样写了
<
h2
>
这里也是Title
</
h2
>
< h2 id ="title" > 这里是主标题Title </ h2 >
< h2 id ="title" > 这里是主标题Title </ h2 >
因为新规则只定义了颜色,并没有重新定义font-size,所以标题的字号不会发生变化。
2.类
结合多个类和ID
<
ul
id
="dranks"
>
< li class ="alcohol" > Beer </ li >
< li class ="alcohol" > Spirits </ li >
< li class ="mixer" > Cola </ li >
< li class ="mixer" > Lemonade </ li >
< li class ="hot" > Tea </ li >
< li class ="hot" > Coffee </ li >
</ ul >
< li class ="alcohol" > Beer </ li >
< li class ="alcohol" > Spirits </ li >
< li class ="mixer" > Cola </ li >
< li class ="mixer" > Lemonade </ li >
< li class ="hot" > Tea </ li >
< li class ="hot" > Coffee </ li >
</ ul >
样式:
/**/
/* Css先声明默认文本的红色。因此,任何不带类属性的项都具有默认的红色文本
----------------------------------------------------*/
ul#drinks
{...} {
color :#F00;
}
/**/ /* 给每个饮料种类的类字体颜色定义了唯一的灰度
-------------------------------------------------*/
.alcohol
{...} {
color :#333;
}
.mixer
{...} {
color :#999;
}
.hot
{...} {
color :#ccc;
}
----------------------------------------------------*/
ul#drinks
{...} {
color :#F00;
}
/**/ /* 给每个饮料种类的类字体颜色定义了唯一的灰度
-------------------------------------------------*/
.alcohol
{...} {
color :#333;
}
.mixer
{...} {
color :#999;
}
.hot
{...} {
color :#ccc;
}
提示:
将类添加到元素之前,必须确定该元素确实需要这个类。
注意:
避免使用类的场合:在页面的主结构元素(eg:页眉,页导航栏)中不推荐使用类。因为这样做将降低设计的灵活性。
文章来源: http://link-to.cn/post/2007/12/CSS核心概念.aspx