diff options
Diffstat (limited to 'files/zh-cn/conflicting/learn/css/building_blocks')
5 files changed, 1712 insertions, 0 deletions
diff --git a/files/zh-cn/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/zh-cn/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html new file mode 100644 index 0000000000..e5a3bae8a0 --- /dev/null +++ b/files/zh-cn/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html @@ -0,0 +1,125 @@ +--- +title: 层叠和继承 +slug: Web/Guide/CSS/Getting_started/Cascading_and_inheritance +translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance +translation_of_original: Web/Guide/CSS/Getting_started/Cascading_and_inheritance +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p>{{ previousPage("/zh-CN/docs/CSS/开始/How_CSS_works", "CSS如何工作")}} <span class="seoSummary">这是 <a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started" title="en/CSS/Getting Started">开始学CSS</a> 教程的第4节; 这一节介绍了样式表中元素如何从父级继承样式，以及不同层级的样式如何相互作用决定最终显示效果。教给你通过在样式表中添加级联样式语句，进一步控制页面元素的展现。</span></p> + +<h2 class="clearLeft" id="资料_层叠和继承">资料: 层叠和继承</h2> + +<p>一个元素的样式，可以通过多种方式来定义，而多种定义方式之间通过复杂的影响关系决定了元素的最终样式。这种复杂既造就了CSS的强大，也导致CSS显得如此“混乱”而且难以调试。</p> + +<p>对于<em>层叠</em>来说，共有三种主要的样式来源：</p> + +<ul> + <li>浏览器对HTML定义的默认样式。</li> + <li><span style="line-height: 1.5;">用户定义的样式。</span></li> + <li><span style="line-height: 1.5;">开发者定义的样式，可以有三种形式：</span> + <ul> + <li><span style="line-height: 1.5;">定义在外部文件（外链样式）：本教程中案例主要是通过这种形式定义样式。</span></li> + <li>在页面的头部定义（内联样式）：通过这种形式定义的样式只在本页面内生效。</li> + <li>定义在特定的元素身上（行内样式）：这种形式多用于测试，可维护性较差。</li> + </ul> + </li> +</ul> + +<p>用户定义的样式表会覆盖浏览器定义的默认样式，然后网页开发者定义的样式又会覆盖用户样式。在这个教程中，你作为网页的开发者只需要关注开发者样式。</p> + +<div class="tuto_example"> +<div class="tuto_type">示例</div> + +<p>就你现在看到的这个页面而言，有一部分样式是来自浏览器定义的默认的HTML样式。</p> + +<p>有一部分样式可能来自用户通过浏览器自定义的样式，或者为浏览器引入自定义的样式表。例如，在Firefox中，在“首选项”对话框中可以自定义样式，也可以建立一个单独的<code>userContent.css</code> 样式文件并放到“用户配置”的文件夹中。</p> + +<p>另外，还有一部分样式来自外链的wiki服务器上的样式表。</p> +</div> + +<p>在浏览器中打开前面写的例子页面，你会发现 {{ HTMLElement("strong") }} 元素中的文字会比其他文字粗一些。这些样式就是在浏览器定义的默认HTML样式。</p> + +<p>而{{ HTMLElement("strong") }} 元素是红色的，这是你在自己的样式表中定义的样式。</p> + +<p>同时，{{ HTMLElement("strong") }} 作为 {{ HTMLElement("p") }} 的子元素，也继承了 {{ HTMLElement("p") }} 的样式。同样的， {{ HTMLElement("p") }} 也从 {{ HTMLElement("body") }} 中继承了许多的样式。</p> + +<p>再来看看优先级，从高到低依次为：网页开发者定义的样式、网页阅读者定义的样式、浏览器的默认样式。</p> + +<p>对继承的元素来说，子元素自身的样式优先级高于从父级继承来的样式。</p> + +<p>当然，关于优先级还有更多的知识点，我们会在后面的章节中继续介绍。</p> + +<div class="tuto_details"> +<div class="tuto_type">更多细节</div> + +<p>CSS 另外提供了一个!important关键字，用户可以通过使用这个关键字使自己定义的样式覆盖掉开发者定义的样式。</p> + +<p>这就意味着，作为开发者，你很难准确的预知页面<span style="line-height: 1.5;">最终</span><span style="line-height: 1.5;">在用户电脑上的显示效果。</span></p> + +<p>如果你想了解关于层级和继承的全部细节，请阅读CSS文档中的相关章节（英文）：<a class="external" href="http://www.w3.org/TR/CSS21/cascade.html">Assigning property values, Cascading, and Inheritance</a>。</p> +</div> + +<h2 id="动手_使用继承">动手: 使用继承</h2> + +<ol> + <li>编辑你之前创建的style.css文件。</li> + <li>把下面这行代码粘到以前的文件中，粘在之前的代码的上面或下面都可以。 不过，加在css文件的头部会更符合逻辑一些，因为在页面中 {{ HTMLElement("p") }} 是 {{ HTMLElement("strong") }} 的父级元素: + <pre class="brush:css">p {color: blue; text-decoration: underline;} +</pre> + </li> + <li>现在刷新你的浏览器，应该可以看到页面的变化。页面里所有的文本应该都被加上了下划线，也包括大写的首字母。{{ HTMLElement("strong") }} 从它的父级元素 {{ HTMLElement("p") }} 上继承到了下划线的样式。<br> + + <p>但是，{{ HTMLElement("strong") }} 元素仍然是红色的。红色是它本身的样式，所以优先级会超过父级元素 {{ HTMLElement("p") }} 的蓝色.</p> + </li> +</ol> + +<table style="background-color: #f4f4f4; border: 1px solid #36b; padding: 1em;"> +</table> + +<table style="border: 2px outset #36b; margin-right: 2em; padding: 1em;"> + <caption>修改前</caption> + <tbody> + <tr> + <td><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> + +<table style="border: 2px outset #36b; padding: 1em;"> + <caption>修改后</caption> + <tbody> + <tr> + <td style="color: blue; text-decoration: underline;"><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> + +<div class="tuto_example"> +<div class="tuto_type">挑战</div> +改动一下样式表，完整如下效果：只在红色的字母上加下划线： + +<table style="border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td style="color: blue;"><strong style="color: red; text-decoration: underline;">C</strong>ascading <strong style="color: red; text-decoration: underline;">S</strong>tyle <strong style="color: red; text-decoration: underline;">S</strong>heets</td> + </tr> + </tbody> +</table> + +<div class="tuto_details" id="tutochallenge"> +<div class="tuto_type">参考答案</div> + +<p>把定义在 {{ HTMLElement("p") }} 标签上的下划线样式移到 {{ HTMLElement("strong") }} 标签上。改后代码如下：</p> + +<pre class="brush: css">p {color: blue; } +strong {color: red; text-decoration: underline;} +</pre> + +<p> </p> +<a class="hideAnswer" href="#challenge">隐藏答案</a></div> +<a href="#tutochallenge" title="点击显示参考答案">查看参考答案</a></div> + +<h2 id="下一节">下一节?</h2> + +<p>{{ nextPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Selectors", "选择器")}} 到目前为止，你在样式表中所有的样式都是为标签上的，<code><p></code> 和 <code><strong>，你可以尝试着改变一下页面中它们的样式。</code>下一节会介绍怎样通过<a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Selectors" style="line-height: 1.5;" title="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Selectors">更有效的方式</a><span style="line-height: 1.5;">定义样式。</span></p> diff --git a/files/zh-cn/conflicting/learn/css/building_blocks/index.html b/files/zh-cn/conflicting/learn/css/building_blocks/index.html new file mode 100644 index 0000000000..0bfb7e2ed5 --- /dev/null +++ b/files/zh-cn/conflicting/learn/css/building_blocks/index.html @@ -0,0 +1,331 @@ +--- +title: 盒模型 +slug: Web/Guide/CSS/Getting_started/Boxes +translation_of: Learn/CSS/Building_blocks +translation_of_original: Web/Guide/CSS/Getting_started/Boxes +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p>{{ previousPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Lists", "列表") }}这是 <a href="/zh-CN/docs/CSS/开始">CSS入门教程</a> 的<span style="line-height: 1.5;">第11节，本节教你如何使用CSS来控制一个可见元素所占据的空间。在示例文档中，你可以修改元素占据的空间并增加装饰规则。</span></p> + +<h2 class="clearLeft" id="信息：盒模型">信息：盒模型</h2> + +<p>当你的浏览器展现一个元素时，这个元素会占据一定的空间。这个空间由四部分组成。</p> + +<p>中间是<em>元素</em>呈现内容的区域。这个区域的外面是<em>内边距</em>。再外面是<em>边框</em>。最外面的是<em>外边距</em>，外边距将该元素与其它元素分开。</p> + +<table> + <tbody> + <tr> + <td style="width: 22em;"> + <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 16em;"> + <p style="text-align: center; margin: 0px;">外边距</p> + + <p style="text-align: center; margin: 0px 0px -.75em 0px;">边框</p> + + <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> + <p style="text-align: center;">内边距</p> + + <div style="background-color: #eee;"> + <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">元素</p> + </div> + </div> + </div> + + <p><em>浅灰色标出了布局的几个部分。</em></p> + </td> + <td> + <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 16em;"> + <p style="text-align: center; margin: 0px;"> </p> + + <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p> + + <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> + <p style="text-align: center;"> </p> + + <div style="background-color: #fff;"> + <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">元素</p> + </div> + </div> + </div> + + <p><em>你在浏览器看到的样子。</em></p> + </td> + </tr> + </tbody> +</table> + +<p>内边距，边框和外边距在元素的上、右、下、左都可以有不同的大小。所有这些大小值都可以为0。</p> + +<h3 id="颜色">颜色</h3> + +<p>内边距总是跟元素的背景色一样，所以当你设置背景色时，你会发现背景色在元素本身和内边距上都生效了。外边距总是透明的。</p> + +<table> + <tbody> + <tr> + <td style="width: 22em;"> + <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 16em;"> + <p style="text-align: center; margin: 0px;">外边距</p> + + <p style="text-align: center; margin: 0px 0px -.75em 0px;">边框</p> + + <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> + <p style="text-align: center;">内边距</p> + + <div style="background-color: #ded;"> + <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">元素</p> + </div> + </div> + </div> + + <p><em>元素有绿色的背景。</em></p> + </td> + <td> + <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 16em;"> + <p style="text-align: center; margin: 0px;"> </p> + + <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p> + + <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> + <p style="text-align: center;"> </p> + + <div style="background-color: #efe;"> + <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">元素</p> + </div> + </div> + </div> + + <p><em>你在浏览器看到的样子。</em></p> + </td> + </tr> + </tbody> +</table> + +<h3 id="边框">边框</h3> + +<p>你可以用边线或者边框来装饰元素。</p> + +<p>用 {{ cssxref("border") }} 属性给元素四周指定统一的边框。在属性值中指定边框的宽度（通常是以显示到屏幕上的像素为单位）， 样式， 还有颜色。</p> + +<p>样式包括：</p> + +<table style="margin-left: 2em;"> + <tbody> + <tr> + <td style="width: 6em;"> + <div style="border: 2px solid #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>solid</code></div> + </td> + <td style="width: 6em;"> + <div style="border: 2px dotted #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>dotted</code></div> + </td> + <td style="width: 6em;"> + <div style="border: 2px dashed #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>dashed</code></div> + </td> + <td style="width: 6em;"> + <div style="border: 4px double #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>double</code></div> + </td> + </tr> + <tr> + <td style="width: 6em;"> + <div style="border: 2px inset #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>inset</code></div> + </td> + <td style="width: 6em;"> + <div style="border: 2px outset #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>outset</code></div> + </td> + <td style="width: 6em;"> + <div style="border: 4px ridge #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>ridge</code></div> + </td> + <td style="width: 6em;"> + <div style="border: 4px groove #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>groove</code></div> + </td> + </tr> + </tbody> +</table> + +<p>你也可以通过设置样式为 <code>none</code> 或 <code>hidden</code> 来明确地移除边框，或者设置边框颜色为 <code>transparent</code> 来让边框不可见，后者不会改变布局。</p> + +<p>如果一次只指定某一个方向的边框，就用属性： {{ cssxref("border-top") }}， {{ cssxref("border-right") }}， {{cssxref("border-bottom")}}， {{cssxref("border-left")}}。 你可以用这些属性指定某个方向上的边框，或者不同方向上的不同边框。</p> + +<div class="tuto_example"> +<div class="tuto_type">例子</div> + +<p>下面的代码设置了一个h3元素的背景色和顶部边框：</p> + +<pre class="brush:css">h3 { + border-top: 4px solid #7c7; /* 中绿 */ + background-color: #efe; /* 浅绿 */ + color: #050; /* 深绿 */ + } +</pre> + +<p>结果如下：</p> + +<table> + <tbody> + <tr> + <td> + <p style="font-size: 133%; font-weight: bold; background-color: #efe; border-top: 4px solid #7c7; color: #050; padding-right: 6em;">样式化后的标题</p> + </td> + </tr> + </tbody> +</table> + +<p>下面的规则通过给图片四周设置中灰色边框，使得图片元素更好辨认：</p> + +<pre class="brush:css">img {border: 2px solid #ccc;} +</pre> + +<p>结果如下：</p> + +<table> + <tbody> + <tr> + <td>图片:</td> + <td style="border: 2px solid #ccc;"><img alt="Image:Blue-rule.png" class="internal" src="/@api/deki/files/47/=Blue-rule.png"></td> + </tr> + </tbody> +</table> +</div> + +<h3 id="外边距和内边距">外边距和内边距</h3> + +<p>使用外边距和内边距调整元素的位置，并在其周围创建空间。</p> + +<p>用 {{ cssxref("margin") }} 属性或者 {{ cssxref("padding") }} 属性分别设置外边距和内边距的宽度。</p> + +<p>如果你指定一个宽度，它将会作用于元素四周（上、右、下、左）。</p> + +<p>如果你指定两个宽度， 第一个宽度会作用于顶部和底部，第二个宽度作用于右边和左边。</p> + +<p>你也可以按照顺序指定四个宽度： 上、右、下、左。</p> + +<div class="tuto_example"> +<div class="tuto_type">例子</div> + +<p>下面的规则通过给元素四周设置红色边框，标记出了类名为 <code>remark</code> 的段落元素。</p> + +<p>文本周围的内边距将边框与文字拉开一点距离。</p> + +<p>左外边距使得段落相对于其余文本产生缩进：</p> + +<pre class="brush:css">p.remark { + border: 2px solid red; + padding: 4px; + margin-left: 24px; + } +</pre> + +<p>结果如下：</p> + +<table> + <tbody> + <tr> + <td> + <p>这是一个普通的段落。</p> + + <p style="border: 2px solid red; padding: 4px 6em 4px 4px; margin: 0px 0px 0px 24px;">这是一个标记段落。</p> + </td> + </tr> + </tbody> +</table> +</div> + +<div class="tuto_details"> +<div class="tuto_type">更多细节</div> + +<p>当你使用外边距和内边距来调整元素的布局时，你的样式规则会与浏览器的默认规则以复杂的方式相互作用。</p> + +<p>不同的浏览器布局元素的方式不一样。直到你的样式表修改默认样式，结果可能看起来相似。有时这可能让你的样式表给出令人惊讶的结果。</p> + +<p>为了达到理想的效果，你可能需要改变文档的标记。本教程的下一页有更多关于这个的信息。</p> + +<p>欲知更多关于内边距，外边距和边框的细节， 请看 <a href="/zh-CN/docs/Web/CSS/box_model" title="en-US/docs/Web/Guide/CSS/box model"><span class="external">盒模型</span></a> 参考页。</p> +</div> + +<h2 id="实践：添加边框">实践：添加边框</h2> + +<p>编辑你的CSS文件，<code>style2.css</code>。添加下面的规则，给页面中每个标题元素上面画一条线：</p> + +<pre class="brush:css">h3 {border-top: 1px solid gray;} +</pre> + +<p>如果你做了前一页的挑战题，现在修改你已经创建的规则，或者添加这条新规则，给每个列表项的下面增加一定的空间：</p> + +<pre class="brush:css">li { + list-style: lower-roman; + margin-bottom: 8px; + } +</pre> + +<p>刷新你的浏览器看看效果：</p> + +<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> + + <ul style=""> + <li style="margin-bottom: 8px;">Arctic</li> + <li style="margin-bottom: 8px;">Atlantic</li> + <li style="margin-bottom: 8px;">Pacific</li> + <li style="margin-bottom: 8px;">Indian</li> + <li style="margin-bottom: 8px;">Southern</li> + </ul> + + <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B) Numbered paragraphs</p> + + <p><strong>1: </strong>Lorem ipsum</p> + + <p><strong>2: </strong>Dolor sit</p> + + <p><strong>3: </strong>Amet consectetuer</p> + + <p><strong>4: </strong>Magna aliquam</p> + + <p><strong>5: </strong>Autem veleum</p> + </td> + </tr> + </tbody> +</table> + +<div class="tuto_example"> +<div class="tuto_type">挑战</div> + +<p>给你的样式表添加一个规则，为下面的海洋列表增加 一个四面环绕且带有颜色的边框，来突出海洋——如下图所示：</p> + +<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> + + <div style="border: 12px solid #69b; padding-left: 1em;"> + <ul style=""> + <li style="margin-bottom: 8px;">Arctic</li> + <li style="margin-bottom: 8px;">Atlantic</li> + <li style="margin-bottom: 8px;">Pacific</li> + <li style="margin-bottom: 8px;">Indian</li> + <li style="margin-bottom: 8px;">Southern</li> + </ul> + </div> + + <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B) Numbered paragraphs</p> + + <p><strong>. . .</strong></p> + </td> + </tr> + </tbody> +</table> + +<p> </p> + +<p>（不必完全保证宽度和颜色和这里的一模一样。）</p> +</div> + +<p><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Boxes" title="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Boxes">看答案。</a></p> + +<h2 id="下一节">下一节?</h2> + +<p>{{ nextPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Layout", "布局") }}通过指定外边距和内边距，你已经能修改文档的布局了。下一页，你将使用别的方式来改变文档的<a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Layout" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Layout">布局</a> 。</p> diff --git a/files/zh-cn/conflicting/learn/css/building_blocks/selectors/index.html b/files/zh-cn/conflicting/learn/css/building_blocks/selectors/index.html new file mode 100644 index 0000000000..69f0700b19 --- /dev/null +++ b/files/zh-cn/conflicting/learn/css/building_blocks/selectors/index.html @@ -0,0 +1,414 @@ +--- +title: 选择器 +slug: Web/Guide/CSS/Getting_started/Selectors +translation_of: Learn/CSS/Building_blocks/Selectors +translation_of_original: Web/Guide/CSS/Getting_started/Selectors +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p>{{ previousPage("/zh-CN/docs/CSS/开始/Cascading_and_inheritance", "层叠和继承")}}这是<span class="seoSummary"> <a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS入门教程</a> 的第五节; 本节将讲述如何应用样式；不同的选择器有不同的优先级；你在样例文档中为标签增加一些属性，在样式中使用这些属性。</span></p> + +<h2 class="clearLeft" id="资料_选择器（Selectors）">资料: 选择器（Selectors）</h2> + +<p>CSS有一套用于描述其语言的术语。在前面的教程中，你应该已经写过这个样式：</p> + +<pre class="brush: css">strong { + color: red; +} +</pre> + +<p><span style="line-height: 1.5;">在CSS的术语中，上面这段代码被称为一条规则（rule）。这条规则以选择器strong开始，它选择要在DOM中哪些元素上使用这条规则。</span></p> + +<div class="tuto_details"> +<div class="tuto_type">更多细节</div> + +<p>花括号中的部分称为<strong>声明（declaration）</strong></p> + +<p><code>关键字color是一个属性</code>, <code>red</code> 是其对应的值.</p> + +<p>同一个声明中的 属性和值组成一个名值对（property-value pairs），名值对用分号分隔.</p> + +<p><code>这个教程中将类似strong的选择器称为标签选择器（tag selector）</code>.CSS规范中称之为类型选择器（<em>type</em> selector）.</p> +</div> + +<p>本节将介绍更多的选择器。</p> + +<p>除了标签名称，你还可以在选择器中使用属性值。这样你就可以更具体的描述你的规则.</p> + +<p>其中 <a href="/en-US/docs/Web/HTML/Global_attributes#attr-class" title="en-US/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> 和 <code><a href="/en-US/docs/Web/HTML/Global_attributes#id" title="en-US/docs/Web/HTML/Global_attributes#id">id</a> 两个属性具有比较重要的地位。</code></p> + +<h3 id="类选择器（Class_selectors）">类选择器（Class selectors）</h3> + +<p>通过设置元素的 <a href="/en-US/docs/Web/HTML/Global_attributes#attr-class" title="en-US/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> 属性，可以为元素指定类名。类名由开发者自己指定。 文档中的多个元素可以拥有同一个类名。</p> + +<p>在写样式表时，类选择器是以英文句号（.）开头的。</p> + +<h3 id="ID选择器（ID_selectors）">ID选择器（ID selectors）</h3> + +<p>通过设置元素的 <a href="/en-US/docs/Web/HTML/Global_attributes#id" title="en-US/docs/Web/HTML/Global_attributes#id"><code>id</code></a> 属性为该元素制定ID。ID名由开发者指定。每个ID在文档中必须是唯一的。</p> + +<p>在写样式表时，ID选择器是以#开头的。</p> + +<div class="tuto_example"> +<div class="tuto_type">例：</div> +下面的p标签同时具有 <code>class</code> 属性和<code>id</code> 属性: + +<pre class="brush: html"><p class="key" id="principal"> +</pre> + +<p><strong>id</strong> 属性值 <code>principal</code>必须在文档中是唯一的；但文档中的其他标签可以有和p相同的 <strong>class </strong>属性值 <code>key</code>.</p> + +<p>在一个CSS样式表中, 下面的规则将使所有class属性等于key的元素文字颜色呈现绿色。（这些元素不一定都是 {{ HTMLElement("p") }} 元素。）</p> + +<pre class="brush: css">.key { + color: green; +} +</pre> + +<p>下面的规则将使 <strong>id</strong> 等于 <code>principal 的那个元素的文字变为粗体</code>:</p> + +<pre class="brush: css">#principal { + font-weight: bolder; +} +</pre> +</div> + +<p>如果多于一个规则指定了相同的属性值都应用到一个元素上，CSS规定拥有更高确定度的选择器优先级更高。ID选择器比类选择器更具确定度, 而类选择器比标签选择器（tag selector）更具确定度。</p> + +<div class="tuto_details"> +<div class="tuto_type">更多细节</div> + +<p>你也可以将多个选择器组合起来构成更确定的选择器。</p> + +<p>比如，选择器<code>.key</code> 选中所有class属性为 <code>key的元素</code>. 选择器 <code>p.key</code> 选中所有class属性为<span style="font-family: courier new,andale mono,monospace; line-height: normal;">key的</span>{{ HTMLElement("p") }} 元素。</p> + +<p>除了<code>class</code> 和 <code>id，你还可以用方括号的形式指定其他属性。比如</code>，选择器 <code>[type='button']</code> 选中所有 <code>type</code> 属性为 <code>button 的元素。</code></p> +</div> + +<p>如果样式中包含冲突的规则，且它们具有相同的确定度。那么，后出现的规则优先级高。</p> + +<p>如果你遇到规则冲突，你可以增加其中一条的确定度或将之移到后面以使它具有更高优先级。</p> + +<h3 id="伪类选择器（Pseudo-classes_selectors）">伪类选择器（Pseudo-classes selectors）</h3> + +<p>CSS伪类（<a href="/en-US/docs/Web/Guide/CSS/Pseudo-classes" title="en-US/docs/Web/Guide/CSS/Pseudo-classes">pseudo-class</a>）是加在选择器后面的用来指定元素状态的关键字。比如，{{ Cssxref(":hover") }} 会在鼠标悬停在选中元素上时应用相应的样式。</p> + +<p>伪类和伪元素（pseudo-elements）不仅可以让你为符合某种文档树结构的元素指定样式，还可以为符合某些外部条件的元素指定样式：浏览历史(比如是否访问过 ({{ cssxref(":visited") }})， 内容状态(如 {{ cssxref(":checked") }} ), 鼠标位置 (如{{ cssxref(":hover") }}). 完整列表参见 <a class="external" href="http://www.w3.org/TR/selectors/#selectors" rel="external nofollow" title="CSS3 Selectors working spec">CSS3 Selectors working spec</a>.</p> + +<div class="tuto_example"> +<div class="tuto_type">语法</div> + +<pre class="brush:css">selector:pseudo-class { + property: value; +} +</pre> +</div> + +<h4 id="伪类列表">伪类列表</h4> + +<ul> + <li>{{ Cssxref(":link") }}</li> + <li>{{ Cssxref(":visited") }}</li> + <li>{{ Cssxref(":active") }}</li> + <li>{{ Cssxref(":hover") }}</li> + <li>{{ Cssxref(":focus") }}</li> + <li>{{ Cssxref(":first-child") }}</li> + <li>{{ Cssxref(":nth-child") }}</li> + <li>{{ Cssxref(":nth-last-child") }}</li> + <li>{{ Cssxref(":nth-of-type") }}</li> + <li>{{ Cssxref(":first-of-type") }}</li> + <li>{{ Cssxref(":last-of-type") }}</li> + <li>{{ Cssxref(":empty") }}</li> + <li>{{ Cssxref(":target") }}</li> + <li>{{ Cssxref(":checked") }}</li> + <li>{{ Cssxref(":enabled") }}</li> + <li>{{ Cssxref(":disabled") }}</li> +</ul> + +<h2 id="资料_基于关系的选择器">资料: 基于关系的选择器</h2> + +<p>CSS还有多种基于元素关系的选择器。通过它们你可以更精确的选择元素。</p> + +<table id="relselectors"> + <caption>常见的基于关系的选择器</caption> + <tbody> + <tr> + <td style="width: 10em;"><strong>选择器</strong></td> + <td><strong>选择的元素</strong></td> + </tr> + <tr> + <td><code>A E</code></td> + <td>元素A的任一后代元素E (后代节点指A的子节点，子节点的子节点，以此类推)</td> + </tr> + <tr> + <td><code>A > E</code></td> + <td>元素A的任一子元素E(也就是直系后代)</td> + </tr> + <tr> + <td><code>E:first-child</code></td> + <td>任一是其父母结点的第一个子节点的元素E</td> + </tr> + <tr> + <td><code>B + E</code></td> + <td>元素B的任一下一个兄弟元素E</td> + </tr> + <tr> + <td><code>B ~ E</code></td> + <td>B元素后面的拥有共同父元素的兄弟元素E</td> + </tr> + </tbody> +</table> + +<p>你可以任意组合以表达更复杂的关系。</p> + +<p>你还可以使用星号（*）来表示”任意元素“。</p> + +<div class="tuto_example"> +<div class="tuto_type">例</div> + +<p>一个HTML表格有<code style="font-size: 14px;">id</code> 属性，但是它的行和单元格没有单独的id:</p> + +<pre class="brush: html"><table id="data-table-1"> +... +<tr> +<td>Prefix</td> +<td>0001</td> +<td>default</td> +</tr> +... +</pre> + +<p>下面的规则使表格每行的第一个单元格字体为粗体，使第二个单元格使用等宽字体。这条规则只影响id为data-table-1的表格:</p> + +<pre class="brush:css"> #data-table-1 td:first-child {font-weight: bolder;} + #data-table-1 td:first-child + td {font-family: monospace;} +</pre> + +<p>最终效果:</p> + +<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td> + <table style="margin-right: 2em; width: 18em;"> + <tbody> + <tr> + <td><strong>Prefix</strong></td> + <td><code>0001</code></td> + <td>default</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> +</div> + +<div class="tuto_details"> +<div class="tuto_type">更多细节</div> + +<p>一般情况下，如果你提高了某个选择器的的确定度，你便<span style="line-height: 1.5;">提高它的优先级。</span></p> + +<p>使用这个技巧，可以避免为大量标签指定 <code>class</code> 或 <code>id</code> 属性。CSS（引擎）会帮你做的。</p> + +<p>在复杂设计中速度非常重要，避免使用复杂的依赖元素关系的规则可以使你的样式更有效率。</p> + +<p>更多关于表格的例子，见 <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Tables" title="en-US/docs/Web/Guide/CSS/Getting_Started/Tables">Tables</a>。</p> +</div> + +<h2 id="实例_使用类选择器和ID选择器">实例: 使用类选择器和ID选择器</h2> + +<ol> + <li>创建一个HTML文件</li> + <li>将下面内容拷贝到HTML文件中 + <pre class="brush: html"><!doctype html> +<html> + <head> + <meta charset="UTF-8"> + <title>Sample document</title> + <link rel="stylesheet" href="style1.css"> + </head> + <body> + <p id="first"> + <strong class="carrot">C</strong>ascading + <strong class="spinach">S</strong>tyle + <strong class="spinach">S</strong>heets + </p> + <p id="second"> + <strong>C</strong>ascading + <strong>S</strong>tyle + <strong>S</strong>heets + </p> + </body> +</html> +</pre> + </li> + <li>创建style1.css: + <pre class="brush:css">strong { color: red; } +.carrot { color: orange; } +.spinach { color: green; } +#first { font-style: italic; } +</pre> + </li> + <li>保存文件，在浏览器中查看效果: + <table style="border: 2px outset #3366bb; height: 53px; padding: 1em; width: 494px;"> + <tbody> + <tr> + <td style="font-style: italic;"><em><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets //此处应为斜体</em></td> + </tr> + <tr> + <td><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> + + <p>类选择器 <code>.carrot</code> 和<code>.spinach</code> 比标签选择器 <code>strong 拥有更高优先级。</code></p> + + <p>ID 选择器 <code>#first</code> 比类选择器和标签选择器更优先。</p> + </li> +</ol> + +<div class="tuto_example"> +<div class="tuto_type">挑战</div> + +<ol> + <li>不改变HTML内容, 增加一条规则，不改变首字母颜色，将第二个p标签中的其他文字变成蓝色: + <table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td style="font-style: italic;"><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> + <li>现在改变上面增加的那条规则（不改变其他任何内容）让第一个p标签中的其他文字也变成蓝色: + <table style="background-color: white; 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" id="tutochallenge"> +<div class="tuto_type">Possible solution</div> + +<ol> + <li>Add a rule with an ID selector of <code>#second</code> and a declaration <code>color: blue;</code>, as shown below: + + <pre class="brush: css">#second { color: blue; } +</pre> + A more specific selector, <code>p#second</code> also works.</li> + <li>Change the selector of the new rule to be a tag selector using <code>p</code>: + <pre class="brush: css">p { color: blue; } +</pre> + </li> +</ol> +<a class="hideAnswer" href="#challenge">Hide solution</a></div> +<a href="#tutochallenge" title="Display a possible solution for the challenge">See a solution for the challenge.</a></div> + +<h2 id="实例_使用伪类选择器">实例: 使用伪类选择器</h2> + +<ol> + <li>创建如下 HTML: + <pre class="brush: html"><!doctype html> +<html> + <head> + <meta charset="UTF-8"> + <title>Sample document</title> + <link rel="stylesheet" href="style1.css"> + </head> + <body> + <p>Go to our <a class="homepage" href="http://www.example.com/" title="Home page">Home page</a>.</p> + </body> +</html> +</pre> + </li> + <li>编辑CSS: + <pre class="brush: css">a.homepage:link, a.homepage:visited { + padding: 1px 10px 1px 10px; + color: #fff; + background: #555; + border-radius: 3px; + border: 1px outset rgba(50,50,50,.5); + font-family: georgia, serif; + font-size: 14px; + font-style: italic; + text-decoration: none; +} + +a.homepage:hover, a.homepage:focus, a.homepage:active { + background-color: #666; +} +</pre> + </li> + <li>保存文件用浏览器查看HTML文件 (将鼠标放到链接上查看效果): + <table style="border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td>Go to our <a class="tutospecial" href="#" title="Home page">Home page</a><span style="display: none;"> </span><span style="display: none;"> </span></td> + </tr> + </tbody> + </table> + </li> +</ol> + +<h2 id="实例_使用基于关系的选择器和伪类选择器">实例: 使用基于关系的选择器和伪类选择器</h2> + +<p>通过使用基于关系的选择器和伪类选择器，你可以构造出复杂的叠加算法。这是一个常用的技巧，比如可以用来创建纯CSS无JavaScript的下拉菜单（<strong style="font-size: 14px; line-height: 1.5;">pure-CSS dropdown menus</strong><span style="font-size: 14px; line-height: 1.5;">）。关键点就是创建下面这类规则：</span></p> + +<pre class="brush: css">div.menu-bar ul ul { + display: none; +} + +div.menu-bar li:hover > ul { + display: block; +}</pre> + +<p>然后将这些规则应用到下面的HTML结构中：</p> + +<pre class="brush: html"><div class="menu-bar"> + <ul> + <li> + <a href="example.html">Menu</a> + <ul> + <li> + <a href="example.html">Link</a> + </li> + <li> + <a class="menu-nav" href="example.html">Submenu</a> + <ul> + <li> + <a class="menu-nav" href="example.html">Submenu</a> + <ul> + <li><a href="example.html">Link</a></li> + <li><a href="example.html">Link</a></li> + <li><a href="example.html">Link</a></li> + <li><a href="example.html">Link</a></li> + </ul> + </li> + <li><a href="example.html">Link</a></li> + </ul> + </li> + </ul> + </li> + </ul> +</div> +</pre> + +<p>学习实例 <a class="internal" href="https://mdn.mozillademos.org/files/3700/css_dropdown_menu.html" title="css_dropdown_menu.html">CSS-based dropdown menu example</a>.</p> + +<h2 id="接下来是什么">接下来是什么?</h2> + +<p>你的样式表变得多而复杂。下面章节将讲述如何让样式表更 <a href="/zh-CN/docs/Web/Guide/CSS/Getting_started/Readable_CSS" title="/zh-CN/docs/Web/Guide/CSS/Getting_started/Readable_CSS">易读</a>.{{nextPage("/zh-CN/docs/CSS/开始/Readable_CSS", "易读的 CSS")}}</p> diff --git a/files/zh-cn/conflicting/learn/css/building_blocks/styling_tables/index.html b/files/zh-cn/conflicting/learn/css/building_blocks/styling_tables/index.html new file mode 100644 index 0000000000..b6b4859e99 --- /dev/null +++ b/files/zh-cn/conflicting/learn/css/building_blocks/styling_tables/index.html @@ -0,0 +1,509 @@ +--- +title: 表格 +slug: Web/Guide/CSS/Getting_started/Tables +translation_of: Learn/CSS/Building_blocks/Styling_tables +translation_of_original: Web/Guide/CSS/Getting_started/Tables +--- +<p>{{CSSTutorialTOC}}{{previousPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Layout", "布局")}}</p> + +<p>这是<a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started">CSS入门教程</a>的第13部分，将介绍更多高级的选择器，以及格式表格的一些特定方法。你将创建一个包含表格的新样例文档，然后对它进行样式排版。</p> + +<h2 class="clearLeft" id="信息_表格">信息: 表格</h2> + +<p>表格是一个矩形网格中的信息安排。一些表格相当复杂，不同的浏览器对复杂的表格将会有不同的展示结果。</p> + +<p>当你设计你的文档时，使用一个表格来表示一系列信息的<a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Selectors#relselectors">关系</a>。因为信息的意义依然清晰，所以不同浏览器用稍微不同的方式来展示表格是没有关系的。</p> + +<p>创建表格的时候，不要用一些非常规的方式构造特殊的可视化布局，本教程的前一页（<a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Layout">布局</a>）使用的技术可以更好的达成目的。</p> + +<h3 id="表格结构">表格结构</h3> + +<p>在表格中，信息显示在一个个的<em>单元格</em>（<em>cell</em>）中.</p> + +<p>在页面横向上一条直线的单元格构成了<em>行</em>（<em>row</em>）。</p> + +<p>在一些表格中，行可能被分组。表格开始的特定的行组是<em>表头</em> （<em>header</em>）。表格最后的特定行组是<em>表尾</em>（<em>footer</em>）。表格中主要的行就是<em>表体</em>（<em>body</em>），这些表体也可能被分组。</p> + +<p>在页面纵向上一条直线的单元格构成了<em>列</em>（<em>column</em>），但是在CSS表格中，列的使用是受限的。</p> + +<div class="tuto_example"> +<div class="tuto_type">示例</div> + +<p>在<a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Selectors">选择器</a>那章的<a href="/zh-CN/Web/Guide/CSS/Getting_Started/Selectors#relselectors">基于关系的选择器</a>就是一个五行十个单元格的表格。</p> + +<p>第一行是表头，其余四行是表体，没有表尾。</p> + +<p>表中有两列。</p> +</div> + +<p>本教程仅仅涵盖简单表格，其呈现结果完全可以预测。在一个简单表格里，每个单元格仅占用一行一列。你可以用CSS将一个单元格扩展到多行或者多列来构造复杂表格，但是这样的表格已超出了这个基本教程所讲述的范围。</p> + +<h3 id="边框">边框</h3> + +<p>单元格没有外边距。</p> + +<p>但是单元格有边框和内边距。默认情况下，边框被表格的{{cssxref("border-spacing")}}属性值间隔。你也可以通过设置表格的{{cssxref("border-collapse")}}属性值为collapse来完全移除间隔。</p> + +<div class="tuto_example"> +<div class="tuto_type">示例</div> + +<p>这有三个表格。</p> + +<p>左边的表格有0.5 em的边框间隔，中间的表格是0边框间隔，右边的表格是拥有collapse的边框。</p> + +<div style="background-color: white; border: 2px outset #36b; padding: 1em; display: inline-block;"> +<table style="background-color: lime; border-collapse: separate; display: inline-block;"> + <tbody> + <tr> + <td style="border: 1px solid #c00; text-align: center;">Clubs</td> + <td style="border: 1px solid #c00; text-align: center;">Hearts</td> + </tr> + <tr> + <td style="border: 1px solid #c00; text-align: center;">Diamonds</td> + <td style="border: 1px solid #c00; text-align: center;">Spades</td> + </tr> + </tbody> +</table> + +<table style="background-color: lime; border-collapse: separate; display: inline-block; margin-left: 2em;"> + <tbody> + <tr> + <td style="border: 1px solid #c00; text-align: center;">Clubs</td> + <td style="border: 1px solid #c00; text-align: center;">Hearts</td> + </tr> + <tr> + <td style="border: 1px solid #c00; text-align: center;">Diamonds</td> + <td style="border: 1px solid #c00; text-align: center;">Spades</td> + </tr> + </tbody> +</table> + +<table style="background-color: lime; border-collapse: collapse; display: inline-block; margin-left: 2em;"> + <tbody> + <tr> + <td style="border: 1px solid #c00; text-align: center;">Clubs</td> + <td style="border: 1px solid #c00; text-align: center;">Hearts</td> + </tr> + <tr> + <td style="border: 1px solid #c00; text-align: center;">Diamonds</td> + <td style="border: 1px solid #c00; text-align: center;">Spades</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="标题">标题</h3> + +<p>{{HTMLElement("caption")}}元素是用在整个表格的一个标签。默认下，它显示在表格的顶部。</p> + +<p>可以设置{{HTMLElement("caption")}}的{{cssxref("caption-side")}}属性值为bottom来将标签移到表格的底部。</p> + +<p>想要样式化caption的文本，可以使用任何常规的文本属性。</p> + +<div class="tuto_example"> +<div class="tuto_type">示例</div> + +<p>这个表格有一个在底部的标题。</p> + +<pre class="brush: css">#demo-table > caption { + caption-side: bottom; + font-style: italic; + text-align: right; +} +</pre> + +<table style="background-color: white; border: 2px outset #3366bb; padding: 1em 6em 1em 1em;"> + <tbody> + <tr> + <td> + <table> + <caption>Suits</caption> + <tbody> + <tr> + <td> + <table style="border-collapse: collapse;"> + <tbody> + <tr> + <td style="border: 1px solid gray; text-align: center;">Clubs</td> + <td style="border: 1px solid gray; text-align: center;">Hearts</td> + </tr> + <tr> + <td style="border: 1px solid gray; text-align: center;">Diamonds</td> + <td style="border: 1px solid gray; text-align: center;">Spades</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> +</div> + +<h3 id="空单元格">空单元格</h3> + +<p>你可以通过为表格元素指定{{cssxref("empty-cells")}}属性值show来显示空单元格（就是其边框和背景）。</p> + +<p>你也可以指定empty-cells: hide;来隐藏边框和背景，那么如果一个单元格的父元素设置了背景，背景将通过空单元格显示出来。</p> + +<div class="tuto_example"> +<div class="tuto_type">实例</div> + +<p>这些表格有苍绿色的背景，其单元格有苍灰色的背景和深灰色的边框。</p> + +<p>左边的表格，空单元格是显示的。在右边，空单元格是隐藏的。</p> + +<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td style="padding-right: 2em;"> + <table style="background-color: #ddffdd;"> + <tbody> + <tr> + <td style="border: 1px solid #555; background-color: #eee;"> </td> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Hearts</td> + </tr> + <tr> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Diamonds</td> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Spades</td> + </tr> + </tbody> + </table> + </td> + <td style="padding-right: 6em;"> + <table style="background-color: #ddffdd;"> + <tbody> + <tr> + <td> </td> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Hearts</td> + </tr> + <tr> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Diamonds</td> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Spades</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> +</div> + +<div class="tuto_details"> +<div class="tuto_type">细节</div> + +<p>请查看CSS规范中的<a href="http://www.w3.org/TR/CSS21/tables.html">表格</a>来获得更多关于表格的细节信息。</p> + +<p>规范中有比该教程更进一步的信息，但它不包括浏览器可能会影响复杂表格之间的差异。</p> +</div> + +<h2 id="实例_设计表格样式">实例: 设计表格样式</h2> + +<ol> + <li>创建一个新的HTML文档, <code>doc3.html。</code> 复制粘贴以下内容，请确保通过滚动获取全部内容： + + <div style="height: 36em; overflow: auto;"> + <pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <title>Sample document 3</title> + <link rel="stylesheet" href="style3.css"> + </head> + <body> + <table id="demo-table"> + <caption>Oceans</caption> + <thead> + <tr> + <th></th> + <th>Area</th> + <th>Mean depth</th> + </tr> + <tr> + <th></th> + <th>million km<sup>2</sup></th> + <th>m</th> + </tr> + </thead> + <tbody> + <tr> + <th>Arctic</th> + <td>13,000</td> + <td>1,200</td> + </tr> + <tr> + <th>Atlantic</th> + <td>87,000</td> + <td>3,900</td> + </tr> + <tr> + <th>Pacific</th> + <td>180,000</td> + <td>4,000</td> + </tr> + <tr> + <th>Indian</th> + <td>75,000</td> + <td>3,900</td> + </tr> + <tr> + <th>Southern</th> + <td>20,000</td> + <td>4,500</td> + </tr> + </tbody> + <tfoot> + <tr> + <th>Total</th> + <td>361,000</td> + <td></td> + </tr> + <tr> + <th>Mean</th> + <td>72,000</td> + <td>3,800</td> + </tr> + </tfoot> + </table> + </body> +</html> +</pre> + </div> + </li> + <li>创建一个新的样式表 <code>style3.css。复制粘贴一些内容，通过滚动获取全部内容：</code> + <pre class="brush: css">/*** Style for doc3.html (Tables) ***/ + +#demo-table { + font: 100% sans-serif; + background-color: #efe; + border-collapse: collapse; + empty-cells: show; + border: 1px solid #7a7; +} + +#demo-table > caption { + text-align: left; + font-weight: bold; + font-size: 200%; + border-bottom: .2em solid #4ca; + margin-bottom: .5em; +} + + +/* basic shared rules */ +#demo-table th, +#demo-table td { + text-align: right; + padding-right: .5em; +} + +#demo-table th { + font-weight: bold; + padding-left: .5em; +} + + +/* header */ +#demo-table > thead > tr:first-child > th { + text-align: center; + color: blue; +} + +#demo-table > thead > tr + tr > th { + font-style: italic; + color: gray; +} + +/* fix size of superscript */ +#demo-table sup { + font-size: 75%; +} + +/* body */ +#demo-table td { + background-color: #cef; + padding:.5em .5em .5em 3em; +} + +#demo-table tbody th:after { + content: ":"; +} + + +/* footer */ +#demo-table tfoot { + font-weight: bold; +} + +#demo-table tfoot th { + color: blue; +} + +#demo-table tfoot th:after { + content: ":"; +} + +#demo-table > tfoot td { + background-color: #cee; +} + +#demo-table > tfoot > tr:first-child td { + border-top: .2em solid #7a7; +} +</pre> + </li> + <li>在浏览器打开文档，它将看起来像下面一样： + <table style="background-color: white; border: 2px outset #3366bb; padding: 1em 6em 1em 1em;"> + <tbody> + <tr> + <td> + <div> + <p style="font: bold 200% sans-serif; text-align: left; border-bottom: .2em solid #4ca; margin: 0px 0px .5em 0px;">Oceans</p> + + <div style="border: 1px solid #7a7; background-color: #efe;"> + <table style="background-color: #eeffee; border-collapse: collapse; font: 100% sens-serif; padding-right: .5em; text-align: right;"> + <tbody> + <tr style="text-align: center; color: blue;"> + <th> </th> + <th>Area</th> + <th style="padding-left: .5em; padding-right: .5em;">Mean depth</th> + </tr> + <tr style="font-style: italic; color: gray;"> + <th> </th> + <th style="padding-left: .5em; padding-right: .5em;">million km<sup>2</sup></th> + <th style="padding-left: .5em; padding-right: .5em;">m</th> + </tr> + <tr> + <th style="padding-right: .5em;">Arctic:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">13,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">1,200</td> + </tr> + <tr> + <th style="padding-right: .5em;">Atlantic:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">87,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td> + </tr> + <tr> + <th style="padding-right: .5em;">Pacific:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">180,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,000</td> + </tr> + <tr> + <th style="padding-right: .5em;">Indian:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">75,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td> + </tr> + <tr> + <th style="padding-left: .5em; padding-right: .5em;">Southern:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">20,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,500</td> + </tr> + <tr> + <th style="padding-right: .5em; color: blue;">Total:</th> + <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361,000</td> + <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td> + </tr> + <tr> + <th style="padding-right: .5em; color: blue;">Mean:</th> + <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72,000</td> + <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3,800</td> + </tr> + </tbody> + </table> + </div> + </div> + </td> + </tr> + </tbody> + </table> + </li> + <li>对比样式表里显示表格的规则来确保你理解每一条规则的效果。如果你发现你不明白某一条，注释掉，然后刷新浏览器来看看发生什么。下面是关于该表格一些注意事项： + <ul> + <li>标题是放在表格边框的外面的;</li> + <li>如果你在可选项中设置了最小点尺寸，它可能会影响km<sup>2</sup>这样的上标;</li> + <li>有三个空单元格，其中两个显示了表格的背景色，第三个有单元格自己的背景和上边框;</li> + <li>冒号是通过样式表来添加的。</li> + </ul> + </li> +</ol> + +<div class="tuto_example"> +<div class="tuto_type">挑战</div> + +<p>更改样式表来使表格像下面一样显示：</p> + +<table style="background-color: white; border: 2px outset #3366bb; padding: 1em 6em 1em 1em;"> + <tbody> + <tr> + <td> + <div> + <div style="border: 1px solid #7a7; background-color: #efe;"> + <table style="background-color: #eeffee; border-collapse: collapse; font: 100% sens-serif; padding-right: .5em; text-align: right;"> + <tbody> + <tr style="text-align: center; color: blue;"> + <th> </th> + <th>Area</th> + <th style="padding-left: .5em; padding-right: .5em;">Mean depth</th> + </tr> + <tr style="font-style: italic; color: gray;"> + <th> </th> + <th style="padding-left: .5em; padding-right: .5em;">million km<sup>2</sup></th> + <th style="padding-left: .5em; padding-right: .5em;">m</th> + </tr> + <tr> + <th style="padding-right: .5em;">Arctic:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">13,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">1,200</td> + </tr> + <tr> + <th style="padding-right: .5em;">Atlantic:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">87,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">3,900</td> + </tr> + <tr> + <th style="padding-right: .5em;">Pacific:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">180,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">4,000</td> + </tr> + <tr> + <th style="padding-right: .5em;">Indian:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">75,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">3,900</td> + </tr> + <tr> + <th style="padding-left: .5em; padding-right: .5em;">Southern:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">20,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">4,500</td> + </tr> + <tr> + <th style="padding-right: .5em; color: blue;">Total:</th> + <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361,000</td> + <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td> + </tr> + <tr> + <th style="padding-right: .5em; color: blue;">Mean:</th> + <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72,000</td> + <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3,800</td> + </tr> + </tbody> + </table> + </div> + + <p style="font: italic 100% sans-serif; text-align: right; border-top: .4em solid #4ca; margin: 1em 0px 0px 0px;">Oceans</p> + </div> + </td> + </tr> + </tbody> +</table> +</div> + +<p><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Tables" title="en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Tables">查看</a>挑战的答案。</p> + +<h2 id="接下来">接下来?</h2> + +<p>{{nextPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Media", "媒体")}}这是本教程关于CSS属性和值的最后一页。请查看CSS规范中的<a href="http://www.w3.org/TR/CSS21/propidx.html">完全属性表</a>来获得完整的属性和值的信息。</p> + +<p><a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Media">下一页</a>将再次着眼于CSS样式表的目的和结构。</p> +</div> diff --git a/files/zh-cn/conflicting/learn/css/building_blocks/values_and_units/index.html b/files/zh-cn/conflicting/learn/css/building_blocks/values_and_units/index.html new file mode 100644 index 0000000000..a9348bd9bd --- /dev/null +++ b/files/zh-cn/conflicting/learn/css/building_blocks/values_and_units/index.html @@ -0,0 +1,333 @@ +--- +title: Color +slug: Web/Guide/CSS/Getting_started/Color +translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors +translation_of_original: Web/Guide/CSS/Getting_started/Color +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p>{{previousPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Text_styles", "文本样式")}}这是<span class="seoSummary"> <a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS入门教程</a> 系列的第8部分; 介绍了如何在你的CSS文件中运用颜色值. 在示例样式表中，介绍了背景颜色.</span></p> + +<h2 class="clearLeft" id="关于_颜色">关于: 颜色</h2> + +<p><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">到目前为止，在这个系列中，都很少用到用名字命名的颜色属性。CSS2支持17种名字的颜色。其中有一些可能不像你期望的那样，如下图：</span></p> + +<table style="border: 0px; margin-left: 2em; text-align: right;"> + <tbody> + <tr> + <td></td> + <td>black</td> + <td style="width: 2em; height: 2em; background-color: black;"></td> + <td>gray</td> + <td style="width: 2em; height: 2em; background-color: gray;"></td> + <td>silver</td> + <td style="width: 2em; height: 2em; background-color: silver;"></td> + <td>white</td> + <td style="width: 2em; height: 2em; background-color: white; border: 1px dotted gray;"></td> + </tr> + <tr> + <td>主要的</td> + <td>red</td> + <td style="width: 2em; height: 2em; background-color: red;"></td> + <td>lime</td> + <td style="width: 2em; height: 2em; background-color: lime;"></td> + <td>blue</td> + <td style="width: 2em; height: 2em; background-color: blue;"></td> + </tr> + <tr> + <td>次要 </td> + <td>yellow</td> + <td style="width: 2em; height: 2em; background-color: yellow;"></td> + <td>aqua</td> + <td style="width: 2em; height: 2em; background-color: aqua;"></td> + <td>fuchsia</td> + <td style="width: 2em; height: 2em; background-color: fuchsia;"></td> + </tr> + <tr> + <td></td> + <td>maroon</td> + <td style="width: 2em; height: 2em; background-color: maroon;"></td> + <td>orange</td> + <td style="width: 2em; height: 2em; background-color: orange;"></td> + <td>olive</td> + <td style="width: 2em; height: 2em; background-color: olive;"></td> + <td>purple</td> + <td style="width: 2em; height: 2em; background-color: purple;"></td> + <td>green</td> + <td style="width: 2em; height: 2em; background-color: green;"></td> + <td>navy</td> + <td style="width: 2em; height: 2em; background-color: navy;"></td> + <td>teal</td> + <td style="width: 2em; height: 2em; background-color: teal;"></td> + </tr> + </tbody> +</table> + + + +<div class="tuto_details"> +<div class="tuto_type">细节</div> + +<div style="line-height: 1.428571em; font-family: Helvetica, Arial, 'Droid Sans', sans-serif; color: rgb(0, 0, 0);">你的浏览器可能支持更多名字命名的颜色，比如：</div> + +<div></div> + +<table style="background-color: inherit; border: 0px; margin: .5em 0px .5em 2em; text-align: right;"> + <tbody> + <tr> + <td>dodgerblue</td> + <td style="width: 2em; height: 2em; background-color: dodgerblue;"></td> + <td>peachpuff</td> + <td style="width: 2em; height: 2em; background-color: peachpuff;"></td> + <td>tan</td> + <td style="width: 2em; height: 2em; background-color: tan;"></td> + <td>firebrick</td> + <td style="width: 2em; height: 2em; background-color: firebrick;"></td> + <td>aquamarine</td> + <td style="width: 2em; height: 2em; background-color: aquamarine;"></td> + </tr> + </tbody> +</table> + +<p><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">对于更多存在的名字的颜色命名</span>, <span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">你可以参看CSS 3颜色模块中的</span><span style="line-height: 1.5;">: </span><a class="external" href="http://www.w3.org/TR/2003/CR-css3-color-20030514/#svg-color" style="line-height: 1.5;">SVG color keywords</a><span style="line-height: 1.5;"> 部分. </span><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">一定要注意的是，使用名字命名颜色的时候，有可能用户的浏览器是不支持的。</span></p> +</div> + +<p><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">对于更多地颜色，你可以使用代表红，绿，蓝三个颜色的16进制数字来表示。16进制数字的范围0-9，a-f。其中a-f代表的数值就是10-15：</span></p> + +<table style="border: 0px; margin-left: 2em;"> + <tbody> + <tr> + <td>黑</td> + <td style="width: 2em; height: 2em; background-color: #000;"></td> + <td><code>#000</code></td> + </tr> + <tr> + <td>纯 红</td> + <td style="width: 2em; height: 2em; background-color: #f00;"></td> + <td><code>#f00</code></td> + </tr> + <tr> + <td>纯 绿</td> + <td style="width: 2em; height: 2em; background-color: #0f0;"></td> + <td><code>#0f0</code></td> + </tr> + <tr> + <td>纯 蓝</td> + <td style="width: 2em; height: 2em; background-color: #00f;"></td> + <td><code>#00f</code></td> + </tr> + <tr> + <td>白</td> + <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"></td> + <td><code>#fff</code></td> + </tr> + </tbody> +</table> + +<p><br> + <span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">要得到浏览器能够呈现的所有的颜色，你就得使用两个16进制来表示（也就是6位）</span>:</p> + +<table style="border: 0px; margin-left: 2em;"> + <tbody> + <tr> + <td>黑</td> + <td style="width: 2em; height: 2em; background-color: #000;"></td> + <td><code>#000000</code></td> + </tr> + <tr> + <td>纯红</td> + <td style="width: 2em; height: 2em; background-color: #f00;"></td> + <td><code>#ff0000</code></td> + </tr> + <tr> + <td>纯绿</td> + <td style="width: 2em; height: 2em; background-color: #0f0;"></td> + <td><code>#00ff00</code></td> + </tr> + <tr> + <td>纯蓝</td> + <td style="width: 2em; height: 2em; background-color: #00f;"></td> + <td><code>#0000ff</code></td> + </tr> + <tr> + <td>白</td> + <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"></td> + <td><code>#ffffff</code></td> + </tr> + </tbody> +</table> + +<p><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">你能够从你的画图程序或者其他的工具上得到6位的颜色数值</span>.</p> + +<div class="tuto_example"> +<div class="tuto_type">例如</div> + +<p><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">可以通过调整3位数字来得到不同的颜色</span>:</p> + +<table style="background-color: #fffff4; border: 0px; margin-left: 2em;"> + <tbody> + <tr> + <td>从纯红开始:</td> + <td style="width: 2em; height: 2em; background-color: #f00;"></td> + <td><code>#f00</code></td> + </tr> + <tr> + <td><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">让它淡一点，加一些绿色和蓝色</span>:</td> + <td style="width: 2em; height: 2em; background-color: #f77;"></td> + <td><code>#f77</code></td> + </tr> + <tr> + <td><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">让它更偏橙色一些，多加一些绿色</span>:</td> + <td style="width: 2em; height: 2em; background-color: #fa7;"></td> + <td><code>#fa7</code></td> + </tr> + <tr> + <td><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">让它更深一些，所有的颜色部分，红，绿，蓝都要减少</span>:</td> + <td style="width: 2em; height: 2em; background-color: #c74;"></td> + <td><code>#c74</code></td> + </tr> + <tr> + <td><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">让它的饱和度更低一些，所有的颜色值都调整到差不多大小</span>:</td> + <td style="width: 2em; height: 2em; background-color: #c98;"></td> + <td><code>#c98</code></td> + </tr> + <tr> + <td><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">如果所有的颜色值都相等，那么就变成了灰色</span>:</td> + <td style="width: 2em; height: 2em; background-color: #ccc;"></td> + <td><code>#ccc</code></td> + </tr> + </tbody> +</table> + +<p><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">对于浅色，比如说淡蓝色</span>:</p> + +<table style="background-color: #fffff4; border: 0px; margin-left: 2em;"> + <tbody> + <tr> + <td><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">从纯白色开始</span>:</td> + <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"></td> + <td><code>#fff</code></td> + </tr> + <tr> + <td><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">稍微降低一下各个颜色值</span>:</td> + <td style="width: 2em; height: 2em; background-color: #eef; border: 1px dotted gray;"></td> + <td><code>#eef</code></td> + </tr> + </tbody> +</table> +</div> + +<div class="tuto_details"> +<div class="tuto_type">更多细节</div> + +<p><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">还能够通过RGB值（0-255或者是百分比值），来得到颜色</span></p> + +<p><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">比如，下面是深红色的RGB表示法</span>:</p> + +<pre class="brush:css">rgb(128, 0, 0) </pre> + +<p><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">对于如何指定颜色的所有信息，可以参看 CSS规范中的</span>: <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#color-units">Colors</a> 部分.</p> + +<p><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">更多关于系统颜色的说明，比如菜单、</span>树<span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">等，可以参看CSS规范中得</span><span style="line-height: 1.5;">: </span><a class="external" href="http://www.w3.org/TR/CSS21/ui.html#system-colors" style="line-height: 1.5;">CSS2 System Colors</a><span style="line-height: 1.5;"> 部分.</span></p> +</div> + +<h3 id="颜色属性">颜色属性</h3> + +<p>你已经在文本中使用了 {{ cssxref("color") }} 属性.</p> + +<p><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">同样可以使用</span><span style="line-height: 1.5;">{{ cssxref("background-color") }} </span><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">属性来改变元素的背景色.</span></p> + +<p><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">背景色可以设置</span><span style="line-height: 1.5;"> </span><code style="font-size: 14px;">transparent</code><span style="line-height: 1.5;"> </span><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">属性来移除掉所有的颜色，呈现出父元素的背景色</span></p> + +<div class="tuto_example"> +<div class="tuto_type">例如</div> + +<p>在本指南中，<strong>例如</strong> 文本框使用了淡黄色来表示背景色：</p> + +<pre class="brush:css">background-color: #fffff4; +</pre> + +<p><strong>更多细节</strong> 文本框使用了下面的淡灰色 :</p> + +<pre class="brush:css">background-color: #f4f4f4; +</pre> +</div> + + + +<h2 id="实践_使用颜色代码">实践: 使用颜色代码</h2> + +<ol> + <li>编辑你的CSS文件.</li> + <li><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">下面用粗体显示的部分，表示首字母用淡蓝色显示</span>. (你的文件中的布局和注释可能与下面所示的不同。按照你喜欢的方式来组织它们吧！) + <pre class="brush:css;highlight:[13]">/*** CSS 手册: 颜色页面 ***/ + +/* 页面 字体 */ +body {font: 16px "Comic Sans MS", cursive;} + +/* 段落 */ +p {color: blue;} +#first {font-style: italic;} + +/* 首字母 */ +strong { + color: red; + background-color: #ddf; + font: 200% serif; + } + +.carrot {color: red;} +.spinach {color: green;} </pre> + </li> + <li><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">保存文件，刷新浏览器看结果</span>.</li> +</ol> + +<table> + <tbody> + <tr> + <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><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</td> + </tr> + <tr> + <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><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</td> + </tr> + </tbody> +</table> + +<div class="tuto_example"> +<div class="tuto_type">挑战</div> + +<p><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 19.9999942779541px;">在你的CSS文件中，把所有的代码颜色的名字用3位16进制数字的方式表示出来</span>.</p> + +<p>(<span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 1.428571em;">不能完全做出来，不过能够最的很接近。如果要准备的表示颜色名字的话，需要6位16进制</span><span style="color: #000000; font-family: helvetica,arial,droid sans,sans-serif; line-height: 1.428571em;">你需要查一下CSS规范或者是工具来得到一致的颜色</span><span style="line-height: 1.5;">.)</span></p> + +<div class="tuto_details" id="tutochallenge"> +<div class="tuto_type">Possible solution</div> + +<p>The following values are reasonable approximations of the named colors:</p> + +<pre class="brush: css">strong { + color: #f00; /* red */ + background-color: #ddf; /* pale blue */ + font: 200% serif; +} + +.carrot { + color: #fa0; /* orange */ +} + +.spinach { + color: #080; /* dark green */ +} + +p { + color: #00f; /* blue */ +} +</pre> + + +<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/Content", "内容")}}. 示例文本和示例样式表是严格分开的。在 <a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Content" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Content">下一节 </a>将介绍在什么情况下可以允许他们不分开.</p> |