14.2.2　链入内部CSS

链入内部CSS样式比内联样式的修饰范围要大许多，与内联样式范围在本对象不一样的是，链入内部样式所在的范围在整个网页中，这个形式在有的大型网站采用比较多，加载整个网页更快。

CSS内链接是将＜style＞＜/style＞标记对放在＜head＞＜/head＞中，在＜style＞中有一个类型属性type，后面接text/css，表示CSS文本，完整语法如下。

＜style type="text/css"＞

/这里写CSS内容/

＜/style＞

在＜head＞＜/head＞中放入＜style＞＜/style＞文件中本网页的样式，如果使每张网页的层都由各网页中的＜style＞＜/style＞修饰。

在＜div＞中，可以对＜div＞的ID和CLASS进行修饰。ID表示层的名称，CLASS表示类，ID在每个网页中只能用一次，而CLASS可以重复使用，不限次数，表示该类。同理，在＜div＞中的名称或类如何在CSS中定义呢？下面来回答这个问题，ID在CSS中用#加ID名再接一对大括号组成，大括号里面用来写样式表内容，同理，CSS中可以表示CLASS的样式，与ID不同的是CLASS用“.”表示，点后面接名称和大括号，下面是语法形式。

＜style type="text/css"＞

myid

{

/以下是样式代码，被style标记对包围着/

width：200px；

height：300px；

/设置字体颜色/

color：#cccccc；

}

.myclass

{

width：200px；

height：300px；

/设置字体颜色/

color：#cccccc；

}

＜/style＞

在＜style＞＜/style＞标记对中，用#myid表示层中的ID，用myclass表示层中的class类，对应的层如下。

＜！-设置层之间关联—＞

＜div id="myid"＞这里是ID，一张页面只能出现一次＜/div＞

＜div class="myclass"＞这里是class，可以出现多次。＜/div＞

＜div class="myclass"＞又出现一次。＜/div＞

上面的代码说明了在CSS控制中，通过对层中的ID或是CLASS来控制，用内部链接CSS方式可以修饰标记，可以用CSS控制标记的效果。下面介绍将内联定义的代码改成链入内部CSS的方式，如代码14.3所示。

代码14.3　源代码\第14章\链入内部CSS样式.html

—————————————文件名：链入内部CSS样式.html—————————————-

01 ＜html＞

02 ＜head＞

03 ＜title＞链入内部CSS样式＜/title＞

04 ＜style type="text/css"＞

05 /内部CSS样式/

06 #p1

07 {

08 /设置边框/

09 border：2px solid#000000；

10 }

11 #p2

12 {

13 /设置字体颜色/

14 color：red；

15 }

16 .p3

17 {

18 /设置字体大小/

19 font-size：12px；

20 }

21 ＜/style＞

22 ＜/head＞

23 ＜body＞

24 ＜！-设置段落的标记—＞

25 ＜p id="p1"＞HTML+CSS完全自学手册

26 ＜p id="p2"＞HTML+CSS完全自学手册

27 ＜p class="p3"＞HTML+CSS完全自学手册

28 ＜/body＞

29 ＜/html＞

【代码解析】在代码第23～28行的＜body＞＜/body＞标记内的对象（＜p＞），其内用ID和CLASS关联了样式中的代码，其中ID对应样式名称前用“#”表示，CLASS对应样式名前用“.”表示，效果与图14.2所示一样。

注意　网页由＜html＞＜/html＞总标记对组成，里面包含＜head＞＜/head＞和＜body＞＜/body＞，CSS内链接的＜style＞＜/style＞就放在＜head＞＜/head＞里。