1.2 CSS
我们不需要使用复杂的工具来创建CSS文件，可以使用文本编辑器或者Web开发工具来创建。无论采用哪种方式，都是要创建一个以.css为扩展名的文件。
1.2.1 CSS基本语法
CSS的语法由三部分构成：选择符（selector）、属性（property）和属性值（value）。语法格式如下：
选择符 {
属性：属性值
}
选择符用来指定针对哪个HTML标签应用样式表，任何一个HTML标签都可以是一个CSS的选择符。如：
body {
color: blue
}
其中，body是选择符，color是属性，blue是属性值。该规则表示在网页body标签里的内容为蓝色。为选择符指定多个样式，需要在属性之间用分号加以分隔。下面的选择符p就包含两个样式：一个是对齐方式居中；另一个是字体颜色为红。
p {
text-align: center;
color: red
}
可以将相同的属性和属性值赋予多个选择符（组合）。选择符之间用逗号分隔。例如：
h1, h2, h3, h4, h5, h6
{
/∗字体颜色为蓝色∗/
color: blue
}
该规则是将所有正文标题（＜h1＞到＜h6＞）的字体颜色都变成蓝色。“/∗”和“∗/”之间的内容为CSS的注释，但要注意不要将注释嵌入到选择符语句里面。
1.2.2 在网页中添加CSS的方法
CSS在网页中按其位置可以分为三种：内嵌样式、内部样式和外部样式。
1. 内嵌样式
内嵌样式是将样式代码写在标记里面的，使用style作为属性，样式语句作为属性值。内嵌样式只对所在标记有效。如：
<p style="font-size:20pt; color:red">
这个 style定义<p></p>里面的文字是 20pt字号，字体颜色是红色。
</p>
2. 内部样式
内部样式是使用＜style＞标记将样式代码写在HTML的＜head＞＜/head＞里面的。内部样式只对所在网页有效。如：
<html>
<head>
<style type="text/css">
h1 {
border-width:1;
text-align:center;
color:red
}
</style>
</head>
<body>
<h1>这个标题使用了 style。</h1>
</body>
</html>
3. 外部样式
1）链接样式表
将样式代码写在一个以.css为扩展名的CSS文件里，然后在每个需要用到这些样式的网页里引用这个CSS文件。通过HTML的link元素将外部的样式文件链接到网页里。如：
<! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="mystyle.css" type="text/css" />
</head>
<body>
<h1>标题</h1>
<p>段落内容</p>
</body>
</html>
其中，rel和type属性表明这是一个样式文件，href属性指定了外部样式文件的相对地址。外部的样式文件不能含有任何像＜head＞或＜style＞这样的HTML标记，样式表文件仅仅由样式规则或声明组成。mystyle.css文件内容如下：
p{
background: yellow;
}
2）导入样式表
在＜style＞标签内，使用@import导入外部样式文件。例如：
<! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
<! --
@import url（"mystyle.css"）;
h1{color:red}
-->
</style>
</head>
<body>
<h1>标题</h1>
<p>段落内容</p>
</body>
</html>
使用外部样式，相对于内嵌样式和内部样式，有以下优点：
（1）样式代码可以复用。一个外部CSS文件，可以被很多网页共用。
（2）便于修改。如果要修改样式，只需要修改CSS文件，而不需要修改每个网页。
（3）提高网页显示的速度。如果样式写在网页里，会降低网页显示的速度，如果网页引用一个CSS文件，这个CSS文件已经在缓存区（其他网页早已经引用过），网页显示的速度就比较快。
因此，在实际开发中一般使用外部样式，不推荐使用内嵌样式和内部样式。
1.2.3 选择符的分类
1. 普通选择符
任意的HTML标记都可以作为选择符，这样的选择符称为普通选择符。其样式仅仅作用在选择符指定的HTML标记上。如：
p {
color:red
}
2. 类选择符
HTML标记名加上类名，中间用“.”号分开，类名供该HTML标记的class属性使用。希望＜p＞有两种样式：一种是居中对齐；另一种是居右对齐。那么可以写成如下的样式：
p.right {
text-align:right
}
p.center {
text-align:center
}
其中，right和center就是两个class。在网页中可以引用这两个class设置段落的对齐方式。示例代码如下：
<p class="center">这一段内容是居中显示。</p>
<p class="right">这一段内容是居右显示。</p>
省略HTML标记名只写“.类名”表示这个类名适用于所有的HTML标记的class属性，这种选择符称为通用类选择符。
3. id选择符
HTML标记名加上id名，中间用“#”号分开，id名供该HTML标记的id属性使用。如：
p#svp {
font-size:12pt
}
其中，svp是一个id选择符的名字，在网页中可以引用这个id选择符设置＜p＞的样式。示例代码如下：
<p id="svp">这一段话的字体大小为 12pt。</p>
如果省略HTML标记名只写“#id名”表示这个id名适用于所有的HTML标记的id属性，这种选择符称为通用id选择符。
1.2.4 伪类及伪对象
伪类及伪对象由CSS自动支持，属于CSS的一种扩展类型。名称不能被用户自定义，使用时只能按照标准格式进行应用。
1. 超链接伪类
超链接伪类共有4个，它们是a：link、a：visited、a：hover和a：active。a：link表示未被访问的链接，a：visited表示已被访问过的链接，a：hover表示鼠标悬浮在其上的链接，a：active表示鼠标点中激活链接。由于优先级的关系，在写超链接＜a＞的CSS时，一定要按照a：link、a：visited、a：hover、a：active的顺序书写。如：
a:link {color: red} /∗未被访问的链接 红色∗/
a:visited {color: green} /∗已被访问过的链接 绿色∗/
a:hover {color: yellow} /∗鼠标悬浮在其上的链接 黄色∗/
a:active {color: blue} /∗鼠标点中激活的链接 蓝色∗/
2. 常用伪对象
：first-letter设置对象内的第一个字符的样式表属性，如设置段落p标记的第一个字符的样式代码如下：
p:first-letter {
color: red;
font-size: 16px
}
：first-line设置对象内的第一行的样式表属性，如设置body对象里第一行的样式代码如下：
body:first-line {
color: red;
font-size: 16px
}
1.2.5 常见的DIV＋CSS布局类型
DIV＋CSS布局是当前网页布局中最流行的类型之一。
1. DIV
DIV是一个放置内容的容器，用于大面积、大区域的块状排版，样式需要编写CSS来实现。示例代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>div_css1</title>
<style type="text/css">
mainBox {
border: 1px dashed #0099CC;
margin: 3px;
padding: 0px;
float: left;
height: 300px;
width: 192px;
}
mainBox h3 {
float: left;
height: 20px;
width: 179px;
color: #FFFFFF;
padding: 6px 3px 3px 10px;
background-color: #0099CC;
font-size: 16px;
}
mainBox p {
line-height: 1.5em;
text-indent: 2em;
margin: 35px 5px 5px 5px;
}
</style>
</head>
<body>
<div class="mainBox">
<h3>前言</h3>
<p>正文内容</p>
</div>
<div class="mainBox">
<h3>CSS盒子模式</h3>
<p>正文内容</p>
</div>
<div class="mainBox">
<h3>转变思想</h3>
<p>正文内容</p>
</div>
</body>
</html>
上述代码运行效果如图1.11所示。
图1.11 DIV示例
2. 一列固定
宽度的属性值是固定像素，无论怎样改变浏览器窗口的大小，DIV的宽度都不改变。示例代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>div_css2</title>
<style type="text/css">
oneFixed {
}
border: 1px dashed #0099CC;
background-color: cyan;
height: 300px;
width: 300px
</style>
</head>
<body>
<div class="oneFixed">
一列固定宽度
</div>
</body>
</html>
上述代码运行效果如图1.12所示。
图1.12 一列固定宽度
3. 两列固定宽度
两列的布局需要用到两个DIV，宽度的属性值是固定像素。示例代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>div_css3</title>
<style type="text/css">
#left {
border: 1px dashed #0099CC;
background-color: cyan;
height: 200px;
width: 300px;
float: left
}
#right{
border: 1px dashed #0099CC;
background-color: LightSkyBlue;
height: 200px;
width: 300px;
float: left
}
</style>
</head>
<body>
<div id="left">
左边
</div>
<div id="right">
右边
</div>
</body>
</html>
上述代码的运行效果如图1.13所示。
图1.13 两列固定宽度
4. 三列浮动中间宽度自适应
三列浮动中间宽度自适应就是要求左边DIV固定宽度且左显示，右边DIV固定宽度且右显示，中间DIV根据左右DIV的间距变化宽度自适应。示例代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>div_css4</title>
<style type="text/css">
body{
margin: 0px
}
#left {
border: 1px solid #0099CC;
background-color: cyan;
height: 300px;
width: 100px;
position: absolute;
top: 0px;
left: 0px
}
#center{
border: 1px solid #0099CC;
background-color: #7FFFAA;
margin-left: 100px;
margin-right: 100px;
height: 300px
}
#right{
border: 1px solid #0099CC;
background-color: cyan;
height: 300px;
width: 100px;
position: absolute;
right: 0px;
top: 0px
}
</style>
</head>
<body>
<div id="left">
左边
</div>
<div id="center">
中间自适应
</div>
<div id="right">
右边
</div>
</body>
</html>
上述代码的运行效果如图1.14所示。
图1.14 三列浮动中间宽度自适应
5. 三行两列居中高度自适应
三行两列居中高度自适应就是要求整个网页内容居中，第一行DIV固定高度且居顶端显示，第三行DIV固定高度且居底端显示，中间DIV根据内容的变化高度自适应。示例代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>div_css5</title>
<style type="text/css">
body {
background: #999;
text-align: center;
color: #333;
font-family: arial, verdana, sans-serif;
}
#header {
width: 776px;
margin-right: auto;
margin-left: auto;
padding: 0px;
background: #EEE;
height: 60px;
text-align: left;
}
#contain {
margin-right: auto;
margin-left: auto;
width: 776px;
}
#mainbg {
width: 776px;
padding: 0px;
background: #60A179;
float: left;
}
#right {
float: right;
margin: 2px 0px 2px 0px;
padding: 0px;
width: 574px;
background: #ccd2de;
text-align: left;
}
#left {
float: left;
margin: 2px 2px 0px 0px;
padding: 0px;
background: #F2F3F7;
width: 200px;
text-align: left;
}
#footer {
clear: both;
width: 776px;
margin-right: auto;
margin-left: auto;
padding: 0px;
background: #EEE;
height: 60px;
}
.text {
margin: 0px;
padding: 20px;
}
</style>
</head>
<body>
<div id="header">header</div>
<div id="contain">
<div id="mainbg">
<div id="right">
<div class="text">
right
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
</div>
</div>
<div id="left">
<div class="text">left</div>
</div>
</div>
</div>
<div id="footer">footer</div>
</body>
</html>
上述代码的运行效果如图1.15所示。
图1.15 三行两列居中高度自适应
1.2.6 实践环节——页面布局
按照下面的步骤编写网页practice1_2.html。
步骤1：使用DIV定义结构。
一个典型的版面分栏结构包括页头、导航栏、内容、版权。
结构代码如下：
<div id="header"></div>
<div id="navigator"></div>
<div id="content"></div>
<div id="footer"></div>
将这4个盒子装进一个更大的盒子——body中，如下：
<body>
上面 4行代码
</body>
步骤2：定义body的属性。
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0px auto;
height: auto;
width: 800px;
border: 1px solid #006633;
}
步骤3：定义页头（header）的属性。
#header {
height: 100px;
width: 800px;
background-image: url（plane.jpg）;
background-repeat: no-repeat;
margin: 0px 0px 3px 0px;
}
步骤4：定义导航栏（navigator）的属性。
#navigator { /∗定义一个导航栏的长盒子∗/
height: 25px;
width: 800px;
font-size: 14px;
list-style-type: none;
/∗让 nav这个大盒子下面的小盒子 li列表样式不显示，这对于标准浏览器很重要∗/
}
#navigator li {
float: left; /∗让 li这些小盒子左对齐∗/
}
#navigator li a {
color: #000000;
text-decoration: none; /∗让 li盒子里面的链接样式没有下画线∗/
padding-top: 4px;
display: block;
/∗让 li里面的链接块状呈现，就像一个按钮，而不必一定要点中链接文字才起作用∗/
width: 131px;
height: 22px;
text-align: center;
background-color: #009966;
margin-left: 2px;
}
#navigator li a:hover {
background-color: #006633; /∗鼠标移到链接盒子上面时改变盒子背景色∗/
color: #FFFFFF;
}
步骤5：定义内容部分（content）的属性。
#content {
height: auto;
width: 780px;
line-height: 1.5em;
padding: 10px;
}
#content p {
text-indent: 2em;
}
#content h3 {
font-size: 16px;
margin: 10px;
}
步骤6：定义页脚（footer）的属性。
#footer {
height: 50px;
width: 780px;
line-height: 2em;
text-align: center;
background-color: #009966;
padding: 10px;
}
步骤7：定义各标记的边界和填充（开头处）。
∗ {
margin: 0px;
padding: 0px;
}
步骤8：结构代码如下。
<body>
<div id="header"></div>
<div id="navigator">
<ul id="navigator">
<li><a href="#">首页</a></li>
<li><a href="#">文章</a></li>
<li><a href="#">相册</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">论坛</a></li>
<li><a href="#">帮助</a></li>
</ul>
</div>
<div id="content">
<h3>前言</h3>
<p>CSS是英文 Cascading Style Sheet的缩写，又称为“层叠样式表”，简称为样式表。
它是W3C定义的标准，一种用来为结构化文档（如HTML文档）添加样式（字体、间距和背景等）的计算
机语言。</p>
<h3>理解 DIV+CSS布局</h3>
<p>简单地说，DIV+CSS（DIV CSS）被称为“Web标准”中常用术语之一。首先认识 DIV是
用于搭建 HTML网页结构（框架）标签，再认识 CSS是用于创建网页表现（样式/美化）样式表统称，通
过 CSS来设置 DIV标签样式，通常称为 DIV+CSS。
</p>
</div>
<div id="footer">
<p>关于|广告服务|招聘|客服中心|Q Q留言|网站管理|会员登录|购物车</p>
<p>Copyright ©清华大学出版社</p>
</div>
</body>
步骤9：页面运行效果如图1.16所示。
图1.16 DIV＋CSS布局