7.1 CSS链接的美化
通过对网页中元素、布局和色彩的合理设计，可以使网页达到较好的视觉效果。网页中常用超链接列表和表格等网页元素，所以，对这些元素进行美化，可以大大提高网站的质量
7.1.1.文字链接的美化
在HTML5中，<a></a>标签始终定义超链接，用于从一张页面链接到另一张页面
<!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.html" target="_blank">加入我们</a><a href="index.htm2" target="_blank">媒体报道</a><a href="index.htm3" target="_blank">官方博客</a><a href="index.htm4" target="_blank">帮助中心</a></div></body>
</html>
7.1.2.按钮链接的美化
为了让链接外观看起来像按钮特效，设计者会为链接加上不同的边框阴影和相同的背景颜色加以实现
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>示例7.1</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>
7.1.3背景链接的美化
除了文字链接和按钮链接，设计者还会为链接设置不同的背景颜色或背景图片，实现背景链接
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>示例7.1.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: lightgrey;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>
7.2 CSS列表的美化
在css样式中，主要是通过 list-style-type、list-style-image 和 list-style-position这三个属性改变列表修饰符的类型。
7.2.1.列表项类型（list-style-type）
此属性用来设置或检索对象的列表项所使用的标记类型。若 list-style-image属性值为none或指定 url 地址的图片不能被显示时，此属性将发生作用
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>第七章 利用CSS和多媒体美化页面</title><style>.ceshi{list-style-type: square;}.houduan{list-style-type: circle;}.qianduan{list-style-type: decimal;}</style></head><body><div><h3>测试工程师</h3><ol class="ceshi"><li>张三</li><li>李四</li><li>麻子</li></ol></div><div><h3>后端开发工程师</h3><ol class="houduan"><li>小明</li><li>小美</li><li>小胖</li></ol></div><div><h3>前端开发工程师</h3><ol class="qianduan"><li>王二</li><li>甲乙</li><li>丙丁</li></ol></div></body>
</html>
7.2.2.列表项图像（list-style-image）
list-style-image 是 CSS 中的一个属性，它允许你为列表项（list item）设置一个自定义的图像作为标记，而不是使用默认的圆点、方块或其他符号。以下是关于 list-style-image 属性的详细解释
通过 list-style-image 属性，你可以为网页上的列表项添加更具个性和吸引力的标记，从而提升用户体验和网页的整体视觉效果。
代码如下
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>第七章 利用CSS和多媒体美化页面</title><style>/* 7.2.2.列表项图像（list-style-image） */.ceshi{list-style-image: url("../img/list1.jpg");}.houduan{list-style-image: url('../img/list2.jpg');}.qianduan{list-style-image: url("../img/list3.jpg");}</style></head><body><div><h3>测试工程师</h3><ol class="ceshi"><li>张三</li><li>李四</li><li>王二</li></ol></div><div><h3>后端开发工程师</h3><ol class="houduan"><li>小明</li><li>小美</li><li>小张</li></ol></div><div><h3>前端开发工程师</h3><ol class="qianduan"><li>甲乙</li><li>丙丁</li><li>麻子</li></ol></div></body>
</html> 
7.2.3.列表项位置（list-style-position）
list-style-position 是 CSS 中的一个属性，它用于设置列表项标记（如圆点、数字或自定义图像）相对于列表项内容的位置。以下是关于 list-style-position 属性
使用方法
选择元素：
确定你想要应用 list-style-position 属性的列表元素，如 <ul>（无序列表）、<ol>（有序列表）以及它们的子元素 <li>（列表项）。
设置 CSS：
在你的 CSS 文件中，为这些元素设置 list-style-position 属性。
例如：ul.my-list { list-style-position: inside; } 或 ol.my-list { list-style-position: outside; }。
应用样式：
在你的 HTML 文件中，将包含列表项的 <ul> 或 <ol> 元素的 class 属性设置为相应的类名（如 my-list）
通过 list-style-position 属性，你可以更灵活地控制列表项标记的位置，从而创建更符合你设计需求的列表布局
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>第七章 利用CSS和多媒体美化页面</title><style>/* 7.2.3.列表项位置（list-style-position） */li{border: 2px solid #000000;width: 100px;}.ceshi{list-style-image: url("../img/list1.jpg");list-style-position: outside;}.houduan{list-style-image: url("../img/list2.jpg");list-style-position: inside;}.qianduan{list-style-image: url("../img/list3.jpg");}</style></head><body><div><h3>测试工程师</h3><ol class="ceshi"><li>张三</li><li>李四</li><li>王二</li></ol></div><div><h3>后端开发工程师</h3><ol class="houduan"><li>小明</li><li>小美</li><li>小张</li></ol></div><div><h3>前端开发工程师</h3><ol class="qianduan"><li>甲乙</li><li>丙丁</li><li>王二</li></ol></div></body>
</html>
7.2.4.复合列表样式（list-style）
这个属性是设定列表项样式的一个快捷的综合写法。用这个属性可以同时设置列表项类
型属性（list-style-type)，列表项图片属性（list-style-image）和列表项位属性（list-style-position
7.2.5.利用背景图像实现列表项标记
在 CSS 中，你可以使用背景图像来为列表项（<li> 元素）添加自定义的标记，而不是使用默认的列表样式标记（如圆点、数字等）。这种方法允许你使用任何图像作为列表项的标记，从而提供更大的设计灵活性
虽然使用 list-style-image 属性很容易实现设置列表项图像的目的，但这个属性不能够精确控制图像替换的项目符号距离文字的位置。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>示例7.8</title><style type="text/css">li{background: url("../img/list4.jpg") no-repeat;padding-left: 30px;height: 30px;list-style-type: none;}</style></head><body><h3>快递公司</h3><ol><li>邮政快递</li><li>顺丰快递</li><li>京东快递</li><li>圆通快递</li><li>中通快递</li><li>韵达快递</li><li>申通快递</li></ol></body>
</html>
7.3 CSS表格的美化
CSS表格的美化涉及多个方面，包括边框、背景、文本对齐、内边距、宽度和高度等。以下是一些具体的CSS属性和技巧，可以帮助你美化表格
7.3.1.border-collapse
border-collapse属性设置表格的边框是否被合并为一个单一的边框，还是按照标准的HTML中那样分开显示
除了边框样式外，你还可以为表格添加其他样式，如背景色、文字样式等，以进一步增强表格的美观性
<!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>
7.3.2..border-spacing
border-spacing属性作用等同于标签属性cellspacing，即当表格边框独立时(border-col- lapse 属性等于separate)，相邻单元格边框之间的横向和纵向的间距
语法与取值
语法：border-spacing: [horizontal-spacing] [vertical-spacing]?;
取值：
horizontal-spacing：可选。表示相邻单元格边框之间的水平间距。
vertical-spacing：可选。如果未指定，则默认为与horizontal-spacing相同的值。表示相邻单元格边框之间的垂直间距
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>示例7.10</title><style type="text/css">.one{border-spacing: 10px;}.two{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><table class="two"><tr><td>大数据</td><td>物联网</td></tr><tr><td>云计算</td><td>人工智能</td></tr></table></body>
</html>
7.3.3.caption-side
caption-side 是CSS中的一个属性，它用于设置HTML表格标题（<caption>元素）的位置。以下是对caption-side属性的详细解释
语法与取值
语法：caption-side: value;
取值：
top：将标题放置在表格的上方。这是caption-side属性的默认值。
bottom：将标题放置在表格的下方。
需要注意的是，虽然在一些早期的CSS规范草案中提到了left和right作为可能的取值，用于将标题放置在表格的左侧或右侧，但这些取值在最终的CSS 2.1规范中被移除，并且不再被现代浏览器支持
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>示例7.11</title><style type="text/css">.cap{caption-side: bottom;}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>08: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>
7.3.4.empty-cells
empty-cells属性设置或检索当表格的单元格无内容时，是否显示该单元格的边框
语法与取值
语法：empty-cells: value;
取值：
show：默认值。在空单元格周围绘制边框和背景，使其与包含内容的单元格在视觉上保持一致。
hide：不在空单元格周围绘制边框和背景，使其看起来像是没有单元格存在。
inherit：规定应该从父元素继承 empty-cells 属性的值
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>示例7.12</title><style type="text/css">.emp{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 多媒体的添加与美化
CSS在多媒体的添加与美化方面扮演着重要角色。以下是对CSS多媒体添加与美化的详细阐述
7.4.1.<embed>标签的使用
其他属性
autostart（或autoplay，某些浏览器中可能使用此属性）：规定音频或视频文件是否在下载完之后就自动播放。
hidden：规定控制面板是否显示，默认值为no（显示面板）。
starttime：规定音频或视频文件开始播放的时间（格式为mm:ss）。
volume：规定音频或视频文件的音量大小（0-100之间的整数）。
units：指定宽度和高度的单位（如pixels或en）。
align：规定控制面板和当前行中的对象的对齐方式
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><h1>插入动画: 阳春三月</h1><embed src="media/阳春三月.swf"></embed><h1>插入视频: 第五空间</h1><embed src="media/第五空间.mp4"></embed><h1>插入音频: 听!是谁在唱歌</h1><embed src="media/听!是谁在唱歌.mp3"></embed></body>
</html>
7.4.2.<bgsound>标签的使用
<bgsound>是IE浏览器中设置网页背景音乐的元素，利用它可以将音乐文件放入到网页中又不占页面空间，可以播放的声音文件格式包括MAV,AU,MIDI,MP3等
7.4.3. HTML5新增的多媒体标签
HTML5新增了多个多媒体标签，其中最为重要的是<audio>和<video>标签。这两个标签使得在网页中嵌入音频和视频内容变得更加简单和直接
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>示例7.16</title></head><body><h2>童话镇-背景音乐</h2><embed src="media/童话镇.mp3"></embed></body>
</html>
7.4.3.2.<audio>标签
<video>标签定义视频，例如电影片段或其他视频流。<video>标签在页面中嵌入视频的代码格式和<audio>标签的使用相似
7.5 综合案例——海洋旅游胜地
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>海洋旅游胜地</title><style type="text/css">body{background-image: url(img/bg-0.jpg);}.all{margin: 0px auto;width: 700px;height: 600px;background-image: url(img/bg.jpg);}.top{width: 700px;height: 100px;background-image: url(img/top.jpg);}.menu{width: 700px;height: 60px;text-align: center;}.left,.right{width: 350px;height: 440px;float: left;}a{font-size: 13px;font-weight: 700;text-decoration: none;background-color: lightcyan;color: red;margin: 20px;padding:10px 15px;border-radius: 10px;}a:link,a:visited{box-shadow: 6px 6px 10px black;}a:hover{font-size: 14px;}a:active{font-size: 13px;box-shadow: -5px -5px 10px black;}h3{color: brown;}ol{list-style-image: url(img/list2.jpg);list-style-type: upper-alpha;}table{border-collapse: separate;border-spacing: 20px;}p{text-indent: 2em;line-height: 22px;font-weight: 700;color: brown;}</style></head><body><div class="all"><div class="top"></div><div class="menu"><br><a href="#" target="_blank">交通路况</a><a href="#" target="_blank">娱乐设施</a><a href="#" target="_blank">美食特产</a><a href="#" target="_blank">历史文化</a><a href="#" target="_blank">注意事项</a></div><div class="left"><h3>新闻动态</h3><ol><li>英比奥山顶景区</li><li>新加坡空中缆车</li><li>天际线斜坡滑车</li><li>圣淘沙名胜世界</li><li>海洋馆和水上探险乐园</li></ol><video src="media/第五空间.mp4" width="320px" height="250px" controls="controls"></video></div><div class="right"><table><tr><td><img src="img/table1.jpg"/></td><td><img src="img/table2.jpg"/></td></tr><tr><td><img src="img/table3.jpg"/></td><td><img src="img/table4.jpg"/></td></tr></table><p>这里不过是个平凡的小岛，岛上居民过着简单质朴的生活。当新加坡政府正式收回这个小岛时，决定将它改造成一个休闲度假的胜地。</p><br><br><br><audio src="media/铃铛.mp3" controls="controls" loop="loop"></audio></div></div></body>
</html>