14.2.3　链接外部CSS

CSS外链接是把CSS文件放在网页外面，通过链接使CSS文件对本网页的样式有效，这样的链接称为外链接。

由＜link＞开始，里面的属性有type和rel，其中type和上一节学的一样，设置type为text/css，表示CSS文本，rel是样式，即stylesheet，最重要的是地址，地址用src表示，下面是一个完整外链接，前提是CSS文件和页面是同一目录。

＜link type="text/css"rel="stylesheet"src="style.css"＞

通过标记＜link＞即可把外面的样式文本链接到网页，这也是绝大多数网站所采用的方法，这样更有效率，只完成一张样式表即可控制所有的页面效果。当然，在修改样式表的同时，链接了该样式表的所有网页都会受到影响。这样对整个项目效率会提高，也是为什么网站都采用这个样式的原因。

下面通过内联定义的效果，把代码转换为链接外部CSS形式，首先用上面的＜link＞标记把样式文件链接进来，设置type为样式文本（text/css），别忘记了rel=“stylesheet”，这个参数很关键，＜link＞标记是放在＜head＞＜/head＞中的，即在头部链接外面的样式文件，代码14.4是通过代码14.2转换的HTML代码。

代码14.4　源代码\第14章\链接外部CSS样式.html

—————————————文件名：链接外部CSS样式.html—————————————-

01 ＜html＞

02 ＜head＞

03 ＜title＞链接外部CSS样式＜/title＞

04 ＜！-引入外面链接—＞

05 ＜link type="text/css"rel="stylesheet"href="style.css"/＞

06 ＜/head＞

07 ＜body＞

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

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

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

11 ＜/body＞

12 ＜/html＞

【代码解析】在代码第5行用＜link＞把同目录的CSS文件（即style.css以css为后缀的文件）链接进来，进一步修饰对这个网页，样式代码如代码14.5所示。

代码14.5　源代码\第14章\style.css

———————————————文件名：style.CSS———————————————

01 /以下是css样式，保存为单独文件/

02 #p1

03 {

04 border：2px solid#000000；

05 }

06 #p2

07 {

08 color：red；

09 }

10 .p3

11 {

12 font-size：12px；

13 }

【代码解析】代码14.5实际就是把内部链接CSS样式修饰代码放到了一个文件里。

与链入内部样式一样，链接外面样式中代码所表示的效果如图14.2所示，即用3种不同的形式表示了同一种效果。

注意　当链接外部样式文件时，在＜link＞标记中，一定不要忘记将rel设置成stylesheet，否则，网页链接将失败。