blob: f3f9a0797b963e32f8d1765dee12b0aa35f568d7 (
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
|
---
title: Content
slug: Web/Guide/CSS/Getting_started/Content
translation_of: Learn/CSS/Howto/Generated_content
---
<p>{{ CSSTutorialTOC() }}</p>
<p>{{ previousPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Color", "颜色") }}<span class="seoSummary">这是 <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS 入门教程</a>的第9部分，介绍了一些通过CSS改变文档内容的方法。这样，仅修改样式表你就能把文本内容及图片添加到文档。</span></p>
<h2 class="clearLeft" id="信息_内容">信息: 内容</h2>
<p>CSS的一个重要优势是它可以帮助你将文档内容和其样式分离。但是有时候在样式而非文档中定义一些内容也是很有用的。</p>
<p>在样式中可以定义文本内容和图片内容。当内容与文档结构紧密相关的时候，你可以在样式表中指定内容。</p>
<div class="tuto_details">
<div class="tuto_type">更多细节</div>
<p>在样式表中指定内容会使事情变得复杂：你可能有多个语言版本的文档共享同一个样式表。如果样式表的一部分需要翻译，这就意味着你需要将这部分单独保存在多个样式表中，并在不同语言的文档中引用。</p>
<p>如果你指定的内容由通用符号和图片组成的话，就不存在这个问题。</p>
<p>样式表中指定的内容不会成为DOM的一部分。</p>
</div>
<h3 id="文本内容">文本内容</h3>
<p>CSS可以在元素的前后插入文本：在选择器的后面加上{{ cssxref("::before") }} 或者 {{ cssxref("::after") }} 。在声明中，指定 {{ cssxref("content") }} 属性，并设置文本内容。</p>
<div class="tuto_example">
<div class="tuto_type">例</div>
<p>下面这条规则在所有类名包含 <span style="font-family: courier new,andale mono,monospace; line-height: normal;">ref的元素前面加上</span><span style="line-height: 1.5;"> </span><strong style="color: navy; font-weight: bold; line-height: 1.5;">Reference:</strong></p>
<pre class="brush:css">.ref::before {
font-weight: bold;
color: navy;
content: "Reference: ";
}
</pre>
</div>
<div class="tuto_details">
<div class="tuto_type">更多细节</div>
<p>样式表默认使用UTF-8字符集。也可以通过link属性或样式表以及其他方式指定。 参见 CSS规范中 <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q23">4.4 CSS style sheet representation</a></p>
<p>还可以通过转义机制（通过反斜杠转义）指定单个字符。<span style="line-height: 1.5;">比如， \265B 是国际象棋黑皇后的符号 ♛。更多参见 </span><a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q24" style="line-height: 1.5;">Referring to characters not represented in a character encoding</a><span style="line-height: 1.5;"> 和CSS规范中的 </span><a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q6" style="line-height: 1.5;">Characters and case</a><span style="line-height: 1.5;">。</span></p>
</div>
<h3 id="图片内容">图片内容</h3>
<p>可以通过将{{ cssxref("content") }} 属性值设置为某个图片的URL，可以将图片插到元素的前面或后面。</p>
<div class="tuto_example">
<div class="tuto_type">例</div>
<p>下面这条规则在所有类名包含<span style="font-family: courier new,andale mono,monospace; line-height: normal;">glossary的a标签后面插入一个空格和一个图标：</span></p>
<pre class="brush:css">a.glossary::after {content: " " url("../images/glossary-icon.gif");}
</pre>
</div>
<p>将图片设置成元素的背景图：将 {{ cssxref("background") }} 的值设为图片的URL。这是同时设置背景颜色，背景图，图片如何重复等的快捷写法。</p>
<div class="tuto_example">
<div class="tuto_type">例</div>
<p>这条规则通过指定图片URL设置特定元素的背景。</p>
<p>这是一个ID选择器；no-repeat表示背景图只出现一次，不重复:</p>
<pre class="brush:css">#sidebar-box {background: url("../images/sidebar-ground.png") no-repeat;}
</pre>
</div>
<div class="tuto_details">
<div class="tuto_type">更多细节</div>
<p>了解更多影响背景图的属性，以及其他背景图选项，参见 {{ cssxref("background") }} 。</p>
</div>
<h2 id="实践_添加背景图片">实践: 添加背景图片</h2>
<p>这幅图是一个白方块，底部有一条蓝色实线:</p>
<table style="border: 2px solid #cccccc;">
<tbody>
<tr>
<td><img alt="Image:Blue-rule.png" class="internal" src="https://mdn.mozillademos.org/files/160/Blue-rule.png"></td>
</tr>
</tbody>
</table>
<ol>
<li>下载上图放到CSS同目录下</li>
<li>编辑CSS文件，为body设置背景图.
<pre class="brush:css">background: url("Blue-rule.png");
</pre>
<p>背景图默认是 <code>repeat（重复）的，无需明确指出。图片在水平和垂直方向重复，最终呈现出横格纸的效果：</code></p>
<div style="position: relative; width: 24em; height: 11em; border: 2px outset #36b; overflow: hidden;">
<p style="margin: 0px;"><img alt="Image:Blue-rule-ground.png" class="internal" src="https://mdn.mozillademos.org/files/161/Blue-rule-ground.png"></p>
<div style="position: absolute; top: 0px; left: 0px; border: none; margin: 0px; padding: .5em 0px 0px 1em; font: 16px 'Comic Sams MS', cursive; color: blue; background-color: transparent;">
<div style="font-style: italic; width: 24em;">
<p><strong style="background-color: #ddddff; color: red; font: 200% serif;">C</strong>ascading <strong style="background-color: #ddddff; color: green; font: 200% serif;">S</strong>tyle <strong style="background-color: #ddddff; color: green; font: 200% serif;">S</strong>heets</p>
</div>
<div style="font-style: normal; padding-top: 2px; height: 8em;">
<p><strong style="background-color: #ddddff; color: red; font: 200% serif;">C</strong>ascading <strong style="background-color: #ddddff; color: red; font: 200% serif;">S</strong>tyle <strong style="background-color: #ddddff; color: red; font: 200% serif;">S</strong>heets</p>
</div>
</div>
</div>
</li>
</ol>
<div class="tuto_example">
<div class="tuto_type">挑战</div>
<p>下载图片:</p>
<table style="border: 2px solid #cccccc;">
<tbody>
<tr>
<td><img alt="Image:Yellow-pin.png" class="internal" src="https://mdn.mozillademos.org/files/924/Yellow-pin.png"></td>
</tr>
</tbody>
</table>
<p>在样式表中增加一条规则，使得每行前面显示上面的图标</p>
<div style="position: relative; width: 24em; height: 11em; border: 2px outset #36b; overflow: hidden;">
<p style="margin: 0px;"><img alt="Image:Blue-rule-ground.png" class="internal" src="https://mdn.mozillademos.org/files/161/Blue-rule-ground.png"></p>
<div style="position: absolute; top: 0px; left: 0px; border: none; margin: 0px; padding: .5em 0px 0px 1em; font: 16px 'Comic Sams MS', cursive; color: blue; background-color: transparent;">
<div style="font-style: italic; width: 24em; padding-top: 8px;"><img alt="image:Yellow-pin.png" class="internal" src="https://mdn.mozillademos.org/files/924/Yellow-pin.png"> <strong style="background-color: #ddddff; color: red; font: 200% serif;">C</strong>ascading <strong style="background-color: #ddddff; color: green; font: 200% serif;">S</strong>tyle <strong style="background-color: #ddddff; color: green; font: 200% serif;">S</strong>heets</div>
<div style="font-style: normal; padding-top: 12px; height: 8em;"><img alt="image:Yellow-pin.png" class="internal" src="https://mdn.mozillademos.org/files/924/Yellow-pin.png"> <strong style="background-color: #ddddff; color: red; font: 200% serif;">C</strong>ascading <strong style="background-color: #ddddff; color: red; font: 200% serif;">S</strong>tyle <strong style="background-color: #ddddff; color: red; font: 200% serif;">S</strong>heets</div>
</div>
</div>
<div class="tuto_details" id="tutochallenge">
<div class="tuto_type">Possible solution</div>
<p>Add this rule to your stylesheet:</p>
<pre class="brush: css">p:before{
content: url("yellow-pin.png");
}
</pre>
<p> </p>
<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/Lists", "列表") }}列表是一种常见的为列表元素添加内容的方式。下节将介绍如何 <a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Lists" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Lists">为列表元素指定样式</a>。</p>
|
