28.4　布局常用选择符

本书主要讲解DIV+CSS布局，而DIV是HTML中的标记，CSS是控制DIV等其他标记的语句，要使两者相关联，就得使用一定的协议，使两者之间能够“通信”。从前面的学习中，可以知道起“通信”作用的是这些选择符。

在HTML中的DIV标记中，参数ID和CLASS用来设置关系CSS样式，其中ID所设置的标识符在CSS中与ID选择符相关联，而CLASS设置的标识符与CLASS选择符相关联，这样CSS就可以控制DIV中的效果，在布局中，ID选择符和CLASS选择符是最常用的，下面分别来介绍。

28.4.1　ID选择符

ID选择符是指在DOM中用惟一标识符的ID为选择符，ID标识符以“#”打头，其后接ID，注意ID标识符不能在样式中出现两次或两次以上，如果出现，系统会以第一次出现的为准，其他的被忽视掉，完整语法如下。

ID标识符

{

/样式规则/

}

以上代码表示ID选择符的语法，ID选择符与HTML标记中的DIV设置的ID标识符一样的，即表示该ID的样式，下面代码来实现HTML中的ID与CSS代码中的ID选择符用法，效果如图28.4所示。

代码28.4　源代码\第28章\ID选择符.html

——————————————-文件名：ID选择符.html———————————————

01 ＜html＞

02 ＜head＞

03 ＜title＞ID选择符＜/title＞

04 ＜style type="text/css"＞

05 #id1

06 {

07 width：100px；

08 height：50px；

09 border：1px solid red；

10 }

11 #id2

12 {

13 width：200px；

14 height：60px；

15 border：1px solid blue；

16 }

17 ＜/style＞

18 ＜/head＞

19 ＜body＞

20 ＜div id="id1"＞

21 ID1的层

22 ＜/div＞

23 ＜div id="id2"＞

24 ID2的层

25 ＜/div＞

26 ＜/body＞

27 ＜/html＞

【代码解析】代码第20、23行用两个DIV对象设置了两个ID值，在CSS中用ID选择符与之相关联。在代码第20行ID为id1的ID选择符控制HTML中的id1层，而在代码第23行ID为id2的ID选择符控制HTML中的id2层，用CSS设置不同对象的不同边框颜色，ID选择符在网页中的效果如图28.4所示。

图　28.4　ID选择符用法

说明　正常时为div#标识符，表示ID选择符的标识，其后接的标识符是HTML中的对象名称。