7.1 CSS链接的美化
1.文字链接的美化：在HTML5 中，<a></a>标签始终定义超链接，用于从一张页面链接到另一张页面。<a>元素最重要的属性是 href 属性，它指示链接的目标，如果未设置 hre 属性，后续多个属性均无法使用，则只是超链接的占位符。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>利用CSS和多媒体美化页面</title>
<style>
/*文字链接的美化*/
a{
margin: 10px;
}
a:link{
color: #ff0000;
font-size: 30px;
}
a:hover{
font-size: 20px; /*鼠标悬停文字链接上改变大小*/
}
a:active{
font-size: 50px; /*鼠标点击文字链接上改变大小*/
}
</style>
</head>
<body>
<a>链接1</a>
<a>链接2</a>
<a>链接3</a>
<a>链接4</a>
</body>
</html>
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>例题7.1</title>
<style type="text/css">
#menu{
text-align: center; /**/
}
a{
margin: 10px; /**/
}
a:link{
font-size: 20px; /**/
}
/**/
a:hover{
font-size: 18px;
color: red;
text-decoration: overline underline;
}
/**/
a:active{
font-size: 20px;
color: green;
text-decoration: none;
}
</style>
</head>
<body>
<div id="menu">
<h2>服务中心菜单栏</h2>
<a href="index.html1" target="_blank">加入我们</a>
<a href="index.html2" target="_blank">媒体报道</a>
<a href="index.html3" target="_blank">官方博客</a>
<a href="index.html4" target="_blank">帮助中心</a>
</div>
</body>
</html>
2. 按钮链接的美化：为了让链接外观看起来像按钮特效，设计者会为链接加上不同的边框阴影和相同的背景颜色加以实现。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>例题7.2</title>
<style type="text/css">
#menu{
text-align: center;
}
a{
font-size: 20px;
font-weight: 700;
text-decoration: none;
background-color: lightcyan;
color: red;
margin: 5px;
padding: 10px 15px;
border-radius: 30px;
}
a:link,a:visited{
box-shadow: -5px -5px 10px black;
}
a:hover{
font-size: 26px;
}
a:active{
font-size: 20px;
box-shadow: 6px 6px 10px black;
}
</style>
</head>
<body>
<div id="menu">
<h2>服务中心菜单栏</h2>
<a href="#" target="_blank">加入我们</a>
<a href="#" target="_blank">媒体报道</a>
<a href="#" target="_blank">官方博客</a>
<a href="#" target="_blank">帮助中心</a>
</div>
</body>
</html>
3. 背景链接的美化：除了文字链接和按钮链接，设计者还会为链接设置不同的背景颜色或背景图片，实现背景链接。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>例题7.3</title>
<style type="text/css">
#menu{
text-align: center; /**/
}
a{
font-size: 20px;
text-decoration: none;
padding: 10px 15px;
margin: -3px; /**/
}
a:link,a:visited{
background-color: lightgray;
color: red;
}
a:hover{
background-color: brown;
color: white;
}
a:active{
font-weight: 700;
color: lawngreen;
}
</style>
</head>
<body>
<div id="menu">
<h2>服务中心菜单栏</h2>
<a href="#" target="_blank">加入我们</a>
<a href="#" target="_blank">媒体报道</a>
<a href="#" target="_blank">官方博客</a>
<a href="#" target="_blank">帮助中心</a>
</div>
</body>
</html>
设置背景图片链接的美化：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>例题7.3</title>
<style type="text/css">
#menu{
text-align: center; /**/
}
a{
font-size: 20px;
text-decoration: none;
padding: 10px 15px;
margin: -3px; /**/
}
a:link,a:visited{
/* background-color: lightgray; */ /*设置背景颜色美化*/
background-image: url(img/menu_1.jpg); /*设置背景图片美化*/
color: red;
}
a:hover{
/* background-color: brown; */ /*设置背景颜色美化*/
background-image: url(img/menu_2.jpg); /*设置背景图片美化*/
color: white;
}
a:active{
font-weight: 700;
color: lawngreen;
}
</style>
</head>
<body>
<div id="menu">
<h2>服务中心菜单栏</h2>
<a href="#" target="_blank">加入我们</a>
<a href="#" target="_blank">媒体报道</a>
<a href="#" target="_blank">官方博客</a>
<a href="#" target="_blank">帮助中心</a>
</div>
</body>
</html>
7.2 CSS 列表的美化
在CSS样式中，主用是通过list-style-type、list-style-image和list-style-position这3个属性改变列表修饰符的类型。
| 属性 | 说明 |
| list-style | 复合属性，在一个声明中设置所有的列表属性 |
| list-style-type | 设置列表项标记的类型 |
| list-style-image | 使用图像来替换列表项的标记 |
| list-style-position | 设置在何处放置列表项标记 |
1.列表项类型：此属性用来设置或检索对象的列表项所使用的标记类型。若 list-style-image 属性值为none或指定url地址的图片不能被显示时，此属性将发生作用。
| 属性值 | 说明 | 属性值 | 说明 |
| dise | 默认值，标记是实心圆 | circle | 标记是空心圆 |
| square | 标记是实心方块 | decimal | 标记是阿拉伯数字 |
| lower-roman | 标记是小写罗马数字 | upper-roman | 标记是大写罗马数字 |
| lower-alpha | 标记是小写英文字母 | upper-alpha | 标记是大写英文字母 |
| none | 无列表项标记 |
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>列表项类型</title>
<style>
.one{
list-style-type: square;
}
.two{
list-style-type: circle;
}
.three{
list-style-type: decimal;
}
</style>
</head>
<body>
<div>
<h3>产品经理助理</h3>
<ol class="one">
<li>韩馨雨</li>
<li>赖晓庆</li>
<li>陈云依</li>
</ol>
</div>
<div>
<h3>后端开发工程师</h3>
<ol class="two">
<li>邱紫悦</li>
<li>詹文海</li>
<li>宁英鸿</li>
</ol>
</div>
<div>
<h3>前端开发工程师</h3>
<ol class="three">
<li>陈甜</li>
<li>黄星雨</li>
<li>杨欢</li>
</ol>
</div>
</body>
</html>
2.列表项图像：此属性用来设置或检索对象的列表项标记的图像。
| 属性值 | 说明 |
| none | 默认值，无图形被显示 |
| url | 图像的路径 |
| inherit | 规定从父元素继承值 |
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>列表项图像</title>
<style>
.one{
list-style-image: url(img/list1.jpg);
}
.two{
list-style-image: url(img/list2.jpg);
}
.three{
list-style-image: url(img/list3.jpg);
}
</style>
</head>
<body>
<div>
<h3>产品经理助理</h3>
<ol class="one">
<li>韩馨雨</li>
<li>赖晓庆</li>
<li>陈云依</li>
</ol>
</div>
<div>
<h3>后端开发工程师</h3>
<ol class="two">
<li>邱紫悦</li>
<li>詹文海</li>
<li>宁英鸿</li>
</ol>
</div>
<div>
<h3>前端开发工程师</h3>
<ol class="three">
<li>陈甜</li>
<li>黄星雨</li>
<li>杨欢</li>
</ol>
</div>
</body>
</html>
3.列表项位置：此属性用来设置对象的列表项标记相对于列表项内容的位置。
| 属性值 | 说明 |
| outside | 默认值，保持标记位于文本的左侧。列表项标记放置在文本以外，且环绕文本不根据标记对齐 |
| inside | 列表项标记放置在文本以内，且环绕文本根据标记对齐 |
| inherit | 规定从父元素继承值 |
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>列表项位置</title>
<style>
li{
border: 2px solid #000000;
width: 100px;
}
.one{
list-style-image: url(img/list1.jpg);
list-style-position: outside;
}
.two{
list-style-image: url(img/list2.jpg);
list-style-position: inside;
}
.three{
list-style-image: url(img/list3.jpg);
}
</style>
</head>
<body>
<div>
<h3>产品经理助理</h3>
<ol class="one">
<li>韩馨雨</li>
<li>赖晓庆</li>
<li>陈云依</li>
</ol>
</div>
<div>
<h3>后端开发工程师</h3>
<ol class="two">
<li>邱紫悦</li>
<li>詹文海</li>
<li>宁英鸿</li>
</ol>
</div>
<div>
<h3>前端开发工程师</h3>
<ol class="three">
<li>陈甜</li>
<li>黄星雨</li>
<li>杨欢</li>
</ol>
</div>
</body>
</html>
4.复合列表样式：这个属性是设定列表项样式的一个快捷的综合写法。用这个属性可以同时设置列表项类型属性(list-style-type)，列表项图片属性 (list-style-image)和列表项位置属性 (list-style-position)。
语法为：
list-style: list-style-type | list-style-position | list-style-image代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>复合列表样式</title>
<style>
li{
border: 2px solid #000000;
width: 100px;
}
.one{
list-style: square url(img/list1.jpg) outside;
}
.two{
list-style: circle url(img/list2.jpg) inside;
}
.three{
list-style: decimal url(img/list3.jpg) inside;
}
.three li{
padding left: 20px;
}
</style>
</head>
<body>
<div>
<h3>产品经理助理</h3>
<ol class="one">
<li>韩馨雨</li>
<li>赖晓庆</li>
<li>陈云依</li>
</ol>
</div>
<div>
<h3>后端开发工程师</h3>
<ol class="two">
<li>邱紫悦</li>
<li>詹文海</li>
<li>宁英鸿</li>
</ol>
</div>
<div>
<h3>前端开发工程师</h3>
<ol class="three">
<li>陈甜</li>
<li>黄星雨</li>
<li>杨欢</li>
</ol>
</div>
</body>
</html>
5.利用背景图像实现列表项标记：虽然使用list-style-image属性很容易实现设置列表项图像的目的，但这个属性不能够精确控制图像替换的项目符号距离文字的位置。因此，可以利用 background-image加以实现。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>示例7.8</title>
<style>
li{
background: url(img/list4.jpg) no-repeat;
padding-left: 30px;
list-style-type: none;
}
</style>
</head>
<body>
<h3>快递公司</h3>
<ol>
<li>顺丰快递</li>
<li>圆通速递</li>
<li>百世汇通</li>
<li>韵达快递</li>
</ol>
</body>
</html>
7.3 CSS 表格的美化
常用网页的布局形式是 DIV+CSS，但并不是所有的布局都是如此，必要时，表格的使用对零散内容的汇总分类更为便利。所以，尽管在前面的章节中已经学习了表格的基本用法，但是设计者需要利用CSS 设置表格样式的多样化，进而美化表格的外观。
| 属性 | 说明 |
| border-collapse | 设置单元格边框是否合并 |
| border-spacing | 设置单元格的间距 |
| caption-side | 设置表格标题的位置 |
| empty-cells | 对空单元格的处理方式 |
1.border-collapse：border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是按照标准的HTML 中那样分开显示。
语法为：
border-collapse:separate | collapse | inherit参数:separate 是默认值，边框分开不合并，不会忽略 border-spacing 和empty-cells 属性。collapse 边框合并，如果相邻，则共用一个边框，会忽略 border-spacing 和empty-cells属性。Inherit 是从父元素继承值。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例7.9</title>
<style type="text/css">
table{
border-collapse: collapse;
}
table,td,th{
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>课程</th>
<th>学分</th>
<th>考试形式</th>
</tr>
<tr>
<td>SQL数据库技术</td>
<td>4.0</td>
<td>笔试</td>
</tr>
<tr>
<td>PHP程序设计</td>
<td>6.0</td>
<td>机考</td>
</tr>
</table>
</body>
</html>
2. border-spacing：border-spacing 属性作用等同于标签属性 cellspacing，即当表格边框独立时(border-col-lapse 属性等于 separate)，相邻单元格边框之间的横向和纵向的间距。
语法为：
border-spacing:length；参数:length 由数字和单位组成的长度值，不允许负值。如果提供全部两个length 值时，第一个作用于横向间距，第二个作用于纵向间距。如果只提供一个length 值时，这个值将同时作用于横向和纵向上的间距。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例7.10</title>
<style type="text/css">
.one{
border-collapse: separate;
border-spacing: 10px;
}
.two{
border-collapse: separate;
border-spacing: 10px 30px;
}
table,td{
border: 1px solid black;
}
</style>
</head>
<body>
<table class="one">
<tr>
<td>大数据</td>
<td>物联网</td>
</tr>
<tr>
<td>云计算</td>
<td>人工智能</td>
</tr>
</table>
<br />
<table class="two">
<tr>
<td>大数据</td>
<td>物联网</td>
</tr>
<tr>
<td>云计算</td>
<td>人工智能</td>
</tr>
</table>
</body>
</html>
3. caption-side：caption-side 属性设置或检索表格标题在表格的哪一边，此属性必须和表格的 caption标签同时使用。
语法为：
caption-side: top | right | bottom | left；参数:top 是默认值，指定标题在表格上边。right 指定标题在表格右边。bottom 指定标题在表格下边。left 指定标题在表格左边。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例7.11</title>
<style type="text/css">
.cap{
/* caption-side: bottom; */
caption-side: top; /*默认值，标题在表格上方*/
}
table,th,td{
border: 1px solid black;
}
</style>
</head>
<body>
<table class="cap">
<caption>
<h2>值班表</h2>
</caption>
<tr>
<th>时间</th>
<th>值日生</th>
</tr>
<tr>
<td>8：00——12：00</td>
<td>张红敏</td>
</tr>
<tr>
<td>14：00——17：00</td>
<td>李凯全</td>
</tr>
<tr>
<td>19：00——22：00</td>
<td>曾天艺</td>
</tr>
</table>
</body>
</html>
4. empty-cells：empty-cells 属性设置或检索当表格的单元格无内容时，是否显示该单元格的边框。只有当表格边框独立时(即border-collapse 属性等于 separate) 此属性才起作用。
语法为：
empty-cells:show | hide；参数:show是默认值，指定当表格的单元格无内容时，显示该单元格的边框。hide 指定当表格的单元格无内容时，隐藏该单元格的边框。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例7.12</title>
<style type="text/css">
.emp{
border-collapse: separate;
empty-cells: hide;
}
table,th,td{
border: 1px solid black;
}
</style>
</head>
<body>
<table class="emp">
<tr>
<td>有内容的单元格</td>
<td>有内容的单元格</td>
</tr>
<tr>
<td>有内容的单元格</td>
<td></td>
</tr>
<tr>
<td>有内容的单元格</td>
<td>有内容的单元格</td>
</tr>
</table>
</body>
</html>
7.4 多媒体的添加与美化
1.<embed>标签的使用：利用<embed>标签可以在网页中插人各种型的多媒体文件，如WMV、MP3、AVI，MP4、SWF、MOV、RMVB等。但是在使用<embed>标签之前，需要安装相应的插件，否则多媒体文件不能正常播放。
| 属性 | 说明 |
| src | 必选项，定义嵌人内容的URL |
| type | 定义嵌人内容的类型 |
| width | 设置嵌人内容的宽度 |
| height | 设置嵌入内容的高度 |
利用<embed> 标签插入Flash动画文件。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>示例7.13</title>
</head>
<body>
<center>
<h2>三月祝福</h2>
<embed src="media/阳春三月.swf" width="390" height="350"></embed>
</center>
</body>
</html>
利用<embed> 标签插入MP4视频文件。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>示例7.14</title>
</head>
<body>
<center>
<h2>第五空间</h2>
<embed src="media/第五空间.mp4" width="600px" height="400px"></embed>
</center>
</body>
</html>
利用<embed> 标签插入MP3音乐文件。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>示例7.15</title>
</head>
<body>
<center>
<h2>听!是谁在唱歌</h2>
<embed src="media/听!是谁在唱歌.mp3" height="200"></embed>
</center>
</body>
</html>
2.<bgsound>标签的使用：<bgsound>是 IE 浏览器中设置网页背景音乐的元素，利用它可以将音乐文件嵌人到网页中又不占页面空间，可以播放的声音文件格式包括 WAV、AU、MIDI、MP3等。
| 属性 | 说明 |
| src | 必选项，定义嵌入内容的URL |
| loop | 该属性表明音频被播放的次数，取值“-1”为无限循环 |
| balance | 该属性取值在-10000到+10000，它决定扬声器之间的音量如何分配 |
| volume | 该属性取值在-10000到0，它决定音频的音量大小 |
| delay | 该属性设置音频的播放延时 |
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例7.16</title>
</head>
<body>
<center>
<h2>童话镇————背景音乐</h2>
<bgsound src="media/童话镇.mp3" loop="-1"></bgsound>
</center>
</body>
</html>
3.HTML5新增的多媒体标签：以前大多数音频、视频是通过插件 (例如 Flash) 来播放的，然而并非所有的浏览器都拥有同样的插件。HTML5新增了audio和 video 元素，分别用来插人声音和视频。至于格式，只要使用支持HTML5的浏览器就可以了，不需要使用其他的任何插件。<audio>和<video>标签的属性大致相同。
| 属性 | 说明 |
| autoplay | 定义音频或视频在就绪后马上播放 |
| controls | 定义控件的显示(比如播放/暂停按钮) |
| loop | 定义音频或视频结束时是否重新开始播放 |
| preload | 规定当网页加载时，音频或视频是否默认被加载以及如何被加载。如果使用“auto-play”，则忽略该属性 |
| src | 必选项，定义音频或视频的 URL |
| height | 设置视频播放器的高度 |
| width | 设置视频播放器的宽度 |
（1）<audio>标签：<audio>标签定义声音，比如音乐或其他音频流，此标签默认是隐藏的。
注：<audio>标签允许包含多个<source>标签，<source>标签可以链接不同的音频文件，浏览 器将使用第一个可识别的格式。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例7.17</title>
</head>
<body>
<center>
<h2>audio 声音文件</h2>
<audio src="media/铃铛.wav" controls="controls">您的浏览器不支持audio元素。</audio>
</center>
</body>
</html>
（2）<video>标签：<video>标签定义视频，例如电影片段或其他视频流。<video>标签在页面中嵌入视频的代码格式和<audio>标签的使用相似。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例7.18</title>
</head>
<body>
<center>
<h2>video 视频文件</h2>
<!-- <video src="media/Easy.mp4" controls="controls">您的浏览器不支持video元素。</video> -->
<video width="500" height="500" controls="controls">
<source src="media/movie.ogg" type="video/ogg"></source>
<source src="media/第五空间.mp4" type="video/mp4"></source>
您的浏览器不支持video元素。
</video>
</center>
</body>
</html>