這篇文章主要介紹了CSS代碼格式化的不同表現(xiàn)方式是什么，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)是一家專業(yè)提供桐梓企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站制作、做網(wǎng)站、H5建站、小程序制作等業(yè)務(wù)。10年已為桐梓眾多企業(yè)、政府機構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)的建站公司優(yōu)惠進行中。

格式化與CSS的功能無關(guān)。這些僅僅是程序員的自己選擇，但這并不是說格式化對于css來說不重要，就好比說畫布的選擇對畫家來說并不重要，這是不對的，格式化會影響編寫CSS的感覺，閱讀的容易程度，導(dǎo)航的容易程度以及重新訪問和重新熟悉之前編寫的CSS的難易程度。

CSS格式之所以有這么多選擇，是因為當(dāng)涉及到間隔和換行時，沒有嚴(yán)格的語法規(guī)則。例如：

div{width:50px}

與下面兩個的代碼是相同的

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)涉及到短的代碼片段時，它是最容易閱讀的，這就是為什么書面教程最常使用這種格式的原因。上面的示例在右大括號和下一個選擇器之間沒有空行，但這也很常見。

具有縮進的多行格式

.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;

}

縮進的塊表示選擇器是比其上方的父級更具體的選擇器，并且指向上述選擇器的子元素。

單行格式

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ù)需要最少的垂直和水平滾動，但是看起來很麻煩并且有些難以瀏覽和查找你正在尋找的東西。

帶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;}

具有縮進的單行格式

#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;}

一個縮進的選擇器表示選擇器的目標(biāo)是它上面的選擇器的子元素。

主要是單行格式

我最喜歡的就是單行格式，因為我在文本編輯器中使用Soft-Wrap，因此長行不會永遠(yuǎn)持續(xù)，它們會在窗口邊緣處包裹。因此，對于具有大量選擇器的非常長的行，我在新的屬性行上添加了一個硬回車和制表符。

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;}

變化

單行格式可以通過將開括號移動到它自己的行上來進一步實現(xiàn)，這是我在PHP中看到的相當(dāng)多的東西：

div

{

padding:10px;

}

在帶有標(biā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)容并快速進行更改。如果您發(fā)現(xiàn)單行格式很難，因為您的眼睛很難找到您正在尋找的屬性，那么您應(yīng)該避免使用它。

就個人而言，我發(fā)現(xiàn)多行格式易于閱讀，但它將長度（如實際行數(shù)）增加了5-8倍。由于所有垂直滾動，這實際上使整個文檔對我來說不太可讀。如果您的監(jiān)視器有點狹窄，單行格式可能會導(dǎo)致水平滾動，有時甚至更糟。

完美的格式是最大限度地提高可讀性，同時最大限度地減少滾動。另外，從更抽象的意義上講，它只需要感覺正確。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“CSS代碼格式化的不同表現(xiàn)方式是什么”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!