CSS文件

时间：2022-10-15 百科知识版权反馈

【摘要】：链接CSS文件需要在网页head头部进行。将CSS文件导入HTML网页以后，网页body主体内的各种标签，就可以很方便地应用CSS文件里已定义的各种样式，使用方式与1.6.2节所述相同。这一方面增加了网页文件的大小，另一方面省略了查找CSS文件所需要的时间。当CSS文件里的样式不多，且被反复应用时，采用导入CSS文件的方法可提高网页访问的速度。CSS文件将许多CSS定义在一个文件里，通过链接或导入网页的方式，来控制多个网页内容的显示样式。

1.6.3　CSS文件

1. CSS文件的建立

可以将一系列CSS定义集中起来，不包括任何HTML标签，单独保存为一个文件，文件扩展名为.css。然后采用链接或导入的方式，能够使这个CSS文件被网站内所有网页文件所共享。

用记事本编辑一个CSS文件type1.css，内容如下。

-------------------------清单1-11　type1.css-------------------------

body,td,th {　　　　　　　　　 /∗ 定义body,td,th标签的共同样式 ∗/

font-size: 14px;　　　　　　　/∗ 定义字大小为14像素 ∗/

color: #0000ff;　　　　　　　　/∗ 定义字颜色为蓝色 ∗/

}

body {　　　　　　　　　　　　　/∗ 定义body标签样式 ∗/

background-color: #e0e0e0;　　　 /∗ 背景色为e0e0e0灰度色 ∗/

margin-left: 5px;　　　　　　　　 /∗ 左边空5像素 ∗/

margin-top: 5px;　　　　　　　　　 /∗ 上边空5像素 ∗/

margin-right: 5px;　　　　　　　　　/∗ 右边空5像素 ∗/

margin-bottom: 5px;　　　　　　　　/∗ 下边空5像素 ∗/

}

.text1 {　　　　　　　　　　　　　　 /∗ 定义一个类样式 ∗/

font-family: "宋体";　　　　　　　　 /∗ 定义字体为宋体 ∗/

font-size: 15px;　　　　　　　　　　　/∗ 定义字大小为15像素 ∗/

color: blue;　　　　　　　　　　　　　/∗ 定义字颜色为蓝色 ∗/

}

#title1　　　　　　　　　　　　　　　/∗ 定义一个id样式 ∗/

{

font-size:150%;　　　　　　　　　　　　/∗ 定义字大小为默认大小的150% ∗/

font-weight:bold;　　　　　　　　　　　/∗ 定义字特性为加粗 ∗/

color:#ff0033;　　　　　　　　　　　　 /∗ 定义字颜色为ff0033红色 ∗/

background-color:rgb(255,255,255);　　　/∗ 定义背景颜色是白色 ∗/

}

--------------------------------------------------------------------

2. CSS文件的应用

若在HTML网页的head头部元素中，将已经建立CSS文件链接或导入进来，则CSS文件里所有定义的CSS，就能够被网页元素直接使用。

1)链接CSS文件与样式应用

链接CSS文件需要在网页head头部进行。设CSS文件所在的路径和文件名是path/filename.css，则在HTML网页头部链接CSS文件的格式如下：

<head>

</head>

若在网页里链接了CSS文件，则网页body主体内各种标签元素就可以很方便地应用CSS文件里已定义的各种样式，使用方式与1.6.2节所讲的方式一样。当用户浏览网页时，元素中有应用CSS的地方，就会自动地到CSS文件里去查找相应的样式，并发送给用户浏览器，控制对应元素的显示样式。

若有一个网页文件1-11.htm(与type1.css在同一目录下)，其内容如下。

---------------------------清单1-12　1-11.htm------------------------

<html>

<head>

</head>

<body>

<p>床前明月光，疑是地上霜。</p>

举头望明月，低头思故乡。

</div>

<p>

</table>

</p>

</body>

<html>

--------------------------------------------------------------------

则由1-11.htm可知，在这个网页文件的body主体部分，应用了链接CSS文件定义的标签样式、类样式和ID样式。浏览1-11.htm网页文件，效果如图1-15所示。

网页文件中有“<p id="title1">静夜思</p>”和“<capital id="title1">课程表</capital>”，两处都用到了同一个ID样式“title”(type1.css文件中的#title样式)。但从效果图1-15看来，ID样式“title”只对第一次使用它的p元素(文字“静夜思”)产生了样式控制，对第二次使用它的capital元素(文字“课程表”)没有产生控制。这说明ID样式只能对第一个使用它的标签元素产生控制作用，对后面应用它的其他元素没有控制作用。

图1-15　链接/导入外部CSS文件效果

网页也应用了样式的继承。从CSS文件type1.css中可以看到，没有给p标签定义样式，网页文件1-11.htm中的p元素：“<p>床前明月光，疑是地上霜。</p>”是按照父元素div的显示样式(type1.css文件中的.text1样式)来显示的。

2)导入CSS文件及样式应用

导入CSS文件也是在HTML网页的head头部进行的。设CSS文件所在的路径和文件名是path/filename.css，则在HTML网页头部导入CSS文件的格式如下：

<head>

<!--

@import url("path/filename.css");

定义当前网页的其他样式

-->

</style>

</head>

在head头部元素的style元素里导入CSS文件后，还可以继续在style标签里定义当前网页的其他样式。按照层叠样式表的规则，如果导入的CSS文件和网页里定义的CSS规则相冲突，则使用外部的样式表。

将CSS文件导入HTML网页以后，网页body主体内的各种标签，就可以很方便地应用CSS文件里已定义的各种样式，使用方式与1.6.2节所述相同。由于CSS文件的全部内容已导入到当前网页里，当用户浏览网页时，元素应用的CSS就在本网页内，不需要到CSS文件中去查找。这一方面增加了网页文件的大小，另一方面省略了查找CSS文件所需要的时间。当CSS文件里的样式不多，且被反复应用时，采用导入CSS文件的方法可提高网页访问的速度。

将例1-11.htm网页文件的head头部元素修改为

<head>

<!--

@import url("type1.css");

-->

</style>

</head>

修改后的文件为1-11_1.htm。浏览该网页文件，效果与图1-15所示的相同。

CSS文件将许多CSS定义在一个文件里，通过链接或导入网页的方式，来控制多个网页内容的显示样式。当网页很多时，可大大提高网页编辑的效率。如果要改变网页的显示样式，只要修改CSS文件就可以了。

链接与引入CSS文件的区别是：链接样式文件，浏览网页时每次使用CSS，都要到样式文件里去查找已定义的CSS；导入CSS文件后，当用户浏览网页时，服务器便将整个CSS文件全部导进当前网页里来，应用CSS时，不需要再到CSS文件里去查找了。

免责声明：以上内容源自网络，版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。

我要反馈