1、樣式表書(shū)寫(xiě)位置
◆內(nèi)嵌式寫(xiě)法
<head>
<style type="text/css">
樣式表寫(xiě)法
</style>
</head>
◆外鏈?zhǔn)綄?xiě)法
<link rel="stylesheet" href="1.css">
◆行內(nèi)樣式表
<h1 style="font-size:30px;color:red;">你的名字</h1>
◆三種寫(xiě)法特點(diǎn):
★內(nèi)嵌式寫(xiě)法，樣式只作用于當(dāng)前文件，沒(méi)有真正實(shí)現(xiàn)結(jié)構(gòu)表現(xiàn)分離。
★外鏈?zhǔn)綄?xiě)法，作用范圍是當(dāng)前站點(diǎn)，誰(shuí)調(diào)用誰(shuí)生效，范圍廣，真正實(shí)現(xiàn)結(jié)構(gòu)表現(xiàn)分離。
★行內(nèi)樣式表，作用范圍僅限于當(dāng)前標(biāo)簽，范圍小，結(jié)構(gòu)表現(xiàn)混在一起。 （不推薦使用）
2、標(biāo)簽分類(lèi)
2.1、塊元素
典型代表：Div ,h1-h6, p, ul ,li
特點(diǎn): ★獨(dú)占一行
★可以設(shè)置寬高
★ 嵌套（包含）下，子塊元素寬度（沒(méi)有定義情況下）和父塊元素寬度默認(rèn)一致
2.2、行內(nèi)元素
典型代表：span, a , strong, em, del, ins
特點(diǎn)：★在一行上顯示
★不能直接設(shè)置寬高
★元素的寬和高就是內(nèi)容撐開(kāi)的寬高。
2.3、行內(nèi)塊元素（內(nèi)聯(lián)元素）
典型代表：input , img
特點(diǎn)：★在一行上顯示
★可以設(shè)置寬高
2.4、塊元素、行內(nèi)元素
◆塊元素轉(zhuǎn)行內(nèi)元素
div,p{display:inline;}
◆行內(nèi)元素轉(zhuǎn)塊元素
span{display:block;}
◆塊和行內(nèi)元素轉(zhuǎn)行內(nèi)塊元素
div,a,span,strong{display:inline-block;}
3、css三大特性
3.1、層疊性
當(dāng)多個(gè)樣式作用于同一個(gè)（同一類(lèi)）標(biāo)簽時(shí)，樣式發(fā)生了沖突，總是執(zhí)行后邊的代碼(后邊代碼層疊前邊的代碼)。和標(biāo)簽調(diào)用選擇器的順序沒(méi)有關(guān)系。
3.2、繼承性
繼承性發(fā)生的前提是包含（嵌套關(guān)系）
★文字顏色可以繼承
★文字大小可以繼承
★字體可以繼續(xù)
★字體粗細(xì)可以繼承
★文字風(fēng)格可以繼承
★行高可以繼承
總結(jié)：文字的所有屬性都可以繼承。
◆特殊情況：
h系列不能繼承文字大小。
a標(biāo)簽不能繼承文字顏色。
3.3、優(yōu)先級(jí)
默認(rèn)樣式<標(biāo)簽選擇器<類(lèi)選擇器<id選擇器<行內(nèi)樣式<!important
◆優(yōu)先級(jí)特點(diǎn)
★繼承的權(quán)重為0
★權(quán)重會(huì)疊加
4、鏈接偽類(lèi)
a:link{屬性:值;} a{屬性:值}效果是一樣的。
a:link{屬性:值;} 鏈接默認(rèn)狀態(tài)
a:visited{屬性:值;} 鏈接訪問(wèn)之后的狀態(tài)
a:hover{屬性:值;} 鼠標(biāo)放到鏈接上顯示的狀態(tài)
a:active{屬性:值;} 鏈接激活的狀態(tài)
：focus{屬性:值；} 獲取焦點(diǎn)
4.1、文本修飾
text-decoration: none | underline | line-through
5、背景修飾
background-color 背景顏色
background-image 背景圖片
Background-repeat repeat(默認(rèn)) | no-repeat | repeat-x | repeat-y 背景平鋪
Background-position left | right | center | top | bottom 背景定位
★方位值只寫(xiě)一個(gè)的時(shí)候，另外一個(gè)值默認(rèn)居中。
★寫(xiě)2個(gè)方位值的時(shí)候，順序沒(méi)有要求。
★寫(xiě)2個(gè)具體值的時(shí)候，第一個(gè)值代表水平方向，第二個(gè)值代表垂直方向。
7.1 背景是否滾動(dòng)
Background-attachment 背景是否滾動(dòng) scroll | fixed
7.2 背景屬性連寫(xiě)
★：連寫(xiě)的時(shí)候沒(méi)有順序要求，url為必寫(xiě)項(xiàng)。
background:red url("圖片地址") no-repeat 30px 40px scroll;
案例
導(dǎo)航案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
.nav{
height: 50px;
text-align: center;
background-color:#aaa;
}
a{
text-decoration:none;
font-size: 14px;
font-weight: 700;
color: #3c3c3c;
width:100px;
height:50px;
display: inline-block;
}
a.one{
color: #ff4400;
}
a:hover{
text-decoration: underline;
color: #ff4400;
background-color: #D5D7DD;
}
</style>
</head>
<body>
<div class="nav">
<a href="#" class="one" title="天貓">天貓</a>
<a href="#" class="one" title="聚劃算">聚劃算</a>
<a href="#" class="one" title="超市">超市</a>
<a href="#" class="one" title="頭條">頭條</a>
<a href="#" title="阿里旅行">阿里旅行</a>
<a href="#" title="電器城">電器城</a>
<a href="#" title="淘搶購(gòu)">淘搶購(gòu)</a>
<a href="#" title="蘇寧易購(gòu)">蘇寧易購(gòu)</a>
<a href="#" title="智能生活">智能生活</a>
</div>
</body>
</html>
簡(jiǎn)單導(dǎo)航欄
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
a{
background-image:url(bgc.png);
background-repeat:no-repeat;
width:120px;
height:50px;
display:inline-block;
}
a:hover{
background-image:url(bg.png);
}
</style>
</head>
<body>
<a href="#">百度</a>
<a href="#">百度</a>
<a href="#">百度</a>
<a href="#">百度</a>
<a href="#">百度</a>
<a href="#">百度</a>
</body>
</html>
列表顯示案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
ul{
list-style:none;
}
ul li{
background:url(li.gif) no-repeat left 4px;
}
li a{
text-decoration: none;
}
a:hover{
color: #9E7878;
text-decoration: underline;
}
</style>
</head>
<body>
<ul>
<li><a href="#"> 大明星:姜潮魔性拜年道晚安</a></li>
<li><a href="#"> 軟萌正太徐浩演繹《小幸運(yùn)》</a></li>
<li><a href="#"> 漫威絕逼好看的電影鏡頭合集</a></li>
<li><a href="#"> 從沒(méi)見(jiàn)過(guò)這么搞笑的祖孫組合</a></li>
<li><a href="#"> 史上最容易挨揍的自助餐吃法</a></li>
</ul>
</body>
</html>
搜索框案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
body{
word-spacing:-8px;
}
.serch{
height:32px;
width:282px;
background:url(1.jpg) right center no-repeat;
}
</style>
</head>
<body>
<input type="text" value="請(qǐng)輸入關(guān)鍵字" class="serch">
</body>
</html>
五彩導(dǎo)航案例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無(wú)標(biāo)題文檔</title>
<style>
a{
width:120px;
height:58px;
display:inline-block;
text-align:center;
line-height:50px;
color:white;
text-decoration:none;
}
.one{
background:url(images/bg1.png);}
.two{
background:url(images/bg2.png);}
.three{
background:url(images/bg3.png);}
.four{
background:url(images/bg4.png);}
.one:hover{
background:url(images/bg5.png);}
.two:hover{
background:url(images/bg6.png);}
</style>
</head>
<body>
<a href="#" class="one">五彩導(dǎo)航</a>
<a href="#" class="two">五彩導(dǎo)航</a>
<a href="#" class="three">五彩導(dǎo)航</a>
<a href="#" class="four">五彩導(dǎo)航</a>
<a href="#" class="five">五彩導(dǎo)航</a>
</body>
</html>
