在RHEL -AS4-u4中安装apache+mysql+php+ZendOptimizer笔记

以前在rh9中装过，现在在RHEL中实验一次，说实话配置并不复杂，但是就是得注意一些细节上的事情。参照了网上的一些前辈们的资料。

准备工作：

1.     全新安装RHEL4，因为考虑最新版本的问题，RHEL4自带的apache，php，mysql都不安装，只安装开发工具包gcc等，完了再去下载各个套件的最新版手动安装。

2.      下载相关的软件包，软件包列表和版本如下：

httpd-2.2.4.tar.gz

php-5.2.1.tar.gz

ZendOptimizer-3.2.6-linux-glibc21-i386.tar.gz（非自由软件，需帐号可下载）

MySQL-client-standard-4.1.22-0.rhel4.i386.rpm

MySQL-devel-standard-4.1.22-0.rhel4.i386.rpm

MySQL-server-standard-4.1.22-0.rhel4.i386.rpm

MySQL-shared-compat-4.1.22-0.rhel4.i386.rpm

MySQL-shared-standard-4.1.22-0.rhel4.i386.rpm

要注意的是mysql要把包装全，不然会报依赖性检查错误

tar zxvf php-5.2.1.tar.gz(解包)

$ip = GetIP();
if($ip !='219.142.25.210' )die("只限公司内部使用");

移动光标类命令
h ：光标左移一个字符
l ：光标右移一个字符
space：光标右移一个字符
Backspace：光标左移一个字符
k或Ctrl+p：光标上移一行
j或Ctrl+n ：光标下移一行
Enter ：光标下移一行
w或W ：光标右移一个字至字首
b或B ：光标左移一个字至字首
e或E ：光标右移一个字j至字尾
) ：光标移至句尾
( ：光标移至句首
}：光标移至段落开头
{：光标移至段落结尾
nG：光标移至第n行首
n+：光标下移n行
n-：光标上移n行
n$：光标移至第n行尾
H ：光标移至屏幕顶行
M ：光标移至屏幕中间行
L ：光标移至屏幕最后行
0：（注意是数字零）光标移至当前行首
$：光标移至当前行尾

屏幕翻滚类命令
Ctrl+u：向文件首翻半屏
Ctrl+d：向文件尾翻半屏
Ctrl+f：向文件尾翻一屏
Ctrl＋b；向文件首翻一屏
nz：将第n行滚至屏幕顶部，不指定n时将当前行滚至屏幕顶部。

插入文本类命令
i ：在光标前
I ：在当前行首
a：光标后
A：在当前行尾
o：在当前行之下新开一行
O：在当前行之上新开一行
r：替换当前字符
R：替换当前字符及其后的字符，直至按ESC键
s：从当前光标位置处开始，以输入的文本替代指定数目的字符
S：删除指定数目的行，并以所输入文本代替之
ncw或nCW：修改指定数目的字
nCC：修改指定数目的行

删除命令
ndw或ndW：删除光标处开始及其后的n-1个字
do：删至行首
d$：删至行尾
ndd：删除当前行及其后n-1行
x或X：删除一个字符，x删除光标后的，而X删除光标前的
Ctrl+u：删除输入方式下所输入的文本

搜索及替换命令 :
/pattern：从光标开始处向文件尾搜索pattern
?pattern：从光标开始处向文件首搜索pattern
n：在同一方向重复上一次搜索命令
N：在反方向上重复上一次搜索命令
：s/p1/p2/g：将当前行中所有p1均用p2替代
：n1,n2s/p1/p2/g：将第n1至n2行中所有p1均用p2替代
：g/p1/s//p2/g：将文件中所有p1均用p2替换

选项设置
all：列出所有选项设置情况
term：设置终端类型
ignorance：在搜索中忽略大小写
list：显示制表位(Ctrl+I)和行尾标志（$)
number：显示行号
report：显示由面向行的命令修改过的数目
terse：显示简短的警告信息
warn：在转到别的文件时若没保存当前文件则显示NO write信息
nomagic：允许在搜索模式中，使用前面不带“\”的特殊字符
nowrapscan：禁止vi在搜索到达文件两端时，又从另一端开始
mesg：允许vi显示其他用户用write写到自己终端上的信息

最后行方式命令
：n1,n2 co n3：将n1行到n2行之间的内容拷贝到第n3行下
：n1,n2 m n3：将n1行到n2行之间的内容移至到第n3行下
：n1,n2 d ：将n1行到n2行之间的内容删除
：w ：保存当前文件
：e filename：打开文件filename进行编辑
：x：保存当前文件并退出
：q：退出vi
：q!：不保存文件并退出vi
：!command：执行shell命令command
：n1,n2 w!command：将文件中n1行至n2行的内容作为command的输入并执行之，若不指
定n1，n2，则表示将整个文件内容作为command的输入
：r!command：将命令command的输出结果放到当前行 。

3.5.1 总结本课的知识点

本节课讲解了CSS的核心编程技术—定义语法和常用属性，共包含24个知识点。如表3-3所示：

表3-3 本课知识点列表

培训讲师可以参照表中最后一列的参考时间控制讲解进度，即80分钟讲完本课内容。参加培训的学生在听完讲课后，最好再回顾一遍。对于自学者来说，相对要花费差不多两倍的时间来学习这些知识点。

对于本章知识点的学习，除了要学习理论知识点以外，还应该注重实践操作。

3.5.2 要掌握的关键点

对于本节课的内容，我们应该掌握如下的关键点。

1．CSS的基本模型是：selector { property: value;}。

2．HTML文件使用CSS的方法包括。

Ø         行内样式表（style属性）。

Ø         内部样式表（style元素）。

Ø         外部样式表（引用一个样式表文件）。

3．定义CSS的方法包括：

Ø         选择符组。

Ø         类选择符，相对类选择符和绝对类选择符。

Ø         ID选择符，相对ID选择符和绝对ID选择符。

Ø         包含选择符。

Ø         伪类—动态链接。

4．CSS的常用属性包括：

Ø         字体属性font。

Ø         文本属性text。

Ø         背景属性background。

Ø         边框属性border。

Ø         边距属性margin。

Ø         间隙属性padding。

Ø         定位属性position。

Ø         尺寸属性height/width。

Ø         布局属性layout。

Ø         滚动条属性scrollbar。

5．CSS长度单位分为：绝对长度单位和相对长度单位。

这些知识点是本节课的精华语录，不仅要记住，还应该转化为自己的东西。

在CSS样式表中，我们经常会看到pt、px、em、ex、in等长度单位。在CSS样式表中，长度单位分两种：

Ø         相对长度单位，如px、em等。

CSS相对长度单位中的“相对”二字，表明了其长度单位会随着它的参考值的变化而变化，不是固定的。CSS相对长度单位如表3-1所示。

表3-1 CSS相对长度单位

Ø         绝对长度单位，如pt、mm等。

绝对长度单位是一个固定的值。比如我们常用的有mm，就是毫米的意思。CSS绝对长度单位如表3-2所示。

表3-2 CSS绝对长度单位

对于计算机的屏幕设备而言，像素（pixel）或者说px是一个最基本的单位，就是一个点。其他所有的单位都和像素成一个固定的比例换算关系。所有的长度单位基于屏幕进行显示的时候，都统一先换算成为像素的多少，然后进行显示。所以，就计算机的屏幕而言，相对长度和绝对长度没有本质差别。任何单位其实都是像素，差别只是比例不同。

CSS绝对长度单位是对于输出设备（output device）而言的。拿pt来说，这是一个在文字排版工具（Word、Adobe等）中非常常用的字体单位，不管你的显示器分辨率是1024像素× 768像素，还是800像素×600像素，同一篇文档打印在纸面上的结果是一样的。

对于pt和px，我们来做一个测试，代码如下：

<p style = "font-size:20pt;">字体是20pt</p>

<p style = "font-size:20px;">字体是20px</p>

显示的效果如下所示：

3.4 上机操作：企业信息管理系统第二步—使用
CSS美化网页

通过前面的讲解，我们已经从两个方面学习了CSS的核心技术。上一节课开发的企业信息管理系统的静态网站，是最原始的没经过美化的网站。下面我们就来根据本节的知识，使用CSS来动手美化这个网站。

3.4.1 新建样式表文件css/style.css

由于该静态网站包含了多个HTML静态页面，每个页面都需要添加CSS效果。为了统一添加，我们采用第三种方式来定义CSS样式表，即创建外部样式表文件。

首先我们解压缩上一章的程序包emis01（HTML）.zip到硬盘中，比如为D:\workspace\css。然后在该目录中新建一个样式表文件子目录css，并新建一个空的记事本文件style.css。

在该文件中我们分别添加以下样式表。

Ø         BODY：选择的类为body元素，设置该中的字体为“宋体”，字号为10pt，行距为10pt，并设置页边距为0px。

Ø         TD：选择的类为td元素，设置该中的字体为“宋体”，字号为10pt。

Ø         a:Link,a:Visited：设置网页链接和已经被访问的链接的样式，包括上、下、左、右的间隙为2px、1px、0px、0px，字体颜色#C10202、下画线、行高15pt。

Ø         a:Hover,a:Active：设置鼠标指向网页链接和激活链接时的样式，包括上、下、左、右的间隙为2px、1px、0px、0px，字体颜色#FFFFFF、背景颜色#739342、无下画线。

Ø         hr：选择的类为hr元素，设置高度为1px，并使用颜色过滤器alpha(opacity = 100, finishopacity = 2, style = 0)进行过滤。

Ø         li：选择的类为body元素，设置颜色为#C10202、点样式为square。

Ø         ul：选择的类为body元素，设置顶部边距为0px、底部边距为5px。

Ø         .ulnotab：定义一个类选择符，设置顶部边距为0px、底部边距为0px、左侧边距为16px。

Ø         form：定义选择的类为body元素，设置上、下的边距和间隙为0px。

Ø         .position：定义位置栏的类选择符，设置选择栏背景色为#ECF1FF、高度为20px。

Ø         .tableheader：定义表格标题栏的类选择符，设置表格标题栏背景色为#BEE1F4、高度为20px。

Ø         .pager：定义分页栏的类选择符，设置分页栏背景色为#E6E6E6、高度为20px。

按照以上的要求，根据CSS定义的语法知识，编写完整的代码，如程序3-1所示。

程序3-1 样式表文件css/style.css

BODY {

      FONT-FAMILY: "宋体";

      FONT-SIZE: 10pt;

      LINE-HEIGHT: 10pt;

      margin-top: 0px;

      margin-left: 0px;

      margin-right: 0px;

}

TD {

      FONT-FAMILY: "宋体";

      FONT-SIZE: 10pt;

}

a:Link,a:Visited {

      padding: 2px 1px 0px 0px;

      color: #C10202;

      text-decoration: underline;

      LINE-HEIGHT: 15pt;

}

a:Hover,a:Active {

      padding: 2px 1px 0px 0px;

      color: #FFFFFF;

      background: #739342;

      text-decoration: none;

}

hr {

      filter: alpha(opacity = 100, finishopacity = 2, style = 0);

      height: 1px;

}

li {

      color: #C10202;

      list-style-type: square;

}

ul {

      margin-top:0px;

      margin-bottom:5px;

}

.ulnotab {

      margin-top:0px;

      margin-bottom:0px;

      margin-left: 16px;

}

form {

      margin-top: 0px;

      padding-top: 0px;

      margin-bottom: 0px;

      padding-bottom: 0px;

}

.position {

      background-color: #ECF1FF;

      height: 20px;

}

.tableheader {

      background-color: #BEE1F4;

      height: 20px;

}

.pager {

      background-color: #E6E6E6;

      height: 20px;

}

3.4.2 修改JSP页面引用CSS

上面定义了样式表文件，为了使它发挥作用，首先需要在每一个HTML文件中都引用它。方法是，在每一个HTML文件的<head></head>元素中加入下面的引用行代码：

<link rel="stylesheet" type="text/css" href="css/styles.css">

在style.css中，我们还定义了.ulnotab，用来设置菜单栏中分类的样式，因此需要修改所有包含有菜单栏的HTML页面，为分类的<ul>元素使用class引用该属性。如下面的代码中粗体的部分所示：

<table width="100%" bgcolor="#EEEEEE">

    <tr>

        <td>

        <ul class="ulnotab">

            <li><a href="welcome.htm">首页面</a></li>

        </ul>

        </td>

    </tr>

    <tr>

        <td>

        <ul class="ulnotab">

           <li><a href="#">通信工具</a></li>

        </ul>

        <ul>

            <li><a href="address.htm">通讯录管理</a></li>

            <li><a href="sms.htm">短消息管理</a></li>

        </ul>

        </td>

    </tr>

    <tr>

        <td>

        <ul class="ulnotab">

            <li><a href="#">个人管理</a></li>

        </ul>

        <ul>

            <li><a href="schedule.htm">日程安排</a></li>

            <li><a href="worklog.htm">工作记录</a></li>

        </ul>

        </td>

    </tr>

    <tr>

        <td>

        <ul class="ulnotab">

            <li><a href="#">企业管理</a></li>

        </ul>

        <ul>

            <li><a href="notice.htm">公司公告</a></li>

            <li><a href="meeting.htm">工作会议</a></li>

        </ul>

        </td>

    </tr>

    <tr>

        <td>

        <ul class="ulnotab">

            <li><a href="login.htm">退出</a></li>

        </ul>

        </td>

    </tr>

</table>

在style.css中，我们还定义了位置栏、表格标题栏和分页栏的样式表，因此需要修改所有包含有它们的HTML页面。下面是通讯录列表页面address.htm的修改结果，其中的粗体部分是添加的样式设置代码：

<TABLE width="100%" class="position">

    <TR>

        <TD>当前位置：通讯录管理</TD>

        <TD align="right"><a href="address_add.htm">新增联系人</a></TD>

        <TD width="20"></TD>

    </TR>

</TABLE>

<b></b>

<TABLE border="0" width="100%">

    <TR class="tableheader">

        <TD>姓名</TD>

        <TD>性别</TD>

        <TD>手机</TD>

        <TD>E-mail</TD>

        <TD>QQ号码</TD>

        <TD>工作单位</TD>

        <TD>地址</TD>

        <TD>邮编</TD>

        <TD>操作</TD>

    </TR>

    <TR>

        <TD>lzb</TD>

        <TD>男</TD>

        <TD>13812345678</TD>

        <TD>lzb@163.com</TD>

        <TD>12345678</TD>

        <TD>IBM</TD>

        <TD>北京</TD>

        <TD>100085</TD>

        <TD><a href='address_edit.htm?id=1'>修改</a> <a

            href="address.htm?id=1">删除</a></TD>

    </TR>

    <TR>

        <TD>admin</TD>

        <TD>mail</TD>

        <TD>13812345678</TD>

        <TD>abc@163.com</TD>

        <TD>12345678</TD>

        <TD>IBM</TD>

        <TD>北京</TD>

        <TD>100085</TD>

        <TD><a href='address_edit.htm?id=6'>修改</a> <a

            href="address.htm?id=6">删除</a></TD>

    </TR>

</TABLE>

<form name="form1" action="address.htm" method="post">

<TABLE border="0" width="100%" class="pager">

    <TR>

        <TD align="left">每页记录数： <select name="pageSize"

            onchange="document.all.pageNo.value='1';document.all.form1.submit();">

            <option value="10">10</option>

            <option value="25" selected="selected">25</option>

            <option value="50">50</option>

            <option value="100">100</option>

            <option value="200">200</option>

            <option value="300">300</option>

            <option value="500">500</option>

        </select></TD>

        <TD align="center">总记录数：65</TD>

        <TD align="right">

<a href="javascript:document.all.pageNo.value='1';document.all.form1.submit();">首页</a>

<a href="javascript:document.all.pageNo.value='1';document.all.form1.submit();">前一页</a>

<a href="javascript:document.all.pageNo.value='2';document.all.form1.submit();">后一页</a>

<a href="javascript:document.all.pageNo.value='3';document.all.form1.submit();">尾页</a>

        <select name="pageNo" onchange="document.all.form1.submit();">

            <option value="1" selected="selected">1</option>

            <option value="2">2</option>

            <option value="3">3</option>

        </select></TD>

        <TD width="20"></TD>

    </TR>

</TABLE>

</form>

经过以上的3步修改，我们就完成了对所有样式表的应用。

3.4.3 美化后的用户登录页面

经过美化后的网页一定不同寻常了。首先来看看用户登录页面，如图3-3所示。

图3-3 美化后的登录界面

与上一章中的原始界面相比，链接和按钮拥有了新的样式。

3.4.4 美化后的用户注册页面

图3-4是美化后的用户注册页面。

图3-4 美化后的注册界面

与上一章中的原始界面相比，链接和按钮拥有了新的样式。

3.4.5 美化后的用户欢迎页面

图3-5是美化后的用户欢迎页面。

图3-5 美化后的欢迎界面

与上一章中的原始界面相比，首先是网页的body没有四周的边距了，其次是左侧的菜单栏排布和颜色更加美观，最后是当前位置栏和底部的版权栏，也都有了新的效果。

3.4.6 美化后的模块页面

为了查看表格标题栏和分页栏的效果，我们可以查看通讯录管理列表页address.htm的页面，如图3-6所示。

图3-6 美化后的通讯录管理列表界面

界面中除了拥有欢迎页面的各种美化效果外，表格标题栏和分页栏分别有底景显示，更加美化大方。

单击该页面中的“修改”链接，即可进入到通讯录管理的修改页面address_edit.htm，如图3-7所示。

图3-7 美化后的通讯录管理修改界面

该页面包含了表单元素，从界面中可以看出，界面中的表单元素form通常都会在四周有间隙，这里也排布更加紧凑了。

3.4.7 打包美化后的网站emis02(HTML+CSS).zip

经过美化后的企业信息管理系统，已经初步具备了静态网站的要求—美观大方。我们将该文件打包为emis02（HTML+CSS）.zip，其结构如下：

emis02(HTML+CSS).zip

└─css/WebContent

    │ login.htm

    │ register.htm

    │ welcome.htm

    │ address.htm

    │ address_add.htm

    │ address_edit.htm

    │ sms.htm

    │ sms_add.htm

    │ schedule.htm

    │ schedule_add.htm

    │ schedule_edit.htm

    │ worklog.htm

    │ worklog_add.htm

    │ worklog_edit.htm

    │ notice.htm

    │ notice_add.htm

    │ notice_edit.htm

    │ meeting.htm

    │ meeting_add.htm

    │ meeting_edit.htm

    │

    ├─css                       //本节实现的样式表文件

    │      style.css

    │

    └─images

            banner.jpg

            flower.jpg

            login.jpg

            welcome.gif

该文件放在光盘中的source目录下，可以直接解压运行该静态网站。读者可以参考该案例，与自己按照本节课的过程所实现的结果进行对比。

上文中讲解了选择符的定义语法，对于每一类元素，我们该指定什么属性还不了解，下面我们就来讲解几种常用属性的使用，包括：

Ø         字体属性font。

Ø         文本属性text。

Ø         背景属性background。

Ø         边框属性border。

Ø         边距属性margin。

Ø         间隙属性padding。

Ø         定位属性position。

Ø         尺寸属性height/width。

Ø         布局属性layout。

Ø         滚动条属性scrollbar。

并在最后讲解CSS长度单位的使用。

3.3.1 字体属性font

字体属性用来设置选择符中字体的属性，常用的属性如下。

1）字体名称属性（font-family）

这个属性设定字体名称，如Arial、Tahoma、Courier等。例如：

.s1 {font-family:Arial}

2）字体大小属性（font-size）

这个属性可以设置字体的大小。字体大小的设置可以有多种方式，最常用的就是pt和px（pixel）。例如：

.s2 {font-size:16pt}

3）字体风格属性（font-style）

这个属性有3个值可选：normal、italic、oblique。normal是默认值，italic、oblique都是斜体显示。例如：

.s1 {font-sytle:italic}

4）字体浓淡属性（font-weight）

这个属性常用值是normal和bold，normal是默认值。例如：

<p style = "font-weight:bold">这段文字字体的浓淡属性(font-weight)值是bold。<p>

5）字体变量属性（font-variant）

这个属性有两个值，normal和small-caps，normal是默认值。small-caps表示小的大写字体。例如：

.s1 {font-variant:small-caps}

6）字体属性（font）

这个属性是各种字体属性的一种快捷的综合写法。该属性可以综合字体风格属性（font-style）、字体变量属性（font-variant）、字体浓淡属性（font-weight）、字体大小属性（font-size）等属性。例如：

.s1 {font:italic normal bold 11pt arial}

7）字体颜色（color）

字体颜色用CSS中的color属性来表示。例如：

.s1 {color:red;}

3.3.2 文本属性text

文本属性用来设置文本的显示方式，比如对齐、距离、大小、下画线等。常用的属性如下。

1）文本对齐属性（text-align）

这个属性用来设定文本的对齐方式。有以下值：

Ø         left（居左，默认值）。

Ø         right（居右）。

Ø         center（居中）。

Ø         justify（两端对齐）。

例如：

.p2 {text-align:right}

2）文本修饰属性（text-decoration）

这个属性主要设定文本划线的属性。有以下值：

Ø         none（无，默认值）。

Ø         underline（下画线）。

Ø         overline（上画线）。

Ø         line-through（当中画线）。

例如：

.p2 {text-decoration: underline}

3）文本缩进属性（text-indent）

这个属性设定文本首行缩进。其值有以下设定方法：

Ø         length（长度，可以使用绝对单位（cm、mm、in、pt、pc）或者相对单位（em、ex、px））。

Ø         percentage（百分比，相当于父对象宽度的百分比）。

例如：

.p1 {text-indent: 8mm}

4）行高属性（line-height）

这个属性设定每行之间的距离。其值有以下设定方法：

Ø         normal（默认值）。

Ø         length（长度，可以使用绝对单位（cm、mm、in、pt、pc）或者相对单位（em、ex、px））。

Ø         percentage（百分比，相当于父对象高度的百分比）。

例如：

.p1 {line-height:1cm}

5）字间距属性（letter-spacing）

这个属性用来设定字符之间的距离。

Ø         normal（默认值）。

Ø         length（长度，可以使用绝对单位（cm、mm、in、pt、pc）或者相对单位（em、ex、px））。

例如：

.p1 {letter-spacing: 3mm}

6）颜色属性（color）

用颜色属性（color）可以改变文本的字体颜色。字体颜色代码请参见HTML颜色参考（HTML Color Reference）。例如：

.p1{color:gray}

3.3.3 背景属性background

背景属性主要用来定义选择符对象的背景颜色、背景图片及其显示方式的。常用的属性如下。

1）背景颜色属性（background-color）

这个属性为HTML元素设定背景颜色，相当于HTML中bgcolor属性。例如：

body {background-color:#99FF00;}

上面的代码表示body元素的背景颜色是翠绿色的。

2）背景图片属性（background-image）

这个属性为HTML元素设定背景图片，相当于HTML中background属性。例如：

<body style="background-image:url(../images/css_tutorials/background.jpg)">

上面的代码为body元素设定了一个背景图片。

3）背景重复属性（background-repeat）

这个属性和background-image属性连在一起使用，决定背景图片是否重复。如果只设置background-image属性，没设置background-repeat属性，在默认状态下，图片既横向重复，又竖向重复。可选值有：

Ø         repeat-x，背景图片横向重复。

Ø         repeat-y，背景图片竖向重复。

Ø         no-repeat，背景图片不重复。

例如：

body {background-image:url(../images/css_tutorials/background.jpg); background-repeat:repeat-y}

上面的代码表示图片竖向重复。

4）背景附着属性（background-attachment）

这个属性和background-image属性连在一起使用，决定图片是跟随内容滚动还是固定不动。这个属性有两个值，一个是scroll，另一个是fixed。默认值是scroll。例如：

body {background-image:url(../images/css_tutorials/background.jpg); background-repeat:no-repeat; background-attachment:fixed}

上面的代码表示图片固定不动，不随内容滚动而动。

5）背景位置属性（background-position）

这个属性和background-image属性连在一起使用，决定了背景图片的最初位置。例如：

body {background-image:url(../images/css_tutorials/background.jpg);background-repeat:no-repeat; background-position:20px 60px}

上面的代码表示背景图片的初始位置距离网页最左面20px，距离网页最上面60px。

6）背景属性（background）

这个属性是设置背景相关属性的一种快捷的综合写法，包括background-color、background- image、background-repeat、background-attachment、background-position。例如：

body {background:#99FF00 url(../images/css_tutorials/background.jpg) no-repeat fixed 40px 100px}

上面的代码表示，网页的背景颜色是翠绿色，背景图片是background.jpg图片，背景图片不重复显示，背景图片不随内容滚动而动，背景图片距离网页最左面40px，距离网页最上面100px。

3.3.4 边框属性border

边框属性用来设置选择符对象的边框风格、线条、颜色等属性。

1）边框风格属性（border-style）

这个属性用来设定上、下、左、右边框的风格，它的值如下：

Ø         none（没有边框，无论边框宽度设为多大）。

Ø         dotted（点线式边框）。

Ø         dashed（破折线式边框）。

Ø         solid（直线式边框）。

Ø         double（双线式边框）。

Ø         groove（槽线式边框）。

Ø         ridge（脊线式边框）。

Ø         inset（内嵌效果的边框）。

Ø         outset（凸起效果的边框）。

例如：

.d1 {border-style:none;}

2）边框宽度属性（border-width）

这个属性用来设定上下左右边框的宽度，它的值如下：

Ø         medium（是默认值）。

Ø         thin（比medium细）。

Ø         thick（比medium粗）。

用长度单位定值。可以使用绝对长度单位（cm、mm、in、pt、pc）或者用相对长度单位（em、ex、px）。

例如：

.d2 {border-width:thin;border-style:solid;}

3）边框颜色属性（border-color）

这个属性用来设定上、下、左、右边框的颜色。例如：

.d5 {border-color:gray;border-style:solid;}

4）边框属性（border）

这个属性是边框属性的一个快捷的综合写法，它包含border-width、border-style和border-color。例如：

.d1 {border:5px solid gray;}

5）单边边框属性

上、下、左、右4个边框不但可以统一设定，也可以分开设定。

Ø         设定上边框属性，你可以使用border-top、border-top-width、border-top-style、border-top-color。

Ø         设定下边框属性，你可以使用border-bottom、border-bottom-width、border-bottom-style、border-bottom-color。

Ø         设定左边框属性，你可以使用border-left、border-left-width、border-left-style、border-left-color。

Ø         设定上边框属性，你可以使用border-right、border-right-width、border-right-style、border-right-color。

3.3.5 边距属性margin

边距属性是用来设置页面中一个元素所占空间的边缘到相邻元素之间的距离。

1）左边距属性（margin-left）

这个属性用来设定左边距的宽度。例如：

.d1{margin-left:1cm}

2）右边距属性（margin-right）

这个属性用来设定右边距的宽度。例如：

.d1 {margin-right:1cm}

3）上边距属性（margin-top）

这个属性用来设定上边距的宽度。例如：

.d1 {margin-top:1cm}

4）下边距属性（margin-bottom）

这个属性用来设定下边距的宽度。例如：

.d1{margin-bottom:1cm}

5）边距属性（margin）

这个属性是设定边距宽度的一个快捷的综合写法，用这个属性可以同时设定上、下、左、右边距属性。

你可以为上、下、左、右边距设置相同的宽度。示例入下：

.d1 {margin:1cm}

你也可以分别设置边距，顺序是上、右、下、左。例如：

.d1 {margin:1cm 2cm 3cm 4cm}

上面的代码表示，上边距为1cm，右边距为2cm，下边距为3cm，左边距为4cm。

3.3.6 间隙属性padding

间隙属性是用来设置元素内容到元素边界的距离。包括：

1）左间隙属性（padding-left）

这个属性用来设定左间隙的宽度。例如：

.d1{padding-left:1cm}

2）右间隙属性（padding-right）

这个属性用来设定右间隙的宽度。例如：

.d1 {padding-right:1cm}

3）上间隙属性（padding-top）

这个属性用来设定上间隙的宽度。例如：

.d1 {padding-top:1cm}

4）下间隙属性（margin-bottom）

这个属性用来设定下间隙的宽度。例如：

.d1{padding-bottom:1cm}

5）间隙属性（padding）

这个属性是设定间隙宽度的一个快捷的综合写法，用这个属性可以同时设定上下左右间隙属性。

你可以为上、下、左、右间隙设置相同的宽度。例如：

.d1 {padding:1cm}

你也可以分别设置间隙，顺序是上、右、下、左。例如：

.d1 {padding:1cm 2cm 3cm 4cm}

上面的代码表示，上间隙为1cm，右间隙为2cm，下间隙为3cm，左间隙为4cm。

3.3.7 定位属性position

定位属性主要用来设置选择符对象的位置、层次。包括：

1）定位方式属性（position）

这个属性用来检索对象的定位方式。可选值如下。

Ø         static：无特殊定位。

Ø         absolute：绝对位置，使用left、right、top、bottom等属性进行绝对定位。而其层叠通过z-index属性定义，此时对象不具有边距，但仍有补白和边框。

Ø         relative：相对位置，但将依据left、right、top、bottom等属性在正常文档流中偏移位置。

Ø         fixed：固定位置。

例如：

div { position: absolute; bottom: 1in; left: 1in; right: 1in; top: 1in; }

div { position:relative; top:-3px; left:6px; }

2）对象层次属性（z-index）

该属性用于检索或设置对象的层叠顺序。如果两个绝对定位对象的此属性具有同样的值，那么将依据它们在HTML文档中声明的顺序层叠。可选值如下。

Ø         auto：遵从其父对象的定位。

Ø         number：无单位的整数值，可为负数。

例如：

div { position:absolute; z-index:3; width:6px; }

3）设置相对顶部位置（top）

该属性用于检索或设置对象与其最近一个定位的父对象顶部相关的位置。如果两个绝对定位对象的此属性具有同样的值，那么将依据它们在HTML文档中声明的顺序层叠。可选值如下。

Ø         auto：无特殊定位，根据HTML定位规则在文档流中分配。

Ø         length：由浮点数字和单位标识符组成的长度值，或者百分数。必须定义position属性值为absolute或者relative此取值方可生效。

例如：

div { position: absolute; top: 1in; }

4）设置相对底部位置（bottom）

该属性用于检索或设置对象与其最近一个定位的父对象底边相关的位置。可选值如下。

Ø         auto：无特殊定位，根据HTML定位规则在文档流中分配。

Ø         length：由浮点数字和单位标识符组成的长度值或百分数。必须定义position属性值为absolute或者relative此取值方可生效。

例如：

div { position: absolute; bottom: 1in; }

div { position:relative; bottom:6px; }

5）设置相对左边位置（left）

该属性用于检索或设置对象与其最近一个定位的父对象左边相关的位置。可选值如下。

Ø         auto：无特殊定位，根据HTML定位规则在文档流中分配。

Ø         length：由浮点数字和单位标识符组成的长度值或百分数。必须定义position属性值为absolute或者relative此取值方可生效。

例如：

div { position: absolute; left: 1in; }

div { position:relative; top:-3px; left:6px; }

6）设置相对右边位置（right）

该属性用于检索或设置对象与其最近一个定位的父对象右边相关的位置。可选值如下。

Ø         auto：无特殊定位，根据HTML定位规则在文档流中分配。

Ø         length：由浮点数字和单位标识符组成的长度值或百分数。必须定义position属性值为absolute或者relative此取值方可生效。

例如：

div { position: absolute; right: 1in; }

div { position:relative; top:-3px; right:6px; }

3.3.8 尺寸属性height/width

尺寸属性用来设置选择符对象的宽度和高度。

1）高度属性（height）

该属性用来检索或设置对象的高度。可选值如下。

Ø         auto：无特殊定位，根据HTML定位规则在文档流中分配。

Ø         length：由浮点数字和单位标识符组成的长度值或百分数。百分数是基于父对象的高度。不可为负数。

按照样式表的规则，对象的实际高度为下列属性值之和：

margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom

例如：

div { height: 1in; }

div { position:absolute; top:-3px; height:6px; }

2）宽度属性（width）

该属性用来检索或设置对象的高度。可选值如下。

Ø         auto：无特殊定位，根据HTML定位规则在文档流中分配。

Ø         length：由浮点数字和单位标识符组成的长度值或百分数。百分数是基于父对象的高度。不可为负数。

按照样式表的规则，对象的实际宽度为下列属性值之和：

margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

例如：

div { width: 1in; }

div { position:absolute; top:-3px; width:6px; }

3）最大高度属性（max-height）

该属性用来设置或检索对象的最大高度。如果max-height属性的值小于min-height属性的值，将会被自动转设为min-height属性的值。可选值如下。

Ø         none：无最大高度限制。

Ø         length：由浮点数字和单位标识符组成的长度值或者百分数。不可为负数。

例如：

p { max-height: 200%; }

4）最大宽度属性（max-width）

该属性用来设置或检索对象的最大宽度。如果max-width属性的值小于min-width属性的值，将会被自动转设为min-width属性的值。可选值如下。

Ø         none：无最大高度限制。

Ø         length：由浮点数字和单位标识符组成的长度值或者百分数。不可为负数。

例如：

p { max-width: 200%; }

5）最小高度属性（max-height）

该属性用来设置或检索对象的最小高度。如果min-height属性的值大于max-height属性的值，将会被自动转设为max-height属性的值。可选值如下。

Ø         none：无最大高度限制。

Ø         length：由浮点数字和单位标识符组成的长度值或者百分数。不可为负数。

例如：

p { min-height: 200%; }

6）最大小宽度属性（max-width）

该属性用来设置或检索对象的最小宽度。如果min-width属性的值大于max-width属性的值，将会被自动转设为max-width属性的值。可选值如下。

Ø         none：无最大高度限制。

Ø         length：由浮点数字和单位标识符组成的长度值或者百分数。不可为负数。

例如：

p { min-width: 200%; }

3.3.9 布局属性layout

布局属性用来设置对象的浮动、换行、溢出等布局样式。

1）无边属性（clear）

该属性的值指出了不允许有浮动对象的边。可选值如下。

Ø         none：允许两边都可以有浮动对象。

Ø         both：不允许有浮动对象。

Ø         left：不允许左边有浮动对象。

Ø         right：不允许右边有浮动对象。

例如：

div { clear : left }

img { float: right }

2）浮动属性（float）

该属性的值指出了对象是否及如何浮动。可选值如下。

Ø         none：对象不浮动。

Ø         left：对象浮在左边。

Ø         right：对象浮在右边。

当该属性不等于none引起对象浮动时，对象将被视做块对象（block-level），即display属性等于block。也就是说，浮动对象的display特性将被忽略。

例如：

img { float: right }

3）剪切属性（clip）

该属性用于检索或设置对象的可视区域。区域外的部分是透明的。必须将position的值设为absolute，此属性方可使用。

Ø         auto：对象无剪切。

Ø         rect（number number number number）：依据上、右、下、左的顺序提供自对象左上角为（0,0）坐标计算的4个偏移数值，其中任一数值都可用auto替换，即此边不剪切。

例如：

div { position:absolute; width:60px; height:60px; clip:rect(0 20 50 10); }

div { position:absolute; width:60px; height:60px; clip:rect(1cm auto 50px 10cm); }

4）溢出属性（overflow）

该属性用于检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。可选值如下。

Ø         visible：不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效。

Ø         auto：此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条。

Ø         hidden：不显示超过对象尺寸的内容。

Ø         scroll：总是显示滚动条。

设置textarea对象为hidden值将隐藏其滚动条。对于table来说，假如table- layout属性设置为fixed，则td对象支持带有默认值为hidden的overflow属性。如果设为hidden、scroll或者auto，那么超出td尺寸的内容将被剪切。如果设为visible，将导致额外的文本溢出到右边或左边（视direction属性设置而定）的单元格。

例如：

body { overflow: hidden; }

div { overflow: scroll; height: 100px; width: 100px; }

5）横向溢出属性（overflow-x）

该属性用于检索或设置当对象的内容超过其指定宽度时如何管理内容。可选值如下。

Ø         visible：不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的宽度。并且clip属性设置将失效。

Ø         auto：此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条。

Ø         hidden：不显示超过对象宽度的内容。

Ø         scroll：总是显示横向滚动条。

例如：

body { overflow-x: hidden; }

div { overflow-x: scroll; height: 100px; width: 100px; }

6）纵向溢出属性（overflow-y）

该属性用于检索或设置当对象的内容超过其指定高度时如何管理内容。可选值如下。

Ø         visible：不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的宽度。并且clip属性设置将失效。

Ø         auto：此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条。

Ø         hidden：不显示超过对象高度的内容。

Ø         scroll：总是显示横向滚动条。

例如：

body { overflow-y: hidden; }

div { overflow-y: scroll; height: 100px; width: 100px; }

7）显示属性（display）

该属性用于设置或检索对象是否及如何显示。可选值如下。

Ø         block：CSS 1块对象的默认值。用该值为对象之后添加新行。

Ø         none：CSS 1隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间。

Ø         inline：CSS 1内联对象的默认值。用该值将从对象中删除行。

Ø         compact：CSS 2分配对象为块对象或基于内容之上的内联对象。

Ø         marker：CSS 2指定内容在容器对象之前或之后。要使用此参数，对象必须和:after及:before伪元素一起使用。

Ø         inline-table：CSS 2将表格显示为无前后换行的内联对象或内联容器。

Ø         list-item：CSS 1将块对象指定为列表项目，并可以添加可选项目标志。

Ø         run-in：CSS 2分配对象为块对象或基于内容之上的内联对象。

Ø         table：CSS 2将对象作为块元素级的表格显示。

Ø         table-caption：CSS 2将对象作为表格标题显示。

Ø         table-cell：CSS 2将对象作为表格单元格显示。

Ø         table-column：CSS 2将对象作为表格列显示。

Ø         table-column-group：CSS 2将对象作为表格列组显示。

Ø         table-header-group：CSS 2将对象作为表格标题组显示。

Ø         table-footer-group：CSS 2将对象作为表格脚注组显示。

Ø         table-row：CSS 2将对象作为表格行显示。

Ø         table-row-group：CSS 2将对象作为表格行组显示。

例如：

img { display: block; float: right; }

8）占位属性（visibility）

该属性用于设置或检索是否显示对象。与display属性不同，此属性为隐藏的对象保留其占据的物理空间。如果希望对象为可视，其父对象也必须是可视的。可选值如下。

Ø         inherit：继承上一个父对象的可见性。

Ø         visible：对象可视。

Ø         hidden：对象隐藏。

Ø         collapse：主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象，其作用等同于hidden。

例如：

img { visibility: inherit; float: right; }

3.3.10 滚动条属性scrollbar

滚动条顺序用以设置滚动条的显示外观。

1）scrollbar-3d-light-color

该属性用于设置或检索滚动条亮边框颜色。例如：

div {scrollbar-3d-light-color :threedhighlight; }

2）scrollbar-highlight-color

该属性用于设置或检索滚动条3D界面的亮边颜色。例如：

div {scrollbar-highlight-color :threedhighlight; }

3）scrollbar-face-color

该属性用于设置或检索滚动条3D表面的颜色。例如：

div {scrollbar-face-color : threedface; }

4）scrollbar-arrow-color

该属性用于设置或检索滚动条方向箭头的颜色。当滚动条出现但不可用时，此属性失效。例如：

div {scrollbar-arrow-color : buttontext; }

5）scrollbar-shadow-color

该属性用于设置或检索滚动条3D界面的暗边颜色。例如：

div {scrollbar-shadow-color :ThreedDarkShadow; }

6）scrollbar-dark-shadow-color

该属性用于设置或检索滚动条暗边框颜色。例如：

div {scrollbar-dark-shadow-color :threeddarkshadow; }

7）scrollbar-base-color

该属性用于设置或检索滚动条基准颜色。其他界面颜色将据此自动调整。例如：

div {scrollbar-base-color : buttonface; }

从CSS的基本模型可知，CSS的定义是由3个部分构成：选择符（selector）、属性（property）和属性的取值（value）。下面我们来讲解基于该模型，定义CSS的基本语法。包括：

Ø         基本格式。

Ø         CSS注释。

Ø         选择符组。

Ø         类选择符。

Ø         ID选择符。

Ø         包含选择符。

Ø         样式表的层叠性。

Ø         伪类—动态链接。

3.2.1 基本格式

CSS的语法很简单，它使用一组英语词来表示不同的样式和特征。

一个样式表由一组规则组成。每个规则由一个“选择符”（selector）和一个定义部分组成。每个定义部分包含一组由分号（;）分离的定义，这组定义放在一对花括号（{ }）之间。每个定义由一个特性、一个冒号（:）和一个值组成。

1）选择符（selector）

通常文档中的元素（element），如HTML中的<body>，<p>，<strong>等标签，多个选择符可以用半角逗号（,）隔开。

2）属性（property）

CSS 1、CSS 2、CSS 3规定了许多的属性，目的是控制选择符的样式。

3）值（value）

指属性接受的设定值，可由各种关键字（keywords）组成，多个关键字时大都以空格隔开。

要针对没有标签定义范围进行样式设定时，可利用<div>与<span>标签。

下面是一个例子：

P{

font-size: 110%;

font-family: garamond, sans-serif;

}

H2{

color: red;

background: white;

}

.highlight{

color: red;

background: yellow;

font-weight: bold;

}

在这个例子中有3个选择符：P、H2和.highlight；color: red是一个定义，其中color是属性，red是color的值。

在这里HTML中的结构P（段落）和H2（2级标题）获得了不同的样式。每个段落的字体的大小比包含这个段落的结构的字体的大小要大10%，其字形是garamond，假如garamond没有的话那么使用一般的sans-serif字形。2级标题的字用红色，底面是白色的。这个例子中的第三个规则规定了一个class的样式，通过class属性每个HTML结构都可以被指定为这个class，例如：

<P class="highlight">黄底、红字、粗体显示</P>

3.2.2 CSS注释

CSS文档内也可以包含注释，注释有利于你或别人以后编辑或更改代码时理解代码的含义。在浏览器中，注释是不显示的。

CSS注释以“/*”开头，以“*/”结尾，如下所示：

/* 定义段落样式表 */

p {

text-align: center; /* 文本居中排列 */

color: black; /* 文字为黑色 */

font-family: arial /* 字体为arial */

}

3.2.3 选择符组

你可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式重复定义。例如：

h1, h2, h3, h4, h5, h6 { color: green }

这个组里包括所有的标题元素，每个标题元素的文字都为绿色。

对于下例：

p, table{ font-size: 9pt }

段落和表格里的文字尺寸为9号字。效果完全等效于：

p { font-size: 9pt }

table { font-size: 9pt }

3.2.4 类选择符

类选择符是表示指定选择符的类别，可以为某一个选择符指定不同的分类，也可以直接指定分类名称。

1）相对类选择符

使用类选择符能够把相同的元素分类定义不同的样式。定义类选择符时，在自定类的名称前面加一个点号。

例如，你想要两个不同的段落，一个段落向右对齐，另一个段落居中，你可以先定义两个类：

p.right {text-align: right}

p.center {text-align: center}

然后用在不同的段落里，只要在HTML标记里加入你定义的class参数：

<p class="right"> 这个段落向右对齐的 </p>

<p class="center"> 这个段落是居中排列的 </p>

类的名称可以是任意英文单词或以英文开头与数字的组合，一般以其功能和效果简要命名。

2）绝对类选择符

类选择符还有一种用法，在选择符中省略HTML标记名，这样可以把几个不同的元素定义成相同的样式。例如：

.center {text-align: center}

它定义.center的类选择符为文字居中排列。这样的类可以被应用到任何元素上。

下面我们使h1元素（标题1）和p元素（段落）都归为center类，这使两个元素的样式都跟随.center的类选择符：

<h1 class="center"> 这个标题是居中排列的 </h1>

<p class="center"> 这个段落也是居中排列的 </p>

这种省略HTML标记的类选择符是我们今后最常用的CSS方法，使用这种方法，我们可以很方便地在任意元素上套用预先定义好的类样式。

3.2.5 ID选择符

在HTML页面中，ID参数指定了某个单一元素，ID选择符用来对这个单一元素定义单独的样式。ID选择符的应用和类选择符类似，只要把class换成id即可。

将上例中的类用ID替代：

<p id="intro">

这个段落向右对齐

</p>

与类选择符类似，ID选择符也有两种定义形式：

1）绝对ID选择符

定义ID选择符要在ID名称前加上一个“#”号。和类选择符相同，定义ID选择符的属性也有两种方法。下面这个例子，ID属性将匹配所有id="intro"的元素：

#intro {

font-size:110%;

font-weight:bold;

color:#0000ff;

background-color:transparent

}

它定义的样式为：字体尺寸为默认尺寸的110%；粗体；蓝色；背景颜色透明。

2）相对ID选择符

即ID选择符定义在某一个选择符的后面，使用#表示。例如下面这个例子，ID属性只匹配id="intro"的段落元素<p>：

p#intro {

font-size:110%;

font-weight:bold;

color:#0000ff;

background-color:transparent

}

ID选择符局限性很大，只能单独定义某个元素的样式，一般只在特殊情况下使用。

3.2.6 包含选择符

包含选择符只不过是一个用空格隔开的两个或更多的单一选择符组成的字符串。这种方式只对在元素1里包含的元素2定义，对单独的元素1或元素2无定义，例如：

table a {

font-size: 12px

}

它定义了在表格<table>内的链接<a>改变了样式，文字大小为12像素，而表格外的链接的文字仍为默认大小。

3.2.7 样式表的层叠性

层叠性就是继承性，样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包含的其他元素。事实上，所有在元素中嵌套的元素都会继承外层元素指定的属性值，有时会把很多层嵌套的样式叠加在一起，除非另外更改。

例如，在div标记中嵌套p标记：

div {

color: red;

font-size:9pt

}

<div>

<p>

这个段落的文字为红色9号字

</p>

</div>

此时p元素里的内容会继承div定义的属性。

有些情况下内部选择符不继承周围选择符的值，但理论上这些都是特殊的。例如，上边界属性值是不会继承的，直觉上，一个段落不会同文档body一样的上边界值。

另外，当样式表继承遇到冲突时，总是以最后定义的样式为准。如果上例中定义了P的颜色：

div {

   color: red;

   font-size:9pt

}

p {

color: blue

}

<div>

<p>

这个段落的文字为蓝色9号字

</p>

</div>

可以看到段落里的文字大小为9号字是继承div属性的，而color属性则依照最后定义的。

不同的选择符定义相同的元素时，要考虑到不同的选择符之间的优先级。对于ID选择符、类选择符和HTML标记选择符，因为ID选择符是最后加上元素的，所以优先级最高，其次是类选择符。如果想超越这三者之间的关系，可以用!important提升样式表的优先权，例如：

p {

color: #FF0000!important;

}

.blue {

color: #0000FF;

}

#id1 {

color: #FFFF00;

}

我们同时对页面中的一个段落加上这3种样式，它最后会依照被!important申明的HTML标记选择符样式为红色文字。如果去掉!important，则依照优先权最高的ID选择符为黄色文字。

3.2.8 伪类—动态链接

伪类可以看作是一种特殊的类选择符，是能被支持CSS的浏览器自动识别的特殊选择符。它的最大用处就是可以对链接在不同状态下的对象定义不同的样式效果。

Ø         伪类的语法

伪类的语法是在原有的语法里加上一个伪类（pseudo-class）：

selector:pseudo-class {property: value}

伪类和类不同，是CSS已经定义好的，不能像类选择符一样随意用别的名字，根据上面的语法可以解释为对象（选择符）在某个特殊状态下（伪类）的样式。

类选择符及其他选择符也同样可以和伪类混用：

selector.class:pseudo-class {property: value}

Ø         锚的伪类

我们最常用的是4种a（锚）元素的伪类，它表示动态链接在4种不同的状态：link（未访问的链接）、visited（已访问的链接）、active（激活链接）、hover（鼠标停留在链接上）。我们把它们分别定义不同的效果，例如：

a:link {color: #ff0000; text-decoration: none} /* 未访问的链接 */

a:visited {color: #00ff00; text-decoration: none} /* 已访问的链接 */

a:hover {color: #ff00ff; text-decoration: underline} /* 鼠标在链接上 */

a:active {color: #0000ff; text-decoration: underline} /* 激活链接 */

在上面这个例子中，这个链接未访问时的颜色是红色并无下画线，访问后是绿色并无下画线，激活链接时为蓝色并有下画线，鼠标在链接上时为紫色并有下画线。

有时这个链接访问前鼠标指向链接时有效果，而链接访问后鼠标再次指向链接时却无效果了。这是因为你把a:hover放在了a:visited的前面，这样的话由于后面的优先级高，当访问链接后就忽略了a: hover的效果。所以根据叠层顺序，我们在定义这些链接样式时，一定要按照a:link、a:visited、a:hover、a:actived的顺序书写。

Ø         伪类和类选择符

将伪类和类组合起来使用，就可以在同一个页面中做几组不同的链接效果了，例如，我们定义一组链接为红色，访问后为蓝色；另一组链接为绿色，访问后为黄色：

a.red:link {color: #ff0000}

a.red:visited {color: #0000ff}

a.blue:link {color: #00ff00}

a.blue:visited {color: #ff00ff}

现在应用在不同的链接上：

<a class="red" href="…">这是第一组链接</a>

<a class="blue" href="…">这是第二组链接</a>

Ø         其他伪类

此外CSS 2还定义了首字和首行（first-letter和first-line）的伪类，可以对元素的首字或首行设定不同的样式。

下面看这个例子，我们在段落标记里定义文本首字尺寸为默认大小的3倍：

<style type=”text/css”>

p:first-letter {

font-size: 300%

}

</style>

<p>

这是一个段落，这个段落的首字被放大了。

</p>

此时的显示效果如下所示：

我们再定义一个首行样式的例子：

<style type="text/css">

p:first-line {font-size: 300%}

</style>

<p>

这是段落的第一行<br>

这是段落的第二行<br>

这是段落的第三行<br>

</p>

此时的显示效果如下所示：

本节课将分3个小节讲解CSS的核心技术。

Ø         CSS入门：包括发展历史、使用CSS的好处、基本模型、在HTML中引用CSS的3种方法，并通过第一个CSS实例认识CSS的魅力。

Ø         CSS的定义语法：基本格式、CSS注释、选择符组、类选择符、ID选择符、包含选择符、样式表的层叠性、伪类—动态链接。

Ø         CSS的常用属性：字体属性font、文本属性text、背景属性background、边框属性border、边距属性margin、间隙属性 padding、定位属性position、尺寸属性height/width、布局属性layout、滚动条属性scrollbar。

最后通过上机操作，使用CSS来美化上一章完成的企业信息管理系统的原始静态网站，经过美化后的网站代码打包为emis02（HTML+CSS）.zip。本节课的上机时间为60分钟。

3.1 CSS入门

首先了解CSS的发展历史和好处，然后讲解在HTML中引用CSS的方法，并通过第一个CSS实例展示CSS的魅力。

3.1.1 CSS的发展历史

从20世纪90年代初，在HTML被发明开始，样式表就以各种形式出现了，不同的浏览器结合了它们各自的样式语言，读者可以使用这些样式语言来调节网页的显示方式。一开始样式表是给读者用的，最初的HTML版本只含有很少的显示属性，读者来决定网页应该怎样被显示。

但随着HTML的成长，为了满足设计师的要求，HTML获得了很多显示功能。随着这些功能的增加，使用外来定义样式的语言越来越没有意义了。

1994年哈坤·利提出了CSS的最初建议。伯特·波斯（Bert Bos）当时正在设计一个叫做Argo的浏览器，他们决定一起合作设计CSS。

当时已经有过一些样式表语言的建议了，但CSS是第一个含有“层叠”的主意的。在CSS中，一个文件的样式可以从其他的样式表中继承下来。读者在有些地方可以使用他自己更喜欢的样式，在其他地方则继承，或“层叠”作者的样式。这种层叠的方式使作者和读者都可以灵活地加入自己的设计，混合各人的爱好。

哈坤于1994年在芝加哥的一次会议上第一次展示了CSS的建议，1995年他与波斯一起再次展示这个建议。当时W3C刚刚建立，W3C对CSS的发展很感兴趣，它为此组织了一次讨论会。哈坤、

波斯和其他一些人（比如微软的托马斯·雷尔登）是这个项目的主要技术负责人。1996年底，CSS已经完成。1996年12月CSS要求的第一版本发布。

1997年初，W3C内组织了专门管理CSS的工作组，其负责人是克里斯·里雷。这个工作组开始讨论第一版中没有涉及到的问题，其结果是1998年5月发布的第二版要求。到2007年为止，第三版还未完备。

3.1.2 使用CSS的好处

CSS最重要的目标是将文件的内容与它的显示分隔开来。在CSS出现前，几乎所有的HTML文件内都包含文件显示的信息，比如字体的颜色、背景应该是怎样的、如何排列、边缘、连线等都必须在HTML文件内列出，有时重复列出。CSS使作者可以将这些信息中的大部分隔离出来，简化HTML文件，这些信息被放在一个辅助的、用CSS语言编写的文件中。在HTML文件中只包含结构和内容的信息，在CSS文件中只包含样式的信息。

CSS是Web设计界的一次革命。CSS最主要的目的是将文件的结构（用HTML或其他相关的语言写的）与文件的显示（CSS）分隔开来，这个分隔有许多好处：

Ø         文件的可读性被加强。

Ø         文件的结构更加灵活。

Ø         作者和读者可以自己决定文件的显示。

Ø         文件的结构简化了。

CSS还可以使用其他的显示方式，比如声音（假如浏览器有阅读功能的话）或给盲人用的感受装置。此外CSS还可以与XHTML、XML或其他结构文件一起使用，唯一的条件是显示这种文件的浏览器装备了接受CSS的功能。

3.1.3 CSS基本模型

CSS里用到的许多CSS属性都与HTML属性相似。比如下面的HTML代码用来设置网页的背景颜色：

<body bgcolor="#FF0000">

使用CSS的话，我们可以这样获得同样的效果：

body {background-color: #FF0000;}

你会注意到，HTML和CSS的代码颇有几分相似。上例也向你展示了基本的CSS模型：

selector { property: value;}

它包含三个元素。

Ø         selector选择符：表明花括号中的属性设置将应用于哪些HTML元素，例如body。

Ø         property属性：指定设置目标元素的哪些属性，比如body的background-color。

Ø         value值：设置指定属性的值，比如设置body背景颜色属性的值为#FF0000。

3.1.4 在HTML网页中使用CSS的3种方法

为HTML文档使用CSS，有3种方法可供选择。下面对这3种方法进行了概括，我们建议你对第三种方法（即外部样式表）予以关注。

Ø         方法一：行内样式表（style属性）。

为HTML应用CSS的第一种方法，是使用HTML属性style，将属性和值放在style属性中即可。我们在上例的基础之上，通过行内样式表将页面背景设为红色：

<html>

<head>

<title>例子</title>

</head>

<body style="background-color: #FF0000;">

<p>这个页面是红色的</p>

</body>

</html>

Ø         方法二：内部样式表（style元素）。

为HTML应用CSS的另一种方法，是采用HTML元素style，添加在<head></head>元素之间。比如：

<html>

<head>

<title>例子</title>

<style type="text/css">

body {background-color: #FF0000;}

</style>

</head>

<body>

<p>这个页面是红色的</p>

</body>

</html>

Ø         方法三：外部样式表（引用一个样式表文件）。

我们推荐采用这种引用外部样式表的方法。外部样式表就是一个扩展名为.css的文本文件。跟其他文件一样，你可以把样式表文件放在Web服务器上或者本地硬盘上。比方说你的样式表文件名为style.css。style.css文件的代码如下例所示：

body {background-color: #FF0000;}

在一个HTML文档里引用一个外部样式表文件（style.css）的方法是：在HTML文档里创建一个指向外部样式表文件的链接（link）即可：

<link rel="stylesheet" type="text/css" href="style.css" />

要在href属性里给出样式表文件的地址。这行代码必须被插入HTML代码的头部（head），即放在标签<head>和标签</head>之间：

<html>

<head>

<title>例子</title>

<link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>

<p>这个页面是红色的</p>

</body>

</html>

这个链接告诉浏览器：在显示该HTML文件时，应使用给出的CSS文件进行布局。

这种方法的优越之处在于：多个HTML文档可以同时引用同一个样式表。换句话说，可以用一个CSS文件来控制多个HTML文档的布局。这一方法可以令你省去许多工作。例如，假设你要修改某网站的所有网页（比方说有100个网页）的背景颜色，采用外部样式表可以避免你手工修改这100个HTML文档的工作，只需几秒钟即可搞定—修改外部样式表文件里的代码即可。

3.1.5 第一个CSS实例

CSS可以使用更多的属性来定义网页的显示样式，这将在下一节中进行基本语法的讲解。在进行展开之前，我们先来看看CSS的魅力。

先来让我们看看下面这段没有CSS样式修饰的HTML代码的显示效果：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title>登录</title>

</head>

<body>

<div id="box">

<div id="title">登录</div>

<table id="loginTable">

    <tr>

        <td width="90px;"><label for="username">用户名：</label></td>

        <td><input type="text" name="username" id="username"

            style="width: 120px;" /></td>

    </tr>

    <tr>

        <td><label for="password">密码：</label></td>

        <td><input type="password" name="password" id="password"

            style="width: 120px;" /></td>

    </tr>

</table>

<br />

<div id="submit"><span style="width: 100px;"> <input

    type="submit" name="submit" value="登录" style="width: 80px;"></span> <span>

<a href="register.do?method=init">注册</a></span></div>

</div>

</body>

</html>

显示的界面样式如图3-1所示。

图3-1 使用CSS之前的页面

然后我们在该页面的<head></head>中添加如下的样式表代码：

<style>

    body{

        margin: 0px;

        padding: 0px 0px 0px 0px;

        font-family:Arial,"MS Sans Serif",Tahoma,sans-serif;

        font-size: 12pt;

        text-align:center;

    }

    #box{

        width: 350px;

        margin:15% auto;

        background:#f6f8f7 url(images/bottom-left.gif) no-repeat left bottom;

        padding:0px 0px 20px 0px;

        border-top: 1px solid #d1d1d1;

        border-right: 1px solid #d1d1d1;

    }

    #title{

        text-align : left;

        padding:5px 10px 5px 5px;

        font-family: Courier, "Courier New", monospace;

        font-size: 15pt;

        color: #000033;

        font-weight :bolder;

        border-left:1px solid #d1d1d1;

    }

    #loginTable{

        border:0;

        margin:0 auto;

        text-align:left;

    }

    #submit{

        font-weight:bolder;

    }

    input:focus{

        background:#ffc;

    }

</style>

经过美化后的效果如图3-2所示。

图3-2 使用CSS以后的页面

对比上面两个页面的代码，我们发现，两者的唯一区别就是一个没有使用CSS而另一个使用了，其余的代码完全一样。由此可见CSS在Web页面中发挥的重要作用。

</script>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<link rel="stylesheet" href="images/ im.css" type="text/css">

</head>
<body>
<script>

var online= new Array();

if (!document.layers)

document.write('<div id="divStayTopLeft" style="position:absolute">')

</script>

<layer id="divStayTopLeft">

<table border="0" width="110" cellspacing="0" cellpadding="0">

<tr><td width="110"><img border=0 src=images/kefu_up.gif></td></tr>

<script src="http://webpresence.qq.com/getonline?Type=1&414479513:67166729"></script>

<tr><td valign=middle background=images/kefu_middle.gif>

<script>

if (online[0]==0){
document.write("&nbsp;&nbsp;<img src=images/QQoffline.gif border=0 align=middle><a class='qqb' target=blank href='http://wpa.qq.com/msgrd?V=1&Uin=414479513&Site=在线咨询&Menu=no' title='客服不在线，请留言'>客服咨询</a>");
}
else
{
document.write("&nbsp;&nbsp;<img src=images/QQonline.gif border=0 align=middle><a class='qqa' target=blank href='http://wpa.qq.com/msgrd?V=1&Uin=414479513&Site=在线咨询&Menu=no' title='在线即时交谈'>客服咨询</a>");
}
</script>

</td></tr>

<tr><td valign=middle background=images/kefu_middle.gif>

<script>

if (online[1]==0)

document.write("&nbsp;&nbsp;<img src=images/QQoffline.gif border=0 align=middle><a class='qqb' target=blank href='http://wpa.qq.com/msgrd?V=1&Uin=67166729&Site=在线咨询&Menu=no' title='客服不在线，请留言'>客服咨询</a>");

else

document.write("&nbsp;&nbsp;<img src=images/QQonline.gif border=0 align=middle><a class='qqa' target=blank href='http://wpa.qq.com/msgrd?V=1&Uin=67166729&Site=在线咨询&Menu=no' title='在线即时交谈'>客服咨询</a>");

</script>

</td></tr>

<tr><td valign=middle background=images/kefu_middle.gif>

</td></tr>

<tr><td width="110"><img border=0 src=images/kefu_down.gif></td></tr>

</table>

</layer>

<table width="100%" border="0">
<tr>
    <td height="1200">&nbsp;</td>
</tr>
</table>

</body>
<script type="text/javascript">

//Enter "frombottom" or "fromtop"

var verticalpos="frombottom"

if (!document.layers)

document.write('</div>')

function JSFX_FloatTopDiv()

{

//下面的var startX =3是水平位置，250是垂直位置；默认情况在屏幕左侧显示，若要改为右侧显示，修改3的值（var startX =3改为var startX =screen.width-150）即可。
       var startX =screen.width-150
       //var startX =3,

       startY = 800;

       var ns = (navigator.appName.indexOf("Netscape") != -1);

       var d = document;

       function ml(id)

       {

              var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];

              if(d.layers)el.style=el;

              el.sP=function(x,y){this.style.left=x;this.style.top=y;};

              el.x = startX;

              if (verticalpos=="fromtop")

              el.y = startY;

              else{

              el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;

              el.y -= startY;

              }

              return el;

       }

       window.stayTopLeft=function()

       {

              if (verticalpos=="fromtop"){

              var pY = ns ? pageYOffset : document.body.scrollTop;

              ftlObj.y += (pY + startY - ftlObj.y)/8;

              }

              else{

              var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;

              ftlObj.y += (pY - startY - ftlObj.y)/8;

              }

              ftlObj.sP(ftlObj.x, ftlObj.y);

              setTimeout("stayTopLeft()", 10);

       }

       ftlObj = ml("divStayTopLeft");

       stayTopLeft();

}

JSFX_FloatTopDiv();

</script>

</html>

li{ vertical-align: bottom;}