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>