您的位置：首页 > 运维架构 > 网站架构

一起学WEB（七） 打扮你的网页（二）——通过CSS控制网站整体风格

2017-02-07 15:05 288 查看

打扮你的网页（二）——通过CSS控制网站整体风格

    今天继续CSS，上一次我们讲了通过在HTML文件中嵌入CSS代码的方式控制网页的外观。这一次我们利用链接独立的CSS文件的形式控制网页的外观。

    与将CSS代码相比，利用独立的CSS文件有几点好处：

        1.有利于保持代码的整洁。当网页需要大量CSS代码时，存放于单独的文件不会影响HTML文件的可读性，并且做到了表现和结构的分离（HTML负责控制网页的结构，CSS控制网页的外观表现）。

        2.减少了网页中的重复代码。如果多个网页采用相同的外观风格，同样的代码不必重复多次，链接到同一个（一组）CSS文件即可。

        3.有利于保持网站风格统一。同一个网站中的网页往往都采用相同的外观风格（这样可以保持外观的整体统一，不会显得格格不入），所有采用同一
4000
个（一组）CSS文件即可。若需要改变网站外观，直接更改CSS文件即可，即可继续保持网站风格统一，又提高了工作效率，并能避免遗漏。

   下面我们对上一次的代码做一些修改。首先，建立名为lounge.css的文件，保存到lounge.html同一个文件夹中，将上一讲中<style>元素中的代码复制过来（不包括<style>标记本身，他是HTML中的一个标记，不是CSS代码）。
h1,h2 {
font-family: sans-serif;
color: gray;
}
h1 {
border-bottom: 1px solid black;
}
p {
color: maroon;
}
lounge.css代码

然后对lounge.html的代码做相应修改，将<style>元素及其内容删除，并添加一个<link>元素，代码如下：
<head>
<meta charset="utf-8">
<title>Head First Lounge</title>
<link type="text/css" rel="stylesheet" href="lounge.css"> <!-- 删除了<style>元素并增加了<link>元素 -->
</head>
lounge.html的head部分代码（其余部分没有改变）

    我们可以用浏览器看一下，lounge网页的风格和上一次一样，两种方法达到了相同的效果。



  我们来讲一下<link>元素，这个元素用来连接HTML文件以外的信息。首先是type属性，他说明了要链接的文件的类型（“text/css”表示为文本文件），这个属性到了HTML5以后变成可一个可选属性，可写可不写。rel属性说明了链接的文件与HTML之间的关系，“stylesheet”说明是一个网页的样式表。href指定了要链接的具体文件。
   现在我们在elixir.html和directions.html文件中分别加入一个<link>元素，位置与lounge.html相同，具体属性设置如下：
<link type="text/css" rel="stylesheet" href="../lounge.css">
   仅有href属性的值不同，“../lounge.css”表明lounge.css文件在elixir.html和directions.html文件的父文件夹中（我们沿用了上几讲中的文件组织结构）。
   好，我们看一下网站的整体效果，是不是保持了一致。一级二级标题字体为sans-serif、颜色为灰色，一级标题带有下划线（通过设置下边框实现），内容的字体为棕色。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  学习 html css 一起学WEB WEB
相关文章推荐
新的分享
章节导航