diff options
Diffstat (limited to 'files/zh-cn/conflicting/learn')
22 files changed, 4767 insertions, 0 deletions
diff --git a/files/zh-cn/conflicting/learn/common_questions/index.html b/files/zh-cn/conflicting/learn/common_questions/index.html new file mode 100644 index 0000000000..53aac91402 --- /dev/null +++ b/files/zh-cn/conflicting/learn/common_questions/index.html @@ -0,0 +1,10 @@ +--- +title: Web 工程学 +slug: learn/Web_Mechanics +tags: + - Web 工程学 + - 初学者 +translation_of: Learn/Common_questions +translation_of_original: Learn/Web_Mechanics +--- +<p>请访问 <a class="redirect" href="/zh-CN/docs/learn/%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98">常见问题</a></p> 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> diff --git a/files/zh-cn/conflicting/learn/css/css_layout/index.html b/files/zh-cn/conflicting/learn/css/css_layout/index.html new file mode 100644 index 0000000000..ecd91f80e1 --- /dev/null +++ b/files/zh-cn/conflicting/learn/css/css_layout/index.html @@ -0,0 +1,368 @@ +--- +title: 布局 +slug: Web/Guide/CSS/Getting_started/Layout +translation_of: Learn/CSS/CSS_layout +translation_of_original: Web/Guide/CSS/Getting_started/Layout +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p>{{ previousPage("/zh-CN/docs/CSS/开始/Boxes", "盒模型")}}本文是 <a href="/zh-CN/docs/CSS/开始" title="en/CSS/Getting Started">CSS入门教程</a> 的第12部分; 主要讲述一些修改页面布局的方法。 你可以通过学习来修改自己示例的布局。</p> + +<h2 class="clearLeft" id="说明_布局">说明: 布局</h2> + +<p>你可以通过 CSS 来设置布局的炫酷效果。其中所涉及的部分高阶技术并不是本文范畴。</p> + +<p>当你设计一个简单布局时, 你的样式表与浏览器默认样式表之间的交互、以及与布局引擎的交互都是相当复杂的。 这也是一个高阶话题，并不在本文范畴。</p> + +<p>本文主要介绍一些简单的布局方法。（高阶技术请参阅外部链接 <a href="http://learnlayout.com/">学习高级布局</a>）</p> + +<h3 id="文档结构">文档结构</h3> + +<p>当你想控制文档布局时，就不得不改变它的结构。</p> + +<p>页面标记语言通常都会有公共标签来创建结构。例如, 在 HTML 中你可以使用 {{ HTMLElement("div") }} 元素来创建结构。</p> + +<div class="tuto_example"> +<div class="tuto_type">示例</div> + +<p>在你的示例中, 编号段落并没有自己的容器。</p> + +<p>你的样式表无法为这些段落画出边框，因为没有选择器指向它们。</p> + +<p>为了解决这个问题, 你可以在段落之外添加一个{{ HTMLElement("div") }} 。这个标签是唯一的，可以指定一个id属性来标识:</p> + +<pre class="brush:html;highlight:[2,8]"><h3>Numbered paragraphs</h3> +<div id="numbered"> + <p>Lorem ipsum</p> + <p>Dolor sit</p> + <p>Amet consectetuer</p> + <p>Magna aliquam</p> + <p>Autem veleum</p> +</div> +</pre> + +<p>现在可以通过样式表在每个列表周围画出边框了:</p> + +<pre class="brush:css">ul, #numbered { + border: 1em solid #69b; + padding-right:1em; +} +</pre> + +<p>运行结果如下:</p> + +<table style="background-color: white; border: 2px outset #36b; padding: 1em; width: 30em;"> + <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; margin-bottom: 16px; padding: 1em;"> + <ul style=""> + <li>Arctic</li> + <li>Atlantic</li> + <li>Pacific</li> + <li>Indian</li> + <li>Southern</li> + </ul> + </div> + + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p> + + <div style="border: 12px solid #69b; margin-bottom: 8px; padding: 0px 12em 0px .5em;"> + <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> + </div> + </td> + </tr> + </tbody> +</table> +</div> + +<h3 id="大小单位">大小单位</h3> + +<p>到目前为止，你可以通过像素来指定大小。这在有些情况下是非常合适的，比如电脑屏幕显示。 但当用户改变字体大小之后，你的布局可能会发生错位。</p> + +<p>因此，最好通过百分比或 ems (<code>em</code>) 来指定大小。 em 通常是指当前字体大小(字母m的宽度)。当用户改变字体大小时，你的布局会自己修正。</p> + +<div class="tuto_example"> +<div class="tuto_type">示例</div> + +<p>文本左边的border通过像素来指定大小。</p> + +<p>文本右边的border通过 ems来指定大小。</p> + +<p>在你的浏览器中，修改字体大小，会发现右边的border会自己修正大小而左边的不会。:</p> + +<table style="background-color: white; border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td> + <div style="">RESIZE ME PLEASE</div> + </td> + </tr> + </tbody> +</table> +</div> + +<div class="tuto_details"> +<div class="tuto_type">更多详情</div> + +<p>对于其它设备，其它的长度单位可能更合适。</p> + +<p>在本指南中会有其它篇幅详细介绍这一点。</p> + +<p>更多详情参见CSS说明中 <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#values">Values</a> .</p> +</div> + +<h3 id="文本布局">文本布局</h3> + +<p>有两个属性可以指定元素内容的对齐方式。你可以用它们来进行简单的布局:</p> + +<dl> + <dt>{{ cssxref("text-align") }}</dt> + <dd>内容对齐。 可以使用下面几个值： <code>left</code>, <code>right</code>, <code>center</code>, <code>justify</code>。</dd> + <dt>{{ cssxref("text-indent") }}</dt> + <dd>指定内容缩进。</dd> +</dl> + +<p>这两个属性可以应用于任何文本类内容，不只是纯文本。 需要注意的是，它们会被元素的子元素继承， 所以需要在子元素中将它们关闭，以免出现意想不到的效果。</p> + +<div class="tuto_example"> +<div class="tuto_type">示例</div> + +<p>标题居中:</p> + +<pre class="brush:css">h3 { + border-top: 1px solid gray; + text-align: center; +} +</pre> + +<p>输出结果:</p> + +<table style="background-color: white; border: 2px outset #36b; padding: 1em; width: 30em;"> + <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; text-align: center;">(A) The oceans</p> + </td> + </tr> + </tbody> +</table> + +<p>在 HTML 文档中, 标题之后的内容并不属于标题。当你对齐一个标题时，其后的元素不会继承该样式。</p> +</div> + +<h3 id="浮动">浮动</h3> + +<p> {{ cssxref("float") }} 属性强制元素靠左或靠右。 这是控制元素位置和大小的简单方法。</p> + +<p>本文剩下部分都是围绕浮动元素展开。你可以使用 {{ cssxref("clear") }} 属性来避免其它元素受到浮动效果的影响。</p> + +<div class="tuto_example"> +<div class="tuto_type">示例</div> + +<p>在你的示例中，list是根据窗口拉伸。你可以通过使用浮动元素来使它们靠左。</p> + +<p>为了保证标题在正确的位置, 你必须为标题指定clear属性来避免标题靠左:</p> + +<pre class="brush:css">ul, #numbered {float: left;} +h3 {clear: left;} +</pre> +</div> + +<p>运行结果如下:</p> + +<table style="background-color: white; border: 2px outset #36b; padding: 1em; width: 30em;"> + <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="float: left; border: 12px solid #69b; margin-bottom: 16px; padding-left: 1em;"> + <ul style=""> + <li>Arctic</li> + <li>Atlantic</li> + <li>Pacific</li> + <li>Indian</li> + <li>Southern</li> + </ul> + </div> + + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p> + + <div style="float: left; border: 12px solid #69b; margin-bottom: 8px; padding-left: .5em;"> + <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> + </div> + </td> + </tr> + </tbody> +</table> + +<p>(box右侧需要增加一些padding ,防止文本与边框太近)</p> + +<h3 id="位置">位置</h3> + +<p>你可以为一个元素指定 {{ cssxref("position") }} 属性为以下值之一，来设置其位置。</p> + +<p>这些是高阶属性。 可以通过简单的方式来使用它们—这也是在基础教程里提到它们的原因。但使用它们来实现复杂的布局会相对困难一些。</p> + +<dl> + <dt><code>relative</code></dt> + <dd>通过为元素指定一个值，元素相对于其原来位置移动。也可以使用margin来达到同样的效果。</dd> + <dt><code>fixed</code></dt> + <dd>为元素指定相对于窗口的确切位置 。即使文档的其它元素出现滚动，元素位置仍然不变。</dd> + <dt><code>absolute</code></dt> + <dd>为元素指定相对于其父元素的确切位置。只有在父元素使用 <code>relative</code>, <code>fixed</code> or <code>absolute</code> 时才有效。你可以为任何父元素指定 <code>position: relative;因为它不会产生移动。</code></dd> + <dt><code>static</code></dt> + <dd>默认值。当明确要关闭位置属性时使用。</dd> +</dl> + +<p>和 <code>position</code> 属性(除了 <code>static</code>)一起使用的, 有下列属性: <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>, <code>width</code>, <code>height</code> 通过设置它们来指定元素的位置或大小。</p> + +<div class="tuto_example"> +<div class="tuto_type">示例</div> + +<p>为了放置两个元素，一个在另外一个上方, 创建一个父容器来包含两个子元素:</p> + +<pre class="brush:html"><div id="parent-div"> + <p id="forward">/</p> + <p id="back">\</p> +</div> +</pre> + +<p>在你的样式表里，将父容器的position设置为 <code>relative。无需为它设置任何具体变动。</code> 将子元素的position属性设置为 <code>absolute</code>:</p> + +<pre class="brush:css">#parent-div { + position: relative; + font: bold 200% sans-serif; +} + +#forward, #back { + position: absolute; + margin:0px; /* no margin around the elements */ + top: 0px; /* distance from top */ + left: 0px; /* distance from left */ +} + +#forward { + color: blue; +} + +#back { + color: red; +} +</pre> + +<p>输出结果如下,反斜杠显示在斜杠上方</p> + +<div style="position: relative; left: .33em; font: bold 300% sans-serif;"> +<p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: blue;">/</p> + +<p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: red;">\</p> +</div> + +<table style="background-color: white; border: 2px outset #36b; height: 5em; padding: 1em; width: 30em;"> + <tbody> + <tr> + <td> </td> + </tr> + </tbody> +</table> +</div> + +<div class="tuto_details"> +<div class="tuto_type">更多详情</div> + +<p>更多详情的postion说明在 CSS Specification 中占用了两个章节: <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html">Visual formatting model</a> 和 <a class="external" href="http://www.w3.org/TR/CSS21/visudet.html">Visual formatting model details</a>.</p> + +<p>如果你的样式表工作在多种浏览器环境下，你会发现不同浏览器对标准协议的解释会有很多不同, 而且特定浏览器的特定版本可能存在BUG。</p> +</div> + +<h2 id="实践_设置布局">实践: 设置布局</h2> + +<ol> + <li>修改示例文档, <code>doc2.html</code>, 和样式表, <code>style2.css</code>, 使用之前的示例 <a href="#Document_structure" title="#Document structure"><strong>文档结构</strong></a> and <a href="#Floats" title="#Floats"><strong>浮动</strong></a>.</li> + <li>在 <a href="#Floats" title="#Floats"><strong>浮动</strong></a> 示例中, 添加padding 来分离文本和右侧border ,值设为0.5 em.</li> +</ol> + +<div class="tuto_example"> +<div class="tuto_type">挑战</div> + +<p>修改示例文档, <code>doc2.html</code>, 在文档末尾添加一个标签, <code>注意在</body>之前。</code></p> + +<pre class="brush:html"><img id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin"> +</pre> + +<p>如果你在之前的教程中没有下载过该图片, 现在下载, 将它与示例文件放在同一目录下:</p> + +<table style="border: 2px solid #ccc;"> + <tbody> + <tr> + <td><img alt="Image:Yellow-pin.png" class="internal" src="/@api/deki/files/490/=Yellow-pin.png"></td> + </tr> + </tbody> +</table> + +<p>预测一下你的图片将会出现在哪里，然后刷新浏览器验证一下。</p> + +<p>在样式表中添加一条规则，将图片显示在文档右上角。</p> + +<p>刷新浏览器并把窗口拉小。 查看图片是否在右上角，拖动容器大小，再次查看。</p> + +<div style="position: relative; width: 29.5em; height: 18em;"> +<div style="overflow: auto; border: 2px outset #36b; padding: 1em; width: 29em; height: 16em; background-color: white;"> +<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="float: left; border: 12px solid #69b; margin-bottom: 16px; padding: 0px .5em 0px 1em;"> +<ul style=""> + <li>Arctic</li> + <li>Atlantic</li> + <li>Pacific</li> + <li>Indian</li> + <li>Southern</li> +</ul> +</div> + +<p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p> + +<div style="float: left; border: 12px solid #69b; padding: 0 .5em 0 .5em;"> +<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> +</div> + +<p style=""> </p> + +<div style="position: absolute; top: 2px; right: 0px;"><img alt="Yellow map pin" class="internal" src="/@api/deki/files/490/=Yellow-pin.png"></div> +</div> +</div> +</div> + +<p><a href="/en/CSS/Getting_Started/Challenge_solutions#Layout"> 查看该挑战的解决方案</a>。</p> + +<h2 id="接下来是什么？">接下来是什么？</h2> + +<p>{{ nextPage("/zh-CN/docs/CSS/开始/Tables", "表格") }}你几乎已经学习了这篇CSS基本教程的所有主题。接下来将描述更多CSS规则的高级选择器，以及你可以用来展示<a href="/zh-CN/docs/Web/Guide/CSS/Getting_started/Tables">表格</a>的一些特定方法。</p> diff --git a/files/zh-cn/conflicting/learn/css/first_steps/how_css_is_structured/index.html b/files/zh-cn/conflicting/learn/css/first_steps/how_css_is_structured/index.html new file mode 100644 index 0000000000..17553c5013 --- /dev/null +++ b/files/zh-cn/conflicting/learn/css/first_steps/how_css_is_structured/index.html @@ -0,0 +1,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> diff --git a/files/zh-cn/conflicting/learn/css/first_steps/how_css_works/index.html b/files/zh-cn/conflicting/learn/css/first_steps/how_css_works/index.html new file mode 100644 index 0000000000..fce3091715 --- /dev/null +++ b/files/zh-cn/conflicting/learn/css/first_steps/how_css_works/index.html @@ -0,0 +1,121 @@ +--- +title: CSS如何工作 +slug: Web/Guide/CSS/Getting_started/How_CSS_works +translation_of: Learn/CSS/First_steps/How_CSS_works +translation_of_original: Web/Guide/CSS/Getting_started/How_CSS_works +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p>{{ previousPage("/zh-CN/docs/CSS/开始/为何使用CSS", "为何使用CSS？") }}<span class="seoSummary">这是 <a href="/en-US/docs/Web/Guide/CSS/Getting_started" title="en-US/docs/Web/Guide/CSS/Getting_started">CSS Getting Started</a> 教程的第三章; 这章解释了CSS在浏览器中是如何工作的。 你可以通过分析示例代码来看看样式表中的详细信息。</span></p> + +<h2 class="clearLeft" id="信息：CSS_如何工作">信息：CSS 如何工作</h2> + +<p>浏览器在展现一个文档的时候，必须要把文档内容和相应的样式信息结合起来展示。 这个处理过程一般分两个阶段：</p> + +<ol> + <li>浏览器先将标记语言和CSS转换成<a href="/en-US/docs/DOM" title="/en-US/docs/HTML/DOM"><em>DOM</em></a> (文档对象模型)结构。 这时DOM 就代表了电脑内存中的相应文档，因为它已经融合了文档内容和相应的样式表。</li> + <li>最后浏览器把 DOM的内容展示出来。</li> +</ol> + +<p>标记语言通过使用“元素”来定义文档结构。你需要使用一些以'<'开头和以'>'结尾的字符串，俗称<em>tags，</em>来构成元素。这些元素一般是在'<code>< ></code>'里加上元素名来作为起始tag，在<span style="line-height: inherit;">'</span><code style="font-size: 14px; line-height: inherit;">< ></code><span style="line-height: inherit;">'里加上'/'和元素名的组合来构成结束tag。标记语言中规定，一些元素可以只有一个起始tag，或者构成元素的tag只有一个，但是这个tag里的名称后面必须要加个'/'。</span></p> + +<p>元素也可以作为容器而存在，这样可以把其他元素放到这个元素的起始tag和结束tag之间。</p> + +<p>DOM是一种树形结构。 每个元素和非空文本都可以看做是树形结构上的一个结点。DOM结点不再是容器，但是，它可以作为子结点的父类结点而存在。</p> + +<div class="tuto_example"> +<div class="tuto_type">示例</div> +在示例代码中， 我们使用 <code><p></code> 标签和它的结束标签 <code></p></code> 构造了一个容器： + +<pre class="brush:html"><p> + <strong>C</strong>ascading + <strong>S</strong>tyle + <strong>S</strong>heets +</p> +</pre> + +<h2 id="实例">实例</h2> + +<p><a href="http://jsfiddle.net/djaniketster/6jbpS/">http://jsfiddle.net/djaniketster/6jbpS/</a></p> + +<p>在这个 DOM中， P 结点是一个父结点，它的子结点包含了一些STRONG结点和文本结点。同时，STRONG结点各自也是父结点，它们也分别包含了一些文本结点作为子结点。</p> + +<pre><span style="color: black;">P</span> +├─<span style="color: black;">STRONG</span> +│ └─"<span style="color: black;">C</span>" +├─"<span style="color: black;">ascading</span>" +├─<span style="color: black;">STRONG</span> +│ └─"<span style="color: black;">S</span>" +├─"<span style="color: black;">tyle</span>" +├─<span style="color: black;">STRONG</span> +│ └─"<span style="color: black;">S</span>" +└─"<span style="color: black;">heets</span>"</pre> +</div> + +<p>理解 DOM 结构可以帮助你更好的去设计、调试、维护CSS，因为 DOM 结构就是你的CSS和文档内容融合而成的。</p> + +<h2 id="行动：分析DOM结构">行动：分析DOM结构</h2> + +<h3 id="使用_DOM_Inspector">使用 DOM Inspector</h3> + +<p>你需要使用特殊的软件来分析 DOM结构。在这里，假设你使用的是 Mozilla的 <a href="/en/DOM_Inspector" title="en/DOM_Inspector">DOM Inspector</a> (DOMi) 插件来分析一个 DOM结构。 下面的操作需要你提前安装插件才可以执行。</p> + +<ol> + <li>使用 Mozilla 浏览器来打开示例文档。</li> + <li>在浏览器菜单栏中，选择 <strong>工具 > 查看器</strong>，也可能是选择 <strong>工具> Web 开发者 > 查看器。</strong> + <div class="tuto_details"> + <div class="tuto_type">更多细节</div> + + <p>如果你的 Mozilla 浏览器没有安装 DOMi，你可以到 <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/6622/" title="https://addons.mozilla.org/en-US/firefox/addon/6622/">安装地址</a> 来安装并重启浏览器，然后再回到这里继续学习。</p> + + <p>如果你不想安装 DOMi (或者你使用的是非Mozilla浏览器)，那么你可以试试下个章节中介绍的 Web X-Ray Goggles。 你也可以直接跳过本章节，进行下一章的学习，这并不会影响你接下来的学习内容。</p> + </div> + </li> + <li>你可以在 DOMi中通过点击文档结点前面的箭头来将他们展开。 + <p><strong>注意: </strong> HTML 文件中的空格在 DOMi 中会显示为一些空的文本结点，你可以直接忽略掉它。</p> + + <p>通过展开元素结点，你可能会看到下面这样的一部分内容：</p> + + <pre>│ ▼╴<span style="color: black;">P</span> +│ │ │ ▼╴<span style="color: black;">STRONG</span> +│ │ └<span style="color: darkblue;">#text</span> +│ ├╴<span style="color: darkblue;">#text</span> +│ ►╴<span style="color: black;">STRONG</span> +│ │</pre> + + <p>选择任何元素都可以在 DOMi 右边的面板中找到关于这个元素更详细的信息。例如，当你选择一个文本结点的时候，右边面板中会显示这个结点的文本信息。</p> + + <p>如果你选择的结点是一个元素，那么 DOMi 会分析这个元素，并在右边面板中展示关于它的一大堆信息内容。同时，样式信息只是这些内容的一部分罢了。 </p> + </li> +</ol> + +<div class="tuto_example"> +<div class="tuto_type">挑战</div> + +<p>在 DOMi 中，点击一个 <small>STRONG</small> 结点。</p> + +<p>在 DOMi的右边面板中找出，设置此结点颜色为红色的地方和设置结点内容加粗的地方。 </p> + +<div class="tuto_details" id="tutochallenge"> +<div class="tuto_type">Possible solution</div> + +<p>In the menu above the right-hand pane, choose <strong>CSS Rules</strong>. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the <strong>font-weight</strong> property as <code>bolder</code>; your stylesheet defines the <strong>color</strong> property as <code>red</code>.</p> +<a class="hideAnswer" href="#challenge">Hide solution</a></div> +<a href="#tutochallenge" title="Display a possible solution for the challenge">查看挑战的解决方案</a></div> + +<h3 id="使用_Web_X-Ray_Goggles">使用 Web X-Ray Goggles</h3> + +<p><a class="link-https" href="http://hackasaurus.org/en-US/goggles/install/" title="https://secure.toolness.com/webxray/">Web X-Ray Goggles </a>显示的信息内容相比较 DOM Inspector要少， 但是它安装和使用的步骤更简单。</p> + +<p><span style="line-height: 1.5;">到 </span><a class="link-https" href="http://hackasaurus.org/en-US/goggles/install/" style="line-height: 1.5;" title="https://secure.toolness.com/webxray/">Web X-Ray Goggles</a>的主页。</p> + +<ol> + <li>将页面中的书签链接拖拽到浏览器工具栏。</li> + <li>打开你的示例 HTML 文档。</li> + <li>通过点击工具栏中的相应书签来激活Web X-Ray Goggles。 </li> + <li>通过在文档中移动鼠标箭头来查看相应的文档元素。</li> +</ol> + +<h2 id="What_next">What next?</h2> + +<p>{{ nextPage("/zh-CN/docs/CSS/开始/Cascading_and_inheritance", "层叠和继承") }}如果你做过上文中的练习，你会发现不同位置的style样式是相互影响共同生成了元素的最终展现。在 <a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance">下一章</a> 中将会深入解释这种相互联系和相互影响。</p> diff --git a/files/zh-cn/conflicting/learn/css/first_steps/how_css_works_64ba4331a7a5f4319c6e06b06ccdd521/index.html b/files/zh-cn/conflicting/learn/css/first_steps/how_css_works_64ba4331a7a5f4319c6e06b06ccdd521/index.html new file mode 100644 index 0000000000..ca5092f2af --- /dev/null +++ b/files/zh-cn/conflicting/learn/css/first_steps/how_css_works_64ba4331a7a5f4319c6e06b06ccdd521/index.html @@ -0,0 +1,105 @@ +--- +title: 为何使用CSS？ +slug: Web/Guide/CSS/Getting_started/Why_use_CSS +tags: + - CSS + - 'CSS:入门' + - NeedsLiveSample +translation_of: Learn/CSS/First_steps/How_CSS_works +translation_of_original: Web/Guide/CSS/Getting_started/Why_use_CSS +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p>{{ previousPage("/zh-CN/docs/CSS/开始/What_is_CSS", "什么是CSS?") }}<span class="seoSummary">这是<a href="/en-US/docs/Web/Guide/CSS/Getting_started" title="en-US/docs/Web/Guide/CSS/Getting_started">CSS入门教程</a> 的第二章节，解释了CSS与文档的关系。在下面的练习中，你将学习如何给你在第一章节中创建的示例文档添加CSS样式表。</span></p> + +<h2 class="clearLeft" id="信息_为何使用CSS？">信息: 为何使用CSS？</h2> + +<p>CSS帮助您将文档信息的内容 和如何展现它的细节相分离。众所周知，如何展现文档的细节即为<em>样式</em>(<em>style</em>)。您可以将样式从它的内容分离出来，以便您能够：</p> + +<ul> + <li>避免重复</li> + <li>更容易维护</li> + <li>为不同的目的，使用不同的样式而内容相同</li> +</ul> + +<div class="tuto_example"> +<div class="tuto_type">例如</div> + +<p>您的网站可能有成千上万的页面外观相似。使用CSS，您可以将样式信息存储在公共的文件中以供所有的页面共用。</p> + +<p>当用户显示页面时，用户的浏览器将样式信息和页面内容一同加载。</p> + +<p>当用户打印页面时，您可以提供不同的样式信息，以便于打印出来的页面更易于阅读。</p> +</div> + +<p>总之，在HTML中，您使用标记语言来描述文档的内容而不是它的样式。您可以使用CSS来指定它的样式而不是它的内容。 (在本教程后续内容中，您会看到此种的例外情况。)</p> + +<div class="tuto_details"> +<div class="tuto_type">更多的细节</div> + +<p>像HTML之类的标记语言也会提供指定样式的方法。</p> + +<p>例如，在HTML中，您可以使用<code><b></code>标签来加粗文字，同时，您也可以在页面的<code><body>标记中指定背景颜色。</code></p> + +<p>当您使用CSS时，您通常要避免使用标记语言的这些特性，以便您所有的文档样式信息保存在同一地方。</p> +</div> + +<h2 id="行动：创建样式表">行动：创建样式表</h2> + +<ol> + <li>在与前面相同的目录中，新建另一个文本文件。该文件将成为您的样式表。请将它命名为：<code>style1.css</code></li> + <li>在您的CSS文件中，复制、粘贴下面的行，并保存该文件: + <pre class="brush: css">strong {color: red;} +</pre> + </li> +</ol> + +<h3 id="连接您的文档和样式表">连接您的文档和样式表</h3> + +<ol> + <li>为将您的文档和样式表相连，请编辑您的HTML文件。并添加下面高亮的行： + <pre class="brush: html; highlight:[6];"><!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <title>Sample document</title> + <link rel="stylesheet" href="style1.css"> + </head> + <body> + <p> + <strong>C</strong>ascading + <strong>S</strong>tyle + <strong>S</strong>heets + </p> + </body> +</html> +</pre> + </li> + <li>保存该文件并刷新您的浏览器。该样式表将首字母显示为红色，如下所示： + <table style="border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td><span style="color: red;"><strong>C</strong></span>ascading <span style="color: red;"><strong>S</strong></span>tyle <span style="color: red;"><strong>S</strong></span>heets</td> + </tr> + </tbody> + </table> + </li> +</ol> + +<div class="tuto_example" id="challenge"> +<div class="tuto_type">挑战</div> + +<p>除了红色外，CSS允许使用其它的颜色名称。</p> + +<p>不查询参考手册，请在您使用的样式表找出五个以上的颜色名称。</p> + +<div class="tuto_details" id="tutochallenge"> +<div class="tuto_type">Possible solution</div> + +<p>CSS supports common color names like <code>orange</code>, <code>yellow</code>, <code>blue</code>, <code>green</code>, or <code>black</code>. It also supports some more exotic color names like <code>chartreuse</code>, <code>fuschia</code>, or <code>burlywood</code>. See <a href="/en-US/docs/CSS/color_value" title="The CSS color data type">CSS Color value</a> for a complete list as well as other ways of specifying colors.</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/CSS/开始/How_CSS_works", "CSS如何工作。")}}现在您将示例文档与独立的样式表连在了一起，您已准备好学习<a href="/zh-CN/docs/Web/Guide/CSS/Getting_started/How_CSS_works" title="/en-US/docs/Web/Guide/CSS/Getting_started/How_CSS_works">更多的</a>关于您的浏览器在显示文档时如何将它们组合在一起。</p> diff --git a/files/zh-cn/conflicting/learn/css/first_steps/how_css_works_b66915031fb62b5fee1201086144e209/index.html b/files/zh-cn/conflicting/learn/css/first_steps/how_css_works_b66915031fb62b5fee1201086144e209/index.html new file mode 100644 index 0000000000..7fcb01c0b0 --- /dev/null +++ b/files/zh-cn/conflicting/learn/css/first_steps/how_css_works_b66915031fb62b5fee1201086144e209/index.html @@ -0,0 +1,115 @@ +--- +title: What is CSS +slug: Web/Guide/CSS/Getting_started/What_is_CSS +translation_of: Learn/CSS/First_steps/How_CSS_works +translation_of_original: Web/Guide/CSS/Getting_started/What_is_CSS +--- +<div>{{CSSTutorialTOC}}</div> + +<p>{{previousPage("/zh-CN/docs/CSS/开始", "开始")}} 作为<span class="seoSummary"> <a href="/en/CSS/Getting_Started" title="en/CSS/Getting Started">CSS 入门指南</a> 教程的第一部分，本文解释了什么是 CSS。你需要创建一个文档以便用于接下来的学习。</span></p> + +<h2 class="clearLeft" id="资料_什么是_CSS">资料: 什么是 CSS</h2> + +<p>Cascading Style Sheets (<dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn>) 是一门指定文档该如何呈现给用户的语言。</p> + +<p><em>文档</em><span style="line-height: inherit;"> 是信息的集合，它使用一门 </span><em>标记语言</em><span style="line-height: inherit;"> 作为结构。</span></p> + +<p>将一篇文档 <em>呈现 </em>给用户是指将文档转换成你的听众能够使用的一种形式。火狐、Chrome或IE等浏览器，用于将文档以可视的形式进行呈现，如在计算机屏幕、投影仪或打印机上。</p> + +<div class="tuto_example"> +<div class="tuto_type">示例</div> + +<ul> + <li>你现在阅读的这个网页就是文档。<br> + 网页中的信息通常使用标记语言 HTML (HyperText Markup Language) 来组织它的结构。</li> + <li>一个应用中的对话框，也称为模态窗口，也是文档。<br> + 这样的对话框可能也会使用类似于 XUL 这样的标记语言。Mozilla 的有些应用使用了该语言。</li> +</ul> +</div> + +<p>在该教程中，如果使用像下方这样标题为 <strong>更多细节</strong> 的框，里面会包含额外信息。如果你迫切的想完成整个教程，那么可以跳过这些方框，等到以后有时间再回来看。当然也可以在碰到方框的时候去阅读这些内容，或者更进一步的，按照里面提供的链接去了解更多细节。</p> + +<div class="tuto_details"> +<div class="tuto_type">更多细节</div> + +<p>一个文档并不等同于一个文件。它甚至可能不会保存在一个文件中。</p> + +<p>举例来说，你现在阅读的这个文档就不是保存在一个文件中。当你的浏览器请求该页面时，服务器会查询数据库生成文档，将散落在众多文件中的文档的碎片搜集起来。然而在本教程中，你使用的都是保存在文件中的文档。</p> + +<p>关于文档与标记语言的更多信息，可以查看本网站的其他部分—例如：</p> + +<table style="background-color: inherit; margin-left: 2em;"> + <tbody> + <tr> + <td><a href="/en/HTML" title="en/HTML">HTML</a></td> + <td>用于 web 页面</td> + </tr> + <tr> + <td><a href="/en/XML" title="en/XML">XML</a></td> + <td>用于结构化文档</td> + </tr> + <tr> + <td><a href="/en/SVG" title="en/SVG">SVG</a></td> + <td>用于图形</td> + </tr> + <tr> + <td><a href="/en/XUL" title="en/XUL">XUL</a></td> + <td>用于 Mozilla 中的用户界面</td> + </tr> + </tbody> +</table> + +<p>在教程的第二部分，你会看到使用这些标记语言的例子。</p> +</div> + +<p><em> </em>为用户<em>展现 </em><span style="line-height: inherit;">文档意味着将其转换成一个可读性良好的格式。像 Firefox， Chrome 或是 Internet Explorer 这样的浏览器倾向于使用更视觉化的方式来展现文档 — 例如，在计算机屏幕，投影仪或是打印机上。</span></p> + +<div class="tuto_details"> +<div class="tuto_type">更多细节</div> + +<p>CSS 并非仅仅用于浏览器，也不仅限于视觉展现。按照 CSS 的正式术语来讲，将文档呈现给用户的程序称为<em>用户代理</em>(UA)。浏览器只是用户代理的其中之一。不过在教程的第一部分中，你将只在浏览器中使用 CSS。</p> + +<p>要了解更多 CSS 术语定义的相关内容，请查看 CSS 规范的 <a class="external" href="http://www.w3.org/TR/CSS21/conform.html#q1">定义</a>。</p> +</div> + +<h2 id="动手：创建一个文档">动手：创建一个文档</h2> + +<ol> + <li>在你的电脑中创建一个新的文件夹，用于保存和管理本指南中的练习。</li> + <li>打开你的文本编辑器并创建一个新文件。该文件将用于保存后续练习中的文档。</li> + <li>将下面的内容复制粘贴进文本文件中。保存文件，将其命名为 <code>doc1.html</code> + <pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <title>Sample document</title> + </head> + + <body> + <p> + <strong>C</strong>ascading + <strong>S</strong>tyle + <strong>S</strong>heets + </p> + </body> +</html> +</pre> + </li> + <li>在你的浏览器中开启一个新的标签页或窗口，打开文件。 + <p>你会看到一串开头字母大写的文本，像这样：</p> + + <table style="border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td><strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets</td> + </tr> + </tbody> + </table> + + <p>由于你的浏览器与该 wiki 的设置可能不同，所以你看到的内容与上面显示的不一定相符合。如果在字体、间距或颜色有区别，请不要担心，因为这些内容暂时无关紧要。</p> + </li> +</ol> + +<h2 id="接下来是什么？">接下来是什么？</h2> + +<p>{{nextPage("/zh-CN/docs/CSS/开始/为何使用CSS", "为什么使用 CSS?")}}现在你的文档中还没有使用 CSS。在<a href="/zh-CN/docs/CSS/Getting_Started/Why_use_CSS" title="/en-US/docs/CSS/Getting_Started/Why_use_CSS">下一节</a>中，你将会使用 CSS 来指定样式。</p> diff --git a/files/zh-cn/conflicting/learn/css/first_steps/index.html b/files/zh-cn/conflicting/learn/css/first_steps/index.html new file mode 100644 index 0000000000..585243aa2a --- /dev/null +++ b/files/zh-cn/conflicting/learn/css/first_steps/index.html @@ -0,0 +1,59 @@ +--- +title: CSS入门教程 +slug: Web/Guide/CSS/Getting_started +tags: + - CSS + - 'CSS:Getting_Started' + - CSS入门 + - CSS教程 + - Web + - 初学者 + - 教程 +translation_of: Learn/CSS/First_steps +translation_of_original: Web/Guide/CSS/Getting_started +--- +<p> </p> + +<p>该 <strong>CSS 指南</strong> 将会带你进入 <a href="/zh-CN/docs/CSS">层叠样式表</a> (CSS)的世界。本指南将通过实例来引导你学习语言的基本功能(你可以在自己的电脑上运行这些实例)，指南还将阐明能够运行在现代浏览器上的 CSS 标准功能。</p> + +<p>本指南适合 CSS 的初学者，但如果你已经学会了 CSS 的基本知识，该指南对你也会有所帮助。若你对 CSS 的经验十分丰富，那么本指南就不适合你了，CSS 主页 <a href="/zh-CN/docs/CSS">列出了</a> 更多的高级资源。</p> + +<nav class="fancyTOC"><a class="button" href="/zh-CN/docs/CSS/开始/What_is_CSS" rel="next">什么是 CSS</a> <a class="button" href="/zh-CN/docs/CSS/开始/为何使用CSS">为什么使用 CSS</a> <a class="button" href="/zh-CN/docs/CSS/开始/How_CSS_works">CSS 如何工作</a> <a class="button" href="/zh-CN/docs/CSS/开始/Cascading_and_inheritance">层叠与继承</a> <a class="button" href="/zh-CN/docs/CSS/开始/Selectors">选择器</a> <a class="button" href="/zh-CN/docs/CSS/开始/Readable_CSS">可读性良好的 CSS</a> <a class="button" href="/zh-CN/docs/CSS/开始/Text_styles">文本样式</a> <a class="button" href="/zh-CN/docs/CSS/开始/Color">颜色</a> <a class="button" href="/zh-CN/docs/CSS/开始/Content">内容</a> <a class="button" href="/zh-CN/docs/CSS/开始/Lists">列表</a> <a class="button" href="/zh-CN/docs/CSS/开始/Boxes">盒模型</a> <a class="button" href="/zh-CN/docs/CSS/开始/布局">布局</a> <a class="button" href="/zh-CN/docs/CSS/开始/Tables">表格</a> <a class="button" href="/zh-CN/docs/CSS/开始/媒体">媒体</a></nav> + +<h3 id="在开始学习之前你需要准备什么？">在开始学习之前你需要准备什么？</h3> + +<ul> + <li>一个文本编辑器</li> + <li>一个现代浏览器</li> + <li>编辑器与浏览器的基本使用方法</li> +</ul> + +<p>虽然没有这个要求，但是教程中的练习可以帮助你学习。你也可以只阅读教程、图片，但这是一种效率很低的学习方式。</p> + +<p><strong>注意： </strong>教程包括了CSS操作颜色的方法。因此指南的某些部分会依赖颜色。要想更容易的学习这些内容，你需要一个彩色显示器与<span class="short_text" id="result_box" lang="zh-CN"><span>正常色觉</span></span>。</p> + +<h2 id="如何使用本指南">如何使用本指南</h2> + +<p>在使用本指南时，需要按顺序仔细阅读每页的内容。如果跳过某个页面，可能会难以理解后续内容。</p> + +<h3 id="第一部分：CSS基础">第一部分：CSS基础</h3> + +<p>在每页中，通过<em>资料</em> 部分来了解 CSS 的工作原理。通过<em>实践</em> 部分来试着在你的计算机上使用 CSS。</p> + +<p>为了测试你对指南的理解程度，可以完成页面底部的挑战内容。挑战内容下面提供了答案的链接，这样你不想看答案的时候没有必要去看它们。</p> + +<p>为了深入了解 CSS，可以阅读以<em>更多资料</em> 为标题的方框中内容。你会从其中的超链接里找到更多 CSS 参考资料。</p> + +<h3 id="第二部分：CSS的应用范围">第二部分：CSS的应用范围</h3> + +<p>指南的第二部分提供了多个实例，用于展示 CSS 与 web 和 Mozilla 的其他技术的使用范围。</p> + +<ol> + <li><strong><a href="/zh-CN/CSS/Getting_Started/JavaScript">JavaScript</a> </strong></li> + <li><strong><a href="/zh-CN/CSS/Getting_Started/SVG_graphics">SVG 图形</a> </strong></li> + <li><strong><a href="/zh-CN/CSS/Getting_Started/XML_data">XML 数据</a> </strong></li> + <li><strong><a href="/zh-CN/CSS/Getting_Started/XBL_bindings">XBL bindings</a> </strong></li> + <li><strong><a href="/zh-CN/CSS/Getting_Started/XUL_user_interfaces">XUL 用户界面</a> </strong></li> +</ol> + +<p> </p> diff --git a/files/zh-cn/conflicting/learn/css/styling_text/fundamentals/index.html b/files/zh-cn/conflicting/learn/css/styling_text/fundamentals/index.html new file mode 100644 index 0000000000..fd67fc382c --- /dev/null +++ b/files/zh-cn/conflicting/learn/css/styling_text/fundamentals/index.html @@ -0,0 +1,156 @@ +--- +title: 理解下划线 +slug: Understanding_Underlines +tags: + - 'CSS:Articles' +translation_of: >- + Learn/CSS/Styling_text/Fundamentals#Font_style_font_weight_text_transform_and_text_decoration +translation_of_original: Understanding_Underlines +--- +<p>对于 Web 设计者来说, 想移除其设计中某些 (或全部) 超链接的下划线是相当常见的事情。但是由于在过去浏览器中的一些不标准的行为, 一些人在删除超链接中下划线的正确方法方面存在一些问题。最常见的错误是这样做：</p> + +<pre class="notranslate"><a href="link.html"> +<span style="text-decoration: none;">一个链接</span> +</a></pre> + +<p>与大部分人的想法相反，这样去除下划线是不应该的。本文将会探讨去除下滑的正确方法及其原因。正确的处理下划线有很大的好处，譬如简洁的标签及高可读性的源代码。</p> + +<h3 id="How_Text_Gets_Decorated" name="How_Text_Gets_Decorated">文字是如何被加上修饰线（decoration）的</h3> + +<p>了解如何正确删除下划线之前，我们先了解一下修饰线（<code>decoration</code> 下同）是如何被应用的。首先，让我们先思考一个 <code>span</code> 在一个 <code>p</code> 中会是什么样子。</p> + +<pre class="brush: html notranslate"><p><span style="text-decoration: underline;"> +这里有一些文字 +</span></p></pre> + +<p>很明显，就像下面所展示的：文字被加上了下划线。</p> + + + +<p><u>这里有一些文字。</u></p> + + + +<p>现在，让我们添加再添加一个 <code>span</code> 嵌套在之前的 <code>span</code> 里面。然后再给后加的 <code>span</code> 一个不一样的线样式：</p> + +<pre class="brush: html notranslate"><p><span style="text-decoration: underline;"> +这里有一些 +<span style="text-decoration: overline;">额外的</span> +文字。 +</span></p></pre> + + + +<p><u>这里有一些<span style="text-decoration: overline;">额外的</span>文字。</u></p> + + + +<p>我们发现此例的 “额外的” 一词出现了既有上划线也有下划线的情况。但是这为什么呢？我们仅给最里面 <code>span</code> 标签设置了上划线。<code>text-decoration</code> 的值并不会被继承。那么为什么 “额外的” 下面会有下划线呢？</p> + +<p>现在让我们把最里面 <code>span</code> 的文字颜色（<code>color</code> 下同）改一下，比如红色，我们就能知道怎么回事了。</p> + + + +<p><u>这里有一些<span style="color: red; text-decoration: overline;">额外的</span>文字。</u></p> + + + +<p>上划线和文字一起变成了红色，但是下划线并没有。这是因为下划线实际上是外面 <code>span</code> 的一部分，它只是在最里面 <code>span</code> 的下方经过而已。如果我们给外面的 <code>span</code> 加个背景，我们一般是希望背景也能穿过里面 <code>span</code> 显示出来。同样的，父级的文字修饰线就会显示在子级元素上，即使你并没有给子级元素设置或继承修饰线。</p> + +<p>现在，让我们明确地移除里面 <code>span</code> 的修饰线样式。</p> + +<pre class="brush: html notranslate"><p><span style="text-decoration: underline;"> +这里有一些 +<span style="text-decoration: none; color: red;">额外的</span> +文字。 +</span></p></pre> + +<p>这样意味着不应有任何修饰线样式在里面的 <code>span</code> 上，但是这样并不会阻止外面的 <code>span</code> 显示下划线。这就和 “把里面 <code>span</code> 的背景设为透明并不会让我们看不到外面 <code>span</code> (或者 <code>body</code> 之类的) 的背景” 一样。我们可以在下面看见，下划线仍旧是外面 <code>span</code> 的颜色。</p> + + + +<p><u>这里有一些<span style="color: red; text-decoration: none;">额外的</span>文字。</u></p> + + + +<p>那么让我们考虑一下这种情况：你在一个超链接 <code>a</code> 里添加了一个 <code>span</code> ，如果你想移除链接的下划线。但是因为上面所说的原因，你是没办法这样达成目的：</p> + +<pre class="notranslate"><a href="http://developer.netscape.com/">这个链接 +<span style="text-decoration: none; font-weight: bold;"> +有个span +</span>在里面</a></pre> + + + + + + + +<p>因此，我们不能使用这种方式移除下划线，我们需要其他的方法。而这其他的方法比你想象的要简单许多。</p> + +<h3 id="How_to_Really_Turn_Off_Underlines" name="How_to_Really_Turn_Off_Underlines">如何真正地将下划线移除</h3> + +<p>答案很简单：如果你不希望超链接拥有下划线，那么请直接关闭该标签本身的下划线。通过覆写在链接中的<code>span</code>的样式来修改下划线是不会在正常的浏览器中起效的，这是一种多余的无用行为。</p> + +<p>比方说，如果你想移除页面中所有超链接的下划线，那么最简单的办法是：</p> + +<pre class="notranslate">a:link, a:visited {text-decoration: none;}</pre> + +<p>另一个常见情况是仅从一组选定的链接中删除其中的下划线。比方说，在页面顶部的导航链接通常不会设有下划线。在这种情况下，你最好的选择是使用 class 或者 id 属性对目标元素进行分类，然后编写对应的样式。比方说，假设在下面的表格中有你希望修改的链接标签，那么给<code>table</code>本身追加一个<code>id</code>属性就是你首先需要做的。</p> + +<pre class="notranslate"><table id="navbar"> +<tr> +<td><a href="link1.html">Home</a></td> +<td><a href="link2.html">Electronics</a></td> +<td><a href="link3.html">Accessories</a></td> +<td><a href="link4.html">Software</a></td> +<td><a href="link5.html">Checkout</a></td> +</tr> +</table></pre> + +<p>有了 <code>id</code> 之后, 我们现在就可以为其编写一条CSS规则：</p> + +<p><code>table#navbar a {text-decoration: none;}</code></p> + +<p>这种方法最大的额外好处就是你可以基于此规则为这些链接扩展其他样式，比如：</p> + +<pre class="notranslate">table#navbar a {text-decoration: none; color: yellow; +font: 10px sans-serif; letter-spacing: 1px; padding: 0 1em;}</pre> + +<p>当然，你也可以直接将你希望修改样式的链接赋上特定的 class ，在有些情况下这是十分有必要的。而且，在绝大多数情况下 ，使用与本页面类似的方法将有效地帮助到其他作者。Of course, you could put classes directly on the links you wish to style, and in some cases that's necessary. However, in the majority of cases, authors will be well served by an approach similar to the one shown here.</p> + +<h3 id="Other_Decorations" name="Other_Decorations">其他修饰线</h3> + +<p>本文重点介绍下划线，因为下划线是迄今为止在网络上使用的最常见的文本修饰。不过，此处讨论的原理适用于任何形式的装饰。如果文本设置了删除线样式，则该样式将穿透元素的文本以及任何子元素的文本，无论<code>text-decoration</code>的值是多少。举个例子：This article has focused on underlines because they are by far the most common text decoration in use on the Web. However, the principles discussed here apply to any form of decoration. If text is styled with a strike-through line, then that will run through the element's text and the text of any descendant elements, no matter what value they are given for <code>text-decoration</code>. As an example:</p> + +<pre class="notranslate"><p style="text-decoration: line-through;"> +This text has been +<span style="text-decoration: none; color: red;">stricken</span> +with a line. +</p></pre> + +<p>The text in this paragraph will all be stricken, although the word "stricken" will be red. This is shown in Figure 6.</p> + + + +<h3 id="Conclusion" name="Conclusion">结论</h3> + +<p>Although some browsers will let you get away with it, the use of <code>span</code> to "switch off" text decorations is not correct CSS and will not work in CSS-conformant browsers. Thus, many Web sites authored to proprietary behavior will not display as the designer intended in more recent browsers. Fortunately, there are several benefits to abandoning this legacy code practice in favor of directly styling hyperlinks.</p> + +<h3 id="Recommendations" name="Recommendations">建议</h3> + +<ul> + <li><strong>不要</strong>尝试通过<code>span</code>标签来修饰链接，这是一种无效的行为——在使用规范CSS的浏览器中，它不能够去除类似下划线等装饰线。</li> + <li>利用CSS选择器，通过class或id属性对元素进行进行分类来提高CSS的效率。.</li> +</ul> + +<div class="originaldocinfo"> +<h3 id=".E6.96.87.E7.AB.A0.E5.8E.9F.E5.A7.8B.E4.BF.A1.E6.81.AF" name=".E6.96.87.E7.AB.A0.E5.8E.9F.E5.A7.8B.E4.BF.A1.E6.81.AF">文章原始信息</h3> + +<ul> + <li>作者： Eric A. Meyer, Netscape Communications</li> + <li>最后更新： Published 2002年3月5日</li> + <li>版权信息： Copyright © 2001-2003 Netscape. All rights reserved.</li> + <li>注意： This reprinted article was originally part of the DevEdge site.</li> +</ul> +</div> diff --git a/files/zh-cn/conflicting/learn/css/styling_text/fundamentals_5a3f2ce7cc4f23ec431e57a447af0711/index.html b/files/zh-cn/conflicting/learn/css/styling_text/fundamentals_5a3f2ce7cc4f23ec431e57a447af0711/index.html new file mode 100644 index 0000000000..f7d1d38b23 --- /dev/null +++ b/files/zh-cn/conflicting/learn/css/styling_text/fundamentals_5a3f2ce7cc4f23ec431e57a447af0711/index.html @@ -0,0 +1,158 @@ +--- +title: 文本样式 +slug: Web/Guide/CSS/Getting_started/Text_styles +translation_of: Learn/CSS/Styling_text/Fundamentals +translation_of_original: Web/Guide/CSS/Getting_started/Text_styles +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p>{{previousPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "创建可读性良好的CSS")}} 这是<a href="/en-US/docs/Web/Guide/CSS/Getting_Started">CSS入门教程</a>系列教程的第7部分；本节讲述了更多的有关文本的样式。你可以通过更改示例样式来使用不同的字体。</p> + +<h2 class="clearLeft" id="资料：文本样式">资料：文本样式</h2> + +<p>CSS提供了几个属性用来操作字体。</p> + +<p>我们先来看一个简写属性 {{ cssxref("font") }}，使用这个属性可以很方便的指定其他的字体属性。比如：</p> + +<ul> + <li>字体加粗，字体的风格：斜体和字体变形：小型大写字母</li> + <li>字体的大小</li> + <li>行高</li> + <li>字体</li> +</ul> + +<div class="tuto_example"> +<div class="tuto_type">示例</div> + +<pre class="brush:css">p {font: italic 75%/125% "Comic Sans MS", cursive;} +</pre> + +<p>这条规则定义了字体的几个属性，使整个段落文本都变成斜体。</p> + +<p>字体大小设置为每个段落父元素字体大小的3/4，行高设置为125%（比常规的间隔稍大一些）。</p> + +<p>文本字体设置为 Comic Sans MS，假如该字体不被浏览器支持则使用默认字体：cursive。</p> + +<p><span style="line-height: 1.5;">这条规则还把bold和small-caps这些效果给去掉了（设置它们的值为normal）。</span></p> +</div> + +<h3 id="sect1"> </h3> + +<h3 id="字体">字体</h3> + +<p>你无法预料到用户是否可以访问样式表里定义的字体。所以在设置字体时，在属性后指定一个替代的字体列表是个不错的主意。</p> + +<p>在这个字体列表的最后加上系统字体中的一个，如：serif,sans-serif,cursive,fantasy或monospace。</p> + +<p>如果字体不支持样式表里设置的字体特征，浏览器会使用另一种字体。比如，样式表中包含字体不支持的特殊字符，如果浏览器发现另一种字体支持这些特殊字符，那浏览器就会选择使用这种字体。</p> + +<p>使用 {{ cssxref("font-family") }} 属性指定文本的字体。</p> + +<p>简体中文的字体示例：</p> + +<p>Windows：font-family:微软雅黑;</p> + +<p>Mac OS：font-family:"Songti SC";</p> + +<h3 id="字号">字号</h3> + +<p>浏览器用户浏览页面时，可以覆盖页面默认的文号大小，也可以改变页面的字号大小。所以说尽可能的使用相对的字号大小对你来说是有意义的。</p> + +<p>你可使用系统内置的值来设置字号，比如small,medium和large。你也可以使用相对父元素字号大小的值来设置，比如：smaller,larger,150%或1.5em。1“em”等于1个字母“m”的宽度（相对于父元素字号大小）;因此1.5em就是1.5倍的父元素字号大小。</p> + +<p>如果有必要你也可以指定一个实际的大小，比如14px(14像素)应用于显示设备或14pt(14点)应用于打印设备。但是实际大小不能应用于视力受损用户的设备上，因为这些设备不支持指定实际的值。一个比较容易实现的策略是给顶级的文档元素指定一个系统内置的值如medium，然后再给它的子元素设置个相对值。</p> + +<p>使用{{ cssxref("font-size") }} 属性指定字体的大小。</p> + +<h3 id="行高">行高</h3> + +<p>行高用来指定行与行之间的距离。如果你的文档中有一个很长的段落由很多行组成，而且这个段落的字号还比较小，这时给它指定一个稍大的间距，这样阅读起来会更方便。</p> + +<p>使用 {{ cssxref("line-height") }} 属性指定文本的行间距。</p> + +<h3 id="装饰">装饰</h3> + +<p>单独的 {{ cssxref("text-decoration") }}就可以为文本指定其他风格，比如underline或line-through。你也可以把值设置成none，把这些风格取消掉。</p> + +<h3 id="其他属性">其他属性</h3> + +<p>使用<span style="line-height: 1.5;">{{ cssxref("font-style") }}</span><code style="font-size: 14px;">: italic;指定文本为斜体</code><code style="font-size: 14px;">;</code></p> + +<p><code style="font-size: 14px;">使用</code><span style="line-height: 1.5;"> </span><code style="font-size: 14px;">{{ cssxref("font-weight") }}: bold;指定文本加粗;</code></p> + +<p>使用<span style="line-height: 1.5;"> </span><code style="font-size: 14px;">{{ cssxref("font-variant") }}: small-caps;指定文本为小型大写字母;</code></p> + +<p>如果我们想单独设置某个效果失效，我们可以把其相应的属性设置为normal或inherit.</p> + +<div class="tuto_details"> +<div class="tuto_type">详细资料</div> + +<p>我们也可以采用其他方式指定文本样式。</p> + +<p><span style="line-height: 1.5;">比如，这里提到的几个属性的其他值。</span></p> + +<p>在一个复杂的样式表中，应该避免使用font属性，因为它的副作用（重置其他个体属性）。</p> + +<p>字体相关的全部细节，可以在CSS规范里查看<a class="external" href="http://www.w3.org/TR/CSS21/fonts.html" style="line-height: 1.5;">Fonts</a><span style="line-height: 1.5;"> 。文本修饰相关可以查看</span><span style="line-height: 1.5;"> </span><a class="external" href="http://www.w3.org/TR/CSS21/text.html" style="line-height: 1.5;">Text</a><span style="line-height: 1.5;"> 。</span></p> + +<p>如果我们不想使用系统上的默认字体库，我们可以使用{ { cssxref(@font-face)} }指定一个在线字体。然而，这要求用户的浏览器支持该字体。</p> +</div> + +<h2 id="实践：指定字体">实践：指定字体</h2> + +<p>对于一个简单的页面，我们可以设置 {{ HTMLElement("body") }}元素的字体，然后页面中的其他元素继承这个设置。</p> + +<ol> + <li>编辑我们的样式表。</li> + <li>添加以下规则到你的样式表中。推荐这个规则放在css文件的开头: + <pre class="eval">body {font: 16px "Comic Sans MS", cursive;} +</pre> + </li> + <li>添加一个该规则的注释，可以添加空格匹配你的整体样式布局。</li> + <li>保存文件并刷新浏览器查看效果。如果你的系统有Comic Sans MS或cursive字体，这两种字体都不支持斜体。你的浏览器会自动选择另一种字体实现斜体，效果如第一行。 + <table style="border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td style="font: italic 16px 'Comic Sans MS', cursive; 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="font: 16px 'Comic Sans MS', cursive; 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>从浏览器的菜单栏中选择 视图 > 字体大小 > 放大（或视图 > 缩放 > 放大）。即使你在样式里指定了字体为16px。用户浏览网页时，还是可以改变字体字号的大小。</li> +</ol> + +<div class="tuto_example"> +<div class="tuto_type">挑战</div> + +<p>不改变什么，让6个初始字母的字号大小调整为2倍于浏览默认的衬线字体:</p> + +<table> + <tbody> + <tr> + <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: green; font: 200% serif;">S</strong>tyle <strong style="color: green; font: 200% serif;">S</strong>heets</td> + </tr> + <tr> + <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: red; font: 200% serif;">S</strong>tyle <strong style="color: red; font: 200% serif;">S</strong>heets</td> + </tr> + </tbody> +</table> + +<div class="tuto_details" id="tutochallenge"> +<div class="tuto_type">Possible solution</div> + +<p>Add the following style declaration to the <code>strong</code> rule:</p> + +<pre class="brush: css"> font: 200% serif; +</pre> +If you use separate declarations for <code>font-size</code> and <code>font-family</code>, then the <code>font-style</code> setting on the first paragraph is <em>not</em> overridden. + +<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/Color", "颜色")}}示例文档已经使用几个颜色命名。下一节列表中将列出标准的颜色名称，并且介绍其他的定义颜色的方式。</p> diff --git a/files/zh-cn/conflicting/learn/css/styling_text/styling_lists/index.html b/files/zh-cn/conflicting/learn/css/styling_text/styling_lists/index.html new file mode 100644 index 0000000000..8a85655517 --- /dev/null +++ b/files/zh-cn/conflicting/learn/css/styling_text/styling_lists/index.html @@ -0,0 +1,324 @@ +--- +title: Lists +slug: Web/Guide/CSS/Getting_started/Lists +translation_of: Learn/CSS/Styling_text/Styling_lists +translation_of_original: Web/Guide/CSS/Getting_started/Lists +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p>{{ previousPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Content", "内容") }} 这是<a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS入门教程</a> 教程的第10部分; 它将向你描述你如何用CSS来指定列表的外观. 你将创建一个新的包含列表的示例文件，和一个新的定义列表的样式表。</p> + +<h2 class="clearLeft" id="信息_列表">信息: 列表</h2> + +<p>如果你完成了上一节的挑战任务，你就知道如何在列表项前面插入内容。</p> + +<p>CSS为列表提供了专门的属性。如果可以，使用这些属性通常会比较方便。</p> + +<p>使用{{ cssxref("list-style") }} 属性来指定列表项标记的样式。</p> + +<p>你的CSS中的选择器可以选中列表项 (比如, {{ HTMLElement("li") }})。也可以选中列表项的父节点 (比如, {{ HTMLElement ("ul") }})。此时列表项会继承父节点的样式。</p> + +<h3 id="无序列表">无序列表</h3> + +<p>无序列表的每个列表项都用同样的方式标记。</p> + +<p>CSS 有三种标记样式：</p> + +<ul style="padding-left: 2em;"> + <li style="list-style-type: disc;"><code>disc</code></li> + <li style="list-style-type: circle;"><code>circle</code></li> + <li style="list-style-type: square;"><code>square</code></li> +</ul> + +<p>你可以指定一个图片的URL来自定义标记样式。</p> + +<div class="tuto_example"> +<div class="tuto_type">例</div> + +<p>下面的规则为不同类的列表项指定了不同的标记：</p> + +<pre class="brush:css">li.open {list-style: circle;} +li.closed {list-style: disc;} +</pre> + +<p>这些类被用于列表项时，用以区分打开和关闭的列表项 (比如，在一个待办事项列表中)：</p> + +<pre class="brush:css"><ul> + <li class="open">Lorem ipsum</li> + <li class="closed">Dolor sit</li> + <li class="closed">Amet consectetuer</li> + <li class="open">Magna aliquam</li> + <li class="closed">Autem veleum</li> +</ul> +</pre> + +<p>结果：</p> + +<table style="background-color: white; border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td> + <ul style="padding-right: 6em;"> + <li style="list-style-type: circle;">Lorem ipsum</li> + <li style="list-style-type: disc;">Dolor sit</li> + <li style="list-style-type: disc;">Amet consectetuer</li> + <li style="list-style-type: circle;">Magna aliquam</li> + <li style="list-style-type: disc;">Autem veleum</li> + </ul> + </td> + </tr> + </tbody> +</table> +</div> + +<h3 id="有序列表">有序列表</h3> + +<p>在有序列表中，每个列表项都被标记了不同的序号。</p> + +<p>用{{ cssxref("list-style") }} 属性指定标记样式：</p> + +<ul style="padding-left: 2em;"> + <li style=""><code>decimal</code></li> + <li style=""><code>lower-roman</code></li> + <li style=""><code>upper-roman</code></li> + <li style=""><code>lower-latin</code></li> + <li style=""><code>upper-latin</code></li> +</ul> + +<div class="tuto_example"> +<div class="tuto_type">例</div> + +<p>这条规则指定类名包含<span style="font-family: courier new,andale mono,monospace; line-height: normal;">info的</span><span style="line-height: 1.5;">{{ HTMLElement("ol") }} 元素的列表项用大写字母标序</span></p> + +<pre class="brush:css">ol.info {list-style: upper-latin;} +</pre> + +<p>{{ HTMLElement("li") }} 元素继承了ol的样式：</p> + +<table style="background-color: white; border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td> + <ul> + <li style="padding-right: 6em; list-style-type: upper-latin;">Lorem ipsum</li> + <li style="padding-right: 6em; list-style-type: upper-latin;">Dolor sit</li> + <li style="padding-right: 6em; list-style-type: upper-latin;">Amet consectetuer</li> + <li style="padding-right: 6em; list-style-type: upper-latin;">Magna aliquam</li> + <li style="padding-right: 6em; list-style-type: upper-latin;">Autem veleum</li> + </ul> + </td> + </tr> + </tbody> +</table> +</div> + +<div class="tuto_details"> +<div class="tuto_type">更多细节</div> + +<p>{{ cssxref("list-style") }} 属性是一个快捷写法。在复杂的样式表中你可能更希望用单独的属性设置不同的属性值。欲查看这些单独的属性和更详细的CSS指定列表的方法，见 {{ cssxref("list-style") }}参考页。</p> + +<p>如果你使用如HTML这类提供了方便的无序列表<span style="line-height: 1.5;"> ({{ HTMLElement("ul") }}) 和有序列表</span><span style="line-height: 1.5;">({{ HTMLElement("ol") }})</span><span style="line-height: 1.5;">的标记语言，就尽量使用这些标签。当然，你完全可以将 {{ HTMLElement("ul") }} 显示成有序列表，将 {{ HTMLElement("ol") }} 显示成无序列表。</span></p> + +<p>浏览器实现列表样式略有不同。不要奢望样式表可以让列表在所有浏览器中显示的完全一样。</p> +</div> + +<h3 id="计数器">计数器</h3> + +<div style="border: 1px solid red; padding: 6px; margin: 0 0 .5em -6px; width: 100%;"> +<p><strong>注意: </strong> 一些浏览器不支持计数器。<a class="external" href="http://www.quirksmode.org/" style="line-height: 1.5;" title="http://www.quirksmode.org/">Quirks Mode site</a><span style="line-height: 1.5;"> 的</span><a class="external" href="http://www.quirksmode.org/css/contents.html" style="line-height: 1.5;" title="http://www.quirksmode.org/css/contents.html">CSS contents and browser compatibility</a><span style="line-height: 1.5;"> 页有更多这方面的兼容表格可以参考。</span><span style="line-height: 1.5;"> </span><a href="/en-US/docs/Web/Guide/CSS_Reference" style="line-height: 1.5;" title="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS_Reference">CSS Reference</a><span style="line-height: 1.5;"> 也有浏览器兼容性表格。</span></p> +</div> + +<p>你可以用计数器来计数任何元素，不仅是列表元素。比如，在某些文档中你可能想计数标题和段落。</p> + +<p>要想计数，你必须定义一个计数器。</p> + +<p>在计数开始前的某个元素上，设置 {{ cssxref("counter-reset") }}属性以重置计数器。被计数元素的父节点是一个不错的选择。当然，任何出现在被计数元素前面的元素都可以。</p> + +<p>设置每个需要计数的元素的{{ cssxref("counter-increment") }} 属性为你的计数器名。</p> + +<p>通过为选择器增加 {{ cssxref(":before") }} 或 {{ cssxref(":after") }} 并设置 <code>content</code> 属性来显示计数器。 (如上一节所示, <strong><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Content" title="en-US/docs/Web/Guide/CSS/Getting_Started/Content">内容</a></strong>).</p> + +<p>在<code>content属性</code>的值中设置 <code>counter()，</code>在括号内填上计数器的名字。可选的是设置计数器类型。其类型和前面一节 <strong>有序列表 </strong>中相同。</p> + +<p>正常情况下，显示计数器的元素也会递增计数器。</p> + +<div class="tuto_example"> +<div class="tuto_type">例</div> + +<p>这条规则会为每个类名中包含<span style="font-family: courier new,andale mono,monospace; line-height: normal;">numbered的</span><span style="line-height: 1.5;">{{ HTMLElement("h3") }} 元素初始化计数器 mynum：</span></p> + +<pre class="brush:css">h3.numbered {counter-reset: mynum;} +</pre> + +<p> </p> + +<p>这条规则为每个类名包含<span style="font-family: courier new,andale mono,monospace; line-height: normal;">numbered的</span><span style="line-height: 1.5;">{{ HTMLELement("p") }}元素</span><span style="line-height: 1.5;">显示并递增</span><span style="line-height: 1.5;">计数器：</span></p> + +<pre class="brush:css">p.numbered:before { + content: counter(mynum) ": "; + counter-increment: mynum; + font-weight: bold;} +</pre> + +<p>结果：</p> + +<table style="background-color: white; border: 2px outset #36b; padding: .5em 6em .5em 1em;"> + <tbody> + <tr> + <td><strong>Heading</strong> + + <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> + +<div class="tuto_details"> +<div class="tuto_type">更多细节</div> + +<p>除非所有看你文档的人的浏览器都支持计数器，否则你不能使用计数器。</p> + +<p>如果你可以使用计数器，那么你可以单独设置计数器的样式。如上面例子所示：计数器是粗体，但列表不是。</p> + +<p>你还可以用更复杂的方式使用计数器。比如，计数章节, 标题, 子标题以及段落。详见CSS规范中的 <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#counters">Automatic counters and numbering</a> 。</p> +</div> + +<h2 id="实例_设计列表样式">实例: 设计列表样式</h2> + +<p><code><font face="Open Sans, sans-serif"><span style="line-height: 21px;">新建</span></font>doc2.html：</code></p> + +<pre class="brush:html;"><!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <title>Sample document 2</title> + <link rel="stylesheet" href="style2.css"> + </head> + <body> + + <h3 id="oceans">The oceans</h3> + <ul> + <li>Arctic</li> + <li>Atlantic</li> + <li>Pacific</li> + <li>Indian</li> + <li>Southern</li> + </ul> + + <h3 class="numbered">Numbered paragraphs</h3> + <p class="numbered">Lorem ipsum</p> + <p class="numbered">Dolor sit</p> + <p class="numbered">Amet consectetuer</p> + <p class="numbered">Magna aliquam</p> + <p class="numbered">Autem veleum</p> + + </body> +</html> +</pre> + +<p>新建<code>style2.css</code>：</p> + +<pre class="brush:css;">/* numbered paragraphs */ +h3.numbered {counter-reset: mynum;} + +p.numbered:before { + content: counter(mynum) ": "; + counter-increment: mynum; + font-weight: bold; +} +</pre> + +<p>如果布局和注释不符合你的口味，随便改。</p> + +<p>在浏览器中打开。如果你的浏览器支持计数器，你将看到下面的样子。如果不支持，你将看不到数字序号。 (甚至冒号都看不到)：</p> + +<table style="background-color: white; border: 2px outset #36b; padding: 0 6em 1em 1em;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">The oceans</p> + + <ul style=""> + <li>Arctic</li> + <li>Atlantic</li> + <li>Pacific</li> + <li>Indian</li> + <li>Southern</li> + </ul> + + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">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>增加一条规则，用罗马数字i到v计数大洋的名字</p> + +<table style="background-color: white; border: 2px outset #36b; padding: 0 6em 1em 1em;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">The oceans</p> + + <ul style=""> + <li>Arctic</li> + <li>Atlantic</li> + <li>Pacific</li> + <li>Indian</li> + <li>Southern</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p> </p> + +<p>修改样式，将标题用大写字母加括号的方式标序：</p> + +<table style="background-color: white; border: 2px outset #36b; padding: 0 6em 1em 1em;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(A) The oceans</p> + + <p><strong>. . .</strong></p> + + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(B) Numbered paragraphs</p> + + <p><strong>. . .</strong></p> + </td> + </tr> + </tbody> +</table> +</div> + +<p><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Lists" title="en-US/docs/Web/Guide/CSS/Getting started/Challenge solutions#Lists">答案</a></p> + +<h2 id="接下来">接下来?</h2> + +<p>{{ nextPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Boxes", "盒模型") }}浏览器显示你的样例文档，在将元素放置在页面上时，会在元素周围创建空间。下一章节将向你描述如何使用CSS来和元素下的形状一起工作，元素下的形状我们称为<a href="/zh-CN/docs/CSS/%E5%BC%80%E5%A7%8B/Boxes">盒子</a>（<a href="/zh-CN/docs/CSS/%E5%BC%80%E5%A7%8B/Boxes" title="en-US/docs/Web/Guide/CSS/Getting_Started/Boxes">boxes</a>）。</p> + +<p> </p> diff --git a/files/zh-cn/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html b/files/zh-cn/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html new file mode 100644 index 0000000000..67056c679b --- /dev/null +++ b/files/zh-cn/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html @@ -0,0 +1,294 @@ +--- +title: 起步(Javascript 教程) +slug: Web/JavaScript/Getting_Started +tags: + - bug-840092 +translation_of: Learn/Getting_started_with_the_web/JavaScript_basics +translation_of_original: Web/JavaScript/Getting_Started +--- +<h2 id="Why_JavaScript.3F" name="Why_JavaScript.3F">JavaScript是什么?</h2> + +<p>作为一门计算机语言，JavaScript本身强大、复杂，且难于理解。但是，你可以用它来开发一系列的应用程序，它有巨大的潜力来改变当前的互联网现状。下面这个应用程序就是一个很好的例子：<a class="external" href="http://local.google.com/">Google Maps</a>。</p> + +<p>JavaScript（通称为ECMAScript）最大的优势在于，它基于浏览器，但是通过浏览器的支持可以在不同平台上生产出相同结果。 本文举出的例子是 Google Maps，它几乎可以无差别的运行在 Linux、Windows和Mac OS系统中。 伴随大量JavaScript类库的出现，你现在可以用它很轻易的实现文档导航、DOM元素选择、创建动画、处理事件和开发AJAX应用。同其他因各种利益目的而推动的技术不同，JavaScript是一种真正免费并且被广泛采用的跨平台编程语言。</p> + +<h2 id="What_you_should_already_know" name="What_you_should_already_know">你应该知道</h2> + +<p>JavaScript是一种非常容易入门的编程语言。你只需要一个文本编辑器和web浏览器就可以开始进行学习。 </p> + +<p>在使用 JavaScript进行开发的过程中，可能还会涉及很多其他技术，这不在本文讨论的范围之内。 所以，不要期望在学习的第一天就能开发出一个类似 Google maps 这样的应用程序。</p> + +<h2 id="Getting_Started" name="Getting_Started">起步</h2> + +<p>JavaScript的起步非常简单。你不需要进行复杂的程序安装，不需要去了解如何使用shell、打包器或编译器。它是通过浏览器来展示的，你所需要做的全部事情就是把你的代码保存为文本文件，然后再浏览器中打开。就这么简单！</p> + +<p>JavaScript非常适合作为入门级的编程语言。它直观形象，并且教会学生认识到这是一个在实际生活中非常有用的工具。 对比C、C++和 Java等语言会发现有很大不同，它们只对那些专业的软件开发者来说是有价值的。</p> + +<h2 id="Browser_Compatibility_Issues" name="Browser_Compatibility_Issues">浏览器兼容问题</h2> + +<p>不同浏览器在功能实现上有很多不同之处。Mozilla, Microsoft IE, Apple Safari 和 Opera 在行为上有很多差异。 我们计划在此记录这些差异 <a href="/en-US/docs/JavaScript/Compatibility" title="en-US/docs/JavaScript/Compatibility">documenting these variations</a>。你可以使用各种跨平台的JavaScript API接口来解决这些兼容性问题。这些API隐藏了浏览器之间的各种差异，提供了通用性的功能函数来方便调用。</p> + +<h2 id="How_to_try_the_Examples" name="How_to_try_the_Examples">如何运行示例</h2> + +<p>下面的例子都有相同的代码。要执行它们有多种方法，如果你有自己的个人站点，你还可以在站点上把这些例子保存为新的页面。</p> + +<p>如果你没有自己的个人站点，你可以在电脑上把这些例子保存下来，并使用你自己的浏览器来执行它们。这就是JavaScript简单的地方，也是它适合做入门语言的原因。你不需要编译器或者开发环境，你只需要一个浏览器就可以开始起步了。</p> + +<h2 id="Example:_Catching_a_mouse_click" name="Example:_Catching_a_mouse_click">举例：捕获一个鼠标单击事件</h2> + +<p>事件处理 (事件类型、事件注册、冒泡等) 的细节是一个非常宽泛的话题，这个简单的例子并不能说明所有的问题。然而，如果我们不涉及JavaScript事件系统，我们就不能很好展示一个鼠标点击捕获的范例。你只需要记得例子里展示的只是JavaScrpt事件系统里非常表象的一些东西，如果你想要了解更多的内部细节，那你可以去查找更详细的相关资料。</p> + +<p>鼠标事件只是浏览器同用户交互过程中所产生的事件系统里的一个子集。下面列举了一些用户在交互过程中产生的具体的鼠标事件：</p> + +<ul> + <li>Click - 用户点击鼠标时触发</li> + <li>DblClick - 用户双击鼠标时触发</li> + <li>MouseDown - 用户按下鼠标键触发 (click事件前半部分)</li> + <li>MouseUp - 用户释放鼠标键触发 (click事件后半部分)</li> + <li>MouseOut - 当鼠标指针离开对象物理边界时触发</li> + <li>MouseOver - 当鼠标指针进入对象物理边界时触发</li> + <li>MouseMove -当鼠标指针在对象物理边界内移动时触发</li> + <li>ContextMenu - 用户点击鼠标右键时触发</li> +</ul> + +<p>捕获事件并注册处理函数最简单的办法就是使用HTML，你可以把事件当成元素属性来使用。例子：</p> + +<pre class="brush:js"> <span onclick="alert('Hello World!');">Click Here</span></pre> + +<p>要执行的JavaScript代码既可以作为属性值写在行内位置，也可以写成函数并用<script>包裹后放到HTML页面中：</p> + +<pre class="brush:js"><script type="text/javascript"> + function onclick_callback () { + alert ("Hello, World!"); + } +</script> +<span onclick="onclick_callback();">Click Here</span></pre> + +<p>另外，事件对象是可以被捕获和引用，开发者可以通过访问事件对象来获取更多信息，如捕获事件的对象、事件类型、哪个鼠标按键被点击等。我们还用上面的例子来说明：</p> + +<pre class="brush:js"><script type="text/javascript"> + function onclick_callback(event) { + var eType = event.type; + /* the following is for compatability */ + /* Moz populates the target property of the event object */ + /* IE populates the srcElement property */ + var eTarget = event.target || event.srcElement; + + alert( "Captured Event (type=" + eType + ", target=" + eTarget ); + } +</script> +<span onclick="onclick_callback(event);">Click Here</span></pre> + +<p>对于事件的注册和接收还用注意一些的是，你可以给任何使用JavaScript生成的HTMLElement对象做相同的操作。下面的例子展示了一个这样的过程：生成span对象，添加到页面中的body，给span注册mouse-over、mouse-out、mouse-down和 mouse-up事件。</p> + +<pre class="brush:js"><script type="text/javascript"> + function mouseevent_callback(event) { + /* The following is for compatability */ + /* IE does NOT by default pass the event object */ + /* obtain a ref to the event if one was not given */ + if (!event) event = window.event; + + /* obtain event type and target as earlier */ + var eType = event.type; + var eTarget = event.target || event.srcElement; + alert(eType +' event on element with id: '+ eTarget.id); + } + + function onload () { + /* obtain a ref to the 'body' element of the page */ + var body = document.body; + /* create a span element to be clicked */ + var span = document.createElement('span'); + span.id = 'ExampleSpan'; + span.appendChild(document.createTextNode ('Click Here!')); + + /* register the span object to receive specific mouse events */ + span.onmousedown = mouseevent_callback; + span.onmouseup = mouseevent_callback; + span.onmouseover = mouseevent_callback; + span.onmouseout = mouseevent_callback; + + /* display the span on the page */ + body.appendChild(span); +} +</script></pre> + +<p>{{ draft() }}</p> + +<h2 id="Example:_Catching_a_keyboard_event" name="Example:_Catching_a_keyboard_event">举例：捕获一个键盘事件</h2> + +<p>同上面的例子类似，键盘事件捕获也依赖于JavaScript事件系统。当键盘上的键被使用的时候触发键盘事件。</p> + +<p>下面的列表展示了一些具体的键盘事件，同鼠标事件相比是很少的：</p> + +<ul> + <li>KeyPress - 按键被按下并且释放后触发</li> + <li>KeyDown - 按键被按下但是还没有被释放时触发</li> + <li>KeyUp - 按键被释放时触发</li> + <li>TextInput ( Webkit浏览器下可以使用，并且只在输入时有效) - 通过粘贴、语音或者键盘输入文本时触发。本文不介绍该事件。</li> +</ul> + +<p>在一个 <a class="new " href="/en-US/docs/DOM/event/keypress" rel="internal">keypress</a> 事件中，键值的Unicode编码会存储到属性keyCode或者<code><a href="/en-US/docs/DOM/event.charCode" rel="internal">charCode</a></code> 中，但是两者不会同时存在。按键会生成一个字母 (如 'a')，这时会把字母的编码存储到<code>charCode</code> 中，注意这里是区分大小写的( <code>charCode</code> 会判断shift键是否同时被按下)。其他情况下，编码会存储到 <code>keyCode中。</code></p> + +<p>捕获键盘事件最简单的方法仍然是在HTML中注册键盘事件的处理函数，在元素属性中处理相关事件。 举例：</p> + +<pre class="brush:js"> <input type="text" onkeypress="alert ('Hello World!');"></input> +</pre> + +<p>同鼠标事件类似，你的 JavaScript代码既可以写到属性值内，也可以作为函数用<script包裹后写到HTML页面中：</p> + +<pre class="brush:js"><script type="text/javascript"> + function onkeypress_callback () { + alert ("Hello, World!"); + } +</script> + +<input onkeypress="onkeypress_callback();"></input> +</pre> + +<p>捕获事件和引用事件源(一个真实的键被按下时) 的方法同鼠标事件类似：</p> + +<pre class="brush:js"><script type="text/javascript"> + function onkeypress_callback(evt) { + var eType = evt.type; // Will return "keypress" as the event type + var eCode = 'keyCode is ' + evt.keyCode; + var eChar = 'charCode is ' + evt.charCode; + + alert ("Captured Event (type=" + eType + ", key Unicode value=" + eCode + ", ASCII value=" + eChar + ")"); + } +</script> +<input onkeypress="onkeypress_callback(event);"></input></pre> + +<p>要捕获页面上所有的键盘事件，可以在document上注册和绑定相关的处理函数：</p> + +<pre class="brush:js"><script type="text/javascript"> + document.onkeypress = key_event; + document.onkeydown = key_event; + document.onkeyup = key_event; + + function key_event(evt) { + var eType = evt.type; + var eCode = "ASCII code is " + evt.keyCode; + var eChar = 'charCode is ' + evt.charCode; + + alert ("Captured Event (type=" + eType + ", key Unicode value=" + eCode + ", ASCII value=" + eChar + ")"); + } +</script></pre> + +<p>下面是一个完整的键盘事件处理过程：</p> + +<pre class="brush:js"><!DOCTYPE html> +<html> +<head> + <script> + var metaChar = false; + var exampleKey = 16; + function keyEvent(event) { + var key = event.keyCode || event.which; + var keychar = String.fromCharCode(key); + if (key==exampleKey) { metaChar = true; } + if (key!=exampleKey) { + if (metaChar) { + alert("Combination of metaKey + " + keychar) + metaChar = false; + } else { alert("Key pressed " + key); } + } + } + function metaKeyUp (event) { + var key = event.keyCode || event.which; + if (key==exampleKey) { metaChar = false; } + } + </script> +</head> +<body onkeydown="keyEvent(event)" onkeyup="metaKeyUp(event)"> +</body> +</html></pre> + +<h3 id="浏览器_bugs_和_quirks">浏览器 bugs 和 quirks</h3> + +<p>键盘事件中有两个可用的属性<code style="font-style: normal; line-height: 1.5;">keyCode</code><span style="line-height: 1.5;"> 和 </span><code style="font-style: normal; line-height: 1.5;">charCode。通常情况下，</code><code style="font-style: normal; line-height: 1.5;">keyCode</code><span style="line-height: 1.5;"> 指向的是用户按下的键盘上的那个键，而</span><code style="font-style: normal; line-height: 1.5;">charCode</code><span style="line-height: 1.5;"> 存储的是相应键的 ASCII 码值。这两个值不一定相同，如， 小写 'a' 和 大写 'A' 拥有相同的 </span><code style="font-style: normal; line-height: 1.5;">keyCode，因为用户按下的是相同的按键，但是他们的</code><code style="font-style: normal; line-height: 1.5;">charCode不同，因为两个字母的码值不同。</code><span style="line-height: 1.5;"> </span></p> + +<p>不同浏览器对于charCode的处理方式并不统一。例如Internet Explorer 和Opera 并不支持 <code>charCode，他们把字母信息写到了</code><code>keyCode</code>中，而且只在 onkeypress下有效。在 Onkeydown 和Onkeyup的事件中， <code>keyCode</code> 存储的仍然是按键的相关信息。 Firefox 则使用 "which", 来区分字母。.</p> + +<p>可以到 Mozilla 文档 <a href="/en-US/docs/DOM/Event/UIEvent/KeyboardEvent" title="https://developer.mozilla.org/en-US/docs/DOM/Event/UIEvent/KeyEvent">Keyboard Events</a> 去了解关于键盘事件的更多信息。.</p> + +<p>{{ draft() }}</p> + +<h2 id="Example:_Dragging_images_around" name="Example:_Dragging_images_around">举例：拖曳图片</h2> + +<p>下面的例子展示了firefox浏览器下如何实现拖动图片：</p> + +<pre class="brush:js"><!DOCTYPE html> +<html> +<head> +<style type='text/css'> +img { position: absolute; } +</style> + +<script type='text/javascript'> +window.onload = function() { + + movMeId=document.getElementById("ImgMov"); + movMeId.style.top = "80px"; + movMeId.style.left = "80px"; + movMeId.style.position = "absolute"; + + document.onmousedown = coordinates; + document.onmouseup=mouseup; + + function coordinates(e) { + if (e == null) { e = window.event;} + var sender = (typeof( window.event ) != "undefined" ) ? e.srcElement : e.target; + + if (sender.id=="ImgMov") { + mouseover = true; + pleft = parseInt(movMeId.style.left); + ptop = parseInt(movMeId.style.top); + xcoor = e.clientX; + ycoor = e.clientY; + document.onmousemove=moveImage; + return false; + } else { + return false; + } + } + + function moveImage(e) { + if (e == null) { e = window.event; } + movMeId.style.left = pleft+e.clientX-xcoor+"px"; + movMeId.style.top = ptop+e.clientY-ycoor+"px"; + return false; + } + + function mouseup(e) { + document.onmousemove = null; + } +} +</script> +</head> + +<body> + <img id="ImgMov" src="http://mozcom-cdn.mozilla.net/img/covehead/about/logo/download/logo-only.png" width="64" height="64"/> + <p>Drag and drop around the image in this page.</p> +</body> + +</html></pre> + +<h2 id="Example:_Resizing_things" name="Example:_Resizing_things">举例：改变大小</h2> + +<div>{{todo("Need Content. Or, remove headline")}}</div> + +<h3 id="Example:_Drawing_Lines" name="Example:_Drawing_Lines">举例：绘制直线</h3> + +<div class="originaldocinfo"> +<h2 id="Original_Document_Information" name="Original_Document_Information">附加文档信息</h2> + +<ul> + <li>作者: <a class="external" href="http://linuxmachines.com/">Jeff Carr</a></li> + <li>Here is a attempt at a new <a href="/en-US/docs/javascript_new_testpage" title="en-US/docs/javascript_new_testpage">JavaScript new testpage</a></li> + <li>最后修改: July 14 2005</li> + <li>版权信息: © 2005 by individual contributors; content available under the <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">Creative Commons license</a></li> +</ul> +</div> + +<p> </p> diff --git a/files/zh-cn/conflicting/learn/html/introduction_to_html/creating_hyperlinks/index.html b/files/zh-cn/conflicting/learn/html/introduction_to_html/creating_hyperlinks/index.html new file mode 100644 index 0000000000..fd51ef502f --- /dev/null +++ b/files/zh-cn/conflicting/learn/html/introduction_to_html/creating_hyperlinks/index.html @@ -0,0 +1,86 @@ +--- +title: Email links +slug: Web/Guide/HTML/Email_links +tags: + - HTML5 + - SEO + - a + - email link + - mailto +translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#E-mail_links +translation_of_original: Web/Guide/HTML/Email_links +--- +<p>这往往是有益的Web站点能够创建链接或按钮，点击后，打开一个新的出站电子邮件。例如，这可能会创造一个“联系我们”按钮时使用。这是使用完成<span class="seoSummary">{{HTMLElement("a")}} </span>元素和mailto URL方案。<span class="seoSummary">.</span></p> + +<h2 id="Mailto_基础">Mailto 基础</h2> + +<p>以它最基础和最常用的形式，一个<code>mailto</code>链接仅简单的指明目标收件人的邮箱地址。例如：</p> + +<pre class="brush: html"><a href="mailto:nowhere@mozilla.org">Send email to nowhere</a> + +Complete examples detail: + +<a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com +&amp;subject=The%20subject%20of%20the%20email +&amp;body=The%20body%20of%20the%20email"> +Send mail with cc, bcc, subject and body</a></pre> + + + +<p>这导致链接看起来像这样: <a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>.</p> + +<p>事实上, 目标收件人邮件地址都是可选的。 如果你不添加它 (也就是，你的{{htmlattrxref("href", "a")}} 是简单的 "mailto:")，用户的邮件客户端将打开一个新的外发电子邮件窗口，该窗口尚未指定目标地址。这通常非常有用，因为用户可以单击“共享”链接以将电子邮件发送到他们选择的地址。</p> + +<h2 id="指定细节">指定细节</h2> + +<p>除了电子邮件地址，您还可以提供其他信息。事实上, 任何标准的邮件头字段都可以添加到您提供的<code>mailto</code> URL中。 最广泛使用的是： "subject", "cc", and "body" (这不是真正的标题字段，但允许您为新电子邮件指定简短内容消息). 每个字段及其值都被指定为一个查询字词（query term）。</p> + +<div class="blockIndicator note"> +<dl> + <dt>译者注：</dt> +</dl> + +<ul> + <li>`subject`：主题</li> + <li>`cc`：抄送到次要收件人（与邮件有关但无需做出应答的个人或组织）</li> + <li> `bcc`：密送到其他收件人。主要、次要收件人不应该获得密送收件人的身份。</li> + <li>`body`：邮件内容</li> +</ul> +</div> + +<div class="note"> +<p><strong>Note:</strong> 每个字段的值都必须进行编码 (也就是, 带有非印刷字符和空格 <a href="http://en.wikipedia.org/wiki/Percent-encoding">percent-escaped</a>).</p> +</div> + +<h3 id="样品mailto_网址">样品mailto 网址</h3> + +<p>这有一些有关<code> mailto</code> 的示例链接:</p> + +<ul> + <li><a href="mailto:">mailto:</a></li> + <li><a href="mailto:nowhere@mozilla.org">mailto:nowhere@mozilla.org</a></li> + <li><a href="mailto:nowhere@mozilla.org,nobody@mozilla.org">mailto:nowhere@mozilla.org,nobody@mozilla.org</a></li> + <li><a href="mailto:nowhere@mozilla.org?cc=nobody@mozilla.org">mailto:nowhere@mozilla.org?cc=nobody@mozilla.org</a></li> + <li><a href="mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&subject=This%20is%20the%20subject">mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&subject=This%20is%20the%20subject</a></li> +</ul> + +<p>请注意，使用＆符号来分隔mailto URL中的每个字段。这是标准的URL查询表示法。</p> + +<h3 id="例子">例子</h3> + +<p>如果您想创建一封要求订阅新闻通讯的外发电子邮件, 您可能会使用一个 <code>mailto链接，像这样</code>:</p> + +<pre class="brush: html"><a href="mailto:nowhere@mozilla.org?subject=Newsletter%20subscription%20request&body=Please%20subscribe%20me%20to%20your%20newsletter!%0A%0AFull%20name%3A%0A%0AWhere%20did%20you%20hear%20about%20us%3F"> +Subscribe to our newsletter +</a></pre> + +<p>结果链接看起来像这样: <a href="mailto:nowhere@mozilla.org?subject=Newsletter%20subscription%20request&body=Please%20subscribe%20me%20to%20your%20newsletter!%0A%0AFull%20name%3A%0A%0AWhere%20did%20you%20hear%20about%20us%3F">Subscribe to our newsletter</a>.</p> + +<section id="Quick_Links"> +<ol> + <li>{{HTMLElement("a")}}</li> + <li>{{RFC(6068, "The 'mailto' URI Scheme")}}</li> + <li>{{RFC(5322, "Internet Message Format")}}</li> + <li><a href="http://www.url-encode-decode.com/">URL encode/decode online</a></li> +</ol> +</section> diff --git a/files/zh-cn/conflicting/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/zh-cn/conflicting/learn/html/multimedia_and_embedding/video_and_audio_content/index.html new file mode 100644 index 0000000000..f1ebacd184 --- /dev/null +++ b/files/zh-cn/conflicting/learn/html/multimedia_and_embedding/video_and_audio_content/index.html @@ -0,0 +1,275 @@ +--- +title: 使用 HTML5 音频和视频 +slug: Web/Guide/HTML/Using_HTML5_audio_and_video +tags: + - Flash + - HTML + - HTML5 + - Media + - Ogg + - Web + - 媒体 + - 指南 + - 概述 + - 特性 + - 范例 + - 视频 + - 音频 +translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content +translation_of_original: Web/Guide/HTML/Using_HTML5_audio_and_video +--- +<p>HTML5 通过HTML标签“audio”和“video”来支持嵌入式的媒体，使开发者能够方便地将媒体嵌入到HTML文档中。</p> + +<h2 id="嵌入媒体">嵌入媒体</h2> + +<p>在HTML中嵌入媒体：</p> + +<div style="overflow: hidden;"> +<pre class="brush: html"><video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls> + 你的浏览器不支持 <code>video</code> 标签. +</video></pre> + +<p>这个例子展示了一个带有回放控制器的可播放视频，视频来源于Theora网站。</p> + +<p>下面是一个将音频<span style="font-size: 14.3999996185303px; line-height: 16.7999992370605px;">嵌入</span>到HTML文档的例子。</p> + +<pre class="brush: html"><audio src="/test/audio.ogg"> +你的浏览器不支持audio标签 +</audio></pre> +</div> + +<p>src属性可以设置为一个音频文件的URL或者本地文件的路径。</p> + +<div style="overflow: hidden;"> +<pre class="brush: html"><audio src="audio.ogg" controls autoplay loop> +你的浏览器不支持audio标签 +</audio></pre> +</div> + +<p>这个例子的代码中使用了HTML的“audio”元素的一些属性：</p> + +<ul> + <li><code>controls</code> : 为网页中的音频显示标准的HTML5控制器。</li> + <li><code>autoplay</code> : 使音频自动播放。</li> + <li><code>loop</code> : 使音频自动重复播放。</li> +</ul> + +<div style="overflow: hidden;"> +<pre class="brush: html"><audio src="audio.mp3" preload="auto" controls></audio></pre> +</div> + +<p>preload属性用来缓冲audio元素的大文件，有三个属性值可供设置：</p> + +<ul> + <li><code>"none"</code> 不缓冲文件</li> + <li><code>"auto"</code> 缓冲音频文件</li> + <li><code>"metadata"</code> 仅仅缓冲文件的元数据</li> +</ul> + +<p>可以用 {{ HTMLElement("source") }} 标签来指定多个文件，以为不同浏览器提供可支持的编码格式。例如：</p> + +<pre class="brush: html"><video controls> + <source src="foo.ogg" type="video/ogg"> + <source src="foo.mp4" type="video/mp4"> + Your browser does not support the <code>video</code> element. +</video> +</pre> + +<p>当浏览器支持Ogg格式的时候， 该代码会播放Ogg文件。 如果浏览器不支持Ogg，浏览器会播放MPEG-4 file。参见列表 <a href="https://developer.mozilla.org/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements">audio和video元素支持的媒体格式</a> 来查看不同浏览器对视频音频编码格式的支持情况。</p> + +<p>你也可以指定视频文件需要的视频编解码器的值；这样允许浏览器做出更加正确的决定：</p> + +<pre class="brush: html"><video controls> + <source src="foo.ogg" type="video/ogg; codecs=dirac, speex"> + Your browser does not support the <code>video</code> element. +</video></pre> + +<p>在这里，我们指定video标签使用Dirac和Speex的视频编解码器。如果浏览器支持Ogg，但是不支持指定的编解码器，则视频不会被加载。</p> + +<p>如果类型属性没有被指定，媒体类型将返回至服务器然后检查浏览器是否可以解决；如果不能被执行，就检查下一个来源。如果没有任何一个指定的来源元素可以使用，则分派一个错误事件给video标签。如果指定了类型属性，那么将会与浏览器能够播放的类型做对比，如果其没有被识别，甚至不会被向服务器发出询问；相反，下一个来源会被同时检查。</p> + +<p>点击 <a href="https://developer.mozilla.org/en-US/docs/DOM/Media_events">媒体事件</a> 来查看完整的媒体回放事件列表。要查看不同浏览器支持的媒体格式的详细信息， 点击 <a href="https://developer.mozilla.org/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements">Media formats supported by the audio and video elements.</a></p> + +<h2 id="媒体回放控制">媒体回放控制</h2> + +<p>当你已经用新的元素将媒体嵌入 HTML 文档以后，你就可以用 JavaScript 代码 采用编程的方式来控制它们。比如说，如果你想（重新）开始播放，可以写如下的代码：</p> + +<pre class="brush: js">var v = document.getElementsByTagName("video")[0]; +v.play(); +</pre> + +<p>头一行是取得当前文档中第一个视频元素，下一行调用了该元素的 <a href="/en-US/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement#play()" title="nsIDOMHTMLMediaElement#play()"><code>play()</code></a> 方法， 这一方法在实现媒体元素的接口中定义。</p> + +<p>控制一个 HTML5 音频播放器的播放、暂停、增减音量等则直接了当：</p> + +<pre class="brush: html"><audio id="demo" src="audio.mp3"></audio> +<div> + <button onclick="document.getElementById('demo').play()">播放声音</button> + <button onclick="document.getElementById('demo').pause()">暂停声音</button> + <button onclick="document.getElementById('demo').volume+=0.1">提高音量</button> + <button onclick="document.getElementById('demo').volume-=0.1">降低音量</button> +</div> +</pre> + +<h2 id="终止媒体下载">终止媒体下载</h2> + +<p>停止媒体播放很简单，只要调用 pause() 方法即可，然而浏览器还会继续下载媒体直至媒体元素被垃圾回收机制回收。</p> + +<p>以下是即刻停止媒体下载的方法：</p> + +<pre class="brush: js">var mediaElement = document.getElementById("myMediaElementID"); +mediaElement.pause(); +mediaElement.src=''; +//or +mediaElement.<code>removeAttribute("src");</code> +</pre> + +<p>通过移除媒体元素的 <code>src</code> 属性（或者直接将其设为一个空字符串——这取决于具体浏览器）， 你可以摧毁该元素的内部解码，从而结束媒体下载。removeAttribute() 操作并不干净， 而将<video>元素的 'src' 属性设为空字符串可能会引起我们不想要的请求（Mozilla Firefox 22）。</p> + +<p> </p> + +<h2 id="在媒体中查找">在媒体中查找</h2> + +<p>媒体元素支持在媒体的内容中从当前播放位置移到某个特定点。 这是通过设置元素的属性<code>currentTime的值来达成的；有关元素属性的详细信息请看</code>{{ domxref("HTMLMediaElement") }} 。 简单的设置那个你希望继续播放的以秒为单位时间值。</p> + +<p>你可以使用元素的属性seekable来决定媒体目前能查找的范围。它返回一个你可以查找的{{ domxref("TimeRanges") }} 时间对象。</p> + +<pre class="brush: js">var mediaElement = document.getElementById('mediaElementID'); +mediaElement.seekable.start(); // 返回开始时间 (in seconds) +mediaElement.seekable.end(); // 返回结束时间 (in seconds) +mediaElement.currentTime = 122; // 设定在 122 seconds +mediaElement.played.end(); // 返回浏览器播放的秒数 +</pre> + +<h2 id="标记播放范围">标记播放范围</h2> + +<p><font face="Consolas"><font color="#4d4e53">在给一个<audio>或者<video>元素标签</font>指定媒体的URI的时候，你可以选择性地加入一些额外信息来指定媒体将要播放的部分。要这样做的话，需要附加一个哈希标志("#")，后面跟着媒体片段的描述。</font></p> + +<p><font face="Consolas">一条指定时间范围的语句：</font></p> + +<pre>#t=[starttime][,endtime]</pre> + +<p>时间值可以被指定为秒数（如浮点数）或者为以冒号分隔时/分/秒格式（像2小时5分钟1秒表示为2:05:01）。</p> + +<p>一些例子：</p> + +<dl> + <dt><span class="nowiki">http://foo.com/video.ogg#t=10,20</span></dt> + <dd>指定视频播放范围为从第10秒到第20秒.</dd> + <dt><span class="nowiki">http://foo.com/video.ogg#t=,10.5</span></dt> + <dd>指定视频从开始播放到第10.5秒.</dd> + <dt><span class="nowiki">http://foo.com/video.ogg#t=,02:00:00</span></dt> + <dd>指定视频从开始播放到两小时.</dd> + <dt><span class="nowiki">http://foo.com/video.ogg#t=60</span></dt> + <dd>指定视频从第60秒播放到结束.</dd> +</dl> + +<div class="note"> +<p>媒体元素URI中播放范围部分的规范已被加入到 Gecko 9.0 {{ geckoRelease("9.0") }}. 当下, 这是Geoko <a class="external" href="http://www.w3.org/TR/media-frags/" title="http://www.w3.org/TR/media-frags/">Media Fragments URI specification</a> 唯一实现的部分，并且只有是在非地址栏给媒体元素指定来源时才可使用。</p> +</div> + +<h2 id="备选项">备选项</h2> + +<p>在HTML之间，例如，不支持HTML5媒体的浏览器可以处理媒体元素的开始和结束标记.你可以利用这一点给这些浏览器添加一些备项。</p> + +<p>此节给视频提供了两个可能的备选项，在各种情况下，如果浏览器支持HTML5视频，它就会被使用，否则，会使用备选项。</p> + +<h3 id="使用Flash">使用Flash</h3> + +<p>{{ HTMLElement("video") }} <font color="#4d4e53">标签</font>不被支持时可以使用Flash播放Flash格式的影像。</p> + +<pre class="brush: html"><video src="video.ogv" controls> + <object data="flvplayer.swf" type="application/x-shockwave-flash"> + <param value="flvplayer.swf" name="movie"/> + </object> +</video></pre> + +<p>注意不要在object标签中加入class、id以兼容IE以外的浏览器。</p> + +<h3 id="使用Java_小程序播放Ogg视频">使用Java 小程序播放Ogg视频</h3> + +<p>这里有一个名为Cortado的Java小程序，在不支持HTML5视频的浏览器你可以用它作为备选项来播放Ogg视频:</p> + +<pre class="brush: html"><video src="my_ogg_video.ogg" controls width="320" height="240"> + <object type="application/x-java-applet" width="320" height="240"> + <param name="archive" value="cortado.jar"> + <param name="code" value="com.fluendo.player.Cortado.class"> + <param name="url" value="my_ogg_video.ogg"> + <p>You need to install Java to play this file.</p> + </object> +</video></pre> + +<p>如果你没有给cortado object元素创建一个备用的子元素，像上面的 {{ HTMLElement("p") }} 元素，没有安装java的Firfox3.5设备就会错误的通知用户需要安装一个插件才能查看页面内容.</p> + +<p>{{ h1_gecko_minversion("错误处理", "2.0") }}</p> + +<p>Geocko2.0首发{{ geckoRelease("2.0") }}, 错误处理已经被修订符合HTML5的最新版规范。 取缔把错误事件发送给媒体元素自生的方式，现在把它交付给子代中的 {{ HTMLElement("source") }}元素对应导致错误的来源。</p> + +<p>这使你可以查到是哪个资源加载失败，哪个是可用的。</p> + +<pre class="brush: html"><video> +<source id="mp4_src" + src="video.mp4" + type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> +</source> +<source id="3gp_src" + src="video.3gp" + type='video/3gpp; codecs="mp4v.20.8, samr"'> +</source> +<source id="ogg_src" + src="video.ogv" + type='video/ogg; codecs="theora, vorbis"'> +</source> +</video></pre> + +<p>由于专利限制，Firefox不支持MP4和3GP，ID为“mp4_src"和"3gp_src"的 {{ HTMLElement("source") }} 元素在Ogg资源加载之前将会接收到错误事件。这些资源会根据出现的顺序尝试被加载，一旦有一个资源加载成功，剩下的资源就不会被加载。</p> + +<h3 id="没有资源加载成功时的检测">没有资源加载成功时的检测</h3> + +<p>检测是否所有的子{{ HTMLElement("source") }} 元素都加载失败，检查媒体元素的networkState属性值。如果值为HTMLMediaElement.NETWORK_NO_SOURCE，就可以知道所以的资源都加载失败了。</p> + +<p>如果这时你通过插入一个新的 {{ HTMLElement("source") }} 元素作为媒体元素的子元素的方法添加一个新资源，Gecko会尝试加载指定的资源。</p> + +<h3 id="没有资源可用时显示备用内容">没有资源可用时显示备用内容</h3> + +<p>另一个显示视频的备用内容的方法是在最后一个source元素上增加一个错误处理器。</p> + +<pre class="brush: html"><video controls> + <source src="dynamicsearch.mp4" type="video/mp4"></source> + <a href="dynamicsearch.mp4"> + <img src="dynamicsearch.jpg" alt="Dynamic app search in Firefox OS"> + </a> + <p>Click image to play a video demo of dynamic app search</p> +</video> + +</pre> + +<pre class="brush: js">var v = document.querySelector('video'), + sources = v.querySelectorAll('source'), + lastsource = sources[sources.length-1]; +lastsource.addEventListener('error', function(ev) { + var d = document.createElement('div'); + d.innerHTML = v.innerHTML; + v.parentNode.replaceChild(d, v); +}, false); +</pre> + +<h2 id="相关文章">相关文章</h2> + +<ul> + <li>The media-related HTML elements: {{ HTMLElement("audio") }}, {{ HTMLElement("video") }}, {{ HTMLElement("source") }};</li> + <li><a href="/en-US/docs/Manipulating_video_using_canvas" title="Manipulating video using canvas">Manipulating video using canvas</a></li> + <li><a href="/en-US/docs/Introducing_the_Audio_API_Extension" title="Introducing the Audio API Extension">Introducing the Audio API Extension</a></li> + <li>{{ interface("nsIDOMHTMLMediaElement") }}</li> + <li><a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements" title="Media formats supported by the audio and video elements">Media formats supported by the audio and video elements</a></li> + <li><a class="external" href="http://en.flossmanuals.net/ogg-theora/" title="http://en.flossmanuals.net/ogg-theora/">Theora Cookbook</a></li> + <li><a class="external" href="http://popcornjs.org/" title="http://popcornjs.org/">Popcorn.js - The HTML5 Media Framework</a></li> + <li><a class="external" href="http://www.html5video.org/kaltura-html5/" title="http://www.html5video.org/kaltura-html5/">Kaltura Video Library Solution</a>, a JavaScript library (mwEmbed) which supports a seamless fallback with HTML5, VLC Player, Java Cortado and OMTK Flash Vorbis player. (It is used by Wikimedia)</li> + <li><a class="external" href="http://omtk.org/flash/index.html" title="http://omtk.org/flash/index.html">OMTK - Flash</a>, a Flash library which implements a Vorbis decoder</li> + <li><a class="external" href="http://www.projekktor.com" title="http://www.projekktor.com">Projekktor Player</a>, a JavaScript wrapper for audio- and video-tags with flash fallback, open source, GPL</li> + <li><a class="external" href="http://www.theora.org/cortado/" title="http://www.theora.org/cortado/">Applet Cortado</a>, an audio/video playback solution in Java maintained by Xiph.org</li> + <li><a class="external" href="http://videojs.com" title="Video.js HTML5 Video Player">Video.JS</a>, an open source HTML5 video player and framework.</li> + <li><a class="external" href="http://mediaelementjs.com/" title="http://mediaelementjs.com/">MediaElement.js</a> - open source HTML5 audio/video framework with a custom Flash shim that mimic HTML5 media API for older browsers.</li> + <li><a class="external" href="http://www.hdwebplayer.com" title="http://www.hdwebplayer.com">Flv Player</a> - HTML5 fallback support video player</li> + <li><a href="/en-US/docs/DASH_Adaptive_Streaming" title="/en-US/docs/DASH_Adaptive_Streaming">DASH - Dynamic Adaptive Streaming over HTTP</a> - for HTML5 video</li> +</ul> diff --git a/files/zh-cn/conflicting/learn/index.html b/files/zh-cn/conflicting/learn/index.html new file mode 100644 index 0000000000..9e2e40d682 --- /dev/null +++ b/files/zh-cn/conflicting/learn/index.html @@ -0,0 +1,172 @@ +--- +title: 如何建设一个网站 +slug: Learn/tutorial/How_to_build_a_web_site +translation_of: Learn +translation_of_original: Learn/tutorial/How_to_build_a_web_site +--- +<p> 当我们在学习网页设计时，许多人都希望尽快建设一个属于自己的网站。为了让你建站之路更平坦，我们已经缩小了你所需要的最低限度的知识。</p> + +<p>我们建议你先从这儿的文章开始 ，认真学习它们，如果你在学习中有关术语的问题，请用我们的<a href="/en-US/docs/Glossary">词汇表</a>.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="row" style="text-align: center;"> </th> + <th scope="col" style="text-align: center;">理论<br> + 知识</th> + <th scope="col" style="text-align: center;">技术<br> + 知识</th> + <th scope="col" style="text-align: center;">实践<br> + 知识</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row" style="text-align: center;">1</th> + <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/Thinking_before_coding">开始你的web项目</a></strong><br> + <em>在这篇文章中我们首先讨论了在任何一个项目中你所必要的一步：确定你要完成什么和为什么.</em></td> + <td style="vertical-align: top;"> </td> + <td style="vertical-align: top;"> </td> + </tr> + <tr> + <th scope="row" style="text-align: center;">2</th> + <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/How_the_Internet_works">英特网是如何工作的</a></strong><br> + <em>这篇文章将为你解释什么是英特网以及它是如何工作的。</em></td> + <td style="vertical-align: top;"> </td> + <td style="vertical-align: top;"> </td> + </tr> + <tr> + <th scope="row" style="text-align: center;">3</th> + <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/page_vs_site_vs_server_vs_search_engine"> 了解网页、网站、服务器、以及搜索引擎之间的不同</a></strong></td> + <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/What_is_a_web_server">网络服务器是什么?</a></strong><br> + <em>在这篇文章中，我们将要论述什么是网络服务器，它们是如何运作的以及它们为什么如此重要.</em></td> + <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/What_software_do_I_need">我们需要什么软件（它们用来干什么）?</a></strong><br> + <em>在文中我们将要介绍你在编辑网页，上传文件，以及管理网站中你需要什么软件。</em></td> + </tr> + <tr> + <th scope="row" style="text-align: center;">4</th> + <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/Understanding_links_on_the_web">了解网络上的链接</a></strong><br> + <em>在文章中, 我们将详细的论述网络链接, 这个在万维网中相当重要的一个角色.</em></td> + <td style="vertical-align: top;"> </td> + <td style="vertical-align: top;"> </td> + </tr> + <tr> + <th scope="row" style="text-align: center;">5</th> + <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/Understanding_URLs">了解URLs以及它们的构成</a></strong><br> + <em>在这篇文章中，我们将介绍URLs是什么（同一资源定位器）以及它们是如何构成的。</em></td> + <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/Understanding_domain_names">认识域名</a></strong><br> + <em>在这篇文章中，我们将对域名留下深刻印象：域名是什么，它们如何构成，以及怎样获取一个域名。</em></td> + <td style="vertical-align: top;"> </td> + </tr> + <tr> + <th scope="row" style="text-align: center;">6</th> + <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/Anatomy_of_a_web_page">剖析一个网页</a></strong><br> + <em>当你在做你自己的网站时，你最好知道一些普通的设计</em>.</td> + <td style="vertical-align: top;"> </td> + <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/How_much_does_it_cost">在网上做些什么花费多少钱？</a></strong><br> + <em>涉及到互联网的东西并不像它看起来那么便宜。在文中我们将论述你可能花费多少钱以及为什么。</em></td> + </tr> + <tr> + <th scope="row" style="text-align: center;">7</th> + <td style="vertical-align: top;"><a href="/en-US/docs/Learn/The_basics_of_web_design">设计之外，基础的网页设计</a></td> + <td style="vertical-align: top;"> </td> + <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/Choose,_Install_and_set_up_a_text_editor">选择下载安装一个编辑器</a></strong><br> + <em>在这篇文章中，我们强调一些事情关于下载安装编译器用于网站开发。</em></td> + </tr> + <tr> + <th scope="row" style="text-align: center;">8</th> + <td style="vertical-align: top;"> </td> + <td style="vertical-align: top;"> </td> + <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/Set_up_a_basic_working_environment">创建一个基本的工作环境</a></strong><br> + <em>这篇文章让你用工作站建立你的网站</em></td> + </tr> + <tr> + <th scope="row" style="text-align: center;">9</th> + <td style="vertical-align: top;"> </td> + <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/HTML/Write_a_simple_page_in_HTML">用HTML写一个简单的网页</a></strong><br> + <em>学习如何创造一个简单的网页。</em></td> + <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/Open_a_file_in_a_browser">打开文件在你的浏览器中r</a></strong><br> + <em>这篇文章讲解了在浏览器中通过各种方式接入文件，以及这种正确的方式为什么如此重要。</em></td> + </tr> + <tr> + <th scope="row" style="text-align: center;">10</th> + <td style="vertical-align: top;"> </td> + <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/HTML/HTML_tags">什么是HTML标签&如何使用它们</a></strong><br> + <em>这篇文章包含了 <a class="glossaryLink" href="https://developer.mozilla.org/en-US/docs/Glossary/HTML" title="HTML: The HyperText Markup Language (HTML) is a descriptive language specifically designed to structure web pages.">HTML</a> 基础:什么是标签以及如何使用它们。</em></td> + <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/Upload_files_to_a_web_server">上传文件到服务器</a></strong><br> + <em>本文介绍了如何使用FTP工具发布你的网站</em></td> + </tr> + <tr> + <th scope="row" style="text-align: center;">11</th> + <td style="vertical-align: top;"> </td> + <td style="vertical-align: top;"> </td> + <td style="vertical-align: top;"> + <p><strong><a href="/en-US/docs/Learn/Checking_that_your_web_site_is_working_properly">检查你的网站是否工作正常</a></strong><br> + <em>本指南概述了一些找到并修复常见错误的策略</em></p> + </td> + </tr> + </tbody> +</table> + +<p>这些是都是你需要的第一个网站学习的基本知识，但如果你想做出更高端更专业的网站，请继续往下读：</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="row" style="text-align: center;"> </th> + <th scope="col" style="text-align: center;">理论<br> + 知识</th> + <th scope="col" style="text-align: center;">技术<br> + 知识</th> + <th scope="col" style="text-align: center;">实践<br> + 知识</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row" style="text-align: center;">12</th> + <td><a href="/en-US/docs/Learn/What_do_people_need_for_viewing_my_website">人们需要什么才能查看你的网站</a></td> + <td> </td> + <td> </td> + </tr> + <tr> + <th scope="row" style="text-align: center;">13</th> + <td> </td> + <td><strong><a href="/en-US/docs/Learn/CSS/Using_CSS_in_a_web_page">在你的网页中使用CSS</a></strong><br> + <em>本文将介绍如何使用CSS样式表来改变你的网页样式</em></td> + <td> </td> + </tr> + <tr> + <th scope="row" style="text-align: center;">14</th> + <td><strong><a href="/en-US/docs/Learn/What_is_accessibility">什么是无障碍性网页</a></strong><br> + <em>本文介绍了无障碍性网页背后的基本概念。</em></td> + <td><strong><a href="/en-US/docs/Learn/CSS/CSS_properties">什么是CSS属性以及该如何使用它们</a></strong><br> + <em>CSS特性应该如何使用。本文介绍了图和使用CSS属性选择器应用HTML元素</em></td> + <td> </td> + </tr> + <tr> + <th scope="row" style="text-align: center;">15</th> + <td><strong><a href="/en-US/docs/Learn/Design_for_all_types_of_users_101">为各类用户设计101</a></strong><br> + <em>本文提供了基本的无障碍性网站技巧</em></td> + <td> + <p><strong><a href="/en-US/docs/Learn/CSS/Basic_text_styling_in_CSS">CSS基本的文字排版</a></strong><br> + <em>最常见的CSS属性概述</em></p> + </td> + <td> </td> + </tr> + <tr> + <th scope="row" style="text-align: center;">16</th> + <td> </td> + <td><a href="/en-US/docs/Learn/Using_images">使用图片</a></td> + <td> </td> + </tr> + <tr> + <th scope="row" style="text-align: center;">17</th> + <td><a href="/en-US/docs/Learn/Common_pitfalls_to_avoid_in_web_design">避开在网页设计中的常见陷阱</a></td> + <td><a href="/en-US/docs/Learn/Basics_of_UX_Design">用户体验（UX）基础</a></td> + <td><a href="/en-US/docs/Learn/Design_of_navigation_menus">设计导航菜单</a></td> + </tr> + </tbody> +</table> + +<p> </p> diff --git a/files/zh-cn/conflicting/learn/javascript/client-side_web_apis/manipulating_documents/index.html b/files/zh-cn/conflicting/learn/javascript/client-side_web_apis/manipulating_documents/index.html new file mode 100644 index 0000000000..1f53ff70ba --- /dev/null +++ b/files/zh-cn/conflicting/learn/javascript/client-side_web_apis/manipulating_documents/index.html @@ -0,0 +1,172 @@ +--- +title: JavaScript 与 CSS +slug: Web/Guide/CSS/Getting_started/JavaScript +translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents +translation_of_original: Web/Guide/CSS/Getting_started/JavaScript +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p>本文是 <a href="/en/CSS/Getting_Started" title="https://developer.mozilla.org/en/CSS/Getting_Started">CSS tutorial</a> 第二部分的第一章节。第二部分的内容主要是一些css和其他web技术的使用范例。 </p> + +<p>第二部分的内容主要来向你展示CSS是如何同其他技术进行交互的。但是这样做的目的并不是教你如何使用这些技术，如果你想深入学习，可以查找具体的文档。</p> + +<p>换句话说，这些页面是用来向你展示CSS的多种用途的。通过这些页面，你不需要掌握其他技术就可以获取到很多CSS的相关知识。</p> + +<p>上一章 (Part I)： <a href="/en/CSS/Getting_Started/Media" title="https://developer.mozilla.org/en/CSS/Getting_Started/Media">Media</a><br> + 下一章： <a href="/en/CSS/Getting_Started/SVG_graphics" title="https://developer.mozilla.org/en/CSS/Getting_Started/SVG_graphics">SVG</a></p> + +<h3 id="Information:_JavaScript" name="Information:_JavaScript">相关知识： JavaScript</h3> + +<p>JavaScript是一种编程语言，它被广泛用来实现web站点和应用中的交互效果。</p> + +<p>JavaScript可以同样式进行交互，你可以通过编写程序来动态改变文档上元素的样式。 </p> + +<p>有三种方法可以实现这样的效果：</p> + +<ul> + <li>控制样式表—可以添加、删除、修改样式表。</li> + <li>控制样式规则—可以添加、删除、修改样式规则。</li> + <li>控制DOM中的单个元素—可以不依赖样式表来修改元素样式。</li> +</ul> + +<table style="background-color: #f4f4f4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em; width: 100%;"> + <caption>更多细节</caption> + <tbody> + <tr> + <td>要了解 JavaScript的更多细节，可以到这个wiki <a href="/en/JavaScript" title="en/JavaScript">JavaScript</a> 。</td> + </tr> + </tbody> +</table> + +<h3 id="Action:_A_JavaScript_demonstration" name="Action:_A_JavaScript_demonstration">范例： 一个JavaScript的实例</h3> + +<p>新建一个<code>doc5.html的页面，把下面的代码复制粘贴进入，注意要保证保存了所有的代码：</code></p> + +<div style="width: 48em;"> +<pre class="brush:html;"><!DOCTYPE html> +<html> + +<head> +<title>Mozilla CSS Getting Started - JavaScript demonstration</title> +<link rel="stylesheet" type="text/css" href="style5.css" /> +<script type="text/javascript" src="script5.js"></script> +</head> + +<body> +<h1>JavaScript sample</h1> +<div id="square"></div> +<button>Click Me</button> + +</body> +</html> +</pre> +</div> + +<p>新建一个CSS文件<code>style5.css</code>，复制粘贴下面的样式代码到文件中：</p> + +<div style="width: 48em;"> +<pre class="brush:css;"> #square { + + width: 20em; + + height: 20em; + + border: 2px inset gray; + + margin-bottom: 1em; + + } + + button { + + padding: .5em 2em; + + }</pre> +</div> + +<p>新建一个JavaScript文件<code>script5.js</code>，复制粘贴下面的代码到文件中：</p> + +<div style="width: 48em;"> +<pre class="brush: js">// JavaScript demonstration +var changeBg = function (event) { + console.log("method called"); + var me = event.target + , square = document.getElementById("square"); + square.style.backgroundColor = "#ffaa44"; + me.setAttribute("disabled", "disabled"); + setTimeout(function () { clearDemo(me) }, 2000); +} + +function clearDemo(button) { + var square = document.getElementById("square"); + square.style.backgroundColor = "transparent"; + button.removeAttribute("disabled"); +} + +window.onload = function() { + var button = document.querySelector("button"); + button.addEventListener("click", changeBg); + console.log(button); +}</pre> +</div> + +<p>用浏览器打开HTML文件并点击按钮。</p> + +<p>这里有在线的示例：<a href="http://jsfiddle.net/diwanshi/Y4VPK/4/embedded/result/">Here is the Live Example</a></p> + +<table> + <tbody> + <tr> + <td style="padding-right: 2em;"> + <table style="border: 2px outset #3366bb; padding: 0 1em .5em .5em;"> + <tbody> + <tr> + <td> + <p><strong>JavaScript demonstration</strong></p> + </td> + </tr> + </tbody> + </table> + </td> + <td> + <table style="border: 2px outset #3366bb; padding: 0 1em .5em .5em;"> + <tbody> + <tr> + <td> + <p><strong>JavaScript demonstration</strong></p> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> + +<div class="note"><strong>重要提示</strong> ： + +<ul> + <li>HTML文档中外链了CSS文件和JavaScript文件。</li> + <li>脚本直接修改了DOM元素的样式，通过修改属性值来改变按钮的样式。</li> + <li>在JavaScript中<code>document.getElementById("square")</code> 在功能上同 CSS 选择器 <code>#square的功能是类似的。</code></li> + <li>在 JavaScript代码中, <code>backgroundColor</code> 对应于CSS 属性<code>background-color</code>。因为JavaScript中不允许在命名中出现中划线，所以采用了驼峰式,的写法来做替代。</li> + <li>浏览器针对button有内置的CSS规则 <code>button{{ mediawiki.external('disabled=\"true\"') }}</code> ，这会导致按钮在不可点击状态下的显示样式跟预期有出入。</li> +</ul> +</div> + +<table style="background-color: #fffff4; border: 1px solid #3366bb; margin-bottom: .5em; padding: 1em;"> + <caption>挑战</caption> + <tbody> + <tr> + <td>修改脚本代码实现如下效果：当颜色改变的时候让方块跳至右侧20em的距离，然后再恢复到原来的位置。</td> + </tr> + </tbody> +</table> + +<p>这里有一个解决方案示例：<a href="/en/CSS/Getting_Started/Challenge_solutions#JavaScript" title="https://developer.mozilla.org/en/CSS/Getting_Started/Challenge_solutions#JavaScript">See a solution to this challenge.</a></p> + +<h3 id="下一步做什么呢？">下一步做什么呢？</h3> + +<p>如果你对本页内容有疑问，或者有其他想法，欢迎到 <a href="/Talk:en/CSS/Getting_Started/JavaScript" title="Talk:en/CSS/Getting_Started/JavaScript">Discussion</a> 页面进行讨论。</p> + +<p>在示例中，尽管只有button元素使用了脚本代码，但是HTML文档还是i需要外链一个脚本文件。Mozilla 对CSS做了扩展，让它可以为选择元素引用JavaScript代码 (也可以使内容或者其他样式表文件) 。下篇文章会对此有详细说明： <strong><a href="/en/CSS/Getting_Started/XBL_bindings" title="en/CSS/Getting_Started/XBL_bindings">XBL bindings</a></strong></p> diff --git a/files/zh-cn/conflicting/learn/javascript/objects/index.html b/files/zh-cn/conflicting/learn/javascript/objects/index.html new file mode 100644 index 0000000000..1ae4554c63 --- /dev/null +++ b/files/zh-cn/conflicting/learn/javascript/objects/index.html @@ -0,0 +1,362 @@ +--- +title: JavaScript面向对象简介 +slug: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript +tags: + - JavaScript + - OOP + - 命名空间 + - 对象 + - 封装 + - 成员 + - 构造函数 + - 继承 + - 面向对象 +translation_of: Learn/JavaScript/Objects +translation_of_original: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript +--- +<div>{{jsSidebar("Introductory")}}</div> + +<div> </div> + +<p>JavaScript 的核心是支持面向对象的，同时它也提供了强大灵活的 OOP 语言能力。本文从对面向对象编程的介绍开始，带您探索 JavaScript 的对象模型，最后描述 JavaScript 当中面向对象编程的一些概念。</p> + +<h2 id="JavaScript_Review" name="JavaScript_Review">JavaScript回顾</h2> + +<p>如果您对 JavaScript 的概念（如变量、类型、方法和作用域等）缺乏自信，您可以在<a href="/zh-CN/JavaScript/A_re-introduction_to_JavaScript" title="en/JavaScript/A_re-introduction_to_JavaScript">重新介绍 JavaScript</a> 这篇文章里学习这些概念。您也可以查阅这篇 <a href="/zh-CN/JavaScript/Guide" title="en/JavaScript/Guide">JavaScript 1.5 核心指南</a>。</p> + +<h2 id="Object-oriented_programming" name="Object-oriented_programming">面向对象编程</h2> + +<p>面向对象编程是用抽象方式创建基于现实世界模型的一种编程模式。它使用先前建立的范例，包括模块化，多态和封装几种技术。今天，许多流行的编程语言（如Java，JavaScript，C＃，C+ +，Python，PHP，Ruby和Objective-C）都支持面向对象编程（OOP）。</p> + +<p>相对于「一个程序只是一些函数的集合，或简单的计算机指令列表。」的传统软件设计观念而言，面向对象编程可以看作是使用一系列对象相互协作的软件设计。 在 OOP 中，每个对象能够接收消息，处理数据和发送消息给其他对象。每个对象都可以被看作是一个拥有清晰角色或责任的独立小机器。</p> + +<p>面向对象程序设计的目的是在编程中促进更好的灵活性和可维护性，在大型软件工程中广为流行。凭借其对模块化的重视，面向对象的代码开发更简单，更容易理解，相比非模块化编程方法 <a href="#cite-1"><sup>1</sup></a>, 它能更直接地分析, 编码和理解复杂的情况和过程。</p> + +<h2 id="Terminology" name="Terminology">术语</h2> + +<dl> + <dt>Namespace 命名空间</dt> + <dd>允许开发人员在一个独特，应用相关的名字的名称下捆绑所有功能的容器。</dd> + <dt>Class 类</dt> + <dd>定义对象的特征。它是对象的属性和方法的模板定义。</dd> + <dt>Object 对象</dt> + <dd>类的一个实例。</dd> + <dt>Property 属性</dt> + <dd>对象的特征，比如颜色。</dd> + <dt>Method 方法</dt> + <dd>对象的能力，比如行走。</dd> + <dt>Constructor 构造函数</dt> + <dd>对象初始化的瞬间，被调用的方法。通常它的名字与包含它的类一致。</dd> + <dt>Inheritance 继承</dt> + <dd>一个类可以继承另一个类的特征。</dd> + <dt>Encapsulation 封装</dt> + <dd>一种把数据和相关的方法绑定在一起使用的方法。</dd> + <dt>Abstraction 抽象</dt> + <dd>结合复杂的继承，方法，属性的对象能够模拟现实的模型。</dd> + <dt>Polymorphism 多态</dt> + <dd>多意为「许多」，态意为「形态」。不同类可以定义相同的方法或属性。</dd> +</dl> + +<p>更多关于面向对象编程的描述，请参照维基百科的 <a class="external" href="http://zh.wikipedia.org/wiki/面向对象程序设计">面向对象编程</a> 。</p> + +<h2 id="原型编程">原型编程</h2> + +<p>基于原型的编程不是面向对象编程中体现的风格，且行为重用（在基于类的语言中也称为继承）是通过装饰它作为原型的现有对象的过程实现的。这种模式也被称为弱类化，原型化，或基于实例的编程。</p> + +<p>原始的（也是最典型的）基于原型语言的例子是由大卫·安格尔和兰德尔·史密斯开发的。然而，弱类化的编程风格近来变得越来越流行，并已被诸如JavaScript，Cecil，NewtonScript，IO，MOO，REBOL，Kevo，Squeak（使用框架操纵Morphic组件），和其他几种编程语言采用。<a href="#cite-1"><sup>1</sup></a></p> + +<h2 id="JavaScript_Object_Oriented_Programming" name="JavaScript_Object_Oriented_Programming">JavaScript面向对象编程</h2> + +<h3 id="命名空间">命名空间</h3> + +<p>命名空间是一个容器，它允许开发人员在一个独特的，特定于应用程序的名称下捆绑所有的功能。 <strong>在JavaScript中，命名空间只是另一个包含方法，属性，对象的对象。</strong></p> + +<div class="note"> +<p><span style="font-size: 14px; line-height: 1.5;"><strong>注意：</strong>需要认识到重要的一点是：与其他面向对象编程语言不同的是，Javascript中的普通对象和命名空间在语言层面上没有区别。这点可能会让JavaScript初学者感到迷惑。</span></p> +</div> + +<p>创造的JavaScript命名空间背后的想法很简单：一个全局对象被创建，所有的变量，方法和功能成为该对象的属性。使用命名空间也最大程度地减少应用程序的名称冲突的可能性。</p> + +<p>我们来创建一个全局变量叫做 MYAPP</p> + +<pre class="brush: js">// 全局命名空间 +var MYAPP = MYAPP || {};</pre> + +<p>在上面的代码示例中，我们首先检查MYAPP是否已经被定义（是否在同一文件中或在另一文件）。如果是的话，那么使用现有的MYAPP全局对象，否则，创建一个名为MYAPP的空对象用来封装方法，函数，变量和对象。</p> + +<p>我们也可以创建子命名空间：</p> + +<pre class="brush: js">// 子命名空间 +MYAPP.event = {};</pre> + +<p>下面是用于创建命名空间和添加变量，函数和方法的代码写法：</p> + +<pre class="brush: js">// 给普通方法和属性创建一个叫做MYAPP.commonMethod的容器 +MYAPP.commonMethod = { + regExForName: "", // 定义名字的正则验证 + regExForPhone: "", // 定义电话的正则验证 + validateName: function(name){ + // 对名字name做些操作，你可以通过使用“this.regExForname” + // 访问regExForName变量 + }, + + validatePhoneNo: function(phoneNo){ + // 对电话号码做操作 + } +} + +// 对象和方法一起申明 +MYAPP.event = { + addListener: function(el, type, fn) { + // 代码 + }, + removeListener: function(el, type, fn) { + // 代码 + }, + getEvent: function(e) { + // 代码 + } + + // 还可以添加其他的属性和方法 +} + +//使用addListener方法的写法: +MYAPP.event.addListener("yourel", "type", callback);</pre> + +<h3 id="Core_Objects" name="Core_Objects">标准内置对象</h3> + +<p>JavaScript有包括在其核心的几个对象，例如，Math，Object，Array和String对象。下面的例子演示了如何使用Math对象的random()方法来获得一个随机数。</p> + +<pre class="brush: js">console.log(Math.random()); +</pre> + +<div class="note"><strong>注意：</strong>这里和接下来的例子都假设名为 <code>console.log</code> 的方法全局有定义。<code>console.log</code> 实际上不是 JavaScript 自带的。</div> + +<p>查看 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects" title="en-US/docs/Web/JavaScript/Reference/Global_Objects">JavaScript 参考：全局对象</a> 了解 JavaScript 内置对象的列表。</p> + +<p>JavaScript 中的每个对象都是 <code>Object</code> 对象的实例且继承它所有的属性和方法。</p> + +<h3 id="Custom_Objects" name="Custom_Objects">自定义对象</h3> + +<h4 id="The_Class" name="The_Class">类</h4> + +<p>JavaScript是一种基于原型的语言，它没类的声明语句，比如C+ +或Java中用的。这有时会对习惯使用有类申明语句语言的程序员产生困扰。相反，JavaScript可用方法作类。定义一个类跟定义一个函数一样简单。在下面的例子中，我们定义了一个新类Person。</p> + +<pre class="brush: js">function Person() { } +// 或 +var Person = function(){ } +</pre> + +<h4 id="The_Object_.28Class_Instance.29" name="The_Object_.28Class_Instance.29">对象（类的实例）</h4> + +<p>我们使用 <code>new <em>obj </em></code><span style="font-size: 14.3999996185303px; line-height: 16.7999992370605px;">创建对象 </span><em><code>obj</code></em><span style="font-size: 14.3999996185303px; line-height: 16.7999992370605px;"> 的新实例</span><span style="font-size: 14px; line-height: 1.5;">, 将结果（</span><em><code>obj 类型</code></em><span style="font-size: 14px; line-height: 1.5;">）</span><span style="font-size: 14px; line-height: 1.5;">赋值给一个变量方便稍后调用。</span></p> + +<p>在下面的示例中，我们定义了一个名为<code>Person</code>的类，然后我们创建了两个<code>Person</code>的实例(<code>person1</code> and <code>person2</code>).</p> + +<pre class="brush: js">function Person() { } +var person1 = new Person(); +var person2 = new Person(); +</pre> + +<div class="note"><strong>注意：</strong>有一种新增的创建未初始化实例的实例化方法，请参考 <a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/create" title="Object.create">Object.create</a> 。</div> + +<h4 id="The_Constructor" name="The_Constructor">构造器</h4> + +<p>在实例化时构造器被调用 (也就是对象实例被创建时)。构造器是对象中的一个方法。 在JavaScript中函数就可以作为构造器使用，因此不需要特别地定义一个构造器方法，每个声明的函数都可以在实例化后被调用执行。</p> + +<p>构造器常用于给对象的属性赋值或者为调用函数做准备。 在本文的后面描述了类中方法既可以在定义时添加，也可以在使用前添加。</p> + +<p>在下面的示例中, <code>Person类实例化时构造器调用一个</code> alert函数。</p> + +<pre class="brush: js">function Person() { + alert('Person instantiated'); +} + +var person1 = new Person(); +var person2 = new Person(); +</pre> + +<h4 id="The_Property_.28object_attribute.29" name="The_Property_.28object_attribute.29">属性 (对象属性)</h4> + +<p>属性就是 类中包含的变量;每一个对象实例有若干个属性. 为了正确的继承，属性应该被定义在类的原型属性 (函数)中。</p> + +<p>可以使用 关键字 <code>this</code>调用类中的属性, this是对当前对象的引用。 从外部存取(读/写)其属性的语法是: <code>InstanceName.Property</code>; 这与C++，Java或者许多其他语言中的语法是一样的 (在类中语法 <code>this.Property</code> 常用于set和get属性值)</p> + +<p>在下面的示例中，我们为定义<code>Person类定义了一个属性</code> <code>firstName</code> 并在实例化时赋初值。</p> + +<pre class="brush: js">function Person(firstName) { + this.firstName = firstName; + alert('Person instantiated'); +} + +var person1 = new Person('Alice'); +var person2 = new Person('Bob'); + +// Show the firstName properties of the objects +alert('person1 is ' + person1.firstName); // alerts "person1 is Alice" +alert('person2 is ' + person2.firstName); // alerts "person2 is Bob" +</pre> + +<h4 id="The_methods" name="The_methods">方法（对象属性）</h4> + +<p>方法与属性很相似， 不同的是：一个是函数，另一个可以被定义为函数。 调用方法很像存取一个属性, 不同的是add <code>()</code> 在方法名后面很可能带着参数. 为定义一个方法, 需要将一个函数赋值给类的 <code>prototype</code> 属性; 这个赋值给函数的名称就是用来给对象在外部调用它使用的。</p> + +<p>在下面的示例中，我们给<code>Person类</code>定义了方法 <code>sayHello()</code>，并调用了它.</p> + +<pre class="brush: js">function Person(firstName) { + this.firstName = firstName; +} + +Person.prototype.sayHello = function() { + alert("Hello, I'm " + this.firstName); +}; + +var person1 = new Person("Alice"); +var person2 = new Person("Bob"); + +// call the Person sayHello method. +person1.sayHello(); // alerts "Hello, I'm Alice" +person2.sayHello(); // alerts "Hello, I'm Bob" +</pre> + +<p>在JavaScript中方法通常是一个绑定到对象中的普通函数, 这意味着方法可以在其所在context之外被调用。 思考下面示例中的代码:</p> + +<pre class="brush: js">function Person(firstName) { + this.firstName = firstName; +} + +Person.prototype.sayHello = function() { + alert("Hello, I'm " + this.firstName); +}; + +var person1 = new Person("Alice"); +var person2 = new Person("Bob"); +var helloFunction = person1.sayHello; + +person1.sayHello(); // alerts "Hello, I'm Alice" +person2.sayHello(); // alerts "Hello, I'm Bob" +helloFunction(); // alerts "Hello, I'm undefined" (or fails + // with a TypeError in strict mode) +console.log(helloFunction === person1.sayHello); // logs true +console.log(helloFunction === Person.prototype.sayHello); // logs true +helloFunction.call(person1); // logs "Hello, I'm Alice" +</pre> + +<p>如上例所示, 所有指向<code>sayHello函数的引用</code> ，包括 <code>person1</code>, <code>Person.prototype</code>, 和 <code>helloFunction</code> 等， 均引用了<em>相同的函数</em>.</p> + +<p>在调用函数的过程中，<span style="font-family: consolas,monaco,andale mono,monospace; line-height: 1.5;">this的值</span><span style="line-height: 1.5;">取决于我们怎么样调用函数. </span><span style="line-height: 1.5;"> 在通常情况下，我们通过一个表达式</span><span style="font-family: consolas,monaco,andale mono,monospace; line-height: 1.5;">person1.sayHello()</span><span style="line-height: 1.5;">来调用函数：即从一个对象的属性中得到所调用的函数</span><span style="line-height: 1.5;">。此时this被设置为我们取得函数的对象（即</span><span style="font-family: consolas,monaco,andale mono,monospace; line-height: 1.5;">person1</span><span style="line-height: 1.5;">）。这就是为什么</span><code style="font-style: normal; line-height: 1.5;">person1.sayHello()</code><span style="line-height: 1.5;"> 使用了姓名“Alice”而</span><code style="font-style: normal; line-height: 1.5;">person2.sayHello()使用了姓名“bob”的原因。</code><span style="line-height: 1.5;"> </span></p> + +<p><span style="line-height: 1.5;">然而我们使用不同的调用方法时, </span><code style="font-style: normal; line-height: 1.5;">this的值也就不同了</code><span style="line-height: 1.5;">。当从变量 </span><code style="font-style: normal; line-height: 1.5;">helloFunction()中调用的时候，</code><span style="line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;">this</code><span style="line-height: 1.5;">就被设置成了全局对象 (在浏览器中即</span><code style="font-style: normal; line-height: 1.5;">window</code><span style="line-height: 1.5;">)。由于该对象 (非常可能地) 没有</span><code style="font-style: normal; line-height: 1.5;">firstName</code><span style="line-height: 1.5;"> 属性, 我们得到的结果便是"Hello, I'm undefined". (这是松散模式下的结果， 在 </span><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">严格模式</a>中，结果将不同（此时会产生一个error）。<span style="line-height: 1.5;"> 但是为了避免混淆，我们在这里不涉及细节) 。另外，我们可以像上例末尾那样，使用</span><code style="font-style: normal; line-height: 1.5;">Function#call</code><span style="line-height: 1.5;"> (或者</span><code style="font-style: normal; line-height: 1.5;">Function#apply</code><span style="line-height: 1.5;">)</span><span style="line-height: 1.5;">显式的设置</span><span style="font-family: consolas,monaco,andale mono,monospace; line-height: 1.5;">this的值。</span></p> + +<div class="note">更多有关信息请参考 <a href="/zh-CN/JavaScript/Reference/Global_Objects/Function/call" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/call">Function#call</a> and <a href="/zh-CN/JavaScript/Reference/Global_Objects/Function/apply" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/apply">Function#apply</a></div> + +<h4 id="Inheritance" name="Inheritance">继承</h4> + +<p>创建一个或多个类的专门版本类方式称为继承（Javascript只支持单继承）。 创建的专门版本的类通常叫做子类，另外的类通常叫做父类。 在<span style="line-height: 1.5;">Javascript中，继承通过赋予子类一个父类的实例并专门化子类来实现。在现代浏览器中你可以使用 </span><a href="/zh-CN/docs/JavaScript/Reference/Global_Objects/Object/create#Classical_inheritance_with_Object.create" style="line-height: 1.5;" title="/en-US/docs/JavaScript/Reference/Global_Objects/Object/create#Classical_inheritance_with_Object.create">Object.create</a><span style="line-height: 1.5;"> 实现继承.</span></p> + +<div class="note"> +<p>JavaScript 并不检测子类的 <code>prototype.constructor</code> (见 <a href="/zh-CN/docs/JavaScript/Reference/Global_Objects/Object/prototype">Object.prototype</a>), 所以我们必须手动申明它.</p> +</div> + +<p>在下面的例子中, 我们定义了 <code>Student类作为</code> <code>Person类的子类</code>. 之后我们重定义了<code>sayHello()</code> 方法并添加了 <code>sayGoodBye() 方法</code>.</p> + +<pre class="brush: js">// 定义Person构造器 +function Person(firstName) { + this.firstName = firstName; +} + +// 在Person.prototype中加入方法 +Person.prototype.walk = function(){ + alert("I am walking!"); +}; +Person.prototype.sayHello = function(){ + alert("Hello, I'm " + this.firstName); +}; + +// 定义Student构造器 +function Student(firstName, subject) { + // 调用父类构造器, 确保(使用Function#call)"this" 在调用过程中设置正确 + Person.call(this, firstName); + + // 初始化Student类特有属性 + this.subject = subject; +}; + +// 建立一个由Person.prototype继承而来的Student.prototype对象. +// 注意: 常见的错误是使用 "new Person()"来建立Student.prototype. +// 这样做的错误之处有很多, 最重要的一点是我们在实例化时 +// 不能赋予Person类任何的FirstName参数 +// 调用Person的正确位置如下，我们从Student中来调用它 +Student.prototype = Object.create(Person.prototype); // See note below + +// 设置"constructor" 属性指向Student +Student.prototype.constructor = Student; + +// 更换"sayHello" 方法 +Student.prototype.sayHello = function(){ + console.log("Hello, I'm " + this.firstName + ". I'm studying " + this.subject + "."); +}; + +// 加入"sayGoodBye" 方法 +Student.prototype.sayGoodBye = function(){ + console.log("Goodbye!"); +}; + +// 测试实例: +var student1 = new Student("Janet", "Applied Physics"); +student1.sayHello(); // "Hello, I'm Janet. I'm studying Applied Physics." +student1.walk(); // "I am walking!" +student1.sayGoodBye(); // "Goodbye!" + +// Check that instanceof works correctly +console.log(student1 instanceof Person); // true +console.log(student1 instanceof Student); // true +</pre> + +<p>对于“<span style="font-family: consolas,monaco,andale mono,monospace;">Student.prototype = Object.create(Person.prototype);</span>”这一行，在不支持 <code><a href="/en/JavaScript/Reference/Global_Objects/Object/create" title="Object.create">Object.create</a>方法的老JavaScript引擎中，可以使用一个</code>"polyfill"（又名"shim"，查看文章链接），或者使用一个function来获得相同的返回值，就像下面：</p> + +<pre class="brush: js">function createObject(proto) { + function ctor() { } + ctor.prototype = proto; + return new ctor(); +} + +// Usage: +Student.prototype = createObject(Person.prototype); +</pre> + +<div class="note">更多相关信息请参考<em> </em><a href="/en/JavaScript/Reference/Global_Objects/Object/create" style="font-style: italic;" title="Object.create">Object.create</a>，连接中还有一个老JavaScript引擎的兼容方案（shim）。</div> + +<h4 id="Encapsulation" name="Encapsulation">封装</h4> + +<p>在上一个例子中，Student类虽然不需要知道Person类的walk()方法是如何实现的，但是仍然可以使用这个方法；Student类不需要明确地定义这个方法，除非我们想改变它。 这就叫做<strong>封装</strong>，对于所有继承自父类的方法，只需要在子类中定义那些你想改变的即可。</p> + +<h4 id="Abstraction" name="Abstraction">抽象</h4> + +<p>抽象是允许模拟工作问题中通用部分的一种机制。这可以通过继承（具体化）或组合来实现。<br> + JavaScript通过继承实现具体化，通过让类的实例是其他对象的属性值来实现组合。</p> + +<p>JavaScript Function 类继承自Object类（这是典型的具体化） 。Function.prototype的属性是一个Object实例（这是典型的组合）。</p> + +<pre class="brush: js">var foo = function(){}; +console.log( 'foo is a Function: ' + (foo instanceof Function) ); <span style="font-size: 1rem;">// logs "</span><span style="font-size: 1rem;">foo is a Function: true</span><span style="font-size: 1rem;">"</span> +console.log( 'foo.prototype is an Object: ' + (foo.prototype instanceof Object) ); // logs "<span style="font-size: 1rem;">foo.prototype is an Object: true</span><span style="font-size: 1rem;">"</span></pre> + +<h4 id="Polymorphism" name="Polymorphism">多态</h4> + +<p>就像所有定义在原型属性内部的方法和属性一样，不同的类可以定义具有相同名称的方法;方法是作用于所在的类中。并且这仅在两个类不是父子关系时成立（继承链中，一个类不是继承自其他类）。</p> + +<h2 id="Notes" name="Notes">注意</h2> + +<p>本文中所展示的面向对象编程技术不是唯一的实现方式，在JavaScript中面向对象的实现是非常灵活的。</p> + +<p>同样的，文中展示的技术没有使用任何语言hacks，它们也没有模仿其他语言的对象理论实现。</p> + +<p>JavaScript中还有其他一些更加先进的面向对象技术，但这些都超出了本文的介绍范围。</p> + +<h2 id="References" name="References">参考</h2> + +<ol> + <li><span style="line-height: 1.5;"><a name="cite-1"></a>维基百科。「</span>面向对象程序设计」，<a href="http://zh.wikipedia.org/wiki/面向对象程序设计">http://zh.wikipedia.org/wiki/面向对象程序设计</a></li> + <li>维基百科。“<a href="http://en.wikipedia.org/wiki/Encapsulation_%28object-oriented_programming%29">Encapsulation (object-oriented programming)</a>”</li> +</ol> diff --git a/files/zh-cn/conflicting/learn/server-side/django/index.html b/files/zh-cn/conflicting/learn/server-side/django/index.html new file mode 100644 index 0000000000..95ec82f251 --- /dev/null +++ b/files/zh-cn/conflicting/learn/server-side/django/index.html @@ -0,0 +1,111 @@ +--- +title: Python +slug: Python +tags: + - Python + - Services +translation_of: Learn/Server-side/Django +translation_of_original: Python +--- +<p><a class="external" href="http://www.python.org">Python</a> 是一款直译式脚本语言，支持包括 Linux、Mac OS X 和 Microsoft Windows 在内的多种平台。</p> + +<h2 id="Learning_Python" name="Learning_Python">学习 Python</h2> + +<h3 id="免费的电子书">免费的电子书</h3> + +<p> 如果你是个初学者，可以考虑看看 <a class="external" href="http://www.diveintopython.net/toc/index.html">Dive Into Python</a> 。虽然它<span id="result_box" lang="zh-CN"><span title="如果是初學Python，可以考慮看Dive Into Python，雖然他最後是更新的時間是2004年，但依然是一部免費而且很棒的教程。">最后更新的时间是2004年，但依然是一部免费而且很棒的教程。</span></span> <span id="result_box" lang="zh-CN"><span title="它含括了幾乎所有Python 的基本元素，還有一些平常使用Python 可以執行什麼任務，像是網頁的請求，檔案的處理。">它含括了几乎所有Python 的基本元素，还有一些平常使用 Python 可以执行什么任务，像是对 Web 请求和文件的处理。</span><span title="如果對於Python 基礎已經基礎的概念，就可以參考">如果对于 Python 已经有了基本的概念，就可以考虑看看</span></span> <a class="external" href="http://gnosis.cx/TPiP/">Text Processing In Python</a>，这本书对于 Python 有着更进阶的介绍。</p> + +<p>还有其他免费的电子书和在线资源可供参考：</p> + +<ul style="margin-left: 40px;"> + <li><a class="external" href="http://docs.python.org/tutorial/index.html" title="http://docs.python.org/tutorial/index.html">Python 教程</a>（托管于 <a href="http://docs.python.org" title="http://docs.python.org">docs.python.org</a>） >> 教程已被网友翻译成中文版：<a href="http://www.pythondoc.com/">http://www.pythondoc.com/</a> <strong><span style="color: #ff0000;">推荐</span></strong></li> + <li><a href="http://en.wikibooks.org/wiki/Non-Programmer%27s_Tutorial_for_Python_2.6" title="http://en.wikibooks.org/wiki/Non-Programmer%27s_Tutorial_for_Python_2.6">为非程序员编写的 Python 2.6 教程</a>（托管于 <a href="http://en.wikibooks.org/wiki/Main_Page" title="http://en.wikibooks.org/wiki/Main_Page">Wikibooks</a>）</li> + <li><a href="http://www.greenteapress.com/thinkpython/" title="http://www.greenteapress.com/thinkpython/">Think Python</a>: How to Think Like a Computer Scientist by Allen B. Downey (free <a href="http://www.greenteapress.com/thinkpython/thinkpython.pdf" title="http://www.greenteapress.com/thinkpython/thinkpython.pdf">PDF</a> & <a href="http://www.greenteapress.com/thinkpython/html/index.html" title="http://www.greenteapress.com/thinkpython/html/index.html">HTML</a> versions). + <ul> + <li><a href="http://greenteapress.com/complexity/index.html" title="http://greenteapress.com/complexity/index.html">Think Complexity</a> by Allen B. Downey "picks up where Think Python leaves off" (free <a href="http://greenteapress.com/complexity/thinkcomplexity.pdf" title="http://greenteapress.com/complexity/thinkcomplexity.pdf">PDF</a> & <a href="http://greenteapress.com/complexity/html/index.html" title="http://greenteapress.com/complexity/html/index.html">HTML</a> versions)</li> + </ul> + </li> + <li><a href="http://learnpythonthehardway.org" title="http://learnpythonthehardway.org">Learn Python The Hard Way</a> by Zed Shaw （<a href="http://learnpythonthehardway.org/book/" title="http://learnpythonthehardway.org/book/">免费的 HTML 版）</a></li> + <li><a href="http://www.itmaybeahack.com/book/python-2.6/html/index.html" title="http://www.itmaybeahack.com/book/python-2.6/html/index.html">Building Skills in Python</a> by Steven F. Lott （<a href="http://www.itmaybeahack.com/book/python-2.6/latex/BuildingSkillsinPython.pdf" title="http://www.itmaybeahack.com/book/python-2.6/latex/BuildingSkillsinPython.pdf">也有 PDF 版</a>）</li> +</ul> + +<p><em>译者注：如果有发现其他中文教程，欢迎编写本页来分享</em>。</p> + +<p>当你对这款语言有了基础的认识后， <a href="http://python.net/~goodger/projects/pycon/2007/idiomatic/handout.html" title="http://python.net/~goodger/projects/pycon/2007/idiomatic/handout.html">Code Like a Pythonista: Idiomatic Python</a> 将帮你了解 Python 的一些特别之处，以及和其他语言的区别。</p> + +<h3 id="免费在线课程">免费在线课程</h3> + +<ul style="margin-left: 40px;"> + <li><a href="https://developers.google.com/edu/python/" title="http://code.google.com/edu/languages/google-python-class/">Google's Python Class</a></li> + <li>Learnstreet's Free <a href="http://www.learnstreet.com/lessons/languages/python" title="http://www.learnstreet.com/lessons/languages/python">Python Courses and Videos</a></li> + <li><a href="http://www.codecademy.com/tracks/python" title="http://www.codecademy.com/tracks/python">Python</a> at Codecademy</li> + <li><a href="http://ocw.mit.edu/courses/electrical-engineering-and-computer-science/6-189-a-gentle-introduction-to-programming-using-python-january-iap-2008/" title="http://ocw.mit.edu/courses/electrical-engineering-and-computer-science/6-189-a-gentle-introduction-to-programming-using-python-january-iap-2008/">A Gentle Introduction to Programming Using Python</a> at MIT</li> + <li><a href="http://www.fireboxtraining.com" title="http://www.fireboxtraining.com">Firebox Training's</a> <a href="http://www.fireboxtraining.com/blog/python-tutorials/" title="http://www.fireboxtraining.com/blog/python-tutorials/">Free Python course video tutorial blog</a></li> +</ul> + +<h2 id="Python_in_Mozilla" name="Python_in_Mozilla">Python 也用在了基于 Mozilla 的应用程序中</h2> + +<p><a href="/en-US/docs/XPCOM" title="XPCOM">XPCOM</a> 在 Mozilla 中用于支持跨语言通信（inter-language communication）。它仅原生支持 C++ <-> JavaScript 的交流。 <a href="/en-US/docs/PyXPCOM" title="PyXPCOM">Python 的 XPCOM 组件</a>（也叫做 PyXPCOM）是将 Python 和 Mozilla 粘合在一块的低级别胶水（the low-level glue），使得用 JavaScript 或 C++ 编写的 XPCOM 组件既可以通过 Python 使用，反之亦然。PyXPCOM <strong>并不</strong>默认包含在 Firefox 构建版本中，因此你须要使用第三方构建版本或自己构建一个版本来使用它。PyXPCOM中最知名的消费者是<a href="https://www.activestate.com/komodo-ide">Komodo</a>系列的产品。 </p> + +<p>从Mozilla 1.9版本开始就已经支持 (<a href="/en-US/docs/PyDOM" title="PyDOM">PyDOM</a>) 。 这也让<a href="/en-US/docs/Chrome" title="Chrome">chrome</a> 的XUL 和 HTML 作者在他们的 <script> 标签中使用python（再一次声明，官方版本的Firefox和Thunderbird版本还不支持）。</p> + +<h2 id="Mozilla中基于Python的开发者工具">Mozilla中基于Python的开发者工具</h2> + +<p>Python已经被众多Mozilla开发者应用于大量的app和框架中。更多信息请参考<a href="/en-US/docs/Python_Environment_and_Tools_for_Mozilla" title="Python_Environment_and_Tools_for_Mozilla">Python Environment and Tools for Mozilla</a>.</p> + +<p>工具列表在这里: <a class="external" href="http://k0s.org/toolbox/?language=python">http://k0s.org/toolbox/?language=python</a></p> + +<h2 id="Mozilla中Python的使用">Mozilla中Python的使用</h2> + +<p>Mozilla有大量的基于python的框架，包括:</p> + +<ul> + <li>django for <a class="external" href="http://blog.mozilla.com/webdev/" title="http://blog.mozilla.com/webdev/">webdev</a></li> + <li><a class="link-https" href="https://wiki.mozilla.org/Buildbot" title="https://wiki.mozilla.org/Buildbot">buildbot</a> 连续集成工具</li> + <li>测试工具 <a href="/en-US/docs/Mozilla_automated_testing" title="Mozilla automated testing">test harnesses</a></li> + <li><a class="link-https" href="https://wiki.mozilla.org/Auto-tools/Projects/Mozbase" title="https://wiki.mozilla.org/Auto-tools/Projects/MozBase">mozbase</a> : 测试工具，其他框架和工具的构建模块</li> +</ul> + +<h2 id="Mozilla-Central的Python身影">Mozilla-Central的Python身影</h2> + +<p>[参考网址://bugzilla.mozilla.org/show_bug.cgi?id=835553]</p> + +<p>在Mozilla-Central很多的正式版本，测试版本以及其他的框架和工具都是使用的python</p> + +<ul> + <li><a href="http://mxr.mozilla.org/mozilla-central/source/python/" title="http://mxr.mozilla.org/mozilla-central/source/python/"><code>python/</code></a> 包含了通用的python代码，包括第三方镜像打包文件比如：pypi.python.org</li> + <li><a href="http://mxr.mozilla.org/mozilla-central/source/testing/mozbase/" title="http://mxr.mozilla.org/mozilla-central/source/testing/mozbase/"><code>testing/mozbase/</code></a> 包含了<a href="https://wiki.mozilla.org/Auto-tools/Projects/Mozbase" title="https://wiki.mozilla.org/Auto-tools/Projects/Mozbase"><code>Mozbase</code></a> 中用于mozilla-central的镜像打包文件</li> +</ul> + +<p>一个虚拟化环境(<a href="/en-US/docs/Python/Virtualenv" title="/en-US/docs/Python/Virtualenv">virtualenv</a>)包含在调用<code>$OBJDIR/_virtualenv</code> 版本的<a href="https://developer.mozilla.org/en-US/docs/Developer_Guide/Mozilla_build_FAQ#Build_configurations" title="https://developer.mozilla.org/en-US/docs/Developer_Guide/Mozilla_build_FAQ#Build_configurations"><code>objdir</code></a> 时 . 为了封装到虚拟环境中, 可编辑<a href="http://mxr.mozilla.org/mozilla-central/source/build/virtualenv_packages.txt" title="http://mxr.mozilla.org/mozilla-central/source/build/virtualenv/packages.txt">build/virtualenv_packages.txt </a>. 这里有安装好了的版本 <a href="http://mxr.mozilla.org/mozilla-central/source/build/virtualenv/populate_virtualenv.py" title="http://mxr.mozilla.org/mozilla-central/source/build/virtualenv/populate_virtualenv.py">build/virtualenv/populate_virtualenv.py</a> .</p> + +<h2 id="Python的封装">Python的封装</h2> + +<p>Python使用<a class="external" href="http://docs.python.org/distutils/index.html" title="http://docs.python.org/distutils/index.html">setup.py</a> 来记录元数据和python包（<a class="external" href="http://docs.python.org/tutorial/modules.html#packages" title="http://docs.python.org/tutorial/modules.html#packages">python packages</a>）的安装。运行 (e.g.) <code>python setup.py install</code> 将安装打包文件以及使<a class="external" href="http://docs.python.org/tutorial/modules.html#the-module-search-path" title="http://docs.python.org/tutorial/modules.html#the-module-search-path">python's import path</a>中的模块可用。对python 2.x来说， 有几种不同的分布式或安装式模块存在，<code><a class="external" href="http://docs.python.org/distutils/index.html" title="http://docs.python.org/distutils/index.html">distutils</a></code> 只在python标准库( <a class="external" href="http://docs.python.org/library/" title="http://docs.python.org/library/">python's standard library</a>)的分布式封装中可用， <code>distutils</code> 可以上传到python封装索引<a class="external" href="http://pypi.python.org/pypi" title="http://pypi.python.org/pypi">python package index</a> 并且安装python包。详情请参阅<a class="external" href="http://docs.python.org/distutils/index.html" title="http://docs.python.org/distutils/index.html">Python documentation on <code>distutils</code></a></p> + +<p>当 <code>distutils</code> 已经被加入python标准库中后, 初始化工具 <a class="external" href="http://peak.telecommunity.com/DevCenter/setuptools" title="http://peak.telecommunity.com/DevCenter/setuptools">setuptools</a>是一个为封装和分发的第三方的特设标准。它几乎完全兼容<code>distutils</code>,但是却非常关键的使封装文件具有“依赖关系”<a class="external" href="http://peak.telecommunity.com/DevCenter/setuptools#declaring-dependencies" title="http://peak.telecommunity.com/DevCenter/setuptools#declaring-dependencies">include dependencies</a> 的能力，可以在<code>setup.py</code> 被调用的时候作为预置条件安装，同时也有了在开发者模式<a class="external" href="http://packages.python.org/distribute/setuptools.html#development-mode" title="http://packages.python.org/distribute/setuptools.html#development-mode">development mode</a>下安装python包的能力. 这使得文件能通过 <a class="external" href="http://docs.python.org/library/site.html" title="http://docs.python.org/library/site.html">.pth files</a>来编辑，这对于积极工作的人来说非常容易上手。 <code>setuptools</code> 也提供了一个通过 <a class="external" href="http://pypi.python.org/pypi" title="http://pypi.python.org/pypi">PyPI</a>来快速安装打包文件和依赖关系的脚本<code><a class="external" href="http://packages.python.org/distribute/easy_install.html" title="http://packages.python.org/distribute/easy_install.html">easy_install</a></code> 。比如安装 <a class="external" href="http://pyyaml.org/wiki/PyYAML" title="http://pyyaml.org/wiki/PyYAML">PyYAML</a>包，运行</p> + +<pre>easy_install PyYAML +</pre> + +<p>因为 <code>setuptools</code> 没有被包含在python中，你需要对其进行安装，你可以去到PyPI主页去下载<code>setuptools</code>i，然后解压，在目录下运行<code>python setup.py install</code> ，你也可以使用快速安装脚本<code><a class="external" href="http://peak.telecommunity.com/dist/ez_setup.py" title="http://peak.telecommunity.com/dist/ez_setup.py">ez_setup.py</a></code>来进行安装，你可以在拥有root权限或管理员权限的python环境中下载和安装，或者在 <a class="external" href="http://www.gnu.org/s/bash/" title="http://www.gnu.org/s/bash/">bash shell</a>中运行</p> + +<pre>sudo python <(curl http://peak.telecommunity.com/dist/ez_setup.py) +</pre> + +<p><code>setuptools</code> 也提供了一个虚拟环境<a href="/en-US/docs/Python/Virtualenv" title="Virtualenv">virtualenv</a>, 所以如果你想使用虚拟环境来开发，你不需要全局安装<code>setuptools</code> ，<a class="external" href="http://packages.python.org/distribute/" title="http://packages.python.org/distribute/">distribute</a>是一个Mozilla大佬 <a class="external" href="http://ziade.org/" title="http://ziade.org/">Tarek Ziade</a> 在<code>setuptools</code> 的一个，它完全兼容<code>setuptools</code>，并修复了一些bug。</p> + +<div class="note"><strong>注意:</strong> 非常建议你使用虚拟环境<a href="/en-US/docs/Python/Virtualenv" title="Virtualenv">virtualenv</a>来开发</div> + +<p>python包索引<a class="external" href="http://pypi.python.org/pypi" title="http://pypi.python.org/pypi">Python Package Index (PyPI)</a> 是一个标准的python打包文件的分发点。如果你需要查找一些python的功能，这是一个很好的查询的地方。</p> + +<p>参阅: <a class="external" href="http://k0s.org/portfolio/packaging.html">http://k0s.org/portfolio/packaging.html</a></p> + +<h2 id="参阅：">参阅：</h2> + +<ul> + <li><a class="external" href="http://docs.services.mozilla.com/server-devguide/release.html" title="http://docs.services.mozilla.com/server-devguide/release.html">Releasing an application</a> (Mozilla Services documentation)</li> + <li>http://pycheesecake.org/wiki/PythonTestingToolsTaxonomy</li> + <li><a class="link-https" href="https://wiki.mozilla.org/Auto-tools/Python101">https://wiki.mozilla.org/Auto-tools/Python101</a></li> + <li><a href="http://www.learnstreet.com/cg/simple/projects/python" title="http://www.learnstreet.com/cg/simple/projects/python">Python Projects </a>at Code Garage</li> +</ul> |