爲了(le)代碼美(měi)觀,易于觀看
爲了(le)書(shū)寫的(de)一緻性,還(hái)有就是避免出現不必要的(de)問題
/* 正确的(de)寫法 */
.hotel-title {
font-weight: bold;
}
/* 不推薦的(de)寫法 */
.hotelTitle {
font-weight: bold;
}
用(yòng)"-"隔開比使用(yòng)駝峰是更加清晰。産品線-産品-模塊-子模塊,命名的(de)時(shí)候也(yě)可(kě)以使用(yòng)這(zhè)種方式
.hotel-content {
font-weight: bold;
}
選擇器與 { 之前(必須)要有空格 屬性名的(de) : 後(必須)要有空格 屬性名的(de) : 前(禁止)加空格 一個(gè)原因是美(měi)觀,其次IE 6存在一個(gè)bug, 戳bug
當樣式針對(duì)多(duō)個(gè)選擇器時(shí)每個(gè)選擇器占一行
/* 推薦的(de)寫法 */
a.btn,
input.btn,
input[type="button"] {
......
}
.hotel-content {margin: 10px; background-color: #efefef;}
單行顯示不好注釋,不好備注,這(zhè)應該是壓縮工具的(de)活兒(ér)~
.obj {
left: 0px;
}
使用(yòng)css原生import有很多(duō)弊端,比如會增加請求數等....
.selector {
/* Positioning */
position: absolute;
z-index: 10;
top: 0;
right: 0;
/* Display & Box Model */
display: inline-block;
overflow: hidden;
box-sizing: border-box;
width: 100px;
height: 100px;
padding: 10px;
border: 10px solid #333;
margin: 10px;
/* Color */
background: #000;
color: #fff
/* Text */
font-family: sans-serif;
font-size: 16px;
line-height: 1.4;
text-align: right;
/* Other */
cursor: pointer;
/*定位相關, 常見的(de)有:display position left top float 等
盒模型相關, 常見的(de)有:width height margin padding border 等
其他(tā)屬性 ,按照(zhào)這(zhè)樣的(de)順序書(shū)寫提升浏覽器渲染dom的(de)性能*/
}
簡單舉個(gè)例子,網頁中的(de)圖片,如果沒有設置width和(hé)height,在圖片載入之前,他(tā)所占的(de)空間爲0,但是當他(tā)加載完畢之後,那塊爲0的(de)空間突然被撐開了(le),這(zhè)樣會導緻,他(tā)下(xià)面的(de)元素重新排列和(hé)渲染,造成重繪(repaint)和(hé)回流(reflow)。我們在寫css的(de)時(shí)候,把元素的(de)定位放在前頭,首先讓浏覽器知道該元素是在文本流内還(hái)是外,具體在頁面的(de)哪個(gè)部位,接著(zhe)讓浏覽器知道他(tā)們的(de)寬度和(hé)高(gāo)度,border等這(zhè)些占用(yòng)空間的(de)屬性,其他(tā)的(de)屬性都是在這(zhè)個(gè)固定的(de)區(qū)域内渲染的(de),差不多(duō)就是這(zhè)個(gè)意思吧~
推薦文章(zhāng):NodeJs智能合并CSS精靈圖工具iSpriter
/* 所有的(de)inner都是針對(duì)div編寫的(de) */
div.inner {
......
}
".a div"和(hé)".a div.b",爲什(shén)麽後者好?如果需求有所變化(huà),在".a"下(xià)有多(duō)加了(le)一個(gè)div,試問,開始的(de)樣式是不是會影(yǐng)響後來(lái)的(de)div啊~
/* 針對(duì)ie的(de)hack */
selector {
property: value; /* 所有浏覽器 */
property: value9; /* 所有IE浏覽器 */
property: value0; /* IE8 */
+property: value; /* IE7 */
_property: value; /* IE6 */
*property: value; /* IE6-7 */
}
當使用(yòng)hack的(de)時(shí)候想想能不能用(yòng)更好的(de)樣式代替
這(zhè)裏主要是效率問題,應該當格外注意,咱們要少用(yòng)燒CPU的(de)東西~
<p style="font-size: 12px; color: #FFFFFF">hello world</p>
像這(zhè)樣的(de)行内樣式,最好用(yòng)一個(gè)class代替,盡量做(zuò)到樣式和(hé)結構分(fēn)離~
/*别這(zhè)樣寫*/
* {
margin: 0;
padding: 0;
}
這(zhè)樣寫是沒有必要的(de),一些元素在浏覽器中默認有margin或padding值,但是隻是部分(fēn)元素,沒有必要将所有元素的(de)margin、padding值都置爲0,包括我們頁面都沒使用(yòng)到的(de)元素,這(zhè)樣對(duì)性能有影(yǐng)響,而且一個(gè)網頁能用(yòng)到的(de)标簽都是有限的(de),使用(yòng)*有點殺雞用(yòng)牛刀(dāo)的(de)意思。
1. a:link
2. a:visited
3. a:hover
4. a:active
公司名稱:武漢互赢網絡科技有限公司
公司地址:武漢市武昌區(qū)靜安路6号創意産業園408室
客 服QQ:562257562 848467306
咨詢電話(huà):027-89992189
業務熱(rè)線:15972109576
公司網站:www.whtlnet.com
武漢做(zuò)網站 武漢網站建設 武漢網站制作 武漢網絡公司 武漢網站開發 武漢建網站
最新動态
常見問題百寶箱
A2014,有位學妹不顧家人(rén)反對(duì),在上海這(zhè)個(gè)國際化(huà)大(dà)都市謀了(le)一個(gè)公衆号助理(lǐ)的(de)職位。鬥志昂揚地奮鬥了(le) 3 年,我眼看著(zhe)她的(de)内容駕馭能力突飛(fēi)猛進,内容質量從三流到一流,職位
A文章(zhāng)主要分(fēn)析了(le)不同的(de)視覺設計元素是如何影(yǐng)響網站用(yòng)戶體驗,希望通(tōng)過文章(zhāng)的(de)解讀能夠對(duì)你的(de)産品設計帶來(lái)些啓發。 也(yě)許是因爲我在視覺設計上沒有太多(duō)經驗,我發現
A雙赢系統建站系統,三網同步,建站推廣一步到位雙赢系統建站系統,三網同步,建站推廣一步到位雙赢系統建站系統,三網同步,建站推廣一步到位雙赢系統建站系統,三網同步,建站推
Copyright 2013-2020 All Rights Reserved 雲南雲豹網絡科技股份有限公司