什么是CSS肯夏??
? CSS:Cascading Style Sheets層疊樣式表/級聯(lián)樣式表乙各,簡稱樣式表。
.HTML與CSS的關(guān)系???? HTML:構(gòu)建網(wǎng)頁內(nèi)容 ???????? CSS:修飾網(wǎng)頁????????w3C建議盡量使用CSS屬性來取代HTML的屬性。
????使用CSS的方式
? ? ?1.?內(nèi)聯(lián)方式(行內(nèi)樣式)
? ??????特點(diǎn):將CSS樣式定義在HTML的開始標(biāo)記中
????????語法:<any style="CSS樣式的聲明"></any>
????????樣式聲明:由樣式屬性和值組成峭竣,CSS屬性名與其值之間用冒號連接苍在,多個樣式聲明之間用分號分割绝页。
????2.?內(nèi)部樣式
? ??????在網(wǎng)頁的頭元素中增加一對<style></style>,在<style></style>標(biāo)記中聲明該網(wǎng)頁的所有樣式。
????????語法:<head>????<style>???? 樣式規(guī)則????</style>????</head>
????????樣式規(guī)則:由選擇器和樣式聲明組成
? ??3.外部樣式(W3C建議使用這種方式)
????????獨(dú)立于任何網(wǎng)頁的位置處寂恬,聲明一個樣式文件(*.css),在css文件中保存樣式規(guī)則续誉。
? ? ? ? 語法: <link rel="stylesheet" href="CSS文件url">?
? ? ? ? 優(yōu)點(diǎn):1).?外部樣式可以解決多頁面樣式重復(fù)的問題????2).?有利于瀏覽器緩存,從而提高頁面響應(yīng)速度????3).?有利于代碼分離(HTML和CSS)初肉,更容易閱讀和維護(hù)
? ? CSS樣式特點(diǎn)
? ??????1.繼承性
????????????子元素繼承父元素的樣式(有層級關(guān)系)酷鸦。大部分的樣式可以直接被繼承。
? ? ? ? 2.層疊性
????????????可以為一個元素定義多個樣式規(guī)則,規(guī)則中的屬性不沖突時臼隔,可以同時都應(yīng)用到當(dāng)前元素上嘹裂。
????????3.優(yōu)先級????在樣式聲明有沖突時(重復(fù)),則按照樣式的優(yōu)先級來應(yīng)用樣式躬翁。
????????????瀏覽器默認(rèn)設(shè)置? ? <? ?樣式表(內(nèi)部樣式和外部樣式):就近原則 < 內(nèi)聯(lián)樣式? ? <????!important 規(guī)則
? ? CSS選擇器
? ? ?1.通用選擇器? ? *{樣式}
? ? ?2.元素選擇器? ? ? ?div{樣式}
? ? ?3.類選擇器? ? ?.class{樣式}?
? ? ?4.id選擇器? ? ? #id{樣式}
? ? ?5.屬性選擇器????根據(jù)屬性名和屬性值選中元素
? ? ?6.偽類選擇器????選中某些元素的某種狀態(tài)1)link:?超鏈接未訪問時的狀態(tài)2)visited:?超鏈接訪問過后的狀態(tài)3)hover:?鼠標(biāo)懸停狀態(tài)4)active:激活狀態(tài)焦蘑,鼠標(biāo)按下狀態(tài)
? ? ? ? 愛恨法則:link?>?visited?>?hover?>?active
? ? ?7.偽元素選擇器????before????after
? ??選擇器的組合? ? ?1.?并且????2.?后代元素?——?空格????3.?子元素?——?>????4.?相鄰兄弟元素?——?+????5.?后面出現(xiàn)的所有兄弟元素?——?~
? ? ?選擇器的并列多個選擇器,?用逗號分隔
????????樣式的優(yōu)先級:? ? (?256進(jìn)制)
????????????!important?? ???????????????infinity
? ??????????行間樣式? ?? ??????????????????1000?
? ??????????id? ??? ? ? ? ? ? ? ? ? ? ??????????100?
? ?????????class|屬性|偽類??? ??????? ?10
? ? ? ? ? ?標(biāo)簽選擇器|偽元素??? ??????1?
? ???????? 通配符? ? ? ? ? ? ? ? ? ? ? ? ? ? ?0
? ? CSS的部分樣式具有繼承性????跟文字內(nèi)容相關(guān)的屬性一般都能被繼承?
??? 8.?更多偽類選擇器? ?? ? ? ? ?
????????1).? ?first-child:選擇第一個子元素first-of-type盒发,選中子元素中第一個指定類型的元素?? ? ? ? ?
????????2).??last-child? ? ? ? ?
????????3).??nth-child ?????選中指定的第幾個子元素????even:關(guān)鍵字例嘱,等同于2n ????odd: 關(guān)鍵字,等同于2n+1? ? ? ? ?
????????4).??nth-of-type? ??選中指定的子元素中第幾個某類型的元素? ? ?
????9.?更多的偽元素選擇器? ? ? ? ?
????????1).??first-letter ?????選中元素中的第一個字母? ? ? ? ?
????????2).??first-line ???????選中元素中第一行的文字? ? ? ? ?
????????3).??selection ?????選中被用戶框選的文字?
? ? 屬性的計算過程
? ??????一個元素宁舰,從所有屬性都沒有值拼卵,到所有的屬性都有值,這個計算過程蛮艰,叫做屬性值計算過程
? ??
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?