css的簡(jiǎn)介
css：層疊樣式表(英文全稱:Cascading Style Sheets)是一種用來表現(xiàn)HTML(標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)應(yīng)用)或XML(標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)子集)等文件樣式的計(jì)算機(jī)語言业扒。CSS不僅可以靜態(tài)地修飾網(wǎng)頁足画，還可以配合各種腳本語言動(dòng)態(tài)地對(duì)網(wǎng)頁各元素進(jìn)行格式化
css和html的結(jié)合方式
1.在每個(gè)html標(biāo)簽上面都有一個(gè)屬性 style喜每，把css和html結(jié)合在一起
2.使用html的一個(gè)標(biāo)簽實(shí)現(xiàn)<style>標(biāo)簽谍憔，寫在head里面
? ? ? ? <style type="text/css">
? ? ? ? ? ? ? ? css代碼
? ? ? ? </style>
3.在style標(biāo)簽里面 使用語句
? ? ? ? ? ? @import url(css文件的路徑)
? ? ? ? ? ? ? ? 第一步：創(chuàng)建一個(gè)css文件
4.使用頭標(biāo)簽 link涛酗， 引入外部css文件
? ? ? ? <link rel="stylesheet"? type="text/css"? href="css文件的路徑"/>
css優(yōu)先級(jí)
? ? ? ?? 由上到下啥供，由外到內(nèi)舅锄，優(yōu)先級(jí)由高到低
? ? ? ? 格式: ? 選擇器名稱 {屬性名 : ? 屬性值:??屬性名 : ? 屬性值:谜悟。孵奶。疲酌。。。朗恳。 }
css的基本選擇器
1.標(biāo)簽選擇器：使用標(biāo)簽名作為選擇器的名稱
? ? ? ? ? ? div{
? ? ? ? ? ? ? ? ? ? back-ground：gray湿颅；
? ? ? ? ? ? ? ? ? ? color：red
????????????????}
2.class選擇器
? ? ? ? 每個(gè)html標(biāo)簽都有一個(gè)屬性 class
? ? ? ? ? ? <div class=""></div>
? ? ? ? ? ? .haha{ ? ??
? ? ? ? ? ? ? ? ? ? back-ground：gray；
} ? ? ? ? ? ? ? ? ??
3.id選擇器
? ? ? ? ? ? 每個(gè)html標(biāo)簽都有一個(gè)屬性 id
優(yōu)先級(jí) :style > id選擇器 >? class選擇器 >? 標(biāo)簽選擇器
css擴(kuò)展選擇器
1.關(guān)聯(lián)選擇器
? ? <div><p>wwwwww</p></div>
? ? 設(shè)置div標(biāo)簽里面p標(biāo)簽的樣式粥诫，嵌套標(biāo)簽里面的樣式
? ? ? ? ? ? div p{
????????????????????back-ground：gray油航；
? ? ? ? ? ? ? ? ?? }
2.組合選擇器
? ? <div>11111</div>
? ? <p>222222</p>
? ? 把div和p標(biāo)簽設(shè)置成相同的樣式
???????? div ，p{
????????????????????????????back-ground：green怀浆；
? ? ? ? ? ? ? ? ?? }
3.偽元素選擇器
? ? ? ? css里面提供了一些定義好的樣式谊囚，可以拿過來使用
????????????????????比如超鏈接的狀態(tài)
? ? ? ? ? ? ? ? ? ? ? ? 原始狀態(tài) ? ? ?? 鼠標(biāo)放上去的狀態(tài) ? ? ? 點(diǎn)擊 ? ? ? ? ? 點(diǎn)擊之后
? ? ? ? ? ? ? ? ? ? ? ? link ? ? ? ? ? ? ? ? ? hover ? ? ? ? ? ? ? ? ? ? ? active ? ? ? ? ? ? visited
css盒子模型
1.邊框
? ? border：統(tǒng)一設(shè)置
? ? 上 border-top
? ? 下border-bottom
? ? 左border-left
? ? 右border-right
2.內(nèi)邊距
? ? padding：統(tǒng)一設(shè)置
??????????上 padding-top
? ? ? ? ? 下padding-bottom
? ? ? ? ? 左padding-left
? ? ? ? ? 右padding-right
3.外邊距
? ? margin：統(tǒng)一設(shè)置
? ? ? ? ?? 上 margin-top
? ? ? ? ? 下margin-bottom
? ? ? ? ? 左margin-left
? ? ? ? ? 右margin-right
css的布局漂浮屬性
float：
? ? ? ? ? ? 屬性值
? ? ? ? ? ? ? ? ? ? left：文本流向?qū)ο蟮挠疫?/p>
? ? ? ? ? ? ? ? ? ? right：文本流向?qū)ο蟮淖筮?/p>
css的布局定位
position：
? ? ? ? ? ? ? ? 屬性值：
? ? ? ? ? ? ? ? ? ? ? ? absolute：將對(duì)象從文檔流中拖出
? ? ? ? ? ? ? ? ? ? ? ? relative：對(duì)象不可層疊，不會(huì)把對(duì)象從文檔流中拖出
????????
? ? ?
