diff options
Diffstat (limited to 'files/zh-cn/web/guide/css/getting_started/content/index.html')
| -rw-r--r-- | files/zh-cn/web/guide/css/getting_started/content/index.html | 160 |
1 files changed, 0 insertions, 160 deletions
diff --git a/files/zh-cn/web/guide/css/getting_started/content/index.html b/files/zh-cn/web/guide/css/getting_started/content/index.html deleted file mode 100644 index f3f9a0797b..0000000000 --- a/files/zh-cn/web/guide/css/getting_started/content/index.html +++ /dev/null @@ -1,160 +0,0 @@ ---- -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> |