css
层叠样式表
内部样式
外部样式
内联样式（行内样式，嵌入式样式）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>内部样式表</title>
<!-- 内部样式 -->
<style type="text/css">
</style>
<!-- 外部样式 -->
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<!-- 行内样式表 -->
<p style="">内联(行内)优先级最高<br>
内部样式表与外部样式表的优先级和书写的顺序有关，后写的优先级别高（最后加载的谁）
</p>
</body>
</html>
设置导航栏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>导航栏</title>
<style type="text/css">
li{
/* 块级元素设置为行内元素 */
display: inline-block;
width: 100px;
height: 30px;
background-color: lightseagreen;
/* 字体大小 */
font-size: 12px;
/* 对齐方式 */
text-align: center;
/* 等于li的高度，可以上字体垂直居中 */
line-height: 30px;
}
a{
/* 字体颜色 */
color: #fff;
/* 去掉下划线 */
text-decoration: none;
}
</style>
</head>
<body>
<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>
<li><a href="#">下载中心</a></li>
<li><a href="#">工程实例</a></li>
</ul>
</body>
</html>
