第七章 利用CSS和多媒体美化页面

7.1 CSS链接的美化

7.1.1.文字链接的美化

基础概念

• a:link：用于定义未访问过的链接。
• a:visited：用于定义已经访问过的链接。
• a:hover：当鼠标悬停在链接上时的状态。
• a:active：当链接被点击但还未释放鼠标时的状态。

• 颜色和字体样式 我们可以通过设置color属性来改变链接的颜色，同时可以调整font-family、font-size等属性来自定义文本的外观。

  a:link {
    color: blue; /* 设置未访问链接的颜色 */
  }
  a:visited {
    color: purple; /* 设置已访问链接的颜色 */
  }
  a:hover {
    color: red; /* 设置鼠标悬停时链接的颜色 */
    text-decoration: underline; /* 鼠标悬停时添加下划线 */
  }
  a:active {
    color: green; /* 设置激活状态链接的颜色 */
  }

  去除默认下划线 默认情况下，浏览器会为超链接添加下划线。我们可以使用text-decoration: none;来移除它。

  a:link, a:visited, a:hover, a:active {
    text-decoration: none;
  }

  过渡效果 为了使链接的变化看起来更加平滑，可以添加CSS过渡效果。

  a {
    transition: color 0.3s ease-in-out;
  }

  7.1.2.按钮链接的美化

  创建可点击的按钮效果 通过给链接添加适当的内边距（padding）、边框（border）和背景色（background-color），可以让链接看起来像是一个按钮。

  .button-link {
    display: inline-block;
    padding: 10px 20px;
    background-color: #4CAF50; /* 绿色背景 */
    color: white; /* 白色文本 */
    border: 2px solid #4CAF50; /* 边框颜色 */
    border-radius: 5px; /* 圆角 */
    text-align: center;
    text-decoration: none;
    font-size: 16px;
  }
   
  .button-link:hover {
    background-color: #45a049; /* 更深的绿色背景 */
    border-color: #45a049; /* 边框颜色随背景变化 */
    cursor: pointer; /* 改变光标形状为手型 */
  }

  增强交互性

• 使用:focus伪类来为获得焦点的链接添加样式，比如增加阴影或更改颜色。
• 利用:active伪类模拟点击效果，如减少尺寸或改变背景颜色。
• 可以加入动画效果，如旋转、放大等，以增加互动感。

• 7.1.3背景链接的美化

  全背景覆盖 如果想让整个链接区域作为一个整体，并且应用统一的背景图像或颜色，可以通过以下方式实现：

  .background-link {
    display: block;
    width: 200px;
    height: 50px;
    line-height: 50px; /* 垂直居中文本 */
    text-align: center;
    background: url('example-image.jpg') no-repeat center center / cover; /* 背景图片 */
    color: white; /* 文字颜色 */
    text-decoration: none;
    transition: transform 0.2s; /* 添加过渡效果 */
  }
   
  .background-link:hover {
    transform: scale(1.1); /* 放大效果 */
  }

  图标与文字结合 在链接旁边或内部添加图标，可以使链接更具表现力。例如，使用Font Awesome或其他图标库：

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <a class="icon-link" href="#">
    <i class="fas fa-download"></i> 下载文件
  </a>

.icon-link i {
  margin-right: 5px; /* 图标与文字间的间距 */
}
.icon-link:hover {
  color: gold; /* 鼠标悬停时的颜色 */
}

7.2 CSS列表的美化

在网页设计中，列表（包括无序列表<ul>和有序列表<ol>）是展示信息的一种常见方式。通过CSS，我们可以极大地提升这些列表的视觉吸引力，使它们更加符合网站的整体风格。以下是几个关键点来实现列表的美化：

7.2.1.列表项类型（list-style-type）

list-style-type属性允许你改变列表项前的标记样式。对于无序列表，常见的值包括disc（实心圆点）、circle（空心圆圈）和square（实心方块）。对于有序列表，可以使用decimal（数字）、lower-roman（小写罗马数字）、upper-roman（大写罗马数字）、lower-alpha（小写字母）和upper-alpha（大写字母）等。

ul {
  list-style-type: square; /* 使用实心方块 */
}
 
ol {
  list-style-type: lower-roman; /* 使用小写罗马数字 */
}

7.2.2.列表项图像（list-style-image）

你可以用自定义图片代替默认的列表项标记，这样可以让你的列表看起来更加独特。

ul {
  list-style-image: url('custom-bullet.png'); /* 使用自定义图像作为项目符号 */
}

7.2.3.列表项位置（list-style-position）

list-style-position属性用于控制列表项标记相对于文本的位置。可选值为inside（标记位于文本行内）和outside（标记位于文本外侧，默认值）。

ul.inside {
  list-style-position: inside;
}
 
ul.outside {
  list-style-position: outside;
}

当设置为inside时，列表项标记会成为内容的一部分，与文本同行显示；而outside则保持标记与文本分开，通常更适用于传统布局。

7.2.4.复合列表样式（list-style）

list-style是一个简写属性，它可以同时设置list-style-type、list-style-position和list-style-image。

ul.combined {
  list-style: square inside url('custom-bullet.png');
}

在这个例子中，我们同时设置了方形标记、内部定位以及一个自定义图像。

7.2.5.利用背景图像实现列表项标记

有时候直接使用list-style-image可能会遇到兼容性问题，或者想要更多的控制权，这时可以考虑使用背景图像结合伪元素来实现：

ul.custom-list {
  list-style: none; /* 去掉默认的列表项标记 */
  padding-left: 0; /* 移除默认左边距 */
}
 
ul.custom-list li {
  position: relative;
  padding-left: 20px; /* 给列表项添加左侧填充，为图标留出空间 */
}
 
ul.custom-list li::before {
  content: ''; /* 必须定义content属性，即使为空 */
  display: inline-block;
  width: 16px; /* 图标宽度 */
  height: 16px; /* 图标高度 */
  background: url('icon.png') no-repeat center center; /* 背景图像 */
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%); /* 垂直居中 */
}

这种方法提供了更高的灵活性，比如能够更容易地调整图标的大小、位置以及响应式行为。

7.3 CSS表格的美化

在网页设计中，表格（<table>）是组织和展示数据的重要元素。使用CSS可以显著提升表格的外观，使其更加美观且易于阅读。下面将介绍如何通过CSS来美化HTML表格，包括设置边框、合并边框、添加斑马线效果、调整宽度等。

7.3.1 表格边框

为表格及其内部的单元格设置统一的边框样式，可以使表格看起来更整洁。使用border属性可以定义边框的颜色、宽度及样式。

table, th, td {
  border: 1px solid black; /* 设置黑色实线边框 */
}

默认情况下，每个单元格都会有自己的边框，这会导致表格出现双层边框的效果。为了使边框看起来像单一线条，可以使用border-collapse属性，并将其值设为collapse。

table {
  border-collapse: collapse; /* 合并相邻边框 */
}

7.3.2 表格宽度

有时你可能希望表格占据页面的全部宽度或特定的像素宽度。可以通过width属性来实现这一点。

table {
  width: 100%; /* 全宽表格 */
  /* 或者指定具体宽度，如：width: 800px; */
}

7.3.3 添加斑马线效果

斑马线效果即隔行变色，有助于提高表格的可读性。利用:nth-child伪类选择器，我们可以轻松地为奇数行和偶数行设置不同的背景颜色。

tr:nth-child(odd) { /* 奇数行 */
  background-color: #f2f2f2;
}
 
tr:nth-child(even) { /* 偶数行 */
  background-color: white;
}

7.3.4 鼠标悬停效果

为表格行添加鼠标悬停时的背景颜色变化，可以让用户更容易地追踪当前查看的数据行。

tr:hover { /* 当鼠标悬停在行上时 */
  background-color: #ddd;
}

7.3.5 使用<thead>, <tbody>, 和 <tfoot>

合理利用这些标签可以帮助更好地组织表格内容，并提供额外的CSS应用点。例如，可以给表头单独设定样式。

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>职业</th>
    </tr>
  </thead>
  <tbody>
    <!-- 数据行 -->
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">表格注释</td>
    </tr>
  </tfoot>
</table>

thead, tfoot {
  background-color: #333;
  color: white;
}

7.3.6 控制布局算法

通过table-layout属性，你可以控制浏览器用来计算列宽的方法。通常有两种值：auto（默认）和fixed。当设置为fixed时，所有列宽都基于第一行的内容确定，这样可以提高渲染性能，尤其是在大型表格中。

table {
  table-layout: fixed;
}

7.3.7 指定空白单元格的表现

使用empty-cells属性来决定是否显示空白单元格的边框。默认情况下，即使单元格为空，其边框也会被显示。

table {
  empty-cells: show; /* 显示空白单元格边框 */
  /* 或者：empty-cells: hide; 不显示空白单元格边框 */
}

7.4 多媒体的添加与美化

• 在网页设计中，多媒体内容如图片、视频和音频等能够极大地增强用户体验，使网站更加吸引人。合理地使用这些元素不仅可以让页面看起来更丰富多样，还能帮助更好地传达信息。接下来我们将探讨如何有效地添加和美化这些多媒体元素。

7.4.1 图片的添加与美化

1. 基本插入

• 使用 <img> 标签可以将图片嵌入到HTML文档中。

  <img src="image.jpg" alt="描述性文本">

• src 属性指定图像文件的位置；alt 属性提供了图像无法显示时的替代文字，对于可访问性至关重要。

2. 使用 CSS 美化图片

设置边框样式：给图片添加边框可以让其从背景中脱颖而出

img {
  border: 5px solid #ccc;
}

圆角效果：利用 border-radius 可以为图片创建圆角效果。

img {
  border-radius: 8px;
}

 阴影效果：通过 box-shadow 添加阴影，增加深度感。

img {
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

3. 响应式图片

使用百分比宽度确保图片随容器大小变化而调整

img {
  width: 100%;
  height: auto; /* 维持纵横比 */
}

4. 图像懒加载

为提高页面加载速度，可以采用懒加载技术，即仅当用户滚动至接近图片位置时才开始加载图片。

<img src="placeholder.jpg" data-src="real-image.jpg" alt="...">

7.4.2 视频的添加与控制

1. HTML5 <video> 元素

HTML5 提供了内置支持来播放视频，无需依赖外部插件。

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持 video 标签。
</video>

controls 属性添加播放控件，包括播放/暂停按钮、进度条等。

2. 自定义样式

通过 CSS 可以自定义播放器外观。

video {
  width: 100%; /* 宽度自适应 */
  max-width: 800px; /* 最大宽度限制 */
}

3. 响应式视频

将视频置于具有固定比例（例如 16:9）的容器内，以保持正确的宽高比。

<div class="video-container">
  <video src="movie.mp4" controls></video>
</div>

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 的比率 */
  height: 0;
  overflow: hidden;
}
.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

7.4.3 音频的添加与控制

1. HTML5 <audio> 元素

同样地，HTML5 也支持直接播放音频文件。

<audio controls>
  <source src="sound.mp3" type="audio/mpeg">
  <source src="sound.ogg" type="audio/ogg">
  您的浏览器不支持 audio 标签。
</audio>

 2.调整样式

通过 CSS 可以隐藏默认控件并实现个性化界面。

audio {
  display: none; /* 隐藏默认控件 */
}

3. JavaScript 控制

利用JavaScript编写脚本来控制音频播放，比如自动播放或循环播放。

var audio = document.getElementById('myAudio');
audio.play(); // 开始播放
audio.loop = true; // 循环播放

7.4.4 确保跨设备兼容性和响应性

• 媒体查询：使用CSS媒体查询根据屏幕尺寸调整多媒体元素的布局。

  @media (max-width: 600px) {
    .responsive-media {
      width: 100%;
      height: auto;
    }
  }

• 格式支持：提供多种格式的视频和音频文件，以确保不同浏览器和设备的支持。

  • 对于视频：MP4, WebM, Ogg
  • 对于音频：MP3, Ogg, WAV

综合案例

<!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-sise: 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 hrer="#" target="_blank">交通路况</a>
			<a hrer="#" target="_blank">娱乐设施</a>
			<a hrer="#" target="_blank">美食特产</a>
			<a href="#" target="_blank">历史文化</a>
			<a hrer="#" 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>