點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

CSS代碼格式化的不同的表現方式介紹

來源：懂視網責編：小采時間：2020-11-02 22:12:19

CSS代碼格式化的不同的表現方式介紹

CSS代碼格式化的不同的表現方式介紹:本文將重點介紹CSS格式的不同方式，這與組織CSS的方式不同，僅僅是相關的概念，我認為組織更多地與事物分組和排序有關，而格式化與間距和縮進有關。格式化與CSS的功能無關。這些僅僅是程序員的自己選擇，但這并不是說格式化對于css來說不重要，就好比說畫布的

推薦度：

點擊下載本文 文檔為doc格式

導讀CSS代碼格式化的不同的表現方式介紹:本文將重點介紹CSS格式的不同方式，這與組織CSS的方式不同，僅僅是相關的概念，我認為組織更多地與事物分組和排序有關，而格式化與間距和縮進有關。格式化與CSS的功能無關。這些僅僅是程序員的自己選擇，但這并不是說格式化對于css來說不重要，就好比說畫布的

本文將重點介紹CSS格式的不同方式，這與組織CSS的方式不同，僅僅是相關的概念，我認為組織更多地與事物分組和排序有關，而格式化與間距和縮進有關。

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

CSS格式之所以有這么多選擇，是因為當涉及到間隔和換行時，沒有嚴格的語法規則。例如：

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_rss li {
display: inline;
}
#navigation_rss li a:link, #navigation_rss li a:visited {
color: #fffffe;
text-decoration: none;
padding: 0px 2px;
letter-spacing: -0.05em;
}
#navigation_rss li a:hover {
color: #eed2a1;
text-decoration: none;
}

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

具有縮進的多行格式

.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_rss li {
 display: inline;
 }
 #navigation_rss li a:link, #navigation_rss li a:visited {
 color: #fffffe;
 text-decoration: none;
 padding: 0px 2px;
 letter-spacing: -0.05em;
 }
 #navigation_rss li a:hover {
 color: #eed2a1;
 text-decoration: none;
 }

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

單行格式

div.wrapper { margin:0 auto; padding:200px 0 0 0; width:960px; z-index:2 }
ul.nav { position:absolute; top:0; left:430px; padding:120px 0 0 0 }
ul.nav li { display:inline; margin:0 10px 0 0 }
div.column { float:left; margin:0 70px 0 0; padding:0 0 0 70px; width:340px }
div.post_wrapper { background:url(http://cdn.images.elliotjaystocks.com/presentation/hr_long.png) bottom center no-repeat; margin:0 0 40px 0; padding:0 0 40px 0 }
div.wrapper img, div.wrapper a img, div.article_illustration_mini { background:#d3d4cb; padding:10px; border:1px solid #999 }
div.wrapper a:hover img { background:#fff }

這可能是最有效的空間和尺寸，沒有完全壓縮以移除所有空間和換行符。在編寫和編輯CSS時，這種技術需要最少的垂直和水平滾動，但是看起來很麻煩并且有些難以瀏覽和查找你正在尋找的東西。

帶Tab鍵的單行格式

h1, h2, h3 { font: 24px Helvetica, Sans-Serif; margin: 0 0 10px 0; }
h2 a, h2 a:visited { color: #2e2e2e; }
h2 a:hover { color: #fe4902; border-bottom: 1px dotted #2e2e2e; }
p, li, dd { font: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif; margin: 0 0 15px 0; color: #5e5d5d; }
td, th { font: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif; text-align: left; }

具有縮進的單行格式

#content-area ol { margin: 15px 0 0 25px; list-style: decimal; }
 #content-area ol ol { list-style: lower-alpha; }
#content-area ul { margin: 0 0 0 5px; list-style: none; }
 #content-area ul li { padding: 0 0 0 20px; background: url(/images/bullet.png) 0 3px no-repeat; }
 #content-area ul ul { margin: 15px 0 0 25px; list-style: disc; }
 #content-area ul ul li { background: none; padding: 0; }

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

主要是單行格式

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

h1, h2, h3 { font: 24px Helvetica, Sans-Serif; margin: 0 0 10px 0; }
h1 { font-size: 36px; }
h2 { font-size: 30px; }
h2 a, h2 a:visited { color: #2e2e2e; }
h2 a:hover { color: #fe4902; border-bottom: 1px dotted #2e2e2e; }
p, li, dd { font: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif;
 margin: 0 0 15px 0; color: #5e5d5d; }
td, th { font: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif;
 text-align: left; }

變化

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

div
{
 padding: 10px;
}

在帶有標簽的多行格式中，我看到了用作分隔墻的大括號：

#content-area ol { margin: 15px 0 0 25px; list-style: decimal; }
 #content-area ol ol { list-style: lower-alpha; }
#content-area ul { margin: 0 0 0 5px; list-style: none; }
 #content-area ul li { padding: 0 0 0 20px; background: url(/images/bullet.png) 0 3px no-repeat; }
 #content-area ul ul { margin: 15px 0 0 25px; list-style: disc; }
 #content-area ul ul li { background: none; padding: 0; }

組合

單行和多行的組合可以將相關屬性分組到一行：

.navigation_rss_icon {
 position: absolute;
 top: 10px; left: 10px; bottom: 10px; right: 10px;
 font-size: 12px; font-weight: bold;
}

您選擇的格式歸結為可讀性。您需要能夠快速導航CSS并找到您要查找的內容并快速進行更改。如果您發現單行格式很難，因為您的眼睛很難找到您正在尋找的屬性，那么您應該避免使用它。

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

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

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

CSS代碼格式化的不同的表現方式介紹

推薦度：

點擊下載本文 文檔為doc格式

標簽：介紹格式化不同

熱門焦點

CSS代碼格式化的不同的表現方式介紹

CSS代碼格式化的不同的表現方式介紹

CSS代碼格式化的不同的表現方式介紹

最新推薦

猜你喜歡

熱門推薦