摘要:通用選擇器,子選擇器和相鄰?fù)x擇器并不在這四個(gè)等級中,所以他們的權(quán)值都為,優(yōu)先級最高,萬不得已的情況下才用。規(guī)范命名風(fēng)格規(guī)范文件命名統(tǒng)一為小寫的英文字母盡量少用拼音,如。當(dāng)名字需要組合時(shí),可以采用文件名的規(guī)范。
css樣式的權(quán)值(權(quán)重) 權(quán)值等級的定義
第一等:代表內(nèi)聯(lián)樣式,如: style=””,權(quán)值為1000。
第二等:代表ID選擇器,如:#content,權(quán)值為100。
第三等:代表類,偽類和屬性選擇器,如.content,權(quán)值為10。
第四等:代表類型選擇器和偽元素選擇器,如div p,權(quán)值為1。
Ps:通用選擇器(*),子選擇器(>)和相鄰?fù)x擇器(+)并不在這四個(gè)等級中,所以他們的權(quán)值都為0,!important 優(yōu)先級最高,萬不得已的情況下才用。
權(quán)重計(jì)算#content div#main-content h2=2*100+2*1=202 #content #main-content>h2=2*100+1=201 body #content div[id="main-content"] h2=1*100+1*10+3*1=113 #main-content div.paragraph h2=1*100+1*10+2*1=112 #main-content [class="paragraph"] h2=1*100+1*10+1*1=111 div#main-content div.paragraph h2.first=1*100+2*10+3*1=123優(yōu)先規(guī)則
權(quán)值大的樣式會覆蓋權(quán)值小的樣式,上面例子的樣式會采用權(quán)值最大201的樣式,當(dāng)你亂用!important,特別是后期修改樣式的時(shí)候,是不是有種心力憔悴電費(fèi)感覺?
當(dāng)css前后樣式項(xiàng)的權(quán)值一樣,后面的樣式會覆蓋前面的樣式。
1 css文件命名:統(tǒng)一為小寫的英文字母(盡量少用拼音),如:index.css。
當(dāng)名字需要組合拼寫時(shí),可以在單詞間加中杠線(不要用下劃線:容易寫錯(cuò))。如:member-report.css。(推薦)
或者統(tǒng)一為駝峰式拼寫。如:MemberReport.css (項(xiàng)目啟動(dòng)前統(tǒng)一風(fēng)格)。
2 樣式名(html的class名):在讓人看懂的前提下,盡量語義化或簡寫。盡量少用拼音,和無語義的縮寫 .bt .bd 等; 風(fēng)格可以統(tǒng)一為小寫字母,如:content。當(dāng)名字需要組合時(shí),可以采用css文件名的規(guī)范。
樣式的繼承 文本樣式color,font-family, font-size, font-style, font-variant, font-weight, font, letter-spacing, line-height,text-align, text-indent, texttransform,word-spacing列表相關(guān)屬性
list-style-image, list-style-position, list-style-type, list-style,css優(yōu)化 渲染
就是瀏覽器把HTML代碼以css定義的規(guī)則顯示在瀏覽器窗口的過程
瀏覽器對頁面呈現(xiàn)的處理流程用戶輸入網(wǎng)址(假設(shè)是個(gè)html頁面,并且是第一次訪問),瀏覽器向服務(wù)器發(fā)出請求,服務(wù)器返回html文件;
瀏覽器開始載入html代碼,發(fā)現(xiàn)
標(biāo)簽內(nèi)有一個(gè)標(biāo)簽引用外部CSS文件;瀏覽器又發(fā)出CSS文件的請求,服務(wù)器返回這個(gè)CSS文件;
瀏覽器繼續(xù)載入html中
部分的代碼,并且CSS文件已經(jīng)拿到手了,可以開始渲染頁面了;瀏覽器在代碼中發(fā)現(xiàn)一個(gè)標(biāo)簽引用了一張圖片,向服務(wù)器發(fā)出請求。此時(shí)瀏覽器不會等到圖片下載完,而是繼續(xù)渲染后面的代碼;
服務(wù)器返回圖片文件,由于圖片占用了一定面積,影響了后面段落的排布,因此瀏覽器要回過頭來重新渲染這部分代碼;
瀏覽器發(fā)現(xiàn)了一個(gè)包含一行Javascript代碼的