一、设置表格样式
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>运行结果：