您好,登錄后才能下訂單哦!
這篇文章主要介紹了CSS代碼格式化的不同表現(xiàn)方式是什么,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
格式化與CSS的功能無關(guān)。這些僅僅是程序員的自己選擇,但這并不是說格式化對(duì)于css來說不重要,就好比說畫布的選擇對(duì)畫家來說并不重要,這是不對(duì)的,格式化會(huì)影響編寫CSS的感覺,閱讀的容易程度,導(dǎo)航的容易程度以及重新訪問和重新熟悉之前編寫的CSS的難易程度。
CSS格式之所以有這么多選擇,是因?yàn)楫?dāng)涉及到間隔和換行時(shí),沒有嚴(yán)格的語法規(guī)則。例如:
div{width:50px}
與下面兩個(gè)的代碼是相同的
div{width:50px}
div
{
width:50px
}
多行格式
.navigation_rss_icon{
position:absolute;
left:940px;
bottom:0px;
}
#navigation_rss{
position:absolute;
left:720px;
font-family:Verdana,Arial,Helvetica,sans-serif;
text-transform:uppercase;
color:#897567;
line-height:2.5em;
}
#navigation_rssli{
display:inline;
}
#navigation_rsslia:link,#navigation_rsslia:visited{
color:#fffffe;
text-decoration:none;
padding:0px2px;
letter-spacing:-0.05em;
}
#navigation_rsslia:hover{
color:#eed2a1;
text-decoration:none;
}
我敢說這是最常見的,當(dāng)涉及到短的代碼片段時(shí),它是最容易閱讀的,這就是為什么書面教程最常使用這種格式的原因。上面的示例在右大括號(hào)和下一個(gè)選擇器之間沒有空行,但這也很常見。
具有縮進(jìn)的多行格式
.navigation_rss_icon{
position:absolute;
left:940px;
bottom:0px;
}
#navigation_rss{
position:absolute;
left:720px;
font-family:Verdana,Arial,Helvetica,sans-serif;
text-transform:uppercase;
color:#897567;
line-height:2.5em;
}
#navigation_rssli{
display:inline;
}
#navigation_rsslia:link,#navigation_rsslia:visited{
color:#fffffe;
text-decoration:none;
padding:0px2px;
letter-spacing:-0.05em;
}
#navigation_rsslia:hover{
color:#eed2a1;
text-decoration:none;
}
縮進(jìn)的塊表示選擇器是比其上方的父級(jí)更具體的選擇器,并且指向上述選擇器的子元素。
單行格式
div.wrapper{margin:0auto;padding:200px000;width:960px;z-index:2}
ul.nav{position:absolute;top:0;left:430px;padding:120px000}
ul.navli{display:inline;margin:010px00}
div.column{float:left;margin:070px00;padding:00070px;width:340px}
div.post_wrapper{background:url(http://cdn.images.elliotjaystocks.com/presentation/hr_long.png)bottomcenterno-repeat;margin:0040px0;padding:0040px0}
div.wrapperimg,div.wrapperaimg,div.article_illustration_mini{background:#d3d4cb;padding:10px;border:1pxsolid#999}
div.wrappera:hoverimg{background:#fff}
這可能是最有效的空間和尺寸,沒有完全壓縮以移除所有空間和換行符。在編寫和編輯CSS時(shí),這種技術(shù)需要最少的垂直和水平滾動(dòng),但是看起來很麻煩并且有些難以瀏覽和查找你正在尋找的東西。
帶Tab鍵的單行格式
h2,h3,h4{font:24pxHelvetica,Sans-Serif;margin:0010px0;}
h3a,h3a:visited{color:#2e2e2e;}
h3a:hover{color:#fe4902;border-bottom:1pxdotted#2e2e2e;}
p,li,dd{font:13px/18px"LucidaGrande",Arial,Helvetica,Sans-Serif;margin:0015px0;color:#5e5d5d;}
td,th{font:13px/18px"LucidaGrande",Arial,Helvetica,Sans-Serif;text-align:left;}
具有縮進(jìn)的單行格式
#content-areaol{margin:15px0025px;list-style:decimal;}
#content-areaolol{list-style:lower-alpha;}
#content-areaul{margin:0005px;list-style:none;}
#content-areaulli{padding:00020px;background:url(/images/bullet.png)03pxno-repeat;}
#content-areaulul{margin:15px0025px;list-style:disc;}
#content-areaululli{background:none;padding:0;}
一個(gè)縮進(jìn)的選擇器表示選擇器的目標(biāo)是它上面的選擇器的子元素。
主要是單行格式
我最喜歡的就是單行格式,因?yàn)槲以谖谋揪庉嬈髦惺褂肧oft-Wrap,因此長(zhǎng)行不會(huì)永遠(yuǎn)持續(xù),它們會(huì)在窗口邊緣處包裹。因此,對(duì)于具有大量選擇器的非常長(zhǎng)的行,我在新的屬性行上添加了一個(gè)硬回車和制表符。
h2,h3,h4{font:24pxHelvetica,Sans-Serif;margin:0010px0;}
h2{font-size:36px;}
h3{font-size:30px;}
h3a,h3a:visited{color:#2e2e2e;}
h3a:hover{color:#fe4902;border-bottom:1pxdotted#2e2e2e;}
p,li,dd{font:13px/18px"LucidaGrande",Arial,Helvetica,Sans-Serif;
margin:0015px0;color:#5e5d5d;}
td,th{font:13px/18px"LucidaGrande",Arial,Helvetica,Sans-Serif;
text-align:left;}
變化
單行格式可以通過將開括號(hào)移動(dòng)到它自己的行上來進(jìn)一步實(shí)現(xiàn),這是我在PHP中看到的相當(dāng)多的東西:
div
{
padding:10px;
}
在帶有標(biāo)簽的多行格式中,我看到了用作分隔墻的大括號(hào):
#content-areaol{margin:15px0025px;list-style:decimal;}
#content-areaolol{list-style:lower-alpha;}
#content-areaul{margin:0005px;list-style:none;}
#content-areaulli{padding:00020px;background:url(/images/bullet.png)03pxno-repeat;}
#content-areaulul{margin:15px0025px;list-style:disc;}
#content-areaululli{background:none;padding:0;}
組合
單行和多行的組合可以將相關(guān)屬性分組到一行:
.navigation_rss_icon{
position:absolute;
top:10px;left:10px;bottom:10px;right:10px;
font-size:12px;font-weight:bold;
}
您選擇的格式歸結(jié)為可讀性。您需要能夠快速導(dǎo)航CSS并找到您要查找的內(nèi)容并快速進(jìn)行更改。如果您發(fā)現(xiàn)單行格式很難,因?yàn)槟难劬茈y找到您正在尋找的屬性,那么您應(yīng)該避免使用它。
就個(gè)人而言,我發(fā)現(xiàn)多行格式易于閱讀,但它將長(zhǎng)度(如實(shí)際行數(shù))增加了5-8倍。由于所有垂直滾動(dòng),這實(shí)際上使整個(gè)文檔對(duì)我來說不太可讀。如果您的監(jiān)視器有點(diǎn)狹窄,單行格式可能會(huì)導(dǎo)致水平滾動(dòng),有時(shí)甚至更糟。
完美的格式是最大限度地提高可讀性,同時(shí)最大限度地減少滾動(dòng)。另外,從更抽象的意義上講,它只需要感覺正確。
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“CSS代碼格式化的不同表現(xiàn)方式是什么”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。