A：今天的學(xué)習(xí)內(nèi)容
一象颖、如何給內(nèi)聯(lián)和內(nèi)聯(lián)塊水平居中
給父級或祖父級加（ text-align：center ）僅僅對塊元素使用
二偷卧、選擇器的分類
1.元素選擇器豺瘤、class選擇器、id選擇器涯冠、偽類選擇器（p:hover）
元素選擇器 < class選擇器 < id選擇器
p:hover{} 針對塊標(biāo)簽
<style>
p.one{color: blue;} /*變色*/
p#two{color: pink;} /*變色*/
p:hover{color: aqua;} /*不變色*/
p#two:hover{color:yellow } /*變色*/
</style>
2.分組選擇器
<style>
p,div,h1,li{color: blue} /*需要變一樣色的元素用逗號分隔*/
</style>
3.后代選擇器（" > "炉奴，" 空格 "）
<style>
.head>p{ color: blue;}
.head p{ color: coral;}
</style>
.head>p{} 給選中父級之后的子元素里的P
.head p{} 給選中父級之后所有的p元素
4.兄弟選擇器（“ + ”，“ ~ ”）
<style>
div+p{color:pink;}
/*給div之后緊鄰的第一個(gè)p元素*/
div~p{color: blue;}
/*給div之后的所有p元素*/
</style>
5.屬性選擇器
<style>
p[class="one"]{color: blue;}
</style>
6.偽類選擇器（input:foucus）
input:foucus {} 針對內(nèi)聯(lián)塊
<style>
input:focus{
background: coral;
border: 4px solid blue;
}
</style>
7.偽元素
<style>
div:before{
content: "我是前面";
display: table;
}
div:after{
content: "我是后面";
display: table;
}
</style>
為什么要添加偽元素蛇更，因?yàn)檫@個(gè)元素是虛構(gòu)的瞻赶。
三、CSS的基本樣式
1.背景
①顏色派任，（background-color）
②圖片砸逊，（background-image）
③吸附，（background-attachment：fixed / scroll ）（固定 / 拖動(dòng)是默認(rèn)）
④重復(fù)掌逛，（background-repeat：no-repeat）
⑤位置眷细，（background-position : x y）
⑥大小模暗，（background-size：100% 100%）
（background-size：cover 圖像縮放完全覆蓋背景定位區(qū)域最小大小）
【簡寫 background：color image no-repeat x y】
2.文本
①顏色，（color：red / #333 / rgb(255,0,0)）
②文本對齊蛾洛，（text-align：right / left / center）
③文本修飾芬探，（text-decoration：underline / overline / line-through）（下劃線狐赡，上劃線栈顷，刪除線）
④文本轉(zhuǎn)換，（text-transfrom：uppercase / lowercase / capitalize）（大寫鸵鸥，小寫奠滑，首字母大寫）
⑤文本縮進(jìn)，（text-inden：20px妒穴；）
3.字體
①字體類型宋税，（font-family）
②字體大小，（font-size）
③字體樣式讼油，（font-style）
④字體粗細(xì)杰赛，（font-weight：normal / bold / lighter）（正常，粗體汁讼，細(xì)）
4.鏈接
①a：link（未被訪問時(shí)）
②a：visited（被訪問時(shí)）
③a：hover（鼠標(biāo)放在上面時(shí)）
④a：active（鼠標(biāo)點(diǎn)擊時(shí)）
【注：必須按照依次順序】
5.css樣式列表（針對ul有序列表）
①樣式（list-style：none）消除
②類型（list-style-type：circle / square）(切換成圓形 / 正方形)
③圖片（list-style-image：url（“ ”））切換成圖片
6.邊框
①寬度（border-width）
②樣式（border-style）
③顏色（border-color）
【簡寫：border：width style color】
【單獨(dú)設(shè)置各邊：border-top-style：dotted（虛線）/ solid（實(shí)線）】
7.表格
①列（colspan：“數(shù)字”）所跨的列
②行（rowspan：“數(shù)字”）所跨的行
【折疊單一邊框：border-collapse：collapse】
8.輪廓
p{outline：1px solid pink} 用于需要突出的元素的部分
透明度（opacity：值）
B：學(xué)會什么
1.如何給內(nèi)聯(lián)和內(nèi)聯(lián)塊居中
2.選擇器的分類
3.css的基本樣式
D：練習(xí)
