[导入]CSS核心概念

• ID和类
• 使用层叠
• 分组
• 继承
• 上下文选择器
• CSS度量

1.ID

---将ID和选择器结合

      新的或已有的ID可以和选择器相结合，从而为样式表添加更多的控制。

下面定义一个基本的H2

/**/ /* Basic heading style*/
h2
{...} {
color: #333;
font-size: 16px;
}

这个样式表示适合也大多数的<h2>标题的。但是如果要突出主要的<h2>,那么可以用下面的样式表

/* Adjust the color of h2 when used as a title */
h2#title
{
color : #f00 ;
}

这样做html中就可以这样写了

< h2 > 这里也是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 >

 

样式：

/**/ /* Css先声明默认文本的红色。因此，任何不带类属性的项都具有默认的红色文本
----------------------------------------------------*/
ul#drinks
{...} {
color :#F00;
}
/**/ /* 给每个饮料种类的类字体颜色定义了唯一的灰度
-------------------------------------------------*/
.alcohol
{...} {
color :#333;
}
.mixer
{...} {
color :#999;
}
.hot
{...} {
color :#ccc;
}

提示：

将类添加到元素之前，必须确定该元素确实需要这个类。

 

注意：

避免使用类的场合：在页面的主结构元素（eg：页眉，页导航栏）中不推荐使用类。因为这样做将降低设计的灵活性。

文章来源: http://link-to.cn/post/2007/12/CSS核心概念.aspx

转载于:https://www.cnblogs.com/sliuqin/archive/2007/12/10/1018810.html