本文将重点介绍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倍。由于所有垂直滚动，这实际上使整个文档对我来说不太可读。如果您的监视器有点狭窄，单行格式可能会导致水平滚动，有时甚至更糟。
完美的格式是最大限度地提高可读性，同时最大限度地减少滚动。另外，从更抽象的意义上讲，它只需要感觉正确。
以上是CSS代码格式化的不同的表现方式介绍的详细内容。更多信息请关注PHP中文网其他相关文章！
