CSS教程系列四——ID和类

尽管所有的Html标记都可以用作选择符,但是现实中我们仍需要实现更加精细,更加复杂的目的。例如:有三个段落,我们希望每个段落有不同的颜色。以前我们用类型选择符定义段落颜色,代码会这样写:p {color:red;} 但是这条规则只能让所有的段落字体变成红色。这时我们就用到了ID和类。

1.ID和类的规则及使用方法

(1)定义ID

#名称 {属性:值;}

(2)定义类

.名称 {属性:值;}

它们跟以前的选择符格式上差不多,ID前面加一个#号,类名前面加一个点(半角)。

2.ID和类的命名

在命名上,ID和类是随意的,你几乎可以将它们命名为任何的名字。比如上面的三个段落,我们把第一段的类名命名为:first,代码就要这样写,

.first {color:red;}

但为了规范我们最好使用有意义容易理解的名字,让名称尽可能与表现方式无关。书写上一般采用驼峰式大小写,即多个单词的情况下,首单词无大写字母,其后单词首字母大写,如topNav,leftSidebar。

3.ID和类的使用

我们在CSS中定义了类或ID,那么我们怎么把它应用到Html中呢?

<P class="first">第一个段落</P>

若当初我们定义的是ID,#first {color:red;}。那么现在我们应该这样写:

<P id="first">第一个段落</P>

这样应用了之后,只有第一个段落的颜色为红色,其它段落便不受First类影响。

4.ID和类的区别

看了上面的几个例子之后,你可能会觉得ID和类除了书写上的区别之外,功能上好像没有区别。的确,它们在功能上也没有区别,它们的区别就是ID在页面上必须是唯一的。而类可以被任意使用。例如我们定义一个ID,一个类。

#first {color:red;}

.second {color:green;}

first因为前面有个#号所以属于ID,Second则属于类。则:

<P id="first">段落一</P>
<P class="second">段落二</P>
<P class="second">段落三</P>

上面的代码中“Second”这个类被使用了两次,说明类可以被多次使用,但ID在页面中只能被使用一次。

我们一般用ID来标识持久的结构性元素。使用更多的是类。

5.防止类的滥用

类是非常灵活和强大的,正因如此,它也极易被过度的使用。在实际中我们应尽可能少的使用类。大多数时候我们所创建的文档中只需要添加几个类。

2 条评论:

Unknown 说...

呵呵,你怎么找到我百度空间了,呵呵~~

Unknown 说...

对了,每次评论时都会 出现一个“安全提示” 说网页不但包含安全信息还包含不安信息的提示,怎么让这个东西不每次都蹦出来啊
用ie。