一、设置表格样式
CSS中有许多表格属性可以用来设置表格的样式，以下是一些常用的表格属性：
border-collapse：设置表格的边框合并规则。可以设置为collapse来合并边框，或设置为separate来分隔边框（默认值为separate）。
border：设置表格的边框样式、宽度和颜色。例如：border: 1px solid black;表示边框为1像素宽度、实线样式、黑色颜色。
background-color：设置表格单元格的背景色。
text-align：设置表格单元格内文本的水平对齐方式。可以设置为left（默认值）、center、right。vertical-align：设置表格单元格内文本的水平对齐方式。可以设置为
top、center、bottom。
color：设置表格单元格内文本的颜色。
font-family：设置表格单元格内文本的字体系列。
font-size：设置表格单元格内文本的字体大小。
width和height：设置表格的宽度和高度。
这些只是一些常用的表格属性，你可以根据需要使用其他CSS属性来设置表格样式。
以下是表格属性的示例代码：
<head>
<style>
.table{
width: 400px;
height: 150px;
border: 2px red solid;
/* 边框线合并 */
border-collapse: collapse;
background-color: gray;
/* 表格里面文本的颜色 */
color: blue;
}
#td9{
background-color: green;
color: black;
/* 单元格内文本水平对齐方式 */
text-align: center;
/* 单元格内文本垂直对齐方式 */
vertical-align: bottom;
}
</style>
</head>
<body>
<table border="1" class="table">
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
<tr>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
</tr>
<tr>
<td>单元格7</td>
<td>单元格8</td>
<td id="td9">单元格9</td>
</tr>
</table>
</body>运行结果：
二、设置表单样式
表单中的元素很多，包括常用的文本域、单选钮、复选框、下拉菜单和按钮等。下面通过实例来看看怎样使用CSS修饰常用的表单元素。
1、修饰文本域
示例代码如下：
<head>
<style>
#text2{
width: 100px;
height: 50px;
color: aqua;
background-color: gray;
/* background-image: url(../CSS/shili.png); */
/* background-repeat: no-repeat; */
border: 2px red double;
}
</style>
</head>
<body>
<form action="">
<input type="text" id="text1">默认文本输入框
<br>
<input type="text" id="text2" value="此处输入账号">有默认值的输入框
<br>
</form>
</body>运行结果：
其中 color 是框内文字的颜色，background-color 是背景颜色，背景还可用图片代替，其标签为background-image: url(图像.png)，如果图片太小覆盖不了整个文本框会出现好几个图片，不想要重复出现可以使用background-repeat: no-repeat
2、修饰按钮
示例代码如下：
<head>
<style>
#btn2{
width: 100px;
height: 50px;
color: aqua;
background-color: green;
border: 2px red dashed;
/* 鼠标变手指 */
cursor: pointer;
}
</style>
</head>
<body>
<form action="">
<input type="submit" id="btn1">默认按钮
<br>
<input type="submit" id="btn2" value="登录">设置了样式的按钮
</form>
</body>运行结果：
当鼠标移动到绿色方框内会变成手指，其标签为 cursor: pointer
三、设置链接
超链接是网页上最普通的元素，通过超链接能够实现页面的跳转、功能的激活等，而要实现链接的多样化效果离不开CSS样式的辅助。
1.设置文字链接的外观
在默认的浏览器方式下，超链接统一为蓝色并且带有下划线。访问过的链接则为紫色并且也有下划线。通过CSS可以设置超链接的各种属性，而且通过伪类还可以制作出许多动态效果。
伪类中通过 :link 、:visited 、:hover 和 :active 来控制链接内容访问前、访问后、鼠标指针悬停时，以及用户激活时的样式。这4种状态的顺序是不能颠倒，否则可能会导致 伪类样式不能实现。这4种状态并不是每次都需要用到，一般情况下只需要定义链接标签的样式以及 :hover 伪类样式即可
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 未访问的链接 */
a:link{
font-size: 13pt;
color: #0000ff;
text-decoration: none;
}
/* 访问过的链接 */
a:visited{
font-size: 19pt;
color: #00ffff;
text-decoration: none;
}
/* 鼠标指针悬停的链接 */
.navi a:hover{
color: #000;
text-decoration: overline;
font-size: 17pt;
font-family: "黑体";
}
</style>
</head>
<body>
<p class="navi">
<a href="https://www.csdn.net/" target="_blank">首页</a>
<a href="#">关于</a>
<a href="#">客服</a>
<a href="#">联系</a>
</p>
</body>
</html>运行结果：
2.图文链接
网页设计中对文字链接的修饰不仅限于增加边框、修改背景颜色等方式，还可以利用背景图片将文字链接进一步美化。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.a{
/* 设置左内边距用于增加空白显示背景图片 */
padding-left: 30px;
font-size: 16px;
text-decoration: none;
}
.a:hover{
background: url(./购物车满.png) no-repeat left center/6%;
text-decoration: underline;
}
</style>
</head>
<body>
<a href="#" class="a">鼠标指针悬停在超链接上时将显示购物车</a>
</body>
</html>运行结果：
未悬停时文字链接的效果如图：
悬停时文字链接的效果如图：
四、创建导航菜单
作为一个成功的网站，导航菜单必不可少，导航菜单的风格决定了整个网站的风格。
1.纵向列表模式的导航菜单
设置容器及列表的CSS样式
下面设置菜单Div容器的整体区域样式，设置菜单的宽度、字体，以及列表和列表选项的类型和边框样式。代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#nav{
/* 设置菜单的宽度 */
width: 200px;
font-family: Arial;
}
#nav ul{
/* 不显示项目符号 */
list-style-type: none;
margin: 0px;
padding: 0px;
}
#nav li{
/* 设置列表选项（菜单项）的下边框线 */
border-bottom: 1px solid #ed9f9f;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">工程</a></li>
<li><a href="#">会员</a></li>
<li><a href="#">联系</a></li>
</ul>
</div>
</body>
</html>运行结果：
设置菜单项超链接的CSS样式
在设置容器CSS样式之后，菜单项的显示效果并不理想，还需进一步美化。接下来设置菜单项超链接的区块显示、左边的粗红边框、右侧阴影及内边距。最后，建立未访问过的链接、访问过的链接及鼠标指针悬停于菜单项上时的样式。代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#nav{
/* 设置菜单的宽度 */
width: 200px;
font-family: Arial;
}
#nav ul{
/* 不显示项目符号 */
list-style-type: none;
margin: 0px;
padding: 0px;
}
#nav li{
/* 设置列表选项（菜单项）的下边框线 */
border-bottom: 1px solid #ed9f9f;
}
#nav li a{
/* 区块显示 */
display: block;
padding: 5px 5px 5px 0.5em;
text-decoration: none;
border-left: 12px solid #711515;
border-right: 1px solid #711515;
}
/* 未访问链接、访问过链接的样式 */
#nav li a:link,#nav li a:visited{
background-color: #c11136;
color: #fff;
}
/* 鼠标指针悬停于菜单项上时的样式 */
#nav li a:hover{
background-color: #990020;
color: #ff0;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">工程</a></li>
<li><a href="#">会员</a></li>
<li><a href="#">联系</a></li>
</ul>
</div>
</body>
</html>运行结果：
2.横向列表模式的导航菜单
通过CSS属性的控制，可以实现列表模式导航菜单的横竖转换。其中最重要的环节就是设置<li>标签为浮动
接着设置菜单Div容器的整体区域样式，设置菜单的宽度、字体，以及列表和列表选项的类型和边框样式。代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#nav{
/* 设置菜单水平显示的宽度 */
width: 360px;
font-family: Arial;
}
#nav ul{
/* 不显示项目符号 */
list-style-type: none;
margin: 0px;
padding: 0px;
}
#nav li{
/* 使得菜单项都水平显示 */
float: left;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">工程</a></li>
<li><a href="#">会员</a></li>
<li><a href="#">联系</a></li>
</ul>
</div>
</body>
</html>运行结果：
以上最关键的代码就是“ float:left; ”。正是设置了<li>标签为浮动，才将纵向导航菜单转变成横向导航菜单。
接下来设置菜单项超链接的区块显示、四周的边线框及内外边距。最后，建立未访问过的链接、访问过的链接及鼠标指针悬停于菜单项上时的样式。代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#nav{
/* 设置菜单水平显示的宽度 */
width: 360px;
font-family: Arial;
}
#nav ul{
/* 不显示项目符号 */
list-style-type: none;
margin: 0px;
padding: 0px;
}
#nav li{
/* 使得菜单项都水平显示 */
float: left;
}
#nav li a{
/* 区块显示 */
display: block;
padding: 3px 6px 3px 6px;
text-decoration: none;
border: 1px solid #711515;
margin: 2px;
}
/* 未访问链接、访问过链接的样式 */
#nav li a:link,#nav li a:visited{
background-color: #c11136;
color: #fff;
}
/* 鼠标指针悬停于菜单项上时的样式 */
#nav li a:hover{
background-color: #990020;
color: #ff0;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">工程</a></li>
<li><a href="#">会员</a></li>
<li><a href="#">联系</a></li>
</ul>
</div>
</body>
</html>运行结果：