[导入]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