网页设计与网站建设从入门到精通最新章节_龙马高新教育著

第2章
精通网站样式

本章导读

由于使用table表格布局页面时的可读性比较差，而且产生代码量也比较多，所以目前网站建设更倾向于使用DIV+CSS技术。DIV+CSS是WEB设计标准，它是一种网页的布局方法。与传统中通过表格（table）布局定位的方式不同，它可以实现网页页面内容与表现相分离。本章将重点学习使用DIV+CSS设置网页样式的技术。

思维导图

2.1 DIV CSS初体验

DIV和CSS到底是什么呢？

2.1.1 什么是DIV CSS

DIV+CSS(DIV CSS)是“WEB标准”中常用术语之一。DIV，它是用于搭建html网页结构（框架）的标签，像<b>、<h1>、<span>等html标签一样。CSS，它是用于创建网页表现（样式/美化）样式表的统称，通过CSS来设置DIV标签样式，这一切常常称为DIV+CSS。

<DIV>标记早在HTML3.0时代就已经出现过，但那时并不常用。直到CSS的出现才逐渐发挥出它的优势。

传统的HTML3.2/4.0标签里既有控制结构的标签，如<p>；又有控制表现的标签，如<font>；还有本意用于结构后来被滥用于控制表现的标签，如<table>。结构标签与表现标签混杂在一起。

2.1.2 了解DIV与CSS结合的优势

下面以一个设计1级标题为例，讲解一下DIV与CSS结合的优势。

对于1级标题，传统的表格布局代码如下。

<table width="100%"border="0"cellpadding="0">
<tr>
<td><font face="Arial"size="4"color="#000000"><b>height</b></font></td>
</tr>
</table>
<! --下面是实现下线的表格-->
<table width="100%"border="0"cellspacing="1"cellpadding="0">
<tr>
<td height="2"bgcolor="#FF9900"></td>
</tr>
</table>

可以看出不仅结构和表现混杂在一起，而且页面内到处都是为了实现装饰线而插入的表格代码。于是网站制作者往往会遇到如下问题。

● 改版：例如需要把标题文字替换成红色，下边线变成1px灰色的虚线，那么制作者可能就要一页一页地修改。CSS就是用来解决“批量修改表现”的问题。广泛被制作者接受的CSS属性，包括控制字体的大小颜色、超链接的效果、表格的背景色等。

● 数据的利用：从本质上讲，所有的页面信息都是数据，例如对CSS所有属性的解释，就可以建立一个数据库，有数据就存在数据查询、处理和交换的问题。由于结构和表现混杂在一起，装饰图片、内容被层层嵌套的表格拆分。

在上面的这个实例中，从哪里开始是标题？哪里开始是说明？哪些是附加信息不需要打印？如果只靠软件是无法判断的，唯一的方法是人工判断、手工处理。这要如何解决呢？解决的办法就是使结构清晰化，将内容、结构与表现相分离。

对于1级标题的实现如下所示。

<h1>height</h1>

同时，在CSS内定义<h1>的样式如下。

h1{
font:bold 16px Arial;
color:#000;
border-bottom:2px solid#f90:
}

这样，当需要修改外观的时候，例如，需要把标题文字替换成红色，下画线变成1px灰色的虚线，只需要修改相应的CSS即可，而不用修改HTML文档，如下所示。

h1{
font:bold 16px Arial;
color:#f00;
border-bottom:1px dashed#666:
}

如果为了实现特定的效果，还需要做进一步的处理。

|提示|

虽然DIV+CSS在网页布局方面具有很大的优势，但在使用的时候仍需注意以下3个方面。

① 对于CSS的高度依赖会使得网页设计变得比较复杂。相对于表格布局来说，DIV+CSS要比表格定位复杂很多，即使网站设计高手也很容易出现问题，更不要说初学者了。因此DIV+CSS应酌情而用。

② CSS文件异常将会影响到整个网站的正常浏览。CSS网站制作的设计元素通常放在外部文件中，这些文件可能比较庞大且复杂，如果CSS文件调用出现异常，那么整个网站将会变得惨不忍睹，因此要避免那些设计复杂的CSS页面或重复性定义样式的出现。

③ 设计的CSS网站浏览器兼容性问题比较突出。基于HTML4.0的网页设计在IE4.0之后的版本中几乎不存在浏览器兼容性问题，但CSS+DIV设计的网站在IE浏览器里面正常显示的页面，到火狐浏览器（FireFox）中却可能面目全非。因此，使用CSS+DIV布局网站页面时也需要注意浏览器的支持问题。

2.2 CSS基本语法

在进一步学习DIV CSS之前，我们先要了解CSS中常用的基本语法。

2.2.1 编辑CSS样式的字体格式

在HTML中，CSS字体属性用于定义文字的字体、大小、粗细的表现等。

通常使用font-family定义使用什么字体，font-size定义字体大小，font-style定义斜体字，font-variant定义小型的大写字体，font-weight定义字体的粗细，font统一定义字体的所有属性。字体属性如下。

● font-family属性：定义使用的字体。

● font-size属性：定义字体的大小。

● font-style属性：定义字体显示的方式。

● font-variant属性：定义小型的大写字母字体，对中文没什么意义。

● font-weight属性：定义字体的粗细。

1. font-family属性

下面通过一个例子来认识font-family。

比如中文的宋体，英文的Arial，可以定义多种字体连在一起，使用“, ”（逗号）分隔。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS font-family属性示例</title>
<style type="text/css" media="all">
p#songti{font-family:"宋体"; }
p#Arial{font-family:Arial; }
p#all{font-family:"宋体", Arial; }
</style>
</head>
<body>
<p id="songti">使用宋体．</p>
<p id="Arial">使用arial字体．</p>
</body>
</html>

2. font-size属性

中文常用的字体大小是12px，像文章的标题等应该显示大字体，但此时不应使用字体大小属性，应使用h1、h2等HTML标签。

HTML的big、small标签定义了大字体和小字体的文字，此标签已经被W3C抛弃，真正符合标准网页设计的显示文字大小的方法是使用font-size CSS属性。在浏览器中可以使用Ctrl++增大字体，Ctrl--缩小字体。

下面通过一个例子来认识font-size。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS font-size属性绝对字体尺寸示例</title>
<style type="text/css" media="all">
p{font-size:12px; }
p#xxsmall{font-size:xx-small; }
p#xsmall{font-size:x-small; }
p#small{font-size:small; }
p#medium{font-size:medium; }
p#xlarge{font-size:x-large; }
p#xxlarge{font-size:xx-large; }
</style>
</head>
<body>
<p id="xxsmall">font-size中的xxsmall字体</p>
<p id="xsmall">font-size中的xsmall字体</p>
<p id="small">font-size中的small字体</p>
<p id="medium">font-size中的medium字体</p>
<p id="xlarge">font-size中的xlarge字体</p>
<p id="xxlarge">font-size中的xxlarge字体</p>
</body>
</html>

3. font-style属性

网页中的字体样式都是不固定的，开发者可以用font-style来实现目的，其属性包含如下内容。

● normal：正常的字体，即浏览器默认状态。

● italic：斜体，对于没有斜体变量的特殊字体，将应用oblique。

● oblique：倾斜的字体，即没有斜体变量。

下面通过一个例子来认识font-style。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS font-style属性示例</title>
<style type="text/css" media="all">
p#normal{font-style:normal; }
p#italic{font-style:italic; }
p#oblique{font-style:oblique; }
</style>
</head>
<body>
<p id="normal">正常字体．</p><p id="italic">斜体．</p><p id="oblique">斜体．</p>
</body>
</html>

4. font-variant属性

在网页中常常可以碰到需要输入内容的地方，如果输入汉字的话是没问题的，可是当需要输入英文时，那么它的大小写是令我们头疼的问题。在CSS中可以通过font-variant的几个属性来实现输入时不受其限制的功能，其属性如下。

● Normal：正常的字体，即浏览器默认状态。

● small-caps：定义小型的大写字母。

下面通过一个例子来认识font-variant。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS font-variant属性示例</title>
<style type="text/css" media="all">
p#small-caps{font-variant:small-caps; }
p#uppercase{text-transform:uppercase; }
</style>
</head>
<body>
<p id="small-caps">The quick brown fox jumps over the lazy dog.</p>
<p id="uppercase">The quick brown fox jumps over the lazy dog.</p>
</body>
</html>

2.2.2 编辑CSS样式的文本格式

CSS文本属性用于定义文字、空格、单词、段落的样式。

通常使用letter-spacing属性控制字母之间的距离，word-spacing属性控制文字之间的距离，text-decoration属性定义文本是否有下画线，text-transform属性控制英文的大小写， text-align属性定义文本的对齐方式，text-indent属性定义文本的首行缩进，white-space属性定义文本与文档源代码的关系。

文本属性如下。

● letter-spacing属性：定义文本中字母的间距（中文为文字的间距）。

● word-spacing属性：定义以空格间隔文字的间距（就是空格本身的宽度）。

● text-decoration属性：定义文本是否有画线以及画线的方式。

● text-transform属性：定义文本的大小写状态，此属性对中文无意义。

● text-align属性：定义文本的对齐方式。

● text-indent属性：定义文本的首行缩进（在首行文字之前插入指定的长度）。

1. letter-spacing属性

该属性在应用时有两种情况，如下所示。

● Normal：默认间距（主要是根据用户所使用的浏览器等设备）。

● <length>：由浮点数字和单位标识符组成的长度值，允许为负值。

下面通过一个例子来认识letter-spacing。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS letter-spacing属性示例</title>
<style type="text/css" media="all">
.ls3px{letter-spacing: 3px; }
.lsn3px{letter-spacing: -3px; }
</style>
</head>
<body>
<p class="ls3px">
<strong><ahref="http://www.dreamdu.com/css/property_letter-spacing/">letter-spacing</a>示例：</strong>
<p>All i have to do, is learn CSS.(仔细看是字母之间的距离，不是空格本身的宽度。)</p>
</p>
<p>
<strong><ahref="http://www.dreamdu.com/css/property_letter-spacing/">letter-spacing</a>示例：</strong>
<p class="lsn3px">All i have to do, is learn CSS.</p>
</p>
</body>
</html>

2. word-spacing属性

该属性在应用时有两种情况，如下所示。

● Normal：默认间距，即浏览器的默认间距。

● <length>：由浮点数字和单位标识符组成的长度值，允许为负值。

下面通过一个例子来认识word-spacing。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS word-spacing属性示例</title>
<style type="text/css" media="all">
.ws30{word-spacing: 30px; }
.wsn30{word-spacing: -10px; }
</style>
</head>
<body><p><strong>word-spacing 示例：</strong>
<p class="ws30">All i have to do, is learn CSS.</p></p><p>
<strong>word-spacing 示例：</strong><p class="wsn30">All i have to do, is learn
CSS.</p>
</p>
</body>
</html>

3. text-decoration属性

该属性在应用时有4种情况，如下所示。

● underline：定义有下画线的文本。

● overline：定义有上画线的文本。

● line-through：定义直线穿过文本。

● blink：定义闪烁的文本。

下面通过一个例子来认识text-decoration。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS text-decoration属性示例</title>
<style type="text/css" media="all">
p#line-through{text-decoration: line-through; }
</style>
</head>
<body>
<p id="line-through">示例<a href="#">CSS 教程</a>, <strong><a
href="#">text-decoration</a></strong>示例，属性值为line-through中画线．</p>
</body>
</html>

4. text-transform属性

该属性在应用时有4种情况，如下所示。

● Capitalize：首字母大写。

● Uppercase：将所有设定此值的字母变为大写。

● Lowercase：将所有设定此值的字母变为小写。

● None：正常无变化，即输入状态。

下面通过一个例子来认识text-transform。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS text-transform属性示例</title>
<style type="text/css" media="all">
p#capitalize{text-transform: capitalize; }
p#uppercase{text-transform: uppercase; }
p#lowercase{text-transform: lowercase; }
</style>
</head>
<body>
<p id="capitalize">hello world</p><p id="uppercase">hello world</p>
<p id="lowercase">HELLO WORLD</p>
</body>
</html>

5. text-align属性

该属性在应用时有4种情况，如下所示。

● Left：对于当前块的位置为左对齐。

● Right：对于当前块的位置为右对齐。

● Center：对于当前块的位置为居中。

● Justify：对齐每行的文字。

下面通过一个例子来认识text-align。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS text-align属性示例</title>
<style type="text/css" media="all">
p#left{text-align: left; }
</style>
</head>
<body>
<p id="left">left 左对齐</p>
</body>
</html>

6. text-indent属性

该属性在应用时有2种情况，如下所示。

● <length>：百分比数字由浮点数字和单位标识符组成的长度值，允许为负值。

● <percentage>：百分比表示法。

下面通过一个例子来认识text-indent。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS text-indent属性示例</title>
<style type="text/css" media="all">
p#indent{text-indent:2em; top:10px; }
p#unindent{text-indent:-2em; top:210px; }
p{width:150px; margin:3em; }
</style>
</head>
<body>
<p id="indent">示例<a href="#">CSS 教程</a>, <strong><a
href="#">text-indent</a></strong>示例，正值向后缩，负值向前进．text-indent属性可以定义首
行的缩进，是我们经常使用到的CSS属性．</p>
<p id="unindent">示例<a href="#">CSS 教程</a>, <strong><a
href="#">text-indent</a></strong>示例，正值向后缩，负值向前进．</p>
</body>
</html>

2.2.3 编辑CSS样式的背景格式

背景（background），文字颜色可以使用color属性，但是包含文字的p段落、div层、page页面等的颜色与背景图片可以使用background等属性。

通常使用background-color定义背景颜色， background-image定义背景图片， background-repeat定义背景图片的重复方式，background-position定义背景图片的位置， background-attachment定义背景图片随滚动轴的移动方式。

背景属性如下。

● background-color属性：背景色，定义背景的颜色。

● background-image属性：定义背景图片。

● background-repeat属性：定义背景图片的重复方式。

● background-position属性：定义背景图片的位置。

● background-attachment属性：定义背景图片随滚动轴的移动方式。

1. background-color属性

在CSS中可以定义背景颜色，内容没有覆盖的地方就按照设置的背景颜色显示，其值如下。

● <color>：颜色表示法，可以是数值表示法，也可以是颜色名称。

● Transparent：背景色透明。

下面通过一个例子来认识background-color。

定义网页的背景使用绿色，内容白字黑底，示例代码如下。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS background-color属性示例</title>
<style type="text/css" media="all">
body{background-color:green; }
h1{color:white; background-color:black; }
</style>
</head>
<body>
<h1>白字黑底</h1>
</body>
</html>

2. background-image属性

在CSS中还可以设置背景图像，其值如下。

● <uri>：使用绝对或相对地址指定背景图像。

● None：将背景设置为无背景。

下面通过一个例子来认识background-image。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS background-image属性示例</title>
<style type="text/css" media="all">
.para{background-image:none; width:200px; height:70px; }
.div{width:200px; color:#FFF; font-size:40px;
font-weight:bold; height:200px; background-image:url(images/small.jpg); }
</style>
</head>
<body>
<div class="para">div 段落中没有背景图片</div>
<div class="div">div中有背景图片</div>
</body>
</html>

3. background-repeat属性

在默认情况下，图像会自动向水平和竖直两个方向平铺。如果不希望平铺，或者希望沿着一个方向平铺，可以使用background-repeat属性实现。该属性可以设置为4种平铺方式。

● Repeat：平铺整个页面，左右与上下。

● repeat-x：在x轴上平铺，左右。

● repeat-y：在y轴上平铺，上下。

● no-repeat：当背景大小比所要填充背景的块小时，图片不重复。

下面通过一个例子来认识background-repeat。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS background-repeat属性示例</title>
<style type="text/css" media="all">
body{background-image:url('images/small.jpg'); background-repeat:no-repeat; }
p{background-image:url('images/small.jpg'); background-repeat:repeat-y; backgroun
d-position:right; top:200px; left:200px; width:300px; height:300px; border:1px solid
black; margin-left:150px; }
</style>
</head>
<body>
<p>示例 CSS 教程，repeat-y 竖着重复的背景(div的右侧).</p>
</body>
</html>

4. background-position属性

将标题局中或者右对齐可以使用background-postion属性，其值如下。

（1）水平方向

● left：对于当前填充背景位置居左。

● center：对于当前填充背景位置居中。

● right：对于当前填充背景位置居右。

（2）垂直方向

● top：对于当前填充背景位置居上。

● center：对于当前填充背景位置居中。

● bottom：对于当前填充背景位置居下。

（3）垂直与水平的组合

. x-% y-%；
. x-pos y-pos；

下面通过一个例子来认识background-position。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS background-position属性示例</title>
<style type="text/css" media="all">
body{background-image:url('images/small.jpg'); background-repeat:no-repeat; }
p{background-image:url('images/small.jpg'); background-position:right
bottom ; background-repeat:no-repeat; border:1px solid
black; width:400px; height:200px; margin-left:130px; }
div{background-image:url('images/small.jpg'); background-position:50%
20% ; background-repeat:no-repeat; border:1px solid
black; width:400px; height:150px; }
</style>
</head>
<body>
<p>p 段落中右下角显示橙色的点．</p>
<div>div中距左上角x 轴50%, y 轴20%的位置显示橙色的点．</div>
</body>
</html>

5. background-attachment属性

设置或检索背景图像是随对象内容滚动还是固定的，其值如下。

● Scroll：随着页面的滚动，背景图片将移动。

● Fixed：随着页面的滚动，背景图片不会移动。

下面通过一个例子来认识background-attachment。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS background-attachment属性示例</title>
<style type="text/css" media="all">
body{background:url('images/list-orange.png'); background-attachment:fixed; backg
round-repeat:repeat-x; background-position:center
center; position:absolute; height:400px; }
</style>
</head>
<body>
<p>拖动滚动条，并且注意中间有一条橙色线并不会随滚动条的下移而上移．</p>
</body>
</html>

2.2.4 编辑CSS链接格式

在HTML语言中，超链接是通过标记<a>来实现的，链接的具体地址则是利用<a>标记的href属性，代码如下所示。

<a href="http://www.baidu.com">链接文本</a>

在浏览器默认的浏览方式下，超链接统一为蓝色并且有下画线，被点击过的超链接则为紫色并且也有下画线。这种最基本的超链接样式现在已经无法满足广大设计师的需求。通过CSS可以设置超链接的各种属性，而且通过伪类别还可以制作很多动态效果。首先用最简单的方法去掉超链接的下画线，代码如下所示。

/*超链接样式* /
a{text-decoration:none; margin-left:20px; } /*去掉下画线*/

可制作动态效果的CSS伪类别属性如下。

● a:link：超链接的普通样式，即正常浏览状态的样式。

● a:visited：被点击过的超链接的样式。

● a:hover：鼠标指针经过超链接上时的样式。

● a:active：在超链接上单击时，即“当前激活”时超链接的样式。

2.2.5 编辑CSS样式的列表属性

CSS列表属性可以改变HTML 列表的显示方式。列表的样式通常使用list-style-type属性来定义，list-style-image属性定义列表样式的图片，list-style-position属性定义列表样式的位置，list-style属性统一定义列表样式的几个属性。

通常的列表主要采用<ul>或者<ol>标记，然后配合<li>标记罗列各个项目。CSS列表有以下几个常见属性。

1. list-style-image属性

list-style-image设置或检索作为对象的列表项标记的图像，其值如下。

● URL：一般是一个图片的网址。

● None：不指定图像。

示例代码如下。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS list-style-image属性示例</title>
<style type="text/css" media="all">
ul{list-style-image: url("images/list-orange.png"); }
</style>
</head>
<body>
<ul>
<li>使用图片显示列表样式</li>
<li>本例中使用了list-orange.png图片</li>
<li>我们还可以使用list-green.png top.png或up.png图片</li>
<li>大家可以尝试修改下面的代码</li>
</ul>
</body>
</html>

2. list-style-position属性

list-style-position设置或检索作为对象的列表项标记如何根据文本排列，其值如下。

● Inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐。

● Outside：列表项目标记放置在文本以外，且环绕文本不根据标记对齐。

示例代码如下。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS list-style-position属性示例</title>
<style type="text/css" media="all">
ul#inside{list-style-position: inside; list-style-image:
url("images/list-orange.png"); }
ul#outside{list-style-position: outside; list-style-image:
url("images/list-green.png"); }
p{padding: 0; margin: 0; }
li{border:1px solid green; }
</style>
</head>
<body>
<p>内部模式</p>
<ul id="inside">
<li>内部模式 inside</li>
<li>示例 XHTML 教程．</li>
<li>示例 CSS 教程．</li>
<li>示例 JAVASCRIPT 教程．</li>
</ul>
<p>外部模式</p>
<ul id="outside">
<li>外部模式 outside</li>
<li>示例 XHTML 教程．</li>
<li>示例 CSS 教程．</li>
<li>示例 JAVASCRIPT 教程．</li>
</ul>
</body>
</html>

3. list-style-type属性

list-style-type设置或检索对象的列表项所使用的预设标记，其值如下。

● Disc：点。

● Circle：圆圈。

● Square：正方形。

● Decimal：数字。

● None：无（取消所有的list样式）。

示例代码如下。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS list-style-type属性示例</title>
<style type="text/css" media="all">
ul{list-style-type: disc; }
</style>
</head>
<body>
<ul>
<li>正常模式</li>
<li>示例 XHTML 教程．</li>
<li>示例 CSS 教程．</li>
<li>示例 JAVASCRIPT 教程．</li>
</ul>
</body>
</html>

2.2.6 编辑CSS样式的区块属性

块级元素就是一个方块，像段落一样，默认占据一行位置。内联元素又叫行内元素。顾名思义，它只能放在行内，就像一个单词一样不会造成前后换行，起辅助作用。一般的块级元素包括段落<p>、标题<h1><h2>、列表<ul><ol><li>、表格<table>、表单<form>、DIV<div>和BODY<body>等元素。

内联元素包括表单元素<input>、超级链接<a>、图像<img>、<span>等。块级元素的显著特点是：它都是从一个新行开始显示，而且其后的元素也需另起一行显示。

下面通过一个示例来看一下块级元素与内联元素的区别。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS list-style-type属性示例</title>
<style type="text/css" media="all">
ul{list-style-type: disc; }
img{ width:100px; height:70px; }
</style>
</head>
<body>
<p>标记不同行：</p>
<div><imgsrc="flower.jpg" /></div>
<div><imgsrc="flower.jpg" /></div>
<div><imgsrc="flower.jpg" /></div>
<p>标记同一行：</p>
<span><imgsrc="flower.jpg" /></span>
<span><imgsrc="flower.jpg" /></span>
<span><imgsrc="flower.jpg" /></span>
</body>
</html>

在前面示例中，3个div元素各占一行，相当于在它之前和之后各插入了一个换行，而内联元素span没对显示效果造成任何影响，这就是块级元素和内联元素的区别。正因为有了这些元素，才使网页变得丰富多彩。

如果没有CSS的作用，块级元素会以每次换行的方式一直往下排。而有了CSS以后，可以改变这种HTML的默认布局模式，把块级元素摆放到想要的位置上，而不是每次都另起一行。也就是说，可以用CSS的display:inline将块级元素改变为内联元素，也可以用display:block将内联元素改变为块级元素。

代码修改如下。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS list-style-type属性示例</title>
<style type="text/css" media="all">
ul{list-style-type: disc; }
img{ width:100px; height:70px; }
</style>
</head>
<body>
<p>标记同一行：</p>
<div style="display:inline"><imgsrc="flower.jpg" /></div>
<div style="display:inline"><imgsrc="flower.jpg" /></div>
<div style="display:inline"><imgsrc="flower.jpg" /></div>
<p>标记不同行：</p>
<span style="display:block"><imgsrc="flower.jpg" /></span>
<span style="display:block"><imgsrc="flower.jpg" /></span>
<span style="display:block"><imgsrc="flower.jpg" /></span>
</body>
</html>

由此可以看出，display属性改变了块级元素与行内元素默认的排列方式。另外，display属性值为none的话，可以使该元素隐藏，并且不会占据空间。代码如下。

<html>
<head>
<title>display属性示例</title>
<style type=" text/ css">
div{width:100px; height:50px; border:1px solid red}
</style>
</head>
<body>
<div>第一个块级元素</div>
<div style="display:none">第二个块级元素</div>
<div >第三个块级元素</div>
</body>
</html>

2.2.7 编辑CSS样式的宽高属性

2.2.6小节介绍了块级元素与行内元素的区别，本节介绍两者宽高属性的区别，块级元素可以设置宽度与高度，但行内元素是不能设置的。例如，span元素是行内元素，给span设置宽、高属性代码如下。

<html>
<head>
<title>宽高属性示例</title>
<style type=" text/ css">
span{ background:#CCC }
.special{ width:100px; height:50px; background:#CCC}
</style>
</head>
<body>
<span class="special">这是span 元素1</span>
<span>这是span 元素2</span>
</body>
</html>

在这个示例中，显示的结果是设置了宽高属性span元素1与没有设置宽高属性的span元素2，显示效果是一样的。因此，行内元素不能设置宽高属性。如果把span元素改为块级元素，效果会如何呢？

根据2.2.6小节所学内容，可以通过设置display属性值为block来使行内元素变为块级元素，代码如下。

<html>
<head>
<title>宽高属性示例</title>
<style type=" text/ css">
span{ background:#CCC; display:block ; border:1px solid #036}
.special{ width:200px; height:50px; background:#CCC}
</style>
</head>
<body>
<span class="special">这是span 元素1</span>
<span>这是span 元素2</span>
</body>
</html>

在浏览器的输出中，可以看出，当把span元素变为块级元素后，类为special的span元素1按照所设置的宽高属性显示，而span元素2 则按默认状态占据一行显示。

2.2.8 编辑CSS边框属性

border一般用于分隔不同的元素。border的属性主要有3个，即colo（r颜色）、width（粗细）和style（样式）。在使用CSS来设置边框时，可以分别使用border-color、border-width和border-style属性设置它们。

● border-color：设定border的颜色。通常情况下颜色值为十六进制数，如红色为“#ff0000”，当然也可以是颜色的英语单词，如red, yellow等。

● border-width：设定border的粗细程度，可以设为thin、medium、thick或者具体的数值，单位为px，如5px等。border默认的宽度值为medium，一般浏览器将其解析为2px。

● border-style：设定border的样式，none（无边框线）、 dotted（由点组成的虚线）、dashed（由短线组成的虚线）、 solid（实线）、double（双线，双线宽度加上它们之间的空白部分的宽度就等于border-width定义的宽度）、groove（根据颜色画出3D沟槽状的边框）、ridge（根据颜色画出3D脊状的边框）、inset（根据颜色画出3D内嵌边框，颜色较深）、outset（根据颜色画出3D外嵌边框，颜色较浅）。

|提示|

border-style属性的默认值为none，因此边框要想显示出来，必须设置border-style值。

为了更清楚地看到这些样式的效果，通过一个例子来展示，其代码如下。

<html>
<head>
<title>border 样式示例</title>
<style type=" text/ css">
div{ width:300px; height:30px; margin-top:10px;
border-width:5px; border-color:green }
</style>
</head>
<body>
<div style="border-style:dashed">边框为虚线</div>
<div style="border-style:dotted">边框为点线</div>
<div style="border-style:double">边框为双线</div>
<div style="border-style:groove">边框为3D 沟槽状线</div>
<div style="border-style:inset">边框为3D内嵌边框线</div>
<div style="border-style:outset">边框为3D 外嵌边框线</div>
<div style="border-style:ridge">边框为3D 脊状线</div>
<div style="border-style:solid">边框为实线</div>
</body>
</html>

在上面的例子中，分别设置了border-color、border-width和border-style属性，其效果是对上下左右4条边同时产生作用。在实际应用中，除了采用这种方式，还可以分别对4条边框设置不同的属性值，方法是按照规定的顺序，给出2个、3个、4个属性值，分别代表不同的含义。给出2个属性值：前者表示上下边框的属性，后者表示左右边框的属性。给出3个属性值，前者表示上边框的属性，中间的数值表示左右边框的属性，后者表示下边框的属性。给出4个属性值，依次表示上、右、下、左边框的属性，即顺时针排序。

示例代码如下。

<html>
<head>
<title>border 样式示例</title>
<style type=" text/ css">
div{ border-width:5px 8px; border-color:green yellow red; border-style:dotted
dashed solid double }
</style>
</head>
<body>
<div>设置边框</div>
</body>
</html>

给DIV设置的样式为上下边框宽度为5px，左右边框宽度为8px；上边框的颜色为绿色，左右边框的颜色为黄色，下边框的颜色为红色；从上边框开始，按照顺时针方向，四条边框的样式分别为点线、虚线、实线和双线。

如果某元素的4条边框的设置都一样，还可以简写为：

border:5px solid red;

如果想对某一条边框单独设置，例如：

border-left:5px solid red;

这样就可以只设置左边框为红色、实线、宽为5px。其他3条边设置类似，3个属性分别为：border-right、border-top、border-bottom，以此就可以设置右边框、上边框、下边框的样式。

如果只想设置某一条边框某一个属性，例如：

border-left-color: red;

这样就可以设置左边框的颜色为红色。其他属性设置类似，不再一一举例。

2.3 理解CSS定位与DIV布局

CSS定位与DIV布局中心思想就是要实现结构与表现分离。刚开始理解结构和表现的分离可能有点困难，特别是在还不习惯于思考文档的语义和结构的时候。理解这点非常重要，因为，当结构和表现分离后，用CSS文档来控制表现就是一件很容易的事了。例如，某一天发现网站的字体太小，只要简单地修改样式表中的一个定义就可以改变整个网站字体的大小。

大家都知道，内容是结构的基础。内容在一定程度上体现出结构，但并不是全部结构。原始内容就相当于未经处理的数码相片的RAW格式，但是，即使未经处理的内容，也包含一定的结构。比如通过阅读一段文字，可能包含标题、正文、段落（这些属性是通过阅读而发现的，而不是从表现上）等，这就是结构。为了区分内容体现出来的结构，把它称为内结构，也称内容结构。

互联网的基础是网页和超链接，超链接形成了页面流。而页面流也是结构的一部分，它是交互设计的重点，也就是对Request（请求）和Respond（响应）的处理。这里谈到的结构是不可能由内容体现出来的，因此可以将其称为外结构，也称交互结构。

Web站点的结构就是由内结构和外结构一起形成的，这个结构是所有表现的基础。没有这个结构就不会有表现。结构并不是wireframe, wireframe是结构的一种可视化表现，是开发流程中的沟通工具。从内容到结构到表现，也是大部分网站设计的流程。

随便打开一个网页或者回想一下曾经访问过的网页，传统的网站前端展现方式是把结构和表现混合在一起，而应用Web标准进行设计的方式是把结构和表现分离开。但是不管使用什么方式，它们表面看上去都差不多。

例如，下图所示为一个商城的主页。

当单击主页上的产品名称后，转到超级链接的商品详细信息页面，如下图所示。

页面上部包括导航都是一致的。如果在页面的样式表中更改导航字体大小，则各个页面中导航页面字体的大小统一被修改，即修改如下样式表的内容。

globalHead_navCenterul li{float:left; display:inline; width:auto; height:51px; font-size:14px; line-height:22px; background:url("images/newPublic_navLine.gif") right center no-repeat; }改为．globalHead_navCenterul li{float:left; display:inline; width:auto; height:51px;font-size:16px; line-height:22px; background:url("images/newPublic_navLine.gif") right center no-repeat; }

HTML本身就是一种结构化的语言。外观并不是最重要的，网页的表现可以不仅仅依赖HTML来完成，完全可以使用其他CSS+DIV来完成。就像上面的例子中，使用了<DIVclass="globalHead_navCenter">和</DIV>标签来完成字体颜色的变化。不用再像以前一样，把装饰的图片、字体的大小、页面的颜色甚至布局的代码都堆在HTML里面，对于HTML，更多的是要考虑结构和语义。

高手支招

◇ 如何理解RAW的含义？

RAW是“未经加工”的意思。RAW格式的图像就是CMOS或者CCD图像感应器将捕捉到的光源信号转化为数字信号的原始数据。

◇ 如何设置字体的粗细样式？

font- weight属性用来定义字体的粗细，其属性值如下。

● Normal：正常，等同于固定值在400以下的。

● Bold：粗体，等同于固定值在500以上的。

● Normal：正常，等同于400。

● Bold：粗体，等同于700。

● Bolder：更粗。

● Lighter：更细。

第2章 精通网站样式

2.1 DIV CSS初体验

2.1.1 什么是DIV CSS

2.1.2 了解DIV与CSS结合的优势

2.2 CSS基本语法

2.2.1 编辑CSS样式的字体格式

2.2.2 编辑CSS样式的文本格式

2.2.3 编辑CSS样式的背景格式

2.2.4 编辑CSS链接格式

2.2.5 编辑CSS样式的列表属性

2.2.6 编辑CSS样式的区块属性

2.2.7 编辑CSS样式的宽高属性

2.2.8 编辑CSS边框属性

2.3 理解CSS定位与DIV布局

高手支招

◇ 如何理解RAW的含义？

◇ 如何设置字体的粗细样式？

第2章
精通网站样式