blob: 17553c5013527a132b305a63ffdd6ab94f5a4386 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
|
---
title: 创建可读性良好的CSS
slug: Web/Guide/CSS/Getting_started/Readable_CSS
translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable
translation_of_original: Web/Guide/CSS/Getting_started/Readable_CSS
---
<p>{{ CSSTutorialTOC() }}</p>
<p>{{ previousPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Selectors", "选择器")}}这是<a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started">CSS入门教程</a>系列教程的第6部分；<span class="seoSummary"> 本节讨论了CSS语言自身的样式及语法。你可以更改CSS示例文件的代码外观，来使其更具可读性。</span></p>
<h2 class="clearLeft" id="资料：创建可读性良好的_CSS">资料：创建可读性良好的 CSS</h2>
<p>你可以通过添加空白字符和注释来提高样式表的可读性。你也可以把不同的选择器放到一组中来，这样同一样式可以应用到这一组中。</p>
<h3 id="空白字符">空白字符</h3>
<p>空白字符是指空格、tab字符和换行。你可以通过添加这些空白字符来提高样式表的可读性。</p>
<p>对页面而言，空白字符也是页面的一个组成部分，它的效果就是创造了边距、分割，还有行和列间的空白。</p>
<p>如果你的样式表中一行只有一条规则，那这是使用空白字符最少的情况。但是，对于复杂的样式表而言，这可能不便于阅读，而且维护起来也比较困难。</p>
<p>样式表的书写风格可以根据你自己的喜好来选择。但是，如果你开发的项目需要分享给他人，那就很有必要来制定一些书写规范。</p>
<div class="tuto_example">
<div class="tuto_type">示例</div>
<p>有人喜欢我们这里使用的紧凑的书写风格，但是如果规则较长的时候就需要来进行分割：</p>
<pre class="brush: css">.carrot {color: orange; text-decoration: underline; font-style: italic;}
</pre>
<p>也有人喜欢下面这种每行只写一个属性-值的风格：</p>
<pre class="brush: css">.carrot
{
color: orange;
text-decoration: underline;
font-style: italic;
}
</pre>
<p>还有人喜欢缩进（两个空格、四个空格，或者tab键是最常用的方式）：</p>
<pre class="brush: css">.carrot {
color: orange;
text-decoration: underline;
font-style: italic;
}
</pre>
<p>还有人喜欢这种垂直对齐的方式（这种方式比较难维护）：</p>
<pre class="brush: css">.carrot
{
color : orange;
text-decoration : underline;
font-style : italic;
}
</pre>
<p>有些人混合使用空白字符来提高可读性：</p>
<pre class="brush: css">.vegetable { color: green; min-height: 5px; min-width: 5px }
.vegetable.carrot { color: orange; height: 90px; width: 10px }
.vegetable.spinach { color: darkgreen; height: 30px; width: 30px }
</pre>
</div>
<p>而且，在使用的空白字符的时候，有人喜欢用tab键，有人喜欢使用空格。</p>
<h3 id="注释">注释</h3>
<p>CSS注释以<code>/*</code> 开始，以 <code>*/</code>结束。</p>
<p>你可以在样式表中写些实际意义的注释，也可以是为了测试的目的而写的临时性的注释内容。</p>
<p>对于样式表中的注释内容一定要写在注释标签内，这样浏览器在解析的时候会忽略注释。一定要注意注释的起始标签。样式表的其他部分始终要符合语法规则。</p>
<div class="tuto_example">
<div class="tuto_type">示例</div>
<pre class="brush: css">/* style for initial letter C in first paragraph */
.carrot {
color: orange;
text-decoration: underline;
font-style: italic;
}
</pre>
</div>
<h3 id="选取器组">选取器组</h3>
<p>当很多元素具有相同的样式时，你就需要定义一个选择器组，组内用逗号分隔。这样声明的样式就会应用到组内所有的选择器上。</p>
<p>在样式表的其他地方，你也可以单独对这些选择器重新设置样式，这些样式会应用到相应的选择器上。</p>
<div class="tuto_example">
<div class="tuto_type">示例</div>
<p>这条规则将 {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, 和 {{ HTMLElement("h3") }} 匹配到的元素设置为相同颜色。</p>
<p>将定义颜色的规则写在一个地方是正确的，因为有些时候，这个颜色值可能需要统一修改。</p>
<pre class="brush: css">/* color for headings */
h1, h2, h3 {color: navy;}
</pre>
</div>
<h2 id="实践：添加注释来提高展现力">实践：添加注释来提高展现力</h2>
<ol>
<li>编辑你的样式表，将下面的几条规则添加进去（规则顺序可以任意设置）：
<pre class="brush: css">strong {color: red;}
.carrot {color: orange;}
.spinach {color: green;}
#first {font-style: italic;}
p {color: blue;}
</pre>
</li>
<li>为了让代码变得可读性更高，你需要通过分析其中的联系来对代码重新排序，并选择你认为最合适的方式来添加一些空白字符和注释。</li>
<li>保存文件并刷新浏览器页面，要确保你更改后代码不影响原来的显示效果：
<table style="border: 2px outset #3366bb; padding: 1em;">
<tbody>
<tr>
<td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
</tr>
<tr>
<td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
</tr>
</tbody>
</table>
</li>
</ol>
<div class="tuto_details">
<div class="tuto_type">挑战</div>
<p>将你的样式表中的部分内容改为注释，以使文档的第一个字母颜色变为红色，但是注意不要改变其他任何内容：</p>
<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
<tbody>
<tr>
<td style="font-style: italic; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
</tr>
<tr>
<td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
</tr>
</tbody>
</table>
<p>（这个不止一种解决方案。）</p>
<div class="tuto_details" id="tutochallenge">
<div class="tuto_type">一种解决方法：</div>
其中一种解决办法就是给<code>.carrot</code>添加注释：
<pre class="brush: css">.carrot {
color: orange;
}
</pre>
A more specific selector, <code>p#second</code> also works. <a class="hideAnswer" href="#challenge">Hide solution</a></div>
<a href="#tutochallenge" title="Display a possible solution for the challenge">查看解决方案</a></div>
<h2 id="接下来是什么">接下来是什么?</h2>
<p>{{ nextPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Text_styles", "文本样式") }} 本节中，你的示例样式使用了 italic 文本以及 underlined 文本。 下一节将描述更多的方式来 <a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Text_styles">详细指定文本的外观</a> 。</p>
|
