css權(quán)威指南--筆記(必看)

第1章 css和文檔
1,元素:替換元素(img input),非替換元素(大多數(shù)span)。
2,link:rel(代表關(guān)系:stylesheet,候選樣式表:alternate stylesheet);type(text/css);media:(all(所有表現(xiàn)媒體, screen,print),title(配合候選使用)。
3,@import url(sheet1.css) 需在style內(nèi)使用,放在其他css規(guī)則之前。
4,向后可訪(fǎng)問(wèn)性:<style><!-- 樣式 --></style>,這樣較老瀏覽器會(huì)將style忽略,能理解css的瀏覽器能正常讀取樣式表。
5,css注釋?zhuān)?* */。
第2章 選擇器
1,對(duì)聲明分組時(shí),一定要在各個(gè)聲明的最后使用分號(hào)。
2,p.warming.help {background:red;} 只匹配class包含warming和help的p元素,如果p包含warming和其他的則不能匹配。
3,實(shí)際上,瀏覽器并不檢查html中id的唯一性,但這會(huì)導(dǎo)致編寫(xiě)dom更困難。
4,屬性選擇器:h1[class] {...}
h1[class=''] {...}完全匹配
h1[class~=''] {...}部分匹配 [class^='']以什么開(kāi)頭 [class$='']以什么結(jié)尾 [class*='']包含什么的所有元素
*[lang|='en']特定屬性選擇器,會(huì)選擇lang屬性等于en或以en-開(kāi)頭的所有元素。
5,選擇子元素:h1>strong;選擇相鄰兄弟元素h1+p(h1和p有共同父元素,最終選擇p)。
6,鏈接偽類(lèi):未訪(fǎng)問(wèn)鏈接:link,訪(fǎng)問(wèn)過(guò)鏈接:visited(它們都是靜態(tài)的),等同于<body link='' vlink=''>。
動(dòng)態(tài)偽類(lèi):焦點(diǎn):focus,鼠標(biāo)停留:hover,激活:active。(動(dòng)態(tài)偽類(lèi)可以用于任何元素)
建議偽類(lèi)順序:link-visited-focus-hover-active。
選擇第一個(gè)子元素(:first-child),很容易誤解,是所有第一個(gè)子元素(在下面例子中,作為第一個(gè)子元素的元素包括第一個(gè)p,第一個(gè)li和strong及em)。
- <div>
- <p>helooo</p>
- <ul>
- <li>111</li>
- <li><strong>222</strong></li>
- </ul>
- <p>
- <em>333</em>
- </p>
- </div>
根據(jù)語(yǔ)言選擇(:lang()),如*:lang(fr){color:red;} 這是將所有法語(yǔ)元素變成紅色。
偽元素選擇器:首字母:first-letter,用戶(hù)代理動(dòng)態(tài)構(gòu)成假象元素<p:first-letter>;
第一行:first-line;
之前和之后:before :after。
以上這篇css權(quán)威指南--筆記(必看)就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
純CSS3實(shí)現(xiàn)的綠色Loading加載動(dòng)畫(huà)特效源碼
這是一款由純CSS3實(shí)現(xiàn)的綠色Loading加載動(dòng)畫(huà)特效源碼,有多種loading樣式供用戶(hù)選擇,采用純css3實(shí)現(xiàn),沒(méi)有引入任何外部圖形元素2016-05-27CSS實(shí)現(xiàn)標(biāo)題文字過(guò)長(zhǎng)部分顯示省略號(hào)的方法
這篇文章主要介紹了CSS實(shí)現(xiàn)標(biāo)題文字過(guò)長(zhǎng)部分顯示省略號(hào)的方法,并且講解了針對(duì)單行文字溢出和多行文字溢出的情況,需要的朋友可以參考下2016-05-27- 這里為大家送上一份CSS代碼書(shū)寫(xiě)規(guī)范究極指南,包括代碼注釋和命名規(guī)范以及空格縮進(jìn)等一應(yīng)俱全,都來(lái)自大家平時(shí)的約定俗成,絕對(duì)值得學(xué)習(xí)借鑒,需要的朋友可以參考下2016-05-27
純js和CSS3媒體查詢(xún)制作簡(jiǎn)單的響應(yīng)式導(dǎo)航菜單特效源碼
這是一個(gè)使用純js和CSS3媒體查詢(xún)制作的簡(jiǎn)單的響應(yīng)式導(dǎo)航菜單效果的代碼。當(dāng)視口小于760像素時(shí),菜單會(huì)收縮為隱藏的漢堡包菜單,類(lèi)似bootstrap導(dǎo)航菜單2016-05-26CSS3鼠標(biāo)滑過(guò)圖片3D翻轉(zhuǎn)的炫酷特效源碼
這是一個(gè)使用CSS3制作的炫酷鼠標(biāo)滑過(guò)圖片動(dòng)畫(huà)特效的代碼,當(dāng)鼠標(biāo)滑過(guò)圖片時(shí),圖片會(huì)向上3D翻轉(zhuǎn)并漸隱消失等效果2016-05-26- 下面小編就為大家?guī)?lái)一篇CSS字符編碼引起亂碼的快速解決方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-26