本章主要内容：
1.HTML
2.CSS
3.javaScript
3.1 HTML
3.1.1 HTML简介
HTML（Hyper Text Markup Language）即超文本标记语言或超文本链接标示语言，是一种用来制作超文本文档的简单标记语言，它不是一种真正的编程语言，只是一种标记符。
3.1.2 HTML基本标签
例3-1 HTML页面简单示例(sample.html)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>欢迎来到HTML世界</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
这是我的第一个HTML网页!
<br>
<font face="楷体_GB3212" size="2">欢迎!</font>
</body>
</html>
代码中出现的几种标签
(1)单标签
某些标签只需单独使用就能完整地表达意思，控制网页效果，这类标签的语法是：
<标签>……
<br>，它表示换行，<hr>？
(2) 双标签
标签成对使用，由一个开始标签和一个结束标签构成。开始标签告诉Web浏览器从此处开始执行该标签所代表的功能，而结束标签告诉Web浏览器在这里结束该功能，结束标签的形式是在开始标签前加上一个斜杠。语法：
<标签>内容</标签>
(3)标签属性
在单标签和双标签的开始标签里，还可以包含一些属性，以达到个性化的效果。
其语法格式是：
<标签 属性1 属性2 属性3……>
各属性之间无先后次序，属性也可省略（即取默认值）。
HTML的基本标签
1.页面结构标签
HTML文档分为文档头和文档体两部分。在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示在网页中的各种正文信息。通常由3对标签来构成一个HTML文档的框架。
（1）<html></html >
这个标签对告诉浏览器这个文件是HTML文档。<html>标志用于HTML文档的最前边，用来标识HTML文档的开始，</html>放在HTML文档的最后边，用来标识HTML文档的结束。
（2）<head></head>
这个标签对中的内容是文档的头部信息，说明一些文档的基本情况，如文档的标题等，其内容不会显示在网页中。在此标签对之间可使用<title></title>、<script></ script >等描述HTML文档相关信息的标签对。
（3）<body></body>
这个标签对中的内容是HTML文档的主体部分，可包含<p></p>、<h1></h1>、<br>、<hr>等标签，它们所定义的文本、图像等将会在网页中显示出来。
2.页头标签
<title></title>标签对用来设定网页标题，浏览器通常会将标题显示在浏览器窗口的标题栏左边。<title></title>标签对只能放在<head></head>标签对之间。
3.标题标签
在HTML文档中，<hX></hX>标签可以定义不同显示效果的标题，X表示标题的级数，取值范围为1~6，X越小，标题字号越大。
<hX>可以使用属性align，用于设置标题文字的对齐方式，其取值如下：
left：左对齐。
right：右对齐。
center：居中对齐。
未设置该属性时，默认值是？
例3-2 使用标题标签title.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>标题标签使用</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
这一行文字不是标题<br>
<h1 align ="center">一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>
4. 段落标签
<p></p>标签用来创建一个新的段落，在此标签对之间加入的文本将按照段落的格式显示在浏览器上。
<p>标签可以有多种属性，例如align属性控制其内容的对齐方式；clear属性控制图文混排方式，其取值如下：
left：下一段显示在左边界处的空白区域。
right：下一段显示在右边界处的空白区域。
center：下一段的左右两边都不许有其它内容。
为了防止文档出错，尽量不要省略结尾标记</p>。
5.预定格式标签
在编辑文档时，如果希望将来浏览网页时仍能保留在编辑工具中已经排好的形式显示内容，可以使用<pre></pre>标签对。使用该标签对时，默认字体为10磅。
例3.3 使用预定格式票签
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>预定格式标签使用</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
床前明月光
疑是地上霜
举头望明月
低头思故乡
<pre>
兰陵美酒郁金香
玉碗盛来琥珀光
但使主人能醉客
不知何处是他乡
</pre>
</body>
</html
6.格式排版标签
（1）<br>
该标签强制文本换行，但不会在行与行之间留下空行。如果把<br>加在<p></p>标签对的外边，将创建一个大的回车换行，即<br>前边和后边的文本的行与行之间的距离比较大；
若放在<p></p>的里边则<br>前边和后边的文本的行与行之间的距离将比较小。
2）<hr>
该标签在网页中加入一条横跨网页的水平线，具有多种属性用于设置水平线的宽度、长度及显示效果等。
size属性：设置水平线的粗细，默认单位是像素。
width属性：设置水平线的宽度，默认单位是像素，也可以使用对屏幕的百分比表示。
noshade属性：该属性不用赋值，而是直接加入标签即可使用，它用来取消水平线的阴影（不加入此属性水平线默认有阴影）。
align属性：设置水平线的对齐方式。
color属性：设置水平线的颜色。
例如：<hr align="center" width ="600" size ="9" color ="blue">
7. 文字格式标签
<font></font>标签对通过设置<font>属性来控制文字的字体、大小、样式和颜色，各属性功能如下：
face属性：设置字体样式。
size属性：设置字体大小，值为整数，分为7个级别，默认字体大小为3。
color属性：设置字体颜色。
8.注释标签
在编写HTML文件时，为提高文件的可读性，可以使用<!--和-->标签对编写注释文字，其语法如下：
<!--注释语句-->
注释内容不会在浏览器中显示
3.1.3 列表
列表是一种规定格式的文字排列方式，用于列举内容。常用的列表分为有序列表、无序列表和自定义列表。
1.有序列表
有序列表是指各列表项按一定的编号顺序显示，列表用<ol>开始，以</ol>结束，每一个列表项用<li></li>标签定义，其语法如下：
<ol>
<li>列表项1</li>
<li>列表项2</li>
……
</ol>
在<ol>中可以使用type、start属性？。type属性用于设置编号的种类，其取值如下：
l：编号为数字，默认值。例如：1，2，3，……
A：编号为大写英文字母。例如：A，B，C，……
a：编号为小写英文字母。例如：a，b，c，……
I：编号为大写罗马字符。例如：Ⅰ，Ⅱ，Ⅲ，……
i：编号为小写罗马字符。例如：ⅰ，ⅱ，ⅲ，……
例3.4 使用有序列表
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>有序列表使用</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
Java方向：
<ol type ="A">
<li>Java程序设计</li>
<li>数据库技术</li>
<li>JSP程序设计</li>
</ol>
</body>
</html>
2. 无序列表
无序列表指各列表项之间没有顺序关系，列表项显示时前面有一个项目符号。无序列表用<ul>开始，以</ul>结束，每一个列表项同样也用<li></li>标签定义，其语法如下：
<ul>
<li>列表项1</li>
<li>列表项2</li>
……
</ul>
在<ul>、<li>中都可以使用type属性。
type属性取值如下：
disc：实心圆点，默认值。
circle：空心圆点。
square：实心正方形。
3.使用无序列表
3.1.4多媒体和超链接
1. 插入图像
使用<img>标签可以为网页添加.gif、.jpg、.png等格式的图像。语法格式：
<img src=“ ” 属性=“ ” ….>主要属性如下：
src：指定图像的源文件路径，可以使用相对路径、绝对路径或URL。
width：指定图像的宽度，单位为像素。
height：指定图像的高度，单位为像素。
hspace：指定图像水平方向的边沿空白，以免文字或其他图片过于贴近，单位为像素。
vspace：指定图像垂直方向的边沿空白，单位为像素。
border：指定图像边框厚度。
align：当文字与图像并排放置时，指定图像与文本行的对齐方式，其属性值可取top（与文本行顶部对齐）、center（水平居中对齐）、middle（垂直居中对齐）、bottom（底部对齐，默认值）、left（图像左对齐）、right（图像右对齐）。
alt：这是用以描述该图像的文字，图像不能显示时将显示该属性值；当鼠标移至图像上时，将该属性值作为提示信息显示。
例3-6插入图像
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>插入图像</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
小鸭！
<center>
<img src ="image/xy.gif" alt="小鸭" width ="100" height ="100" align ="center">
</center>
</body>
</html>
2. 插入视频
语法格式：<img src=“ ” dynsrc=“ ” 属性=“ ”>。
标签常用属性如下：
dynsrc：指定视频的源文件路径。
loop：指定视频循环播放次数。值为-1或infinite时，表示无限次循环播放。
loopdelay：指定两次播放的时间间隔。
start：指定何时开始播放视频。其属性值可取fileopen（默认值，即在链接到含该标签的页面时开始播放）、mouseove（把鼠标移到播放区域之上时才开始播放）
controls：指定在视频窗口下附加播放控制条。该属性直接添加，不用赋值。
例3-7 插入视频
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>插入视频</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
backkom熊 <img dynsrc="image/Backkom.wmv" start="mouseover" loop="3">
</body>
</html>
鼠标移到播放区的效果
3.插入背景音乐
使用<bgsound>标签可以在网页中添加.wav、.mid、.mp3等格式的背景音乐。语法格式：
<bgsound src=“ ” loop=“ 1”>
主要属性如下：
balance：指定音乐的左右均衡。
delay：指定播放延时。
loop：指定音乐循环播放次数。值为-1或infinite时，表示无限次循环播放。
src：指定音乐源文件的路径。
volume：指定音量
例3-8 插入背景音乐
<h2 align="center">笔记</h2>
<img align="left" src="image/美女周笔畅.jpg" width="600" height="100" alt="歌手.周笔畅" >
<bgsound src="image/笔记.mp3" loop="1">
4. 插入超链接
创建超链接就是在当前页面与其它页面间建立链接，使用户可以从一个页面直接跳转到其它的页面、图像或服务器。
格式为：
<a href="资源地址">超链接文本及图像</a>
其中，<a></a>标签对用来创建超链接，<a>的主要属性有：
href：指定链接地址。若是链接到网站外部，必须为URL地址；若是链接到网站内部页面，只需指明该页面的绝对路径或相对路径。
target：指定显示链接目标的窗口。
3.1.5 表格
表格是一种能够有效地描述信息的组织方式，由行、列、单元格组成，可以很好地控制页面布局，所以在网页中应用非常广泛。
许多网站都用多重表格来构建网站的总体布局，固定文本或图像的输出，还可以任意进行背景和前景颜色的设置。
1.<table>
2. <tr>
3. <th> 表格第一列的标题</th>
4. <th> 表格第二列的标题</th>
5. …
6. </tr>
7. <tr>
8. <td> 表格第一行的第一个单元格内容</td>
9. <td> 表格第一行的第二个单元格内容</td>
10. …
11. </tr>
12. <tr>
13. <td> 表格第二行的第一个单元格内容</td>
14. <td> 表格第二行的第二个单元格内容</td>
15. …
16. </tr>
17. …
18.</table>
1. table常用属性
1.border：设置表格边框的宽度，若为0表示边框不可见，单位为像素。
2.cellspacing：设置单元格边框到表格边框的距离，单位为像素。
3.cellpadding：设置单元格内文字到单元格边框的距离，单位为像素。
4.width：设置表格宽度。其值可为整数，单位为像素，如：100表示100像素；也可以是相对页面宽度的相对值，如：20%表示表格宽度为整个页面宽度的20%。
5.height：设置表格高度，取值方式与width一致。
6.bgcolor：设置表格背景色。可以是十六进制代码，也可以是英文字母，
7.bordercolor：设置表格边框颜色。
8.align：设置表格在水平方向的对齐方式，其值可为left、right、center。
9.valign：设置表格在垂直方向的对齐方式，其值可为top、middle、baseline。
2.<tr>常用属性
1.bordercolor：设置该行的外边框颜色。
2.bgcolor：设置该行单元格的背景颜色。
3.height：设置该行的高度。
4.align：设置该行各单元格的内容在水平方向的对齐方式，其值可为left、right、center。
5.valin：设置该行各单元格的内容在垂直方向的对齐方式，其值可为top、middle、bottom。
3.<td>常用属性
1.colspan：设置单元格所占的列数，默认值为1。
2.rowspan：设置单元格所占的行数，默认值为1。
3.background：设置单元格背景图像。
4.width：设置单元格宽度。
例3-9 创建表格
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>创建表格</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<table border="1" width="80%" bordercolor="blue" cellpadding="2">
<tr height ="50" valign="middle">
<th width="33%" colspan="2">Java方向</th>
<th width="36%" colspan="2">软件测试</th>
<th width="36%" colspan="2">.NET方向</th>
</tr>
<tr align="center">
<td width="16%">Java程序设计</td>
<td width="16%">数据库技术</td>
<td width="17%">Java程序设计</td>
<td width="17%">数据库技术</td>
<td width="17%">C#程序设计</td>
<td width="17%">数据库技术</td>
</tr>
<tr align="center">
<td width="16%">JSP程序设计</td>
<td width="16%">JavaEE技术</td>
<td width="17%">JSP程序设计</td>
<td width="17%">软件测试理论</td>
<td width="17%">ASP程序设计</td>
<td width="17%">ADO.NET</td>
</tr>
</table>
</body>
</html>
3.1.6 框架
在进行网站整体结构布局时，框架也是经常被使用的一种标签，主要用来分割窗口和插入浮动窗口，使同一个浏览器窗口同时显示多个网页，如果能有效的运用将有助于提高网页的浏览效率。
1.框架结构文件格式
1.<html>
2. <head>
3. <title>……</title>
4. </head>
5. <noframes>……</noframes>
6. <frameset>
7. <frame src="url">
8. …
9. <frameset>
10. <frame src="url">
11. …
12. </frameset>
13. </frameset>
14.</html>
2.框架结构基本标签
1）<noframes></noframes>
该标签对中的内容显示在不支持框架的浏览器窗口中。标签对中的内容可以是浏览器太旧，无法显示Frame功能的提示性语句，也可以是没有Frame语法的普通版本的HTML文档。这样，不支持Frame功能的浏览器，便会自动显示没有Frame语法的网页。
在此标签对之间应先紧跟<body></body>标签对，然后才可以使用其它没有Frame语法的普通标签。
2）<frameset></frameset>
该标签对用来定义一个框架结构容器，即用来定义网页被分割成几个子窗口，各个子窗口是如何排列的。
<frameset>常用属性包括：
rows：在垂直方向将浏览器窗口分割成多个子窗口，即浏览器中所有子窗口从上到下排列，同时设置每个子窗口所占的高度。该属性值可以是百分数（子窗口高度相对页面高度的相对值）、整数（绝对像素值）或星号(“*”)，其中星号代表那些未说明高度的空间，如果同一个属性中出现多个星号则将剩下的未被说明高度的空间平均分配。各个子窗口高度之间用逗号分隔。
cols：在水平方向将浏览器窗口分割成多个子窗口，即浏览器中所有子窗口从左到右排列，同时设置每个子窗口所占的宽度。该属性取值方式与rows一致。
border：设置子窗口边框宽度。
frameborder：设置子窗口是否显示边框。
onload：设置框架被载入时引发的事件。
onunload：设置框架被卸载时引发的事件。
<frame>标签放在<frameset></frameset>之间，用来定义框架结构中某一个具体的子窗口。常用属性如下：
1.src：设置该子窗口中将要显示的HTML文件地址，取值可以是url地址，也可以是相对路径或绝对路径。
2.name：设置子窗口的名字。
3.scrolling：指定子窗口是否显示滚动条，取值可以是“yes”（显示）、“no”（不显示）或“auto”（根据窗口内容自动决定是否显示滚动条）。
4.noresize：指定窗口不能调整大小，该属性直接加入标签中即可使用，不需赋值。
src和name这两个属性必须赋值
3.target属性
在框架结构子窗口的HTML文档中如果含有超链接，当用户点击该链接时，目标网页显示的位置由target属性指定，若没有指定则在当前子窗口打开。
<a href="目标网页地址" target="显示目标网页的子窗口名字">超链接文字</a>
例如：框架中定义了一个子窗口main，在main中显示jc.htm网页，则代码为：
<frame src="jc.htm" name="main">，
若jc.htm中有一个超链接，在点击该链接后，网页new.htm将要显示在名为main的子窗口中，则代码为：
<a href="new.htm" target="main">需要链接的文本</a>。
例3-10 框架结构使用(framesetTag.html)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>框架使用</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<frameset cols="70%,*" frameborder="yes" border="10">
<frameset rows="60%,*" frameborder="yes">
<frame src="top.html" name="top" scrolling="auto" noresize>
<frame src="bottom.html" name="bottom" scrolling="no" noresize>
</frameset>
<frame src="right.html" name="right" scrolling="no" noresize>
<noframes>
对不起，您的浏览器版本太低！
</noframes></frameset>
</html>
3.1.7 表单
表单在网页中用来供用户填写信息，以实现服务器获得用户信息，使网页具有交互功能。
1. 表单标签
<form action="url" method="get|post" name="value" onsubmit ="function" onreset="function" target="window"></form>
action属性：
设置服务器上用来处理表单数据的处理程序地址，处理程序可以是JSP程序、CGI（Common Gateway Interface，通用网关接口）程序、ASP.NET程序等，该属性值可以是URL地址也可以是电子邮件地址。
例如：action="http://localhost/sample/ShopCart.jsp"，表示当用户提交表单后，将调用服务器上的JSP页面ShopCart.jsp来处理用户的输入。
另外，采用电子邮件地址的格式是：action="mailto:接收用户输入信息的邮件地址"。
例如：action="mailto:youremail@zzuli.edu.cn"，表示把用户的输入信息发送到电子邮件地址youremail@zzuli.edu.cn。
method属性
设置处理程序从表单中获得信息的方式，取值可为get或post。
get方法将表单中的输入信息作为查询字符串附加在action指定的地址后（中间用“？”隔开）传送到服务器。查询字符串使用key="value"的形式定义，如果有多个域，中间用“&”隔开，如：http://localhost/sample/ShopCart.jsp？flowerid="0169"&count="16"，问号后面的即为查询字符串。get方法在浏览器的地址栏中以明文形式显示表单中各个表单域的值，对数据的长度有限制
post方法将表单中用户输入的数据进行包装，按照HTTP传输协议中的post方式传送到服务器，且对数据的长度基本没有限制，目前大都采用此方式。
name属性：设置表单的名字。
onsubmit、onreset属性：设置在单击了“submit”或“reset”按钮后要执行的脚本函数名。
target属性：设置显示表单内容的窗口名。
HTML对表单的数量没有限制，但一个页面中如果有太多的表单不易于阅读，因此需合理设置。
2. 表单域
1）单行输入域
<input>标签用来定义单行输入域，用户可在其中输入单行信息。主要属性如下：
type属性：设置输入域的类型，取值如表3-1所示。
1.name属性：设置输入域的名字。
2.value属性：设置输入域的默认值。
3.align属性：设置输入域位置，可取值left（靠左）、right（靠右）、middle（居中）、top（靠上）、bottom（靠底）。
4.onclick属性：设置按下按钮后执行的脚本函数名。
2）多行输入域
<textarea></textarea>标签对用来定义多行文本输入域，主要属性如下：
1.name属性：设置输入域名字。
2.rows属性：设置输入域的行数。
3.cols属性：设置输入域的列数。
4.wrap属性：设置是否自动换行，属性值可取off（不自动换行）、hard（自动硬回车换行，换行标记一同被传送到服务器）、soft（自动软回车换行，换行标记不会被传送到服务器）。
3）选择域
<select></select>标签对用来建立一个下拉列表，<option>标签用来定义下拉列表中的一个选项，用户可以从列表中选择一项或多项。
①<select></select>主要属性：
1.name属性：设置下拉列表的名字。
2.size属性：设置下拉列表中选项个数，默认值为1。
3.multiple属性：表示下拉列表支持多选。
②<option>主要属性：
1.selected属性：表示当前选项被默认选中。
2.value：设置当前选项的值，在该项被选中之后，该项的值将被送到服务器。
3。表单按钮
button></button>标签对用于定义提交表单内容给服务器的按钮，主要属性有type和accesskey。
1.type属性：设置按钮类型，属性值可取button（一般按钮）、reset（复位按钮）、submit（提交按钮）。他们与<input>中同名的属性具有相同的功能。
2.accesskey属性：设置按钮热键，即按下Alt键的同时按下该属性值所对应得键便可以快速定位到该按钮。
例3-11 表单使用(formTag.html)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>表单使用</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<form name="form1" method="post" action ="register.jsp">
<h1 align ="left" >注册</h1>
<br>
<p>用户名：<input type ="text" name="username"></p>
<p>密 码：<input type ="password"name="userpwd1"></p>
<p>确认密码：<input type ="password"name="userpwd2"></p>
<p>密码提示问题：<input type="text" name="textfield"></p>
<p>密码回答问题：<input type="text" name="textfield"> </p>
<p>真实姓名：<input type="text" name="textfield"></p>
<p>性 别：<input type ="radio" name ="usersex" value="男">男
<input type ="radio" name ="usersex" value="女">女
<p>出生日期：
<select name="select" size="1">
<option selected>1989</option>
<option>1990</option>
<option>1991</option>
<option>1992</option>
<option>1993</option>
<option>1994</option>
<option>1995</option>
<option>1996</option>
<option>1997</option>
</select>
年
<select name="select" size="1">
<option selected>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
</p>
<p>证件类型：
<select name="select">
<option value="xsz">学生证
<option value="sfz" selected>身份证
<option value="jgz">军官证
</select>
</p>
<p>证件号码：<input type ="text" name="userid"></p>
<p><input type ="submit" name="submit" value ="提交">
<input type ="reset" name="reset" value ="取消">
</p>
</form>
</body>
</html>
3.2 CSS
3.2.1 CSS简介
对于任何Web网站的开发通常都包含两方面的内容，即站点的外观设计和站点的功能实现，而成功的网站应该在这两方面保持平衡，既设计美观，又方便实用。
站点的外观设计包括页面和控件的外观样式、背景色、前景色、字体、网页布局等，如果通过HTML的各种标签及其属性实现满足要求的外观，编码实在是太复杂、太臃肿了，而CSS可以助你
一臂之力
CSS（Cascading Style Sheets，级联样式表）是一种设计网页样式的工具，借助CSS的强大功能，网页将在你丰富的想象力下千变万化。
CSS是W3C为弥补HTML在显示属性设定上的不足而制定的一套扩展样式标准，其重新定义了HTML中文字显示样式，并增加了一些新的概念，如类、层等，可以实现对文字重叠、定位等。
3.2.2 CSS样式表定义
定义样式表的方法有三种：
1. 通过HTML标签定义样式表
（1） 引用样式的对象{标签属性:属性值；标签属性:属性值；标签属性:属性值；……}
（2）
“标签属性：属性值”，这是一一对应的，每个属性与属性值对之间用分号隔开。
背景颜色属性background-color；而在脚本中，对象属性则连写成backgroundColor，第二个单词首字母大写，如有三个单词则第三个单词首字母也要大写，
注意，在Javascript中是严格区分大小写的。
例如，h1,h2{text-align:center;color:blue}
2. 使用id定义样式表
在HTML页面中id选择符用来对某个单一元素定义单独的样式，定义id选择符要在id名称前加上一个“#”号。使用id定义样式表的基本语法如下：
#id名称{标签属性:属性值；标签属性:属性值；标签属性:属性值；……}
例如：#sample{font-family:宋体;font-size:60pt}，
<p id=sample>段落文本</p>。
3.使用class定义样式表
（1）标签名.类名{标签属性:属性值；标签属性:属性值；标签属性:属性值；……}
例如：h1.center{text-align:center}，该center类的样式只能用在<h1>标签上。
（2）.类名{标签属性:属性值；标签属性:属性值；标签属性:属性值；……}
例如：.text {font-family: 宋体;color: red;}
<p class ="text">段落文本</p>，
3.2.3 在HTML中加入CSS的方法
1. 嵌入式样式表
<p style=“color:red;font-size:10pt”>我爱我的祖国</p>
这个样式表只是让当前的<p></p>标签对中的文字为红色，字体大小为10pt
2. 内联式样式表
例3-12 内联式样式表的使用（style1.html）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>内联式样式表使用</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> <!-- p{font-family:宋体;font-size:9pt;color:blue;text-decoration: underline} h2{font-family:宋体;font-size:13pt;color:red} --> </style> </head> <body> <form name="form1" method="post"> <h2>网页使用内联式样式表，本标题字体大小为13磅，字体颜色为红色</h2> <p>本段文字字体大小为9磅，颜色为蓝色</p> </form> </body> </html>
3.外联式表样
原文：http://www.cnblogs.com/elite-2012/p/3553634.html
