上一次我们终于把网页的主体结构搞定了，有标题、有内容、还有图片，感觉还不错，不过如果能让网页更加漂亮岂不更好。这就要靠CSS了。
我们在最初的时候曾经介绍过CSS，不过也仅是介绍而已。这一次我们要正式把CSS应用到网页的制作当中。本次我们先从单个网页开始，下一次我们会讲如何将CSS应用到整个网站，保持整体风格一致。
在网页中应用CSS共有两种方法：
1.将CSS直接写入到网页的HTML中，这次我们就先讲这种方法。因为这种方法最直观、简单，只要在现有的HTML中加了一部分内容。但是他只能控制单个网页的样式，不利于保持网页整体风格，而且如果样式内容较多，也不利于保持代码的整洁。
2.将CSS代码保存在专门的CSS文件中。有一定规模的网站都使用这种方式，有利于保持网站风格的一致，也减少了网页中的重复代码。他和第一种方法其实差别不大，我们先从基础的开始。
还是直接上代码：
<!doctype html><html> <head> <meta charset="utf-8"> <title>Head First Lounge</title> <style> h1,h2 { font-family: sans-serif; color: gray; } h1 { border-bottom: 1px solid black; } p { color: maroon; } </style> </head> <body> <h1>Welcome to the New and ImPRoved Head First Lounge</h1> <p> <img src="images/drinks.gif" alt="Drinks"> </p> <p> Join us any evening for refreshing <a href="beverages/elixir.html">elixirs</a>, conversation and maybe a game or two of <em>Dance Dance Revolution</em>. Wireless access is always provided; BYOWS (Bring your own Web server). </p> <h2>Directions</h2> <p> You'll find us right in the center of downtown Webville. If you need help finding us, check out our <a href="about/directions.html">detailed directions</a>. Come join us! </p> </body><html>lounge.html代码 再看一下网页效果，如图：
好，我们把网页中与CSS有关的部分拿出来：
<style> h1,h2 { font-family: sans-serif; //设置字体为sans-serif color: gray; //字体颜色为灰色 } h1 { border-bottom: 1px solid black; //一级标题的下边框属性，1像素宽、视线、黑色 } p { color: maroon; //段落内容字体为棕色 }</style> 嗯，在HTML的<head>元素中增加了一个<style>元素，其中的内容就是CSS，可以看到他的语法与HTML不同。
先引进一个概念：选择器。这段代码中一共有3个选择器“h1,h2”、“h1”、“p”，他们分别与HTML文件中的元素对应，所有第一个选择器同时选择了一级标题与二级标题（元素之间用逗号隔开），第二个选择器选择了一级标题，第三个对应了段落元素。大括号内部是所指定的样式，他的语法是一种属性名与属性值相对应的形式，属性名与属性值通过冒号隔开，每个属性以分号结束。通过英文就可以知道每个属性是什么意思。
这里提示一下，如果代码中下文的选择器与上文的选择器设置了相同的元素的属性，但值不相同，则下文的属性值会覆盖上文的属性值。例如：
<style> h1,h2 { font-family: sans-serif; color: gray; } h1 { border-bottom: 1px solid black; color: red; }</style> 代码中两次设置了h1元素的color属性，最终h1（一级标题）的字体颜色将为红色。
另外，属性值在元素与形成嵌套关系的子元素之间是可以继承的。举个最简单的例子：
<style> body { color: red; }</style> 以上文的代码为例，<body>的子元素有<h1>、<h2>、<p>，<p>的子元素又有<em>，这样网页中所有这些元素的字体都将变为红色（<a>元素除外，他有自身的特定颜色属性，需要专门的修改）。
现在我们已经完成了通过HTML内嵌CSS代码的方式对单个网页风格的修改，下一次我们将用链接CSS文件的方式实现对网站整体风格的控制。
下期：打扮你的网页（二）——通过CSS控制网站整体风格
新闻热点
疑难解答
