diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
| commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
| tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/zh-cn/learn/css | |
| parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
| download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip | |
initial commit
Diffstat (limited to 'files/zh-cn/learn/css')
54 files changed, 14473 insertions, 0 deletions
diff --git a/files/zh-cn/learn/css/building_blocks/advanced_styling_effects/index.html b/files/zh-cn/learn/css/building_blocks/advanced_styling_effects/index.html new file mode 100644 index 0000000000..3a1a8f5d72 --- /dev/null +++ b/files/zh-cn/learn/css/building_blocks/advanced_styling_effects/index.html @@ -0,0 +1,403 @@ +--- +title: 高级区块效果 +slug: Learn/CSS/Building_blocks/Advanced_styling_effects +translation_of: Learn/CSS/Building_blocks/Advanced_styling_effects +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Styling tables", "Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}</div> + +<p class="summary">这篇文章展示了盒子的小技巧，提供了一些高级特性的介绍，这些特性不适合其他类别的样式，比如盒子阴影、混合模式和滤镜。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">预备知识：</th> + <td>HTML 基础(学习 <a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>) ，了解CSS工作原理 (学习 <a href="/zh-CN/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>.)</td> + </tr> + <tr> + <th scope="row">目标：</th> + <td>要了解如何使用高级的盒子效果，并了解一些在CSS语言中出现的新样式工具。</td> + </tr> + </tbody> +</table> + +<h2 id="盒子阴影">盒子阴影</h2> + +<p>回到我们的<a href="/zh-CN/docs/Learn/CSS/Styling_text">样式化文本</a>模块，我们查看了{{cssxref("text-shadow")}}属性，它允许您将一个或多个阴影应用到元素的文本上。对于盒子来说，存在一个等价的属性——{{cssxref("box-shadow")}}允许您将一个或多个阴影应用到一个实际的元素盒子中。和文本阴影一样，盒子的阴影在各种浏览器中也得到了很好的支持，但只有在IE9+（IE9及更新版本）中可用。你的旧IE版本的用户可能只需要应付没有阴影的情况，所以只要测试一下你的设计，确保你的内容在没有他们的情况下是清晰可见的。</p> + +<p>你可以 <a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/box-shadow.html">box-shadow.html</a>在这部分找到例子 (见<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/box-shadow.html">源码</a>)。</p> + +<h3 id="一个简单的盒子阴影">一个简单的盒子阴影</h3> + +<p>让我们看一个简单的例子来起步。首先,一些HTML：</p> + +<pre class="brush: html"><article class="simple"> + <p><strong>Warning</strong>: The thermostat on the cosmic transcender has reached a critical level.</p> +</article></pre> + +<p>现在是 CSS:</p> + +<pre class="brush: css">p { + margin: 0; +} + +article { + max-width: 500px; + padding: 10px; + background-color: red; + background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25)); +} + +.simple { + box-shadow: 5px 5px 5px rgba(0,0,0,0.7); +}</pre> + +<p>结果如下：</p> + +<p>{{ EmbedLiveSample('一个简单的盒子阴影', '100%', 100) }}</p> + +<p>你会看到，我们在<code>box-shadow</code>属性值中有4个项：</p> + +<ol> + <li>第一个长度值是水平偏移量（<strong>horizontal offset</strong> ）——即向右的距离，阴影被从原始的框中偏移(如果值为负的话则为左)。</li> + <li>第二个长度值是垂直偏移量（<strong>vertical offset</strong>）——即阴影从原始盒子中向下偏移的距离(或向上，如果值为负)。</li> + <li>第三个长度的值是模糊半径（<strong>blur radius</strong>）——在阴影中应用的模糊度。</li> + <li>颜色值是阴影的基本颜色（<strong>base color</strong>）。</li> +</ol> + + + +<p>你可以使用任何长度和颜色单位来定义这些值。</p> + + + +<h3 id="多个盒子阴影">多个盒子阴影</h3> + +<p>还可以在单个<code>box-shadow</code>声明中指定多个框阴影，用逗号分隔：</p> + +<div class="hidden"> +<pre class="brush: html"><article class="multiple"> + <p><strong>Warning</strong>: The thermostat on the cosmic transcender has reached a critical level.</p> +</article></pre> +</div> + +<pre class="brush: css">p { + margin: 0; +} + +article { + max-width: 500px; + padding: 10px; + background-color: red; + background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25)); +} + +.multiple { + box-shadow: 1px 1px 1px black, + 2px 2px 1px black, + 3px 3px 1px red, + 4px 4px 1px red, + 5px 5px 1px black, + 6px 6px 1px black; +}</pre> + +<p>结果如下：</p> + +<p>{{ EmbedLiveSample('多个盒子阴影', '100%', 100) }}</p> + +<p>我们在这里做了一些有趣的事情，创建了一个带有多个颜色图层的凸起的盒子，但是你可以用任何你想要的方式来使用它，例如，用基于多个光源的阴影来创建一个更加真实的外观。</p> + +<h3 id="其他盒子阴影特点">其他盒子阴影特点</h3> + +<p>与{{cssxref("text-shadow")}}不同，{{cssxref("box-shadow")}}有一个<code>inset</code>关键字可用——把它放在一个影子声明的开始，使它变成一个内部阴影，而不是一个外部阴影。让我们看一看。</p> + +<p>首先，我们将为这个例子使用一些不同的HTML：</p> + +<pre class="brush: html"><button>Press me!</button></pre> + +<pre class="brush: css">button { + width: 150px; + font-size: 1.1rem; + line-height: 2; + border-radius: 10px; + border: none; + background-image: linear-gradient(to bottom right, #777, #ddd); + box-shadow: 1px 1px 1px black, + inset 2px 3px 5px rgba(0,0,0,0.3), + inset -2px -3px 5px rgba(255,255,255,0.5); +} + +button:focus, button:hover { + background-image: linear-gradient(to bottom right, #888, #eee); +} + +button:active { + box-shadow: inset 2px 2px 1px black, + inset 2px 3px 5px rgba(0,0,0,0.3), + inset -2px -3px 5px rgba(255,255,255,0.5); +}</pre> + +<p>结果如下：</p> + +<p>{{ EmbedLiveSample('其他盒子阴影特点', '100%', 70) }}</p> + +<p>在这里我们将focus/hover/active这些声明一起设置了按钮样式。这个按钮的默认状态下设置了一个简单的黑色盒阴影，并且加上了一对inset阴影，一个明的，一个暗的，位于按钮的两个对角上，以此给按钮一种很棒的阴影效果。</p> + +<p>当按钮被按下时，这里的active声明将第一个盒阴影换成一个非常暗的inset阴影。给人一种按钮被按下的样子。</p> + +<div class="note"> +<p><strong>注意</strong>: 还有一个可以在box-shadow中设置的值 — 另外一个位于颜色值前面可选的长度值，即<strong>spread radius</strong>，如果设置了这个值，将会导致阴影变得比原始的阴影更大，这个值不是很常用，但是值得一提。</p> +</div> + +<h2 id="Filters（滤镜）">Filters（滤镜）</h2> + +<p>CSS滤镜提供了一种过滤元素的方法，就好比你在诸如Photoshop这样的平面设计程序中过滤元素一样。有大量的不同的选项可以使用，你可以在{{cssxref("filter")}} 参考页面阅读所有相关的更多细节。在这篇文章中，我们将会向你介绍它的语法，并且向你展示将会发生多么有趣的结果。</p> + +<p>基本上，滤镜可以应用在任何元素上，块元素（block）或者行内元素（inline）——你只需要使用<code>filter</code>属性，并且给他一个特定的过滤函数的值。有些可用的滤镜选项和其他CSS特性做的事情十分相似，例如<code>drop-shadow()</code>的工作方式以及产生的效果和 {{cssxref("box-shadow")}} 或{{cssxref("text-shadow")}}十分相似。然而滤镜真正出色的地方在于，它们作用于盒（box）内内容（content）的确切形状，而不仅仅将盒子本身作为一个大的块，这看起来会更棒，即使他们可能不会总是变成你想要的模样。让我们来举一个简单的例子来阐明我们的意思：</p> + +<p>首先，一些简单的 HTML:</p> + +<pre class="brush: html"><p class="filter">Filter</p> + +<p class="box-shadow">Box shadow</p> +</pre> + +<p>现在是一些CSS,用来给它们各自一个下降的阴影:</p> + +<pre class="brush: css">p { + margin: 1rem auto; + padding: 20px; + width: 100px; + border: 5px dashed red; +} + +.filter { + -webkit-filter: drop-shadow(5px 5px 1px rgba(0,0,0,0.7)); + filter: drop-shadow(5px 5px 1px rgba(0,0,0,0.7)); +} + +.box-shadow { + box-shadow: 5px 5px 1px rgba(0,0,0,0.7); +}</pre> + +<p>这给了我们一个如下的结果:</p> + +<p>{{ EmbedLiveSample('Filters（滤镜）', '100%', 200) }}</p> + +<p>正如你所看到的, drop-shadow滤镜跟随着文本和border dashes的确切形状。而盒阴影（box-shadow）仅仅跟随着盒的四方。</p> + +<p>其他需要注意的事:</p> + +<ul> + <li>滤镜很新——它们可以被大多数的现代的浏览器支持，包括Microsoft Edge，但它们一点也不能被IE浏览器支持。因此如果你在你的设计中使用滤镜，你需要确保你的内容即使没有滤镜也是可用的。</li> + <li>你会看到我们在<code>filter</code>属性中通过<code>-webkit-</code>前缀包含了一个版本信息，这被称为一个 {{glossary("Vendor Prefix")}}，有时会被浏览器使用，以在一个新特性完整实现之前，当它与无前缀版本没有冲突的时候支持并实验这个特性。Vendor prefixes永远都不被指望着被web开发人员使用，但是它们有时候确实会被在产品页面中使用，即当实验性的特性确实被需要时。在这个实例中，Chrome/Safari/Opera 目前要求这些属性的<code>-webkit-</code>版本，而Edge 和 Firefox则使用后者，无前缀版本。</li> +</ul> + +<div class="note"> +<p><strong>注意</strong>: 如果你确实决定在你的代码中使用前缀，确保你包括了所有需要的前缀以及无前缀的版本，这样才会有尽可能多的浏览器能够使用这些特性，并且如果浏览器落下了前缀，它们也能够使用无前缀的版本。另外需要注意的是这些实验性的特性可能会有改变，这可能会导致你的代码被破坏，在前缀被去除之前，最好还是仅仅实验这些特性。</p> +</div> + +<p> 你可以看到更多关于滤镜的例子，在 <a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/filters.html">filters.html</a> (也可以看 <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/filters.html">source code</a>).</p> + +<h2 id="Blend_modes（混合模式）">Blend modes（混合模式）</h2> + +<p>CSS混合模式允许我们为元素添加一个混合模式 ，以当两个元素重叠时，指定一个混合的效果——最终每个像素所展示的颜色将会是原来像素中颜色和其下面一层相组合之后的结果，对于像Photoshop这样的图形程序的用户来说，混合模式应该也非常熟悉。</p> + +<p>这里有两个在 CSS中用到的属性:</p> + +<ul> + <li>{{cssxref("background-blend-mode")}}, 用来将单个元素的多重背景图片和背景颜色设置混合在一起。</li> + <li>{{cssxref("mix-blend-mode")}}, 用来将一个元素与它覆盖的那些元素各自所设置的背景（background）和内容(content)混合在一起。</li> +</ul> + +<p>你可以找到比这里用到的更多的例子，在我们的<a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/blend-modes.html">blend-modes.html</a> 示例页面 (查看 <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/blend-modes.html">source code</a>), 或者在 {{cssxref("<blend-mode>")}} 参考页面。</p> + +<div class="note"> +<p><strong>注意</strong>: 混合模式（Blend modes ）同样也很新，而且略微不如滤镜（filter）的被支持度。至今也没有没Edge支持， 并且 Safari 也仅仅支持部分混合模式选项。</p> +</div> + +<h3 id="background-blend-mode">background-blend-mode</h3> + +<p>让我们再来看一些例子以帮助我们更好的理解这一点。首先，{{cssxref("background-blend-mode")}}——在这里我们将展示一对简单的{{htmlelement("div")}}s，这样你就可以比较原始版本和混合版本：</p> + +<pre class="brush: html"><div> +</div> +<div class="multiply"> +</div></pre> + +<p>现在来点 CSS — 我们正在给<code><div></code>添加一个背景图像和一个绿色的背景色：</p> + +<pre class="brush: css">div { + width: 250px; + height: 130px; + padding: 10px; + margin: 10px; + display: inline-block; + background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px; + background-color: green; +} + +.multiply { + background-blend-mode: multiply; +}</pre> + +<p>我们得到的结果是这样的——你可以看到左边的原始版本，以及右边的多层混合版本：</p> + +<p>{{ EmbedLiveSample('background-blend-mode', '100%', 200) }}</p> + +<h3 id="mix-blend-mode">mix-blend-mode</h3> + +<p>现在让我们看一看 {{cssxref("mix-blend-mode")}}。 这里我们将给出两个相同的<code><div></code>s，但是每个都位于一个有着紫色背景的简单的<code><div></code>上，来向你展示元素们将会怎样混合在一起：</p> + +<pre class="brush: html"><article> + No mix blend mode + <div> + + </div> + <div> + </div> +</article> + +<article> + Multiply mix + <div class="multiply-mix"> + + </div> + <div> + </div> +</article></pre> + +<p>这是我们将用来装饰它的CSS:</p> + +<pre class="brush: css">article { + width: 300px; + height: 180px; + margin: 10px; + position: relative; + display: inline-block; +} + +div { + width: 250px; + height: 130px; + padding: 10px; + margin: 10px; +} + +article div:first-child { + position: absolute; + top: 10px; + left: 0; + background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px; + background-color: green; +} + +article div:last-child { + background-color: purple; + position: absolute; + bottom: -10px; + right: 0; + z-index: -1; +} + +.multiply-mix { + mix-blend-mode: multiply; +}</pre> + +<p>结果如下：</p> + +<p>{{ EmbedLiveSample('mix-blend-mode', '100%', 200) }}</p> + +<p>你可以看到，多层混合（mix-blend）不仅混合了两种背景图像，还混合了在<code><div></code>下面的颜色。</p> + +<div class="note"> +<p><strong>注意：</strong>如果您不理解上面的一些布局属性，请不要担心，像 {{cssxref("position")}}， {{cssxref("top")}}， {{cssxref("bottom")}}， {{cssxref("z-index")}}等。我们将在<a href="/zh-CN/docs/Learn/CSS/CSS_layout">CSS Layout</a>模块中详细地介绍这些内容。</p> +</div> + +<h2 id="-webkit-background-clip_text">-webkit-background-clip: text</h2> + +<p>另一个我们认为在继续之前会提到的新特性(目前支持Chrome、Safari和Opera,和在Firefox正在实现)是{{cssxref("background-clip")}}的 <code>text</code> 值。当与专有 <code>-webkit-text-fill-color: transparent;</code> 特性一起使用时，这允许您将背景图像剪贴到元素文本的形状，从而产生一些不错的效果。这不是一个正式的标准，但是已经在多个浏览器中实现了，因为它很流行，并且被开发人员广泛使用。在这种情况下，这两种属性都需要一个<code>-webkit-</code>供应商前缀，甚至对于非webkit/Chrome-based的浏览器来说也是如此。</p> + +<pre class="brush: css">.text-clip { + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +}</pre> + +<p>那么为什么其他浏览器会实现一个<code>-webkit-</code>前缀？主要是为了浏览器兼容性——许多web开发人员已经开始使用<code>-webkit-</code>前缀来实现web站点，它开始看起来像其他的浏览器一样被破坏了，而实际上他们遵循的是标准。因此，他们被迫实施了一些这样的功能。这就凸显了在你的工作中使用非标准和/或带前缀的CSS特性的危险——这不仅会导致浏览器兼容性问题，而且还会发生变化，因此你的代码随时可能崩溃。坚持标准要好得多。</p> + +<p>如果您确实希望在您的生产工作中使用这些特性，请确保在浏览器中进行彻底的测试，并检查这些特性不工作的地方，站点仍然可用。</p> + +<div class="note"> +<p><strong>注意：</strong>对于一个完整的<code>-webkit-background-clip: text</code>代码示例，见<a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/background-clip-text.html">background-clip-text.html</a>（也可以见<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/background-clip-text.html">源码</a>）。</p> +</div> + +<h2 id="自主学习尝试一些效果">自主学习:尝试一些效果</h2> + +<p>现在轮到你了。对于这种自主学习，我们希望您使用下面所提供的代码来试验上面所读到的一些效果。</p> + +<p>如果你犯了一个错误，你可以用<em>Reset</em>按钮来重置这个例子。</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> + <h2>HTML Input</h2> + <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><div class="style-me"> +</div></textarea> + + <h2>CSS Input</h2> + <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">.style-me { + width: 280px; + height: 130px; + padding: 10px; + margin: 10px; + display: inline-block; + background-color: red; + background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px, + linear-gradient(to bottom right, #f33, #a33); +} </textarea> + + <h2>Output</h2> + <div class="output" style="width: 90%;height: 15em;padding: 10px;border: 1px solid #0095dd;overflow:hidden;"></div> + <div class="controls"> + <input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;"> + </div> +</div> +</pre> + +<pre class="brush: js">var htmlInput = document.querySelector(".html-input"); +var cssInput = document.querySelector(".css-input"); +var reset = document.getElementById("reset"); +var htmlCode = htmlInput.value; +var cssCode = cssInput.value; +var output = document.querySelector(".output"); + +var styleElem = document.createElement('style'); +var headElem = document.querySelector('head'); +headElem.appendChild(styleElem); + +function drawOutput() { + output.innerHTML = htmlInput.value; + styleElem.textContent = cssInput.value; +} + +reset.addEventListener("click", function() { + htmlInput.value = htmlCode; + cssInput.value = cssCode; + drawOutput(); +}); + +htmlInput.addEventListener("input", drawOutput); +cssInput.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 820) }}</p> + +<h2 id="总结">总结</h2> + +<p>我们希望这篇文章被证明是很有趣的——玩着闪亮的玩具通常是很有趣的，而且看看什么样的工具在尖端的浏览器中是可以得到的是我们很感兴趣的。您已经到达了样式盒文章的末尾，因此，接下来您将通过我们的评估来测试您的box syling技能。</p> + +<p>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Styling tables", "Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}</p> diff --git a/files/zh-cn/learn/css/building_blocks/backgrounds_and_borders/index.html b/files/zh-cn/learn/css/building_blocks/backgrounds_and_borders/index.html new file mode 100644 index 0000000000..ebbfda7feb --- /dev/null +++ b/files/zh-cn/learn/css/building_blocks/backgrounds_and_borders/index.html @@ -0,0 +1,318 @@ +--- +title: 背景与边框 +slug: Learn/CSS/Building_blocks/Backgrounds_and_borders +translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}</div> + +<p>在这节课中，我们来看看，使用CSS背景和边框来做一些，具有一些创造性的事情。渐变、背景图像和圆角，背景和边框的巧妙运用是CSS中许多样式问题的答案。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">预备知识：</th> + <td>基本的计算机知识，<a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">安装基本的软件</a>，<a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">文件处理</a>基本知识, HTML基础知识 (如果不了解HTML，请移步 <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">学习HTML入门</a>)，以及CSS如何工作的基本常识 (如果不了解CSS，请移步 <a href="/en-US/docs/Learn/CSS/First_steps">学习CSS第一步</a>.)</td> + </tr> + <tr> + <th scope="row">目标：</th> + <td>学习如何在盒模型中使用背景和边框。</td> + </tr> + </tbody> +</table> + +<h2 id="CSS的背景样式">CSS的背景样式</h2> + +<p>CSS {{cssxref("background")}}属性是我们将在本课中学习的许多普通背景属性的简写。如果您在样式表中发现了一个复杂的背景属性，可能会觉得难以理解，因为可以同时传入这么多值。</p> + +<pre class="brush: css notranslate"><code>.box { + background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat, + url(big-star.png) center no-repeat, rebeccapurple; +} </code> +</pre> + +<p>在本教程的后面部分，我们将返回到简写的工作方式，但是首先，我们通过分开使用各个普通背景属性的方式，看一下在CSS中使用背景可以做哪些不同的事情。</p> + +<h3 id="背景颜色">背景颜色</h3> + +<p>{{cssxref("background-color")}}属性定义了CSS中任何元素的背景颜色。属性接受任何有效的<code><color>值</code>。背景色扩展到元素的内容和内边距的下面。</p> + +<p>在下面的示例中，我们使用了各种颜色值来为元素盒子添加背景颜色：heading和{{htmlelement("span")}}元素。</p> + +<p><strong>尝试修改为任何可用的 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/color_value"><color></a> 值。</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/color.html", '100%', 800)}}</p> + +<h3 id="背景图片">背景图片</h3> + +<p>{{cssxref("background-image")}}属性允许在元素的背景中显示图像。在下面的例子中，我们有两个方框——一个是比方框大的背景图像，另一个是星星的小图像。</p> + +<p>这个例子演示了关于背景图像的两种情形。默认情况下，大图不会缩小以适应方框，因此我们只能看到它的一个小角，而小图则是平铺以填充方框。在这种情况下，实际的图像只是单独的一颗星星。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background-image.html", '100%', 800)}}</p> + +<p><strong>如果除了背景图像外，还指定了背景颜色，则图像将显示在颜色的顶部。尝试向上面的示例添加一个background-color属性，看看效果如何。</strong></p> + +<h4 id="控制背景平铺">控制背景平铺</h4> + +<p>{{cssxref("background-repeat")}}属性用于控制图像的平铺行为。可用的值是:</p> + +<ul> + <li><code>no-repeat</code> — 不重复。</li> + <li><code>repeat-x</code> —水平重复。</li> + <li><code>repeat-y</code> —垂直重复。</li> + <li><code>repeat</code> — 在两个方向重复。</li> +</ul> + +<p><strong>在下面的示例中尝试这些值。我们已经将值设置为no-repeat，因此您将只能看到一个星星。尝试不同的值—repeat-x和repeat-y—看看它们的效果如何。</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/repeat.html", '100%', 800)}}</p> + +<h4 id="调整背景图像的大小">调整背景图像的大小</h4> + +<p>在上面的例子中，我们有一个很大的图像，由于它比作为背景的元素大，所以最后被裁剪掉了。在这种情况下，我们可以使用 {{cssxref("background-size")}}属性，它可以设置长度或百分比值，来调整图像的大小以适应背景。</p> + +<p>你也可以使用关键字:</p> + +<ul> + <li><code>cover</code> —浏览器将使图像足够大，使它完全覆盖了盒子区，同时仍然保持其高宽比。在这种情况下，有些图像可能会跳出盒子外</li> + <li><code>contain</code> — 浏览器将使图像的大小适合盒子内。在这种情况下，如果图像的长宽比与盒子的长宽比不同，则可能在图像的任何一边或顶部和底部出现间隙。</li> +</ul> + +<p>在下面的例子中，我使用了上面例子中的大图，并使用长度单位来调整方框内的大小。你可以看到这扭曲了图像。</p> + +<p>试试下面：</p> + +<ul> + <li>改变用于修改背景大小的长度单位。</li> + <li>去掉长度单位，看看使用<code>background-size: cover</code> or <code>background-size: contain</code>会发生什么。</li> + <li>如果您的图像小于盒子，您可以更改background-repeat的值来重复图像。</li> +</ul> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/size.html", '100%', 800)}}</p> + +<h4 id="背景图像定位">背景图像定位</h4> + +<p>{{cssxref("background-position")}}属性允许您选择背景图像显示在其应用到的盒子中的位置。它使用的坐标系中，框的左上角是(0,0)，框沿着水平(x)和垂直(y)轴定位。</p> + +<div class="blockIndicator note"> +<p><strong>注意：</strong>默认的背景位置值是(0,0)。</p> +</div> + +<p>最常见的背景位置值有两个单独的值——一个水平值后面跟着一个垂直值。</p> + +<p>你可以使用像<code>top</code>和<code>right</code>这样的关键字(在{{cssxref("background-image")}}页面上查找其他的关键字):</p> + +<pre class="brush: css notranslate"><code>.box { + background-image: url(star.png); + background-repeat: no-repeat; + background-position: top center; +} </code> +</pre> + +<p>或者使用 <a href="/en-US/docs/Web/CSS/length">长度值</a>, and <a href="/en-US/docs/Web/CSS/percentage">百分比</a>：</p> + +<pre class="brush: css notranslate"><code>.box { + background-image: url(star.png); + background-repeat: no-repeat; + background-position: 20px 10%; +} </code> +</pre> + +<p>你也可以混合使用关键字，长度值以及百分比，例如：</p> + +<pre class="brush: css notranslate">.box { + background-image: url(star.png); + background-repeat: no-repeat; + background-position: top 20px; +}</pre> + +<p>最后，您还可以使用4-value语法来指示到盒子的某些边的距离——在本例中，长度单位是与其前面的值的偏移量。所以在下面的CSS中，我们将背景从顶部调整20px，从右侧调整10px:</p> + +<pre class="brush: css notranslate"><code>.box { + background-image: url(star.png); + background-repeat: no-repeat; + background-position: top 20px right 10px; +} </code></pre> + +<p><strong>使用下面的示例来处理这些值并在框内移动星星。</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/position.html", '100%', 800)}}</p> + +<div class="blockIndicator note"> +<p><strong>注意：</strong><code>background-position</code>是{{cssxref("background-position-x")}}和{{cssxref("background-position-y")}}的简写，它们允许您分别设置不同的坐标轴的值。</p> +</div> + +<h3 id="渐变背景">渐变背景</h3> + +<p>当渐变用于背景时，也可以使用像图像一样的{{cssxref("background-image")}}属性设置。</p> + +<p>您可以在MDN的<code><gradient></code>数据类型页面上，了解更多关于渐变的不同类型，以及使用它们可以做的事情。使用渐变的一个有趣方法是，使用web上可用的许多CSS渐变生成器之一，比如<a href="https://cssgradient.io/">这个 </a>。您可以创建一个渐变，然后复制并粘贴生成它的源代码。</p> + +<p>在下面的示例中尝试一些不同的渐变。在这两个盒子里，我们分别有一个线性梯度，它延伸到整个盒子上，还有一个径向梯度，它有一个固定的大小，因此会重复。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/gradients.html", '100%', 800)}}</p> + +<h3 id="多个背景图像">多个背景图像</h3> + +<p>也可以有多个背景图像——在单个属性值中指定多个<code>background-image</code>值，用逗号分隔每个值。</p> + +<p>当你这样做时，你可能会以背景图像互相重叠而告终。背景将与最后列出的背景图像层在堆栈的底部，背景图像在代码列表中最先出现的在顶端。</p> + + + +<div class="blockIndicator note"> +<p><strong>注意：</strong>渐变可以与常规的背景图像很好地混合在一起。</p> +</div> + +<p>其它 <code>background-*</code>属性，该属性值用逗号分隔的方式设置。例如下列<code>background-image</code>：</p> + +<pre class="brush: css notranslate">background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png); +background-repeat: no-repeat, repeat-x, repeat; +background-position: 10px 20px, top right;</pre> + +<p>不同属性的每个值，将与其他属性中相同位置的值匹配。例如，上面的image1的background-repeat值将是no-repeat。但是，当不同的属性具有不同数量的值时，会发生什么情况呢？答案是较小数量的值会循环—在上面的例子中有四个背景图像，但是只有两个背景位置值。前两个位置值将应用于前两个图像，然后它们将再次循环—image3将被赋予第一个位置值，image4将被赋予第二个位置值。</p> + +<p><strong>我们来试一试。在下面的示例中包含了两个图像。为了演示叠加顺序，请尝试切换哪个背景图像在列表中最先出现。或使用其他属性更改位置、大小或重复值。</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/multiple-background-image.html", '100%', 800)}}</p> + +<h3 id="背景附加">背景附加</h3> + +<p>另一个可供选择的背景是指定他们如何滚动时，内容滚动。这是由{{cssxref("background-attachment")}}属性控制的，它可以接受以下值:</p> + +<ul> + <li><code>scroll</code>: 使元素的背景在页面滚动时滚动。如果滚动了元素内容，则背景不会移动。实际上，背景被固定在页面的相同位置，所以它会随着页面的滚动而滚动。</li> + <li><code>fixed</code>: 使元素的背景固定在视图端口上，这样当页面或元素内容滚动时，它就不会滚动。它将始终保持在屏幕上相同的位置。</li> + <li><code>local</code>: 这个值是后来添加的(它只在Internet Explorer 9+中受支持，而其他的在IE4+中受支持)，因为滚动值相当混乱，在很多情况下并不能真正实现您想要的功能。局部值将背景固定在设置的元素上，因此当您滚动元素时，背景也随之滚动。</li> +</ul> + +<p>{{cssxref("background-attachment")}}属性只有在有内容要滚动时才会有效果，所以我们做了一个示例来演示这三个值之间的区别——看看 <a href="http://mdn.github.io/learning-area/css/styling-boxes/backgrounds/background-attachment.html">background-attachment.html</a> (或者看看这儿的 <a href="https://github.com/mdn/learning-area/tree/master/css/styling-boxes/backgrounds">源代码</a>))。</p> + +<h3 id="使用background_的简写">使用background 的简写</h3> + +<p>正如我在本课开始时提到的，您将经常看到使用{{cssxref("background")}}属性指定的背景。这种简写允许您一次设置所有不同的属性。</p> + +<p>如果使用多个背景，则需要为第一个背景指定所有普通属性，然后在逗号后面添加下一个背景。在下面的例子中，我们有一个渐变，它指定大小和位置，然后是一个无重复的图像背景，它指定位置，然后是一个颜色。</p> + +<p>这里有一些规则，需要在简写背景属性时遵循，例如:</p> + +<ul> + <li><code>background-color</code> 只能在逗号之后指定。</li> + <li><code>background-size</code> 值只能包含在背景位置之后，用'/'字符分隔，例如：<code>center/80%</code>。</li> +</ul> + +<p>查看{{cssxref("background")}}的MDN页面，以查看所有的注意事项。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background.html", '100%', 800)}}</p> + +<h3 id="背景的可访问性考虑">背景的可访问性考虑</h3> + +<p>当你把文字放在背景图片或颜色上面时，你应该注意你有足够的对比度让文字对你的访客来说是清晰易读的。如果指定了一个图像，并且文本将被放置在该图像的顶部，您还应该指定一个<code>background-color</code> ，以便在图像未加载时文本也足够清晰。</p> + +<p>屏幕阅读者不能解析背景图像，因此背景图片应该只是纯粹的装饰；任何重要的内容都应该是HTML页面的一部分，而不是包含在背景中。</p> + +<h2 id="边框">边框</h2> + +<p>在学习盒子模型时，我们发现了边框如何影响盒子的大小。在这节课中，我们将看看如何创造性地使用边界。通常，当我们使用CSS向元素添加边框时，我们使用一个简写属性在一行CSS中设置边框的颜色、宽度和样式。我们可以使用{{cssxref("border")}}为一个框的所有四个边设置边框。</p> + +<pre class="brush: css notranslate"><code>.box { + border: 1px solid black; +} </code></pre> + +<p>或者我们可以只设置盒子的一个边，例如:</p> + +<pre class="brush: css notranslate"><code>.box { + border-top: 1px solid black; +} </code></pre> + +<p>这些简写的等价于：</p> + +<pre class="brush: css notranslate"><code>.box { + border-width: 1px; + border-style: solid; + border-color: black; +} </code></pre> + +<p>也可以使用更加细粒度的属性：</p> + +<pre class="brush: css notranslate"><code>.box { + border-top-width: 1px; + border-top-style: solid; + border-top-color: black; +} </code></pre> + +<div class="blockIndicator note"> +<p><strong>注意</strong>：这些顶部、右侧、底部和左侧边框属性还具有与文档写入模式相关的映射逻辑属性(例如，从左到右或从右到左的文本，或从上到下)。在下一课中，我们将探讨这些问题，这包括处理不同的文本指示 <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">详情</a>。</p> +</div> + +<p><strong>有各种各样的样式可以用于边框。在下面的例子中，为框的四个边使用了不同的边框样式。调整边框样式、宽度和颜色，看看边框是如何工作的。</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/borders.html", '100%', 800)}}</p> + +<h3 id="圆角">圆角</h3> + +<p>通过使用{{cssxref("border-radius")}}属性和与方框的每个角相关的长边来实现方框的圆角。可以使用两个长度或百分比作为值，第一个值定义水平半径，第二个值定义垂直半径。在很多情况下，您将只传递一个值，这两个值都将使用。</p> + +<p>例如，要使一个盒子的四个角都有10px的圆角半径：</p> + +<pre class="brush: css notranslate"><code>.box { + border-radius: 10px; +} </code></pre> + +<p>或使右上角的水平半径为1em，垂直半径为10％：</p> + +<pre class="brush: css notranslate"><code>.box { + border-top-right-radius: 1em 10%; +} </code></pre> + +<p>我们在下面的示例中设置了所有四个角，然后更改右上角的值使之不同。您可以使用这些值来更改圆角样式。查看{{cssxref("border-radius")}}的属性页，查看可用的语法选项。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/corners.html", '100%', 800)}}</p> + +<h2 id="玩转背景和边框">玩转背景和边框</h2> + +<p>为了测试你的新知识，尝试使用背景和边框创建以下内容，使用下面的例子作为起点:</p> + +<ol> + <li>给方框一个5px的黑色实心边框，圆角为10px。</li> + <li>添加一个背景图像(使用URL balloons.jpg)，并调整它的大小，使它能够覆盖盒子。</li> + <li>给<h2>一个半透明的黑色背景颜色，并使文本为白色。</li> +</ol> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/task.html", '100%', 800)}}</p> + +<div class="blockIndicator note"> +<p><strong>注意</strong>：您可以点击 <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md">这儿</a> 查看解决方案——但请先尝试一下自己能否实现。</p> +</div> + +<h2 id="总结">总结</h2> + +<p>我们在这里已经介绍了很多，您可以看到有很多要添加背景或边框到盒子中。如果您想了解更多关于我们讨论过的特性的信息，请浏览不同的属性页面。MDN上的每个页面都有更多的用法示例，供您玩转并增强您的知识。</p> + +<p>在下一课中，我们将了解文档排版与CSS的相互影响。以及了解当文本不是从左向右流动时会发生什么?</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="模块目录">模块目录</h2> + +<ol> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">层叠与继承</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors">CSS选择器</a> + <ul> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">标签，类，ID选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">伪类和伪元素</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Combinators">关系选择器</a></li> + </ul> + </li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model">盒模型</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景与边框</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">处理不同文字方向的文本</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Overflowing_content">溢出的内容</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units">值和单位</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">在CSS中调整大小</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Images_media_form_elements">图像、媒体和表单元素</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables">样式化表格</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Debugging_CSS">调试CSS</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Organizing">组织CSS</a><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Organizing"> </a></li> +</ol> diff --git a/files/zh-cn/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/zh-cn/learn/css/building_blocks/cascade_and_inheritance/index.html new file mode 100644 index 0000000000..d3eefdefe6 --- /dev/null +++ b/files/zh-cn/learn/css/building_blocks/cascade_and_inheritance/index.html @@ -0,0 +1,332 @@ +--- +title: 层叠与继承 +slug: Learn/CSS/Building_blocks/Cascade_and_inheritance +translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance +--- +<div>{{LearnSidebar}}{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}</div> + +<p>本文旨在让你理解CSS的一些最基本的概念——层叠、优先级和继承——这些概念决定着如何将CSS应用到HTML中，以及如何解决冲突。</p> + +<p>尽管与课程的其他部分相比，完成这节课可能看起来没有那么直接的相关性，而且更学术性一些，但是理解这些东西将为您以后节省很多痛苦！ 我希望您仔细阅读本节，并在继续下一步学习之前，确保您是否理解了这些概念。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">预备知识:</th> + <td>基本的计算机知识，<a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">安装基本的软件</a>，<a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">文件处理</a>基本知识, HTML基础知识 (如果不了解HTML，请移步 <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">学习HTML入门</a>)，以及CSS如何工作的基本常识 (如果不了解CSS，请移步 <a href="/en-US/docs/Learn/CSS/First_steps">学习CSS第一步</a>.)</td> + </tr> + <tr> + <th scope="row">目标：</th> + <td>学习层叠、优先级，以及在CSS中继承是如何工作的。</td> + </tr> + </tbody> +</table> + +<h2 id="冲突规则">冲突规则</h2> + +<p>CSS代表<strong>层叠样式表(Cascading Style Sheets)</strong>，理解第一个词<em>cascading</em>很重要— cascade 的表现方式是理解CSS的关键。</p> + +<p>在某些时候，在做一个项目过程中你会发现一些应该产生效果的样式没有生效。通常的原因是你创建了两个应用于同一个元素的规则。<strong>cascade</strong>, 和它密切相关的概念是 <strong>specificity</strong>，决定在发生冲突的时候应该使用哪条规则。设计元素样式的规则可能不是期望的规则，因此需要了解这些机制是如何工作的。</p> + +<p>这里也有<strong>继承</strong>的概念，也就是在默认情况下，一些css属性继承当前元素的父元素上设置的值，有些则不继承。这也可能导致一些和期望不同的结果。</p> + +<p>我们来快速的看下正在处理的关键问题，然后依次了解它们是如何相互影响的，以及如何和css交互的。虽然这些概念难以理解，但是随着不断的练习，你会慢慢熟悉它的工作原理。</p> + +<h3 id="层叠">层叠</h3> + +<p>Stylesheets <strong>cascade（样式表层叠）</strong> — 简单的说，css规则的顺序很重要；当应用两条同级别的规则到一个元素的时候，写在后面的就是实际使用的规则。</p> + +<p>下面的例子中，我们有两个关于 <code>h1</code> 的规则。<code>h1</code> 最后显示蓝色 — 这些规则有相同的优先级，所以顺序在最后的生效。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/cascade-simple.html", '100%', 400)}} </p> + +<h3 id="优先级">优先级</h3> + +<p>浏览器是根据优先级来决定当多个规则有不同选择器对应相同的元素的时候需要使用哪个规则。它基本上是一个衡量选择器具体选择哪些区域的尺度：</p> + +<ul> + <li>一个元素选择器不是很具体 — 会选择页面上该类型的所有元素 — 所以它的优先级就会低一些。</li> + <li>一个类选择器稍微具体点 — 它会选择该页面中有特定 <code>class</code> 属性值的元素 — 所以它的优先级就要高一点。</li> +</ul> + +<p>举例时间! 下面我们再来介绍两个适用于 <code>h1</code> 的规则。下面的 <code>h1</code> 最后会显示红色 — 类选择器有更高的优先级，因此就会被应用——即使元素选择器顺序在它后面。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-simple.html", '100%', 500)}} </p> + +<p>稍后我们会详细解释优先级评分和其他相关内容。</p> + +<h3 id="继承">继承</h3> + +<p>继承也需要在上下文中去理解 —— 一些设置在父元素上的css属性是可以被子元素继承的，有些则不能。</p> + +<p>举一个例子，如果你设置一个元素的 <code>color</code> 和 <code>font-family</code> ，每个在里面的元素也都会有相同的属性，除非你直接在元素上设置属性。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance-simple.html", '100%', 550)}} </p> + +<p>一些属性是不能继承的 — 举个例子如果你在一个元素上设置 {{cssxref("width")}} 50% ，所有的后代不会是父元素的宽度的50% 。如果这个也可以继承的话，CSS就会很难使用了!</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: 在 MDN CSS 属性引用页面你会发现一个技术信息框，通常在规范区域的底部，列举了属性的很多数据信息，包括能否被继承。参见 <a href="/en-US/docs/Web/CSS/color#Specifications">color property Specifications section</a>, 例子.</p> +</div> + +<h2 id="理解这些概念是如何协同工作的">理解这些概念是如何协同工作的</h2> + +<p>这三个概念一起来控制css规则应用于哪个元素；在下面的内容中，我们将看到它们是如何协同工作的。有时候会感觉有些复杂，但是当你对css有更多经验的时候，你就可以记住它们，即便忘记了细节，可以在网上查到，有经验的开发人员也不会记得所有细节。</p> + +<h2 id="理解继承">理解继承</h2> + +<p>我们从继承开始。下面的例子中我们有一个{{cssxref("ul")}}，里面有两个无序列表。我们已经给 <code><ul></code> 设置了 <strong>border</strong>， <strong>padding </strong>和 <strong>font color</strong>.</p> + +<p><strong>color </strong>应用在直接子元素，也影响其他后代 — 直接子元素<code><li></code>，和第一个嵌套列表中的子项。然后添加了一个 <code>special</code> 类到第二个嵌套列表，其中使用了不同的颜色。然后通过它的子元素继承。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance.html", '100%', 700)}} </p> + +<p>像 widths (上面提到的), margins, padding, 和 borders 不会被继承。如果borders可以被继承，每个列表和列表项都会获得一个边框 — 可能就不是我们想要的结果!</p> + +<p>哪些属性属于默认继承很大程度上是由常识决定的。</p> + +<h3 id="控制继承">控制继承</h3> + +<p>CSS 为控制继承提供了四个特殊的通用属性值。每个css属性都接收这些值。</p> + +<dl> + <dt>{{cssxref("inherit")}}</dt> + <dd>设置该属性会使子元素属性和父元素相同。实际上，就是 "开启继承".</dd> + <dt>{{cssxref("initial")}}</dt> + <dd>设置属性值和浏览器默认样式相同。如果浏览器默认样式中未设置且该属性是自然继承的，那么会设置为 <code>inherit</code> 。</dd> + <dt>{{cssxref("unset")}}</dt> + <dd>将属性重置为自然值，也就是如果属性是自然继承那么就是 <code>inherit</code>，否则和 <code>initial</code>一样</dd> +</dl> + +<div class="blockIndicator note"> +<p><strong>注</strong>: 还有一个新的属性, {{cssxref("revert")}}， 只有很少的浏览器支持。</p> +</div> + +<div class="blockIndicator note"> +<p><strong>注</strong>: 见 {{SectionOnPage("/zh-CN/docs/Web/CSS/Cascade", "Origin of CSS declarations")}} 有更多信息和具体是怎么工作的。</p> +</div> + +<p>下面的例子你可以通过修改css来查看它们的功能，写代码是掌握html和css最好的办法。</p> + +<p>例子：</p> + +<ol> + <li>第二个列表项有类 <code>my-class-1</code> 。它设置了内部元素来继承属性。如果你删除这个类，它会如何改变链接的颜色?</li> + <li>你知道为什么第三个和第四个链接会是这样的颜色? 如果不知道看看之前的内容。</li> + <li>那个链接的颜色会改变如果你对 <code><a></code> 添加一个新样式 — 例如 <code>a { color: red; }</code>?</li> +</ol> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/keywords.html", '100%', 700)}} </p> + +<h3 id="重设所有属性值">重设所有属性值</h3> + +<p>CSS 的 shorthand 属性 <code>all</code> 可以用于同时将这些继承值中的一个应用于（几乎）所有属性。它的值可以是其中任意一个(<code>inherit</code>, <code>initial</code>, <code>unset</code>, or <code>revert</code>)。这是一种撤销对样式所做更改的简便方法，以便回到之前已知的起点。</p> + +<p>下面的例子中有两个<strong>blockquote </strong>。第一个用元素本身的样式 ，第二个设置 <code>all</code> 为 <code>unset</code></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/all.html", '100%', 700)}} </p> + +<p>试着将 <code>all</code> 改成其他可能的值然后观察有什么不一样。</p> + +<h2 id="理解层叠">理解层叠</h2> + +<p>我们现在明白了为什么嵌套在html结构中的段落和应用于正文中的css颜色相同，从入门课程中，我们了解了如何将文档中的任何修改应用于某个对象的css，无论是把css指定某个元素还是创建一个类。现在，我们将要了解层叠如何定义在不止一个元素的时候怎么应用css规则。</p> + +<p>有三个因素需要考虑，根据重要性排序如下，前面的更重要：</p> + +<ol> + <li>重要程度</li> + <li>优先级</li> + <li>资源顺序</li> +</ol> + +<p>我们从下往上，看看浏览器是如何决定该应用哪个css规则的。</p> + +<h3 id="资源顺序">资源顺序</h3> + +<p>我们已经看到了顺序对于层叠的重要性。如果你有超过一条规则，而且都是相同的权重，那么最后面的规则会应用。可以理解为后面的规则覆盖前面的规则，直到最后一个开始设置样式。</p> + +<h3 id="优先级_2">优先级</h3> + +<p>在你了解了顺序的重要性后，会发现在一些情况下，有些规则在最后出现，但是却应用了前面的规则。这是因为前面的有更高的<strong>优先级</strong> — 它范围更小，因此浏览器就把它选择为元素的样式。</p> + +<p>就像前面看到的，类选择器的权重大于元素选择器，因此类上定义的属性将覆盖应用于元素上的属性。</p> + +<p>这里需要注意虽然我们考虑的是选择器，以及应用在选中对象上的规则，但不会覆盖所有规则，只有相同的属性。</p> + +<p>这样可以避免重复的 CSS。一种常见的做法是给基本元素定义通用样式，然后给不同的元素创建对应的类。举个例子，在下面的样式中我给2级标题定义了通用样式，然后创建了一些类只修改部分属性的值。最初定义的值应用于所有标题，然后更具体的值通过对应类来实现。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/mixing-rules.html", '100%', 700)}} </p> + +<p>现在让我们来看看浏览器如何计算优先级。我们已经知道一个元素选择器比类选择器的优先级更低会被其覆盖。本质上，不同类型的选择器有不同的分数值，把这些分数相加就得到特定选择器的权重，然后就可以进行匹配。</p> + +<p>一个选择器的优先级可以说是由四个部分相加 (分量)，可以认为是个十百千 — 四位数的四个位数：</p> + +<ol> + <li><strong>千位</strong>： 如果声明在 {{htmlattrxref("style")}} 的属性（内联样式）则该位得一分。这样的声明没有选择器，所以它得分总是1000。</li> + <li><strong>百位</strong>： 选择器中包含ID选择器则该位得一分。</li> + <li><strong>十位</strong>： 选择器中包含类选择器、属性选择器或者伪类则该位得一分。</li> + <li><strong>个位</strong>：选择器中包含元素、伪元素选择器则该位得一分。</li> +</ol> + +<div class="note"> +<p><strong>注</strong>: 通用选择器 (<code>*</code>)，组合符 (<code>+</code>, <code>></code>, <code>~</code>, ' ')，和否定伪类 (<code>:not</code>) 不会影响优先级。</p> +</div> + +<div class="blockIndicator warning"> +<p><strong>警告: </strong>在进行计算时不允许进行进位，例如，20 个类选择器仅仅意味着 20 个十位，而不能视为 两个百位，也就是说，无论多少个类选择器的权重叠加，都不会超过一个 ID 选择器。</p> +</div> + +<p>下面有几个单独的例子，有空可以看看。试着思考下，理解为什么优先级是这样定的。我们还没有深入介绍选择器，不过你可以在MDN上面找到每个选择器的详细信息 <a href="/en-US/docs/Web/CSS/CSS_Selectors">selectors reference</a>.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">选择器</th> + <th scope="col">千位</th> + <th scope="col">百位</th> + <th scope="col">十位</th> + <th scope="col">个位</th> + <th scope="col">优先级</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>h1</code></td> + <td>0</td> + <td>0</td> + <td>0</td> + <td>1</td> + <td>0001</td> + </tr> + <tr> + <td><code>h1 + p::first-letter</code></td> + <td>0</td> + <td>0</td> + <td>0</td> + <td>3</td> + <td>0003</td> + </tr> + <tr> + <td><code>li > a[href*="en-US"] > .inline-warning</code></td> + <td>0</td> + <td>0</td> + <td>2</td> + <td>2</td> + <td>0022</td> + </tr> + <tr> + <td><code>#identifier</code></td> + <td>0</td> + <td>1</td> + <td>0</td> + <td>0</td> + <td>0100</td> + </tr> + <tr> + <td>内联样式</td> + <td>1</td> + <td>0</td> + <td>0</td> + <td>0</td> + <td>1000</td> + </tr> + </tbody> +</table> + +<p>在我们继续之前，先看看这个例子。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-boxes.html", '100%', 700)}} </p> + +<p>这里发生了什么? 首先，我们先看看最上面的选择器规则，你会发现，我们已经把优先级计算出来放在最前面的注释里。</p> + +<ul> + <li>前面两个选择器都是链接背景颜色的样式 — 第二个赢了使得背景变成蓝色因为它多了一个ID选择器：优先级 201 vs. 101。</li> + <li>第三四个选择器都是链接文本颜色样式 — 第二个（第四个）赢了使得文本变成白色因为它虽然少一个元素选择器，但是多了一个类选择器，多了9分。所以优先级是 113 vs. 104。</li> + <li>第5到7个选择器都是鼠标悬停时链接边框样式。第六个显然输给第五个优先级是 23 vs. 24 — 少了个元素选择器。 第七个，比第五第六都高 — 子选择器数量相同，但是有一个元素选择器变成类选择器。所以最后优先级是 33 vs. 23 和 24。</li> +</ul> + +<h3 id="!important">!important</h3> + +<p>有一个特殊的 CSS 可以用来覆盖所有上面所有优先级计算，不过需要很小心的使用 — <code>!important</code>。用于修改特定属性的值， 能够覆盖普通规则的层叠。</p> + +<p>看看这个例子，有两个段落，其中一个有ID。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/important.html", '100%', 700)}} </p> + +<p>让我们看看会发生什么 — 如果有什么疑问，试着删除一些属性：</p> + +<ol> + <li>你会发现第三个规则 {{cssxref("color")}} 和 {{cssxref("padding")}} 的值被应用了，但是 {{cssxref("background-color")}} 没有。为什么? 应该三个都应用，因为顺序规则是后面覆盖前面。</li> + <li>无论如何， 上面的规则赢了，因为类选择器比元素选择器有更高的优先级。</li> + <li>两个元素都有 <code>better</code>{{htmlattrxref("class")}}，但是第二个有 {{htmlattrxref("id")}} 。因为ID选择器比类选择器优先级更高 (一个页面只能有一个独特的ID，但是很多元素都有相同的类 — ID 对于目标非常独特)，红色背景和1 pixel black border 应该都被应用到第二个元素，第一个元素应该是灰色背景和 no border，根据类选择器。</li> + <li>第二个元素有红色背景但是没有边框。为什么?因为 <code>!important</code> 声明在第二条规则里 — 在 <code>border: none</code> 后面，说明即使计算优先级低这个属性也使用这个值。</li> +</ol> + +<div class="note"> +<p><strong>注</strong>： 覆盖 <code>!important</code> 唯一的办法就是另一个 <code>!important</code> 具有 相同<em>优先级</em> 而且顺序靠后，或者更高优先级。</p> +</div> + +<p>了解 <code>!important</code> 是为了在阅读别人代码的时候知道有什么作用。 <strong>但是，强烈建议除了非常情况不要使用它。</strong> <code>!important</code> 改变了层叠的常规工作方式，它会使调试 CSS 问题非常困难，特别是在大型样式表中。</p> + +<p>在一种情况下，你可能不得不使用它：当你不能编辑核心的CSS模块，不能用任何其他方式覆盖，而你又真的想要覆盖一个样式时。但说真的，如果可以避免的话就不要用它。</p> + +<h2 id="CSS位置的影响">CSS位置的影响</h2> + +<p>最后，也很有用，CSS声明的重要性取决于样式表中指定的——它让用户可以设置自定义样式表来覆盖开发人员定义的样式。例如用户可能视力受损，并想在所有网页上设置两倍的正常字体大小，以便更容易进行阅读。</p> + +<h2 id="简而言之">简而言之</h2> + +<p>相互冲突的声明将按以下顺序适用，后一种声明将覆盖前一种声明：</p> + +<ol> + <li>用户代理样式表中的声明(例如，浏览器的默认样式，在没有设置其他样式时使用)。</li> + <li>用户样式表中的常规声明(由用户设置的自定义样式)。</li> + <li>作者样式表中的常规声明(这些是我们web开发人员设置的样式)。</li> + <li>作者样式表中的<code>!important</code>声明</li> + <li>用户样式表中的<code>!important</code> 声明</li> +</ol> + +<p>对于web开发人员的样式表来说，覆盖用户样式表是有意义的，因此设计可以按预期进行，但是有时用户充足的理由覆盖web开发人员样式，正如上面提到的—这可以通过在他们的规则中使用<code>!important</code>来实现。</p> + +<h2 id="主动学习：玩转层叠">主动学习：玩转层叠</h2> + +<p>在这种主动学习中，我们希望您尝试编写一个新的规则，它将覆盖我们默认应用于链接的颜色和背景颜色。您可以使用我们在{{anch("控制继承")}} 节中查看的一个特殊值来在一个新规则中编写一个声明，该声明将重置背景颜色为白色，而不使用实际的颜色值吗?</p> + +<p>如果你犯了一个错误，你总是可以用重置按钮重置它。如果你真的卡住了，看看这里的解决方案 <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-cascade">进入</a>。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/task.html", '100%', 700)}}</p> + +<h2 id="接下来做什么呢？">接下来做什么呢？</h2> + +<p>如果您理解了本文的大部分内容，那么就做得很好了—您已经开始熟悉CSS的基本机制。接下来，我们将详细讨论选择器。</p> + +<p>如果您没有完全理解层叠，优先级和继承，也请不要担心！这绝对是我们到目前为止在课程中所涉及到的最复杂的事情，即使是专业的web开发人员有时也会觉得棘手。我们建议您在继续学习这门课程的过程中，反复阅读这篇文章几次，并继续思考它。</p> + +<p>如果您开始遇到样式没有按照预期应用的奇怪问题，请回到这里。这可能是一个特殊的问题。</p> + +<p>{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="模块目录">模块目录</h2> + +<ol> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">层叠与继承</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors">CSS选择器</a> + <ul> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">标签，类，ID选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">伪类和伪元素</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Combinators">关系选择器</a></li> + </ul> + </li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model">盒模型</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景与边框</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">处理不同文字方向的文本</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Overflowing_content">溢出的内容</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units">值和单位</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">在CSS中调整大小</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Images_media_form_elements">图像、媒体和表单元素</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables">样式化表格</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Debugging_CSS">调试CSS</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Organizing">组织CSS</a><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Organizing"> </a></li> +</ol> diff --git a/files/zh-cn/learn/css/building_blocks/debugging_css/index.html b/files/zh-cn/learn/css/building_blocks/debugging_css/index.html new file mode 100644 index 0000000000..50203520bd --- /dev/null +++ b/files/zh-cn/learn/css/building_blocks/debugging_css/index.html @@ -0,0 +1,196 @@ +--- +title: 调试 CSS +slug: Learn/CSS/Building_blocks/Debugging_CSS +translation_of: Learn/CSS/Building_blocks/Debugging_CSS +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}</div> + +<p>你有时写 CSS 会碰到这样的问题：结果看起来和你想的不太一样。你可能会认为 selector（选择器）匹配到了元素但是什么都没发生，还可能会觉得盒子的大小与你想的有出入。这篇文章会教你着手调试 CSS，向你展示现代浏览器中的 DevTools 是怎样让你更方便地获悉发生了什么。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">必备条件:</th> + <td>会使用计算机、<a href="https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software">安装基础软件</a>、基本了解<a href="https://developer.mozilla.org/zh-CN/Learn/Getting_started_with_the_web/Dealing_with_files">文件处理</a>、有 HTML 基础（请参考<a href="https://wiki.developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML"> HTML 导论</a>）、了解 CSS 工作（请参考 <a href="https://wiki.developer.mozilla.org/zh-CN/docs/Learn/CSS/First_steps">CSS first steps</a>）。</td> + </tr> + <tr> + <th scope="row">目标:</th> + <td>学习浏览器 DevTools 基础、学会对 CSS 进行简单的审查和编辑。</td> + </tr> + </tbody> +</table> + +<h2 id="如何使用浏览器开发者工具">如何使用浏览器开发者工具</h2> + +<p><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">What are browser developer tools</a> 解释了如何在不同的浏览器和平台上打开这些工具。你可能会选择大部分时间在某个浏览器上开发去熟悉里面的工具，不过你还是有必要了解如何在其它浏览器中打开同样的工具。要是你看到多个浏览器间不同的渲染结果，这就会很方便了。</p> + +<p>你还会发现，不同的浏览器弹出开发者工具时会选择把重点放到不同的区域。例如，Firefox 有不错的工具用来可视化处理 CSS 布局，让你能够检查和编辑 <a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Grid Layouts</a>、<a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_Flexbox_layouts">Flexbox</a>、<a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Shapes</a>。不过，浏览器都有类似的基础工具用来检查作用于页面元素的 CSS 属性和值，并对它们进行更改。</p> + +<p>我们这节课会重点看用于处理 CSS 的开发者工具中的一些有用特性。为此，我会用<a href="https://mdn.github.io/css-examples/learn/inspecting/inspecting.html">一个示例</a>。想跟着学习的话，就在新标签页加载该网页吧，并打开开发者工具（上述文章对该工具有描述）。</p> + +<h2 id="比较_DOM_和_View_Source">比较 DOM 和 View Source</h2> + +<p>刚接触开发者工具的人可能会在这个地方产生失误：网页源码（或服务器端的 HTML 文件）显示的和开发者工具的 <a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">HTML Pane</a> 显示的相比起来不太一样。通过 View Source，内容看起来差不多，然而一些差异还是存在的。</p> + +<p>浏览器在渲染的 DOM 中已为你纠正了一些错误的 HTML 部分。如果你错误地闭合了元素（比如开始标签是<code><h2></code>，结束标签是<code></h3></code>。），浏览器会尽力弄清你的意图，之后DOM中的HTML就以 <code><h2></code> 起始，以 <code></h2></code> 结束了。浏览器还会处理好 HTML 文档， JavaScript 做出的更改都会由 DOM 表现出来。</p> + +<p>相比之下，View Source 就是服务器端的 HTML 源码。DevTools 内的 <a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#HTML_tree">HTML tree</a> 展示了浏览器任意时间的渲染结果，让你深入理解正在发生什么。</p> + +<h2 id="审查_CSS">审查 CSS</h2> + +<p>从页面上选择一个元素，可以通过以下方法：右键该元素，选择审查元素（Inspect）；从 DevTools 左侧 HTML tree 中选择该元素。试试选择 class 为 <code>box1</code> 的元素吧，它是页面上的第一个元素，周围画有边框。</p> + +<p><img alt="The example page for this tutorial with DevTools open." src="https://mdn.mozillademos.org/files/16606/inspecting1.png" style="border-style: solid; border-width: 1px; height: 1527px; width: 2278px;"></p> + +<p>如果查看 HTML 右边的 <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Rules_view">Rules view</a> 栏，你应该能看到该元素的 CSS 属性与值。你能看到直接应用到 <code>box1</code> 类上的规则，还有其继承了祖先的 CSS（该例中指 <code><body></code>）。这在一种情况下就很有帮助——你看到有些 CSS 并非在计划之内（或许它们继承自某个父元素然而你没有覆盖它们）。</p> + +<p>另一个有用的功能是将简写属性展开的功能。在我们的示例里面使用了 <code>margin</code> 的简写。</p> + +<p><strong>点击小箭头来展开界面，显示不同的完整属性和它们的值。</strong></p> + +<p><strong>你可以在 Rules view 面板活动的时候打开或关闭值，在你将光标悬浮在上面的时候，就会出现勾选框。取消勾选一个规则的勾选框，例如 <code>border-radius</code>，CSS 就会停止应用。</strong></p> + +<p>你可以运用这个功能来进行对照实验，来决定是否有东西会在应用了一条规则的时候变得更好看，同时也有助于调试，例如如果一个布局出错，你正在研究究竟是哪项属性是问题的源头的时候。</p> + +<h2 id="编辑值">编辑值</h2> + +<p>除了开关属性以外，你还能编辑它们的值。也许你会想要看看是不是另外一种颜色会更好看，或者希望微调什么东西的大小呢？开发者工具可以省去你耗费在编辑样式表和重载页面上的大量时间。</p> + +<p><strong>选择了 <code>box1</code> 以后，点击显示应用在边框的颜色的色块（被涂上颜色的圆），会打开一个颜色选择器，然后你就能尝试一些不同的颜色，页面上的显示会进行实时的更新。类似地，你也可以用这种方法改变宽度或者边框的样式。</strong></p> + +<p><img alt="DevTools Styles Panel with a color picker open." src="https://mdn.mozillademos.org/files/16607/inspecting2-color-picker.png" style="border-style: solid; border-width: 1px; height: 1173px; width: 2275px;"></p> + +<h2 id="添加一个新属性">添加一个新属性</h2> + +<p>你可以使用开发者工具添加属性。也许你已经意识到，你不希望你的盒子继承 <code><body></code> 元素的字体大小，想要给它设定专属的特别颜色了？在将它加入到你的 CSS 文件之前，你可以在开发者工具中试一下。</p> + +<p><strong>你可以点击在规则中合拢的花括号，开始向里面键入一个新的声明，此时你可以开始键入新的属性，开发者工具会展示给你一个自动填充的对应属性列表。在选择了 <code>font-size</code> 以后，键入你想要尝试的值。你也可以点击“+”按钮以添加一个对应于相同选择器的规则，将你的新规则加到那里。</strong></p> + +<p><img alt="The DevTools Panel, adding a new property to the rules, with the autocomplete for font- open" src="https://mdn.mozillademos.org/files/16608/inspecting3-font-size.png" style="border-style: solid; border-width: 1px; height: 956px; width: 2275px;"></p> + +<div class="blockIndicator note"> +<p><strong>备注</strong>：在 Rules view 里面还有其他有用的功能，例如带有无效值的声明会被划掉。你可以在<a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">检查并编辑 CSS</a>里了解更多。</p> +</div> + +<h2 id="理解盒模型">理解盒模型</h2> + +<p>在之前的课程里我们已经讨论了<a href="/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model">盒模型</a>，介绍了替代盒模型，它改变了元素根据给定大小计算自身尺寸的方式，再在这个计算值上加上内边距和边框。开发者工具可以确实帮助你理解元素尺寸的计算方式。</p> + +<p><a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Layout_view">Layout view</a> 给你展示了一张选定元素的盒模型示意图，还有对能改变元素展示方式的属性和值的描述。你可能原本没有精确地使用元素的属性，只设定了初始值，盒模型也可能包含对于这些属性的描述。</p> + +<p>在这一面板上，被详细说明的属性之一为 <code>box-sizing</code> 属性，它控制了元素使用的盒模型种类。</p> + +<p><strong>将这两个分别带有 <code>box1</code> 和 <code>box2</code> 类的盒子进行比较，它们可能都应用了相同的宽度（400像素），但是 <code>box1</code> 显然更宽。你可以在布局面板上看到，它正在使用 <code>content-box</code> 值，即为那种取你赋予元素的大小并在这基础上加上内边距和边框宽度的那种值。</strong></p> + +<p>带有 <code>box2</code> 类的盒子使用了 <code>border-box</code>，所以此时内边距和边框的值是从你赋给元素的值里面减去的，也就是说页面上被盒子占据的空间大小就是你指定的大小，此例中为 <code>width: 400px</code>。</p> + +<p><img alt="The Layout section of the DevTools" src="https://mdn.mozillademos.org/files/16609/inspecting4-box-model.png" style="border-style: solid; border-width: 1px; height: 1532px; width: 2275px;"></p> + +<div class="blockIndicator note"> +<p><strong>备注</strong>：在<a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">仔细检查盒模型</a>里了解更多。</p> +</div> + +<h2 id="解决优先级问题">解决优先级问题</h2> + +<p>有的时候，在开发过程中，尤其是在你需要编辑运行站点的 CSS 的时候，你将会发现你很难让一些 CSS 被应用。无论你做了什么，元素看起来就是不听 CSS 使唤。这时候大概发生的事情是，一个更明确的选择器覆盖了你的改动，此时开发者工具也能帮助你解决这个问题。</p> + +<p>在我们的示例文件里，有两个单词被包含在了一个 <code><em></code> 元素里。一个显示为橘黄色，另一个为深粉色。在 CSS 里我们这样写：</p> + +<pre class="brush: css">em { + color: hotpink; + font-weight: bold; +}</pre> + +<p>但在样式表里面，这些规则的上面有以 <code>.special</code> 为选择器的规则：</p> + +<pre class="brush: css">.special { + color: orange; +}</pre> + +<p>正如你从<a href="/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">层叠与继承</a>里面，我们讨论的关于优先级的经验中回忆起来的那样，类选择器比元素选择器有更高的优先级，因而这就是实际生效的值。开发工具可以帮忙找出这类问题，尤其是在有效的信息被淹没在一个巨大的样式表的某个角落的时候。</p> + +<p><strong>检查有 <code>.special</code> 类的 <code><em></code> 元素，开发者工具会告诉你橘黄色是实际生效的颜色，还会将应用在 em 上的 <code>color</code> 属性划掉。你这样就能看到是类选择器覆盖了元素选择器了。</strong></p> + +<p><img alt="Selecting an em and looking at DevTools to see what is over-riding the color." src="https://mdn.mozillademos.org/files/16610/inspecting5-specificity.png" style="border-style: solid; border-width: 1px; height: 1161px; width: 2275px;"></p> + +<h2 id="进一步了解火狐开发者工具">进一步了解火狐开发者工具</h2> + +<p>在 MDN 这里有很多关于火狐调试工具的信息，看下主要的<a href="/zh-CN/docs/Tools">开发者工具段落</a>，欲了解在本节课中我们简要介绍的事情的细节，请看下<a href="/en-US/docs/Tools/Page_Inspector#How_to">这篇教程</a>。</p> + +<h2 id="在_CSS_中调试问题">在 CSS 中调试问题</h2> + +<p>在解决 CSS 问题时，DevTools 可以提供很大的帮助，因此当您发现自己的 CSS 表现不如预期时，应该如何解决呢？ 以下步骤应有所帮助。</p> + +<h3 id="从问题中后退一步">从问题中后退一步</h3> + +<p>任何代码问题都可能令人沮丧，尤其是 CSS 问题，因为您通常无法获得错误消息用于网络搜索来帮助您找到解决方案。 如果您感到沮丧，请暂时离开该问题一会儿—散步，喝一杯，与同事聊天，或者做一些其他事情。 有时，当您停止思考问题时，解决方案就会神奇地出现，即使没有出现，在感到清爽的时候解决起问题来要容易很多。</p> + +<h3 id="你有一个有效的_HTML_和_CSS_吗？">你有一个有效的 HTML 和 CSS 吗？</h3> + +<p>浏览器希望您的 CSS 和 HTML 能够正确编写，但是浏览器也非常宽容，即使标记或样式表中有错误，浏览器也会尽力显示您的网页。 如果您的代码有错误，浏览器需要猜测您的意思，并且可能会对您的想法做出不同的决定。 此外，两种不同的浏览器可能会以两种不同的方式来解决该问题。 因此，一个好的第一步是通过验证器运行 HTML 和 CSS，以获取并修复任何错误。</p> + +<ul> + <li><a href="https://jigsaw.w3.org/css-validator/">CSS Validator</a></li> + <li><a href="https://validator.w3.org/">HTML validator</a></li> +</ul> + +<h3 id="属性和值是否被你正在测试的浏览器所支持">属性和值是否被你正在测试的浏览器所支持?</h3> + +<p>浏览器会忽略他们不理解的 CSS。 如果您正在测试的浏览器不支持您正在使用的属性或值，则不会奔溃，但 CSS 不会被应用。 DevTools 通常会以某种方式突出显示不支持的属性和值。 在下面的屏幕截图中，浏览器不支持以下子网格值 {{cssxref("grid-template-columns")}}.</p> + +<p><img alt="Image of browser DevTools with the grid-template-columns: subgrid crossed out as the subgrid value is not supported." src="https://mdn.mozillademos.org/files/16641/no-support.png"></p> + +<p>您还可以查看 MDN 每个属性页底部的浏览器兼容性表。 这些向您显示浏览器对该属性的支持，如果支持该属性的某些用法，而不支持其他用法，则经常会 break down。 <a href="/zh-CN/docs/">这里</a>显示了 {{cssxref("shape-outside")}} 属性的兼容性数据。</p> + +<h3 id="是否有其它东西覆盖了你的_CSS">是否有其它东西覆盖了你的 CSS?</h3> + +<p>在这里，您所学到的关于特定性（specificity）的信息将非常有用。 如果您有一些更特定的内容要覆盖你打算做的，将会比较麻烦。 但是，如上所述，DevTools 将向您显示 CSS 是如何应用的，您可以弄清楚如何使新选择器足够具体，以覆盖旧的 CSS 样式。</p> + +<h3 id="制作一个精简的问题测试用例">制作一个精简的问题测试用例</h3> + +<p>如果上述步骤未能解决问题，则您需要做更多调查。 此时最好的做法是创建一个称为简化测试用例的东西。 能够“减化问题”是一项非常有用的技能。 这将帮助您在自己的代码和同事的代码中发现问题，还使您能够报告错误并更有效地寻求帮助。</p> + +<p>简化的测试用例是一个代码示例，它以最简单的方式演示了该问题，并删除了无关的周围内容和样式。 这通常意味着将有问题的代码从您的布局中取出，以制作一个仅显示该代码或功能的小示例。</p> + +<p>创建一个简化测试用例:</p> + +<ol> + <li>如果您的标记是动态生成的（例如通过 CMS），请生成显示该问题的静态版本。 诸如 CodePen 之类的代码共享站点可用于托管简化的测试用例，因为它们可以在线访问，并且您可以轻松地与同事共享它们。 您可以先在页面上执行“查看源代码”，然后将 HTML 复制到 CodePen 中，然后获取所有相关的 CSS 和 JavaScript 并将其包括在内。 之后，您可以检查问题是否仍然明显。</li> + <li>如果删除 JavaScript 不能解决问题，请不要包含 JavaScript。 如果删除 JavaScript 确实消除了问题，那么请尽可能多地删除与问题无关的 JavaScript，保留导致问题的原因。</li> + <li>删除所有不会导致此问题的 HTML。 删除布局中的组件甚至主要元素。 在保留问题可重现的情况下把代码量尽量减少。</li> + <li>删除掉任何不影响问题的 CSS。</li> +</ol> + +<p>在执行此操作的过程中，您可能会发现导致问题的原因，或者至少能够通过删除特定的东西来打开和关闭它。 当发现一些东西时，应该在代码中添加一些注释。 如果您需要帮助，这些注释将向帮助您的人显示您已经做了哪些尝试。 这很可能会为您提供足够的信息，以便能够搜索可能存在的问题和解决方法。</p> + +<p>如果您还没有解决问题，那么减化测试用例可以通过发布到论坛或向同事展示来为寻求帮助提供依据。 如果能够表明在寻求帮助之前您已经完成了简化问题并准确确定问题根源的工作，那么会帮助您更容易地获得帮助。 一个更有经验的开发人员也许能够迅速发现问题并为您指明正确的方向，即使没有，您简化的测试用例也可以使他们快速查看并能够至少提供一些帮助。</p> + +<p>如果您的问题实际上是浏览器中的错误，则还可以使用简化的测试用例向相关的浏览器供应商提交错误报告（e.g. on Mozilla's <a href="https://bugzilla.mozilla.org">bugzilla site</a>）。</p> + +<p>随着对 CSS 的使用经验越来越丰富，您会发现发现问题的速度越来越快。 但是，即使我们中最有经验的人有时也会发现自己想知道到底发生了什么。 采取有条不紊的方法，简化测试用例，并向他人解释问题，通常会找到解决方法。</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="模块目录">模块目录</h2> + +<ol> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">层叠与继承</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors">CSS选择器</a> + <ul> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">标签，类，ID选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">伪类和伪元素</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Combinators">关系选择器</a></li> + </ul> + </li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model">盒模型</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景与边框</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">处理不同文字方向的文本</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Overflowing_content">溢出的内容</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units">值和单位</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">在CSS中调整大小</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Images_media_form_elements">图像、媒体和表单元素</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables">样式化表格</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Debugging_CSS">调试CSS</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Organizing">组织CSS</a><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing"> </a></li> +</ol> diff --git a/files/zh-cn/learn/css/building_blocks/images_media_form_elements/index.html b/files/zh-cn/learn/css/building_blocks/images_media_form_elements/index.html new file mode 100644 index 0000000000..df40d19a93 --- /dev/null +++ b/files/zh-cn/learn/css/building_blocks/images_media_form_elements/index.html @@ -0,0 +1,199 @@ +--- +title: 图像、媒体和表单元素 +slug: Learn/CSS/Building_blocks/Images_media_form_elements +tags: + - CSS 媒体 替换内容 +translation_of: Learn/CSS/Building_blocks/Images_media_form_elements +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks")}}</div> + +<p>在这节课里，我们来看一下，在CSS中，某些特殊元素是怎样处理的。图像、其他媒体和表格元素的表现和普通的盒子有些不同，这取决于你使用CSS格式化它们的能力。理解什么可能做到，什么不可能做到能够省些力气，本节课将会聚焦于一些你需要知道的主要的事情上。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">学习前提：</th> + <td>基础的电脑技能、<a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">安装了必要的软件</a>、<a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">处理文件</a>的基本知识、HTML基础（学习<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>）和对CSS工作原理的大致理解（学习<a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a>）</td> + </tr> + <tr> + <th scope="row">目标：</th> + <td>.理解元素在经由CSS样式化时，是如何不一样地展现的。</td> + </tr> + </tbody> +</table> + +<h2 id="替换元素">替换元素</h2> + +<p>图像和视频被描述为<strong><a href="/zh-CN/docs/Web/CSS/Replaced_element">替换元素</a></strong>。 这意味着CSS不能影响这些元素的内部布局-仅影响它们在页面上于其他元素中的位置。 但是，正如我们将看到的，CSS可以对图像执行多种操作。</p> + +<p>某些替换元素（例如图像和视频）也被描述为具有宽高比。 这意味着它在水平（x）和垂直（y）尺寸上均具有大小，并且默认情况下将使用文件的固有尺寸进行显示。</p> + +<h2 id="调整图像大小">调整图像大小</h2> + +<p>正如你从之前的几节课中所学到的那样，CSS中万物皆盒。如果你把一张图片放在一个盒子里，它的原始长和宽都比盒子的小或大，它要么比盒子显得小，要么从盒子里面溢出出去。你需要决定怎么处理溢出。</p> + +<p>在下面的示例中，我们有两个盒子，大小均为200像素：</p> + +<ul> + <li>一个包含了一张小于200像素的图像，它比盒子小，所以不会拉伸以充满盒子。</li> + <li>另一张图像大于200像素，从盒子里面溢出。</li> +</ul> + +<p>{{EmbedGHLiveSample("css-examples/learn/images/size.html", '100%', 1000)}}</p> + +<p>所以我们能怎么处理溢出问题呢？</p> + +<p>正如我们在<a href="/zh-CN/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">我们之前的课程</a>里面所学的那样，一个常用的技术是将一张图片的{{cssxref("max-width")}}设为100%。这将会允许图片尺寸上小于但不大于盒子。这个技术也会对其他替换元素（例如<code><a href="/zh-CN/docs/Web/HTML/Element/video"><video></a></code>，或者<code><a href="/zh-CN/docs/Web/HTML/Element/iframe"><iframe></a></code>）起作用。</p> + +<p><strong>尝试向上面的示例中的<code><img></code>元素加入<code>max-width: 100%</code>，你会看到，小的图像不变，而大的变小了，能够放在盒子里。</strong></p> + +<p>你可以对容器内的图像作其他选择，例如，你可能想把一张图像调整到能够完全盖住一个盒子的大小。</p> + +<p>{{cssxref("object-fit")}}属性可以在这里帮助你。当使用<code>object-fit</code>时，替换元素可以以多种方式被调整到合乎盒子的大小。</p> + +<p>下面，我们已经使用了值<code>cover</code>，缩小了图像，维持了图像的比例，所以图像可以整齐地充满盒子，同时由于比例保持不变，图像的一部分将会被盒子裁切掉。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/images/object-fit.html", '100%', 1000)}}</p> + +<p>如果我们将<code>contain</code>作为值，图像将会缩放到足以放到盒子里面的大小。如果它和盒子的比例不同，这将会导致“开天窗”的结果。</p> + +<p>你可能也想试试<code>fill</code>值，它可以让图像充满盒子，但是不会维持比例。</p> + +<h2 id="布局中的替换元素">布局中的替换元素</h2> + +<p>在替换元素使用各式CSS布局技巧时，你可能深切地体会到他们的展现略微与其他元素不同，例如，在一个flex或者grid布局中，元素默认会把拉伸到充满整块区域。图像不会拉伸，而是会被对齐到网格区域或者弹性容器的起始处。</p> + +<p>你可以看到这在下面的示例中发生了，下面的示例有个两列两行的网格容器，里面有四个物件。所有的<code><div></code>元素有自己的背景色，拉伸到了充满行和列的地步。但是，图像并没有被拉伸。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/images/layout.html", '100%', 1000)}}</p> + +<p>如果你是按顺序读这些课，那么你可能还没有看到布局的部分，只要记住替换元素在成为网格或者弹性布局的一部分时，有不同的默认行为，这很必要，避免了他们被布局奇怪地拉伸。</p> + +<p>为了强制图像拉伸，以充满其所在的网格单元，你必须仿照下面做点事情：</p> + +<pre class="brush: css notranslate">img { + width: 100%; + height: 100%; +}</pre> + +<p>这将会无条件地拉伸图像，所以很可能不会是你想要的。</p> + +<h2 id="form元素">form元素</h2> + +<p>用CSS格式化表单元素是一个需要技巧的工作，<a href="/zh-CN/docs/Learn/HTML/Forms">HTML Forms module</a> 包含了详细的格式化表单元素的指导，所以我在这里不会全部复述。在本文的这一节有一些关键的值得关注的基础。</p> + +<p>许多表格的控制是通过<code><a href="/zh-CN/docs/Web/HTML/Element/input"><input></a></code>元素的方式实现的，这定义了简单的表格区域，例如文字输入，更进一步还有HTML5新加入的更加复杂的区域，例如颜色和日期撷取器。另外还有一些其他元素，例如用于多行文本输入的<code><a href="/zh-CN/docs/Web/HTML/Element/textarea"><textarea></a></code>，以及那些用来包含和标记表格的一些部分的元素，例如<code><a href="/en-US/docs/Web/HTML/Element/fieldset"><fieldset></a></code>和<code><a href="/en-US/docs/Web/HTML/Element/legend"><legend></a></code>。</p> + +<p>HTML5还涵盖了一些特性，它们允许Web开发者表示哪些区域是必填的，甚至还能标识待填入的内容类型。如果用户输入了一些未预料的内容，或者让必填区域空白，浏览器会显示一个错误信息。不同的浏览器在它们给这样的物件的样式化和自定义余地的问题上，并没有达成一致。</p> + +<h3 id="样式化文本输入元素">样式化文本输入元素</h3> + +<p>允许文本输入的元素，例如<code><input type="text"></code>，特定的类型例如<code><input type="email"></code>以及<code><textarea></code>元素，是相当容易样式化的，它们会试图表现得和在你的页面上其他盒子一样。不过这些元素默认的样式化方式会改变，取决于你的用户访问站点时所使用的操作系统和浏览器。</p> + +<p>在下面的示例中，我们已经将一些文本输入用CSS样式化了，你可以看到例如边框、内外边距之类的东西都像你想要的那样生效了。我们正在使用特性选择器来指向不同的输入类型。尝试通过改变边框、向输入区域增加背景色、改变字体和内边距的方式来改变表单的外观。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/images/form.html", '100%', 1000)}}</p> + +<div class="blockIndicator warning"> +<p><strong>重点</strong>：你应该在改变表单样式的时候小心，确保对于用户而言，它们仍然很容易被认出来是表单元素。你也许可以建立一个无边框的表单输入，其背景也与周围的内容难以区分开来，但是这会让表单很难识别和填入。</p> +</div> + +<p>正如在本教程的HTML部分的<a href="/zh-CN/docs/Learn/HTML/Forms/Styling_HTML_forms">form styling</a>课里解释的那样，许多更加复杂的输入类型是由操作系统渲染的，无法进行样式化。因而你应该总是假设表单在不同的访客看来十分不同，并在许多浏览器上测试复杂的表单。</p> + +<h3 id="继承和表单元素">继承和表单元素</h3> + +<p>在一些浏览器中，表单元素默认不会继承字体样式，因此如果你想要确保你的表单填入区域使用body中或者一个父元素中定义的字体，你需要向你的CSS中加入这条规则。</p> + +<pre class="brush: css notranslate"><code>button, +input, +select, +textarea { + font-family : inherit; + font-size : 100%; +} </code></pre> + +<h3 id="form元素与box-sizing">form元素与box-sizing</h3> + +<p>跨浏览器的form元素对于不同的挂件使用不同的盒子约束规则。你已经在<a href="/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model">我们的盒模型课</a>中学习了<code>box-sizing</code>属性，在样式化表单时候，你可以使用这一知识，确保在给form元素设定宽度和高度时可以有统一的体验。</p> + +<p>为了保证统一，将所有元素的内外边距均设为<code>0</code>是个好主意，然后在单独进行样式化控制的时候将这些加回来。</p> + +<pre class="brush: css notranslate"><code>button, +input, +select, +textarea { + box-sizing: border-box; + padding: 0; + margin: 0; +}</code></pre> + +<h3 id="其他有用的设置">其他有用的设置</h3> + +<p>除了上面提到的规则以外，你也应该在<code><textarea></code>上设置<code>overflow: auto</code> 以避免IE在不需要滚动条的时候显示滚动条：</p> + +<pre class="brush: css notranslate">textarea { + overflow: auto; +}</pre> + +<h3 id="将一切都放在一起“重置”">将一切都放在一起“重置”</h3> + +<p>作为最后一步，我们可以将上面讨论过的各式属性包起来，成为以下的“表单重置”，以提供一个统一的在其上继续进行工作的地基，这包含了前三节提到的所有东西：</p> + +<pre class="brush: css notranslate"><code>button, +input, +select, +textarea { + font-family: inherit; + font-size: 100%; + box-sizing: border-box; + padding: 0; margin: 0; +} + +textarea { + overflow: auto; +} </code></pre> + +<div class="blockIndicator note"> +<p><strong>备注</strong>：通用样式表被许多开发者用作所有项目的一系列基础样式，典型就是那些做了和以上提到相似的事情的那些，在你开始自己的CSS作业前，它确保了跨浏览器的任何事情都被默认设定为统一样式。它们不像以往那么重要了，因为浏览器显著地要比以往更加统一。但是，如果你想要看一个例子，可以看看这个<a href="http://necolas.github.io/normalize.css/">Normalize.css</a>，它被许多项目用作基础，是非常流行的样式表。</p> +</div> + +<p>至于样式化表单的更加深入的信息，可以看下这些教程的HTML一节的这两篇文章：</p> + +<ul> + <li><a href="/zh-CN/docs/Learn/HTML/Forms/Styling_HTML_forms">Styling HTML Forms</a></li> + <li><a href="/zh-CN/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced Styling for HTML Forms</a></li> +</ul> + +<h2 id="测试你的技能">测试你的技能</h2> + +<p>我们在本文中介绍了很多内容，但是您记住最重要的内容了么？ 在继续之前，您可以通过一些其他测试来验证您是否真正学习到了这些知识，参见<a href="/zh-CN/docs/Learn/CSS/Building_blocks/Images_tasks">技能测试</a></p> + +<h2 id="小结">小结</h2> + +<p>这节课致力于说明在你用CSS处理图像、媒体和其他不普通的元素时，你会遇到的不同之处。在下篇文章中，我们将会了解一些在你样式化HTMl表格时有用的技巧。</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="模块目录">模块目录</h2> + +<ol> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">层叠与继承</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors">CSS选择器</a> + <ul> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">标签，类，ID选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">伪类和伪元素</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Combinators">关系选择器</a></li> + </ul> + </li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model">盒模型</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景与边框</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">处理不同文字方向的文本</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Overflowing_content">溢出的内容</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units">值和单位</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">在CSS中调整大小</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Images_media_form_elements">图像、媒体和表单元素</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables">样式化表格</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Debugging_CSS">调试CSS</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Organizing">组织CSS</a></li> +</ol> diff --git a/files/zh-cn/learn/css/building_blocks/images_tasks/index.html b/files/zh-cn/learn/css/building_blocks/images_tasks/index.html new file mode 100644 index 0000000000..e13de7128d --- /dev/null +++ b/files/zh-cn/learn/css/building_blocks/images_tasks/index.html @@ -0,0 +1,69 @@ +--- +title: 技能测试：图片和表格元素 +slug: Learn/CSS/Building_blocks/Images_tasks +translation_of: Learn/CSS/Building_blocks/Images_tasks +--- +<div>{{LearnSidebar}}</div> + +<div></div> + +<p>该任务的目的是帮助您检查对我们在本课程<a href="/zh-CN/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, Media and Form elements</a>(图像，媒体及表格元素）中了解的一些值和单位的理解。</p> + +<div class="blockIndicator note"> +<p><strong>注意</strong>:您可以在下面的交互式编辑器中尝试解决方案，但是下载代码并使用诸如<a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, <a href="https://glitch.com/">Glitch</a> 之类的在线工具来完成任务可能会更加有所帮助。<br> + <br> + 如果你遇到困难，联系我们获得帮助 — 参见页面底部的{{anch("评价以及更多帮助")}}</p> +</div> + +<h2 id="任务一">任务一</h2> + +<p>在此任务中，您有一张溢出盒子的图像。 我们希望图像缩小到适合盒子的大小，而没有多余的空白，并不介意某些图像是否被裁剪。</p> + +<p><img alt="An image in a box" src="https://mdn.mozillademos.org/files/17143/mdn-images-object-fit.png" style="height: 384px; width: 746px;"></p> + +<p>在下面的例子中看看你能否能符合上面的图片</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/tasks/images/object-fit.html", '100%', 1000)}}</p> + +<div class="blockIndicator note"> +<p>为了为了评估或进一步完成任务，请<a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/images/object-fit-download.html">下载此任务的起点</a>，以便在您自己的编辑器或在线编辑器中工作。</p> +</div> + +<h2 id="任务二">任务二</h2> + +<p>在此任务中，您会获得一个简单的表格。 您的任务是对该表单的外观进行以下更改：</p> + +<ul> + <li>使用属性选择器定位.myform中的<strong>搜索(search)</strong>字段和按钮。</li> + <li>使表单字段和按钮使用与表单其余部分相同的文本大小。</li> + <li>给表单字段和按钮设置10像素的内边距。</li> + <li>为按钮提供紫色背景，白色前景，无边框和5px的圆角。</li> +</ul> + +<p><img alt="A single line form" src="https://mdn.mozillademos.org/files/17144/mdn-images-form.png" style="height: 120px; width: 1254px;"></p> + +<p>尝试更改下面的实时代码以重新创建图像中显示的示例：</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/tasks/images/form.html", '100%', 600)}}</p> + +<div class="blockIndicator note"> +<p>为了为了评估或进一步完成任务，请<a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/images/form-download.html">下载此任务的起点</a>，以便在您自己的编辑器或在线编辑器中工作。</p> +</div> + +<h2 id="评价以及更多帮助">评价以及更多帮助</h2> + +<p>您可以在上面提到的交互式编辑器中练习这些示例。</p> + +<p>如果您希望对自己的工作进行评估，或者遇到困难并希望寻求帮助，请执行以下操作：</p> + +<ol> + <li>将您的工作上传到在线共享编辑器中，例如 <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, <a href="https://glitch.com/">Glitch</a>.。 您可以自己编写代码，也可以使用以上部分中链接到的起点文件。</li> + <li>在<a href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a>. “学习”类别中写一篇帖子，要求评估帮助。 您的帖子应包括：</li> +</ol> + +<ul> + <li>描述性标题，例如“<strong>Assessment wanted for Images skill test 1”</strong>。</li> + <li>您已经尝试过的内容以及您希望我们做什么的详细信息，例如 <strong>如果您陷入困境并需要帮助</strong>，或者<strong>需要评估</strong>。</li> + <li>指向您要评估或需要帮助的示例的链接（如上面的步骤1中所述）。 这是很好好习惯-如果看不到代码，很难帮助存在问题的人。</li> + <li>指向实际任务或评估页面的链接，因此我们可以找到您需要帮助的问题。</li> +</ul> diff --git a/files/zh-cn/learn/css/building_blocks/index.html b/files/zh-cn/learn/css/building_blocks/index.html new file mode 100644 index 0000000000..f4967d344e --- /dev/null +++ b/files/zh-cn/learn/css/building_blocks/index.html @@ -0,0 +1,87 @@ +--- +title: CSS构建 +slug: Learn/CSS/Building_blocks +translation_of: Learn/CSS/Building_blocks +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">这个模块承接<a href="/zh-CN/docs/Learn/CSS/First_steps">学习CSS 第一步</a>——即你对(CSS)语言和其语法已经足够熟悉、并且有了一些基本的使用经验，该是稍微深入点学习的时候了。这个模块着眼于级联和继承，所有可供使用的选择器类型，单位，尺寸，背景、边框样式，调试，等等等等。</p> + +<p class="summary">本文目标是，在你进一步了解 <a href="/zh-CN/docs/Learn/CSS/为文本添加样式">为文本添加样式</a>和<a href="/zh_CN/docs/Learn/CSS/CSS_layout">CSS布局</a>之前，为你提供一个助你写出合格CSS和理解所有基本理论的工具箱。</p> + +<h2 id="先决条件">先决条件</h2> + +<p>在开始本模块之前，你应该已经掌握：</p> + +<ol> + <li>使用计算机的基本知识，能够被动使用网络（也就是查看网页的内容）。</li> + <li>建立基本工作环境（详见<a href="/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software">安装基础软件</a>），知道如何建立和管理文档（详见<a href="/zh-CN/docs/Learn/Getting_started_with_the_web/Dealing_with_files">处理文件</a>）。</li> + <li>HTML基础知识（参见<a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML">HTML介绍</a>模块）。</li> + <li>CSS基础知识（参见<a href="/zh-CN/docs/Learn/CSS/First_steps">学习CSS 第一步</a>模块）。</li> +</ol> + +<div class="note"> +<p><strong>注意：</strong>如果你此刻正使用一台电脑/笔记本/其他设备，而你无法创建自己的文件，那你可以在诸如JSBin或Thimble等网络编辑程序上尝试（多数）程序案例。 </p> +</div> + +<h2 id="指南">指南</h2> + +<p>本模块包含以下文章，这些文章覆盖了绝大部分CSS语言基础。在学习这些文章的过程中，会有很多练习题供你检验自己的理解程度。</p> + +<dl> + <dt><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">层叠与继承 </a></dt> + <dd>本节目标是帮你建立对——层叠、优先级和继承——这三个最基本的CSS概念的理解。这些概念控制着CSS如何应用于HTML以及应用时的优先顺序。</dd> + <dt><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors">CSS选择器</a></dt> + <dd>有各种类型的CSS选择器，以供我们精确选出要添加样式的元素。在本文及其子文章中，我们会详细过一遍不同类型的选择器，以此窥探CSS选择器的运行机理。子文章包括了：</dd> + <dd> + <ul> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">类型、类以及ID选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">伪类与伪元素</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Combinators">关系选择器</a></li> + </ul> + </dd> + <dt><a href="/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model">盒模型</a></dt> + <dd>所有CSS都是包在盒子里的，那么理解这些盒子就是让我们能够创建CSS布局或排列元素的关键点了。为了接下来能完成编写复杂布局的任务，本节我们会认真看看<em>CSS盒模型</em>，了解其原理及相关术语。</dd> + <dt><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景与边框 </a></dt> + <dd>在这一节课中，我们将会看一下你可以用CSS对背景和边框进行哪些创新。通过添加渐变、背景图片和圆角，背景和边框可以解决许多CSS中的样式问题。</dd> + <dt><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">处理不同的文本方向</a></dt> + <dd>最近几年来，CSS进行了演化，以更好地支持不同方向的内容，既包括自左至右，又包括自上至下（如日语）的内容——这些不同的排布方向被称作书写模式。随着你在这部分学习中不断前进并开始设计网页布局，理解书写模式将会非常有帮助，因此我们会在本文中进行介绍。</dd> + <dt><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Overflowing_content">溢出的内容</a></dt> + <dd>这一节我们会关注CSS中的另一个重要的概念——溢出。溢出发生在一个盒子中包含了过多内容以致超出适当的范围时。在这篇指南中，你将学到什么是溢出以及如何处理它。</dd> + <dt><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units">值和单位</a></dt> + <dd>CSS中每一个属性都有一个取值或者一系列合理的取值。这一节，我们将了解一些最常用的取值和单位。</dd> + <dt><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">在CSS中调整大小</a></dt> + <dd>通过目前为止的一系列课程，你已经了解了许多使用CSS调整网页项目大小的方法。了解你所设计的不同特性将呈现的大小很重要，我们将在这节课中总结使用CSS调整大小的不同方法，并定义几个有关尺寸的术语，这将对你有所帮助。</dd> + <dt><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Images_media_form_elements">图片、媒体和表单元素</a></dt> + <dd>在这一节，我们会了解CSS是如何处理一些特殊元素的。与常规的盒子相比，图片、其他媒体和表格元素对你使用CSS设置样式的能力提出了不同的要求。理解什么能够实现和什么不能够实现将会免去你一些沮丧，这节课会突出一些你需要了解的主要问题。</dd> + <dt><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables">样式化表格</a></dt> + <dd>设计HTML表格的样式并不是多么美妙的工作，但有时却是我们都需要去做的。这篇文章通过突出一些特定的表格样式技巧，为设计好看的HTML表格提供了一份指南。</dd> + <dt><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Debugging_CSS">调试CSS</a></dt> + <dd>有时在编写CSS的过程中，你会遇到这样一个问题：你的CSS并没有实现你想要的效果。这篇文章将为你提供指导，教你如何调试CSS问题，以及如何使用所有现代浏览器带有的开发者工具找到问题所在。</dd> + <dt><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Organizing">组织CSS</a></dt> + <dd>当你开始处理更大的样式表和项目时，你将会发现维护一个庞大的样式表非常具有挑战性。在这篇文章中，我们将会简要了解使得CSS易于维护的最佳做法，以及其他人所使用的一些有助于增进可维护性的解决方案。</dd> +</dl> + +<h2 id="评估">评估</h2> + +<p>想要测试一下你的CSS技能吗？下面这些评估将测试你对以上那些指南中的CSS技能的掌握。</p> + +<p><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension">CSS基本了解</a></p> + +<p>这项评估测试你对基本语法、选择器、特异性、盒子模型的掌握。</p> + +<p><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper">设计漂亮的信头信笺</a></p> + +<p>如果你想留下良好的印象，用一张漂亮的信头信笺写一封信一定是个好的开始。在这一评估中，你将挑战创建这样一个漂亮的网络样板。</p> + +<p><a href="/zh-CN/docs/Learn/CSS/Building_blocks/A_cool_looking_box">一个炫酷的盒子</a></p> + +<p>在这里，你将练习使用背景和边距来创建一个吸引眼球的盒子。</p> + +<h2 id="另见">另见</h2> + +<dl> + <dt><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Advanced_styling_effects">高级区块效果</a></dt> + <dd>这篇文章展示了盒子的小技巧，提供了一些高级特性的介绍，这些特性不适合其他类别的样式，比如盒子阴影、混合模式和滤镜。</dd> +</dl> diff --git a/files/zh-cn/learn/css/building_blocks/organizing/index.html b/files/zh-cn/learn/css/building_blocks/organizing/index.html new file mode 100644 index 0000000000..6a8b1b7162 --- /dev/null +++ b/files/zh-cn/learn/css/building_blocks/organizing/index.html @@ -0,0 +1,350 @@ +--- +title: 组织CSS +slug: Learn/CSS/Building_blocks/Organizing +translation_of: Learn/CSS/Building_blocks/Organizing +--- +<div>{{LearnSidebar}}{{PreviousMenu("Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}</div> + +<p>在开始在更大的样式表和大项目上作业的时候，你会发现维护一个大型的CSS文件很有挑战性。在本文中，我们将会简要看一下在编写你的CSS时，让它更加易于维护的一些最佳实践，以及你会在其他人那里看到的，用来增强可维护性的解决方案。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">预备知识：</th> + <td>电脑的基本操作，<a href="https://developer.mozilla.org/zh-CN/Learn/Getting_started_with_the_web/Installing_basic_software">安装了必要的软件</a>，<a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">处理文件</a>的基本知识, HTML基础（学习<a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML">HTML介绍</a>），了解CSS的工作方式（学习<a href="/zh-CN/docs/Learn/CSS/First_steps">CSS入门</a>。）</td> + </tr> + <tr> + <th scope="row">目标：</th> + <td>学习组织样式表的一些技巧和最佳实践，了解一些命名常规和在组织CSS以及团队协作时广泛使用的工具。</td> + </tr> + </tbody> +</table> + +<h2 id="保持你的CSS整洁的技巧">保持你的CSS整洁的技巧</h2> + +<p>这里有一些关于保持你的样式表整整齐齐的方式的普适性建议。</p> + +<h3 id="你的项目有代码风格规范吗？">你的项目有代码风格规范吗？</h3> + +<p>如果你在和一个小组共同协作完成一个已有的项目，需要检查的第一件事是这一项目是否已经有了CSS的代码风格规范。小组的代码风格规范应当总是优先于的个人喜好。做事情很多时候没有对错之分，但是统一是很重要的。</p> + +<p>例如你可以看下<a href="/zh-CN/docs/MDN/Contribute/Guidelines/Code_guidelines/CSS">MDN的CSS代码规范的示例。</a>.</p> + +<h3 id="保持统一">保持统一</h3> + +<p>如果你开始为项目指定规则或者独自工作，那么最重要的事情是让各方面都保持统一。统一在所有的地方都会起到实际作用，例如对类使用相同的命名常规，选择一种描述颜色的方式，或者维护一个统一的格式化方式（例如你是使用Tab还是空格来缩进代码？如果是代码，用多少个？）</p> + +<p>一直遵守一系列规则，你会在编写CSS的时候省去不少精神上的预负担，因为一些决定已经定型了。</p> + +<h3 id="将CSS格式化成可读的形式">将CSS格式化成可读的形式</h3> + +<p>你可以看到很多CSS格式化的方式，一些开发者将所有的规则放在一行里面，像是这样：</p> + +<pre class="brush: css">.box { background-color: #567895; } +h2 { background-color: black; color: white; }</pre> + +<p>还有的开发者更喜欢将所有的东西放在新的一行：</p> + +<pre class="brush: css">.box { + background-color: #567895; +} + +h2 { + background-color: black; + color: white; +}</pre> + +<p>CSS不会管你使用哪种方式来进行格式化，我们自己的看法是，将每个属性值对放在新的一行会更好读。</p> + +<h3 id="为你的CSS加注释">为你的CSS加注释</h3> + +<p>在你的CSS里加入注释，不仅可以帮任何未来的开发者处理你的CSS文件，也可以在你离开项目一段时间后，帮你在回来时重新上手。</p> + +<pre class="brush: css">/* 这是一条CSS注释， +它可以分成好几行。*/</pre> + +<p>在你的样式表里面的逻辑段落之间，加入一块注释，是个好技巧。在你快速掠过的时候，这些注释可以帮你快速定位不同的段落，甚至给了你搜索或者跳转到那段CSS的关键词。如果你使用了一个不存在于代码里面的字符串，你可以从段落到段落间跳转，只需要搜索一下，下面我们用的是<code>||</code>。</p> + +<pre class="brush: css">/* || General styles */ + +... + +/* || Typography */ + +... + +/* || Header and Main Navigation */ + +... + +</pre> + +<p>你不必在你的CSS中给每个东西都加上注释，因为它们很多都是自解释的。你应该加上注释的是那些你因为某些原因做的特殊决定。</p> + +<p>为了对旧浏览器保持兼容，你用某种特殊方法使用了一种CSS属性，示例：</p> + +<pre class="brush: css">.box { + background-color: red; /* fallback for older browsers that don't support gradients */ + background-image: linear-gradient(to right, #ff0000, #aa0000); +} +</pre> + +<p>或许你是照着一个教程来做事的，CSS有些不够直观。此时，你应该在注释里面加入教程的URL。你应该在你一年或者更长时间以后重新审视你的项目，但只是模模糊糊地想起来之前有个优秀的教程，不知道它在哪里的时候，感谢之前加入注释的自己。</p> + +<h3 id="在你的样式表里面加入逻辑段落">在你的样式表里面加入逻辑段落</h3> + +<p>在样式表里面先给一般的东西加上样式是个好想法。这也就是除了你想特定对某个元素做点什么以外，所有将会广泛生效的样式。典型地，你可以为以下的元素设定规则：</p> + +<ul> + <li><code>body</code></li> + <li><code>p</code></li> + <li><code>h1</code>, <code>h2</code>, <code>h3</code>, <code>h4</code>, <code>h5</code></li> + <li><code>ul</code>和<code>ol</code></li> + <li><code>table</code>属性</li> + <li>链接</li> +</ul> + +<p>在这段样式表里面，我们提供了用于站点类型的默认样式，为数据表格、列表等设立了一份默认的样式。</p> + +<pre class="brush: css">/* || GENERAL STYLES */ + +body { ... } + +h1, h2, h3, h4 { ... } + +ul { ... } + +blockquote { ... } +</pre> + +<p>在这段之后，我们可以定义一些实用类，例如一个用来移除默认列表样式的类，我们打算将其展示为灵活样式或者其他样式。如果你知道你想要在许多不同的元素上应用的东西，那么你可以把它们加到这里。</p> + +<pre class="brush: css">/* || UTILITIES */ + +.nobullets { + list-style: none; + margin: 0; + padding: 0; +} + +... + +</pre> + +<p>然后我们可以加上在整个站点都会用到的所有东西，这可能是像基础页面布局、抬头或者导航栏样式之类的东西。</p> + +<pre class="brush: css">/* || SITEWIDE */ + +.main-nav { ... } + +.logo { ... } +</pre> + +<p>最后我们可以在CSS里面加上特指的东西，将它们分成上下文、页面甚至它们使用的组件。</p> + +<pre class="brush: css">/* || STORE PAGES */ + +.product-listing { ... } + +.product-box { ... } +</pre> + +<p>通过使用这种方式排布代码，我们至少能大致了解，我们能在样式表的哪个部分寻找想要更改的东西。</p> + +<h3 id="避免太特定的选择器">避免太特定的选择器</h3> + +<p>如果你创建了很特定的选择器，你经常会发现，你需要在你的CSS中复用一块代码，以将同样的规则应用到其他元素上。例如，你也许会有像是下面的选择器那样的代码，它在带有<code>main</code>类的<code><article></code>里面的带有<code>box</code>类的<code><p></code>上应用了规则。</p> + +<pre class="brush: css">article.main p.box { + border: 1px solid #ccc; +}</pre> + +<p>如果你之后想要在<code>main</code>外的什么地方上应用相同的规则，或者在<code><p></code>外的其他地方，你可能必须在这些规则中加入另一个选择器，或者直接新建个规则。或者，你也可以建立一个名为<code>box</code>的类，在任何地方应用。</p> + +<pre class="brush: css">.box { + border: 1px solid #ccc; +}</pre> + +<p>将东西设置的更为特定，有时也有意义，但是这一般与其说是通常实践，倒不如说是例外。</p> + +<h3 id="将大样式表分成几个小的样式表">将大样式表分成几个小的样式表</h3> + +<p>尤其在你对站点的不同部分设置了很不同的样式的时候，你会想要有个包含了所有普适规则的样式表，还有包含了某些段落所需要的特定规则的更小的样式表。你可以将一个页面连接到多个样式表，层叠的一般规则会在这里生效，即连接的靠前的样式表里面的规则会比后面的有更高优先级。</p> + +<p>例如我们会将我们站点的一部分作为一个在线商店，许多CSS只会用于样式化商店需要的产品列表和表单。将这些东西放在另外一张样式表里面，只在商店页面进行连接，这会是合理的做法。</p> + +<p>这可以让你更容易保持CSS的组织性，也意味着如果有多人在写CSS，你会更少遇到有两个人需要同时编写相同的样式表的情况，防止在源代码的控制上产生冲突。</p> + +<h2 id="其他能帮上忙的工具">其他能帮上忙的工具</h2> + +<p>CSS本身没有什么内置的组织方式，所以你需要自己完成建立编写CSS时维持统一性和规则的工作。Web社区也已经开发了多种工具和方法，帮助你管理大些的CSS项目。由于它们对你的研究会有帮助，而且在你和其他人协作的时候，你也很可能会遇到这些东西，我们加入了一个对其中一些工具和方式的简短的指导。</p> + +<h3 id="CSS方法论">CSS方法论</h3> + +<p>不必需要自己制定编写CSS的规则，你可以选择接纳一个已经已经由社群设计、经由诸多项目检验的方法，并从中获益。这些方法论都是有着结构化的编写和组织CSS途径的CSS代码指南。典型地，与你为你的项目编写和优化每个选择器为自己定义的规则组相比，它们会倾向于产生更多的多余代码。</p> + +<p>但是，在接纳了一个方法以后，你的代码会更有条理，而且因为这些体系许多都是被很广泛使用的，其他的开发者更有可能理解你在使用的方式，会以相同的方式编写他们自己的代码，而不需要从头接纳你自己的个人方法论。</p> + +<h4 id="OOCSS">OOCSS</h4> + +<p>你会遇到的大多数方式都有一部分归功于面向对象的CSS（OOCSS）的概念，这是一种因<a href="https://github.com/stubbornella/oocss/wiki">Nicole Sullivan的努力</a>而流行的方式。OOCSS的基本理念是将你的CSS分解成可复用的对象，于是你可以在你的站点上任何需要的地方使用。OOCSS的标准示例是在<a href="/en-US/docs/Web/CSS/Layout_cookbook/Media_objects">The Media Object</a>中所描述的排布。这一排布一方面让图片、视频或者其他元素保持固定尺寸，而另一方面也让其他内容可伸缩。这是我们在用于评论、列表等网站随处可见的排布。</p> + +<p>如果你没有使用一种OOCSS的方法，你或许会创建一个用在这种排布所应用的不同地方的自定义CSS，例如创建一个叫做<code>comment</code>的类，用于组件部分的一组规则，然后是叫做<code>list-item</code>的类，除了一些细小的区别外，它几乎和<code>comment</code>类完全相同。这两个组件之间的不同是列表项有一个底边，在评论里的图像有边框而列表项里面的图像没有。</p> + +<pre class="brush: css">.comment { + display: grid; + grid-template-columns: 1fr 3fr; +} + +.comment img { + border: 1px solid grey; +} + +.comment .content { + font-size: .8rem; +} + +.list-item { + display: grid; + grid-template-columns: 1fr 3fr; + border-bottom: 1px solid grey; +} + +.list-item .content { + font-size: .8rem; +}</pre> + +<p>在OOCSS中，你可以建立一个叫作<code>media</code>的排布，里面包含所有的两种排布所共有的CSS——一个大致用于媒体对象的形状之类的基础类。然后我们再额外加入一个类，处理那些微小的区别，这样特定地扩展基础样式。</p> + +<pre class="brush: css">.media { + display: grid; + grid-template-columns: 1fr 3fr; +} + +.media .content { + font-size: .8rem; +} + +.comment img { + border: 1px solid grey; +} + + .list-item { + border-bottom: 1px solid grey; +} </pre> + +<p>在你的HTML里面，评论需要同时应用<code>media</code>和<code>comment</code>类：</p> + +<pre class="brush: html"><div class="media comment"> + <img /> + <div class="content"></div> +</div> +</pre> + +<p>列表项应用了<code>media</code>和<code>list-item</code>：</p> + +<pre class="brush: html"><ul> + <li class="media list-item"> + <img /> + <div class="content"></div> + </li> +</ul></pre> + +<p>Nicole Sullivan在描述这种方式和推广上所做的工作导致，即使是那些不严格遵守OOCSS方式的人，今天也可以大致以这种方式复用CSS，它已经普遍地进入到我们的理解当中，成为了与事物交互的好办法。</p> + +<h4 id="BEM">BEM</h4> + +<p>BEM即为块级元素修饰字符（Block Element Modifier）。在BEM中，一个块，例如一个按钮、菜单或者标志，就是独立的实体。一个元素就像一个列表项或者标题一样，被绑定到它所在的块。修饰字符是标记到一个块或者元素的标识，能够改变样式或者行为。你能认出使用BEM的代码，因为代码中在CSS的类里使用了多余的一个下划线和连字符。例如看看这个来自关于<a href="http://getbem.com/naming/">BEM命名常规</a>的页面里面的HTML所应用的类：</p> + +<pre class="brush: html"><form class="form form--theme-xmas form--simple"> + <input class="form__input" type="text" /> + <input + class="form__submit form__submit--disabled" + type="submit" /> +</form></pre> + +<p>增加的类和应用到OOCSS例子里面的相似，但是它们遵守了BEM严格的命名常规。</p> + +<p>BEM在大些的Web项目中被广泛使用，许多人用这种方式写他们的CSS。你可能会在没有提及为何CSS如此布局的时候，遇到BEM语法的例子，甚至是在教程中</p> + +<p>阅读<a href="https://css-tricks.com/bem-101/">BEM 101</a> 中关于CSS Tricks的段落以了解更多和这个系统相关的信息。</p> + +<h4 id="其他常见体系">其他常见体系</h4> + +<p>应用中，有很多这样的体系。其他流行的方式包括Jonathan Snook创造的<a href="http://smacss.com/">Scalable and Modular Architecture for CSS (SMACSS)</a>、Harry Roberts的<a href="https://itcss.io/">ITCSS</a>以及原本由Yahoo!创造的<a href="https://acss.io/">Atomic CSS (ACSS)</a>。如果你遇到了使用这几种方式之一的项目，那么好处就是你可以搜索到许多文章和指导，帮你理解如何以同种方式写代码。</p> + +<p>使用这样的体系的缺点是，它们会看起来过于复杂，尤其是对于小项目。</p> + +<h3 id="CSS的构建体系">CSS的构建体系</h3> + +<p>另一种组织CSS的方法是利用一些对于前端开发者可用的工具，它们让你可以稍微更程式化地编写CSS。有很多工具，我们将它们分成<strong>预处理工具</strong>和<strong>后处理工具</strong>。预处理工具以你的原文件为基础运行，将它们转化为样式表；后处理工具使用你已完成的样式表，然后对它做点手脚——也许是优化它以使它加载得更快。</p> + +<p>使用这些工具的任何一部分都需要你的开发环境能运行进行处理工作的脚本。许多代码编辑器能为你做这项工作，或者你也可以安装一个命令行工具来辅助工作。</p> + +<p>最为流行的预处理工具是<a href="https://sass-lang.com/">Sass</a>，这里不是Sass的教程，所以我只会简要地解释一些Sass能做的事情，在组织的时候真的会帮到你，即使你没有用到Sass的任何其他的独特功能。</p> + +<h4 id="定义变量">定义变量</h4> + +<p>CSS现在有原生的<a href="/zh-CN/docs/Web/CSS/Using_CSS_custom_properties">自定义属性</a>，所以这个功能越来越没那么重要了，但是你使用Sass的可能原因之一为，能够作为设置定义用于一个项目的所有颜色和字体，之后这些变量在项目中可用。这意味着如果你意识到你用了错误的蓝色阴影，你只需要在一个地方修改。</p> + +<p>如果我们创建了在下面的第一行里面叫做<code>$base-color</code>的变量，我们之后可以在样式表的任何需要这一颜色的地方使用它。</p> + +<pre class="brush: css"><code>$base-color: #c6538c; + +.alert { + border: 1px solid $base-color; +}</code></pre> + +<p>编译完CSS后，你会在最终的样式表里面得到下面的CSS：</p> + +<pre class="brush: css"><code>.alert { + border: 1px solid #c6538c; +}</code></pre> + +<h4 id="编译组件样式表">编译组件样式表</h4> + +<p>我在上面提到了，一种组织CSS的方式是将样式表分成小的样式表。在使用Sass时，你可以在另一个层次上理解，然后得到许多小样式表——甚至到了每个组件都有一个独立样式表的地步。使用Sass中的include功能，这些都可以被编译为一个、或者少数几个真正链接到你的网站的样式表。</p> + +<p>在<a href="https://www.lauraleeflores.com/blog/how-to-organize-your-css-files">这篇博文</a>里面，你可以看下一个开发者是如何处理这个问题的。</p> + +<div class="blockIndicator note"> +<p><strong>备注：</strong>一个简单的尝试Sass的方式是使用<a href="https://codepen.io">CodePen</a>，你可以为一个Pen在设置中启用用于你的CSS的Sass，CodePen将会为你运行Sass语法分析功能，这样你就能看到应用了普通CSS的生成网页。有时你会发现CSS教程在它们的CodePen演示里面使用了Sass而不是普通CSS，所以了解一点点关于Sass的事情是有用的。</p> +</div> + +<h4 id="后处理以进行优化">后处理以进行优化</h4> + +<p>如果你对加入例如许多额外的注释和空格，增大你的样式表大小有所关心的话，那么后处理会通过在生产版本中略去任何不必要的东西的方式，优化CSS。后处理解决方案中，通过这种方式实现的一个例子是<a href="https://cssnano.co/">cssnano</a>。</p> + +<h2 id="结语">结语</h2> + +<p>这是我们学习CSS的指导的最后一部分，正如你所见，你可以通过许多方式从这里继续对CSS的探索。</p> + +<p>欲了解更多关于CSS布局的事情，查看<a href="/zh-CN/docs/Learn/CSS/CSS_layout">学习CSS布局</a>这节课.</p> + +<p>你应该也有了探索<a href="/zh-CN/docs/Web/CSS">MDN CSS</a>学习材料的剩余部分的技能。你可以查阅属性和值，探索我们的<a href="/zh-CN/docs/Web/CSS/Layout_cookbook">CSS Cookbook</a>来了解可用的排布，在诸如<a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout">Guide to CSS Grid Layout</a>的一些更加专门的指导里阅读更多。.</p> + +<p>{{PreviousMenu("Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="模块目录">模块目录</h2> + +<ol> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">层叠与继承</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors">CSS选择器</a> + <ul> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">标签，类，ID选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">伪类和伪元素</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Combinators">关系选择器</a></li> + </ul> + </li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model">盒模型</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景与边框</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">处理不同文字方向的文本</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Overflowing_content">溢出的内容</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units">值和单位</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">在CSS中调整大小</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Images_media_form_elements">图像、媒体和表单元素</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables">样式化表格</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Debugging_CSS">调试CSS</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Organizing">组织CSS</a></li> +</ol> diff --git a/files/zh-cn/learn/css/building_blocks/overflowing_content/index.html b/files/zh-cn/learn/css/building_blocks/overflowing_content/index.html new file mode 100644 index 0000000000..0e4985ea03 --- /dev/null +++ b/files/zh-cn/learn/css/building_blocks/overflowing_content/index.html @@ -0,0 +1,119 @@ +--- +title: 溢出的内容 +slug: Learn/CSS/Building_blocks/Overflowing_content +translation_of: Learn/CSS/Building_blocks/Overflowing_content +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}</div> + +<p>本节课，我们来了解一下CSS中另外一个重要的概念——<strong>溢出</strong>。溢出是在盒子无法容纳下太多的内容的时候发生的。在这篇教程里面，你将会学习到什么是溢出，以及如何控制它。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提：</th> + <td>基础的电脑知识，<a href="/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software">安装了基本的软件</a>, <a href="/zh-CN/docs/Learn/Getting_started_with_the_web/Dealing_with_files">处理文件</a>的基础知识, HTML基础（学习 <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>），对CSS的工作原理有所了解（学习 <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a>.)</td> + </tr> + <tr> + <th scope="row">目标：</th> + <td>理解溢出和控制溢出的方法。</td> + </tr> + </tbody> +</table> + +<h2 id="什么是溢出？">什么是溢出？</h2> + +<p>我们知道，CSS中万物皆盒，因此我们可以通过给{{cssxref("width")}}和{{cssxref("height")}}（或者 {{cssxref("inline-size")}} 和 {{cssxref("block-size")}}）赋值的方式来约束盒子的尺寸。溢出是在你往盒子里面塞太多东西的时候发生的，所以盒子里面的东西也不会老老实实待着。CSS给了你好几种工具来控制溢出，在学习的早期理解这些概念是很有用的。在你写CSS的时候你经常会遇到溢出的情形，尤其是当你以后更加深入到CSS布局的时候。</p> + +<h2 id="CSS尽力减少“数据损失”">CSS尽力减少“数据损失”</h2> + +<p>我们从两个展示了在碰到溢出的时候，CSS默认会如何处理的例子开始吧。</p> + +<p>第一个例子是，一个盒子，在块方向上已经受到<code>height</code>的限制。然后我们已经加了过多的内容，以至于盒子里面没有空间容纳。内容正在从盒子里面溢出，并让自己把盒子下面的段落弄得一团糟。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/overflow/block-overflow.html", '100%', 600)}}</p> + +<p>第二个例子是一个单词，位于在内联方向上受到限制的盒子里面。盒子已经被做得小到无法放置那个单词的地步，于是那个单词就突破了盒子的限制。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/overflow/inline-overflow.html", '100%', 500)}}</p> + +<p>你也许会好奇，为什么CSS默认会采取如此不整洁的方式，让内容这么凌乱地溢出出来呢？为何不把多余的内容隐藏起来，或者让盒子变大呢？</p> + +<p>只要有可能，CSS就不会隐藏你的内容，隐藏引起的数据损失通常会造成困扰。在CSS的术语里面，这会导致一些内容消失，你的访客可能不会注意到这一点，如果消失的是表格上的提交按钮，没有人能填完这个表格，这是很麻烦的事情！所以CSS反而会把它以可见的形式溢出出去。这样做的结果就是，你会看到错误的CSS导致的一片混乱，或者最坏的情况也只是你的网站的访客会告诉你有些内容冒了出来，你的网站需要修缮。</p> + +<p>如果你已经用<code>width</code>或者<code>height</code>限制住了一个盒子，CSS假定，你知道你在做什么，而且你已经控制住了溢出的隐患。总之，在盒子里面需要放置文本的时候，限制住块方向的尺寸是会引起问题的，因为可能会有比你在设计网站的时候所预计的文本更多的文本，或者文本变大了——比如用户增加字体大小的时候。</p> + +<p>在下面的几节课里，我们会看一下各种不同的控制尺寸的方式，以减少溢出的影响。但是，如果你需要固定的尺寸，你也可以控制溢出表现的形式。那么让我们接着读下去吧！</p> + +<h2 id="overflow属性">overflow属性</h2> + +<p>{{cssxref("overflow")}}属性是你控制一个元素溢出的方式，它告诉浏览器你想怎样处理溢出。<code>overflow</code>的默认值为<code>visible</code>，这就是我们的内容溢出的时候，我们在默认情况下看到它们的原因。</p> + +<p>如果你想在内容溢出的时候把它裁剪掉，你可以在你的盒子上设置<code>overflow: hidden</code>。这就会像它表面上所显示的那样作用——隐藏掉溢出。这可能会很自然地让东西消失掉，所以你只应该在判断隐藏内容不会引起问题的时候这样做。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/overflow/hidden.html", '100%', 600)}}</p> + +<p>也许你还会想在有内容溢出的时候加个滚动条？如果你用了<code>overflow: scroll</code>，那么你的浏览器总会显示滚动条，即使没有足够多引起溢出的内容。你可能会需要这样的样式，它避免了滚动条在内容变化的时候出现和消失。</p> + +<p><strong>如果你移除了下面的盒子里的一些内容，你可以看一下，滚动条是否还会在没有能滚动的东西的时候保留。</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll.html", '100%', 600)}}</p> + +<p>在以上的例子里面，我们仅仅需要在<code>y</code>轴方向上滚动，但是我们在两个方向上都有了滚动条。你可以使用{{cssxref("overflow-y")}}属性，设置<code>overflow-y: scroll</code>来仅在<code>y</code>轴方向滚动。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-y.html", '100%', 600)}}</p> + +<p>你也可以用{{cssxref("overflow-x")}}，以在x轴方向上滚动，尽管这不是处理长英文词的好办法！如果你真的需要在小盒子里面和长英文词打交道，那么你可能要了解一下{{cssxref("word-break")}}或者{{cssxref("overflow-wrap")}}属性。除此以外，一些<a href="/zh-CN/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">在CSS里面调整大小</a>这节课里面讨论过的方式可能会帮助你创建可以和有变化容量的内容相协调的盒子。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-x.html", '100%', 500)}}</p> + +<p>和<code>scroll</code>一样，在无论是否有多到需要 用滚动条的内容的时候，页面上都会显示一个滚动条。</p> + +<div class="blockIndicator note"> +<p><strong>注意：</strong> 你可以用<code>overflow</code>属性指定x轴和y轴方向的滚动，同时使用两个值进行传递。如果指定了两个关键字，第一个对<code>overflow-x</code>生效而第二个对<code>overflow-y</code>生效。否则，<code>overflow-x</code>和<code>overflow-y</code>将会被设置成同样的值。例如，<code>overflow: scroll hidden</code>会把<code>overflow-x</code>设置成<code>scroll</code>，而<code>overflow-y</code>则为<code>hidden</code>。</p> +</div> + +<p>如果你只是想让滚动条在有比盒子所能装下更多的内容的时候才显示，那么使用<code>overflow: auto</code>。此时由浏览器决定是否显示滚动条。桌面浏览器一般仅仅会在有足以引起溢出的内容的时候这么做。</p> + +<p><strong>在下面的例子里面，移除一些内容，直到能够装在盒子里面，你还会看到滚动条消失了。</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/overflow/auto.html", '100%', 600)}}</p> + +<h2 id="溢出建立了块级排版上下文">溢出建立了块级排版上下文</h2> + +<p>CSS中有所谓<strong>块级排版上下文（</strong><strong>Block Formatting Context，BFC）</strong>的概念<strong>。</strong>现在你不用太过在意，但是你应该知道，在你使用诸如<code>scroll</code>或者<code>auto</code>的时候，你就建立了一个块级排版上下文。结果就是，你改变了<code>overflow</code>的值的话，对应的盒子就变成了更加小巧的状态。在容器之外的东西没法混进容器内，也没有东西可以突出盒子，进入周围的版面。激活了滚动动作，你的盒子里面所有的内容会被收纳，而且不会遮到页面上其他的物件，于是就产生了一个协调的滚动体验。</p> + +<h2 id="网页设计时不需要的溢出">网页设计时不需要的溢出</h2> + +<p>现代网页布局的方式（正如<a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout</a>模块中所介绍的那些）可以很好地处理溢出。我们不一定能预料到网页上会有多少内容，人们很好地设计它们，使得它们能与这种现状协调。但是在以往，开发者会更多地使用固定高度，尽力让毫无关联的盒子的底部对齐。这是很脆弱的，在旧时的应用里面，你偶尔会遇到一些盒子，它们的内容遮到了页面上的其他内容。如果你看到了，那么你现在应该知道，这就是溢出，理论上你应该能重新排布这些布局，使得它不必依赖于盒子尺寸的调整。</p> + +<p>在开发网站的时候，你应该一直把溢出的问题挂在心头，你应该用或多或少的内容测试设计，增加文本的字号，确保你的CSS可以正常地协调。改变溢出属性的值，来隐藏内容或者增加滚动条，会是你仅仅在少数特别情况下需要的，例如在你确实需要一个可滚动盒子的时候。</p> + +<h2 id="小结">小结</h2> + +<p>这节短短的课已经介绍了溢出的概念，你现在明白，CSS会尽力不让溢出的内容不可见，因为这会造成数据损失。你已经发现，你可以控制住潜在的溢出，同样，你也应该测试你的作品，确保你不会一下子就弄出令人困扰的溢出。</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="模块目录">模块目录</h2> + +<ol> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">层叠与继承</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors">CSS选择器</a> + <ul> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">标签，类，ID选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">伪类和伪元素</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Combinators">关系选择器</a></li> + </ul> + </li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model">盒模型</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景与边框</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">处理不同文字方向的文本</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Overflowing_content">溢出的内容</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units">值和单位</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">在CSS中调整大小</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Images_media_form_elements">图像、媒体和表单元素</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables">样式化表格</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Debugging_CSS">调试CSS</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Organizing">组织CSS</a><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing"> </a></li> +</ol> diff --git a/files/zh-cn/learn/css/building_blocks/selectors/attribute_selectors/index.html b/files/zh-cn/learn/css/building_blocks/selectors/attribute_selectors/index.html new file mode 100644 index 0000000000..20cd580e97 --- /dev/null +++ b/files/zh-cn/learn/css/building_blocks/selectors/attribute_selectors/index.html @@ -0,0 +1,154 @@ +--- +title: 属性选择器 +slug: Learn/CSS/Building_blocks/Selectors/Attribute_selectors +translation_of: Learn/CSS/Building_blocks/Selectors/Attribute_selectors +--- +<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}</p> + +<p>从HTML的学习中，你已经知道，元素可以带有属性，它提供了关于如何标记的更详细信息。CSS中，你能用属性选择器来选中带有特定属性的元素。本节课中，我们将会为你展示如何使用这些很有用的选择器。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">学习前提：</th> + <td>基础电脑知识，<a href="https://developer.mozilla.org/zh-CN/Learn/Getting_started_with_the_web/Installing_basic_software">安装了基本的软件</a>，<a href="https://developer.mozilla.org/和CN/Learn/Getting_started_with_the_web/Dealing_with_files">处理文件</a>的基本知识， HTML基础（学习<a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML">HTML介绍</a>），以及对CSS工作原理的了解（学习<a href="/zh-CN/docs/Learn/CSS/First_steps">CSS初步</a>）</td> + </tr> + <tr> + <th scope="row">目标：</th> + <td>学习属性选择器是什么，如何使用。</td> + </tr> + </tbody> +</table> + +<h2 id="存否和值选择器">存否和值选择器</h2> + +<p>这些选择器允许基于一个元素自身是否存在（例如<code>href</code>）或者基于各式不同的按属性值的匹配，来选取元素。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">选择器</th> + <th scope="col">示例</th> + <th scope="col">描述</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>[<em>attr</em>]</code></td> + <td><code>a[title]</code></td> + <td>匹配带有一个名为<em>attr</em>的属性的元素——方括号里的值。</td> + </tr> + <tr> + <td><code>[<em>attr</em>=<em>value</em>]</code></td> + <td><code>a[href="https://example.com"]</code></td> + <td>匹配带有一个名为<em>attr</em>的属性的元素，其值正为<em>value</em>——引号中的字符串。</td> + </tr> + <tr> + <td><code>[<em>attr</em>~=<em>value</em>]</code></td> + <td><code>p[class~="special"]</code></td> + <td> + <p>匹配带有一个名为<em>attr</em>的属性的元素 ，其值正为<em>value</em>，或者匹配带有一个<em>attr</em>属性的元素，其值有一个或者更多，至少有一个和<em>value</em>匹配。</p> + + <p>注意，在一列中的好几个值，是用空格隔开的。</p> + </td> + </tr> + <tr> + <td><code>[<em>attr</em>|=<em>value</em>]</code></td> + <td><code>div[lang|="zh"]</code></td> + <td>匹配带有一个名为<em>attr</em>的属性的元素，其值可正为<em>value</em>，或者开始为<em>value</em>，后面紧随着一个连字符。</td> + </tr> + </tbody> +</table> + +<p>下面的示例中，你可以看到这些选择器是怎样使用的。</p> + +<ul> + <li>使用<code>li[class]</code>，我们就能匹配任何有class属性的选择器。这匹配了除了第一项以外的所有项。</li> + <li><code>li[class="a"]</code>匹配带有一个<code>a</code>类的选择器，不过不会选中一部分值为<code>a</code>而另一部分是另一个用空格隔开的值的类，它选中了第二项。</li> + <li><code>li[class~="a"]</code>会匹配一个<code>a</code>类，不过也可以匹配一列用空格分开、包含<code>a</code>类的值，它选中了第二和第三项。</li> +</ul> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute.html", '100%', 800)}}</p> + +<h2 id="子字符串匹配选择器">子字符串匹配选择器</h2> + +<p>这些选择器让更高级的属性的值的子字符串的匹配变得可行。例如，如果你有<code>box-warning</code>和<code>box-error</code>类，想把开头为“box-”字符串的每个物件都匹配上的话，你可以用<code>[class^="box-"]</code>来把它们两个都选中。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">选择器</th> + <th scope="col">示例</th> + <th scope="col">描述</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>[<em>attr</em>^=<em>value</em>]</code></td> + <td><code>li[class^="box-"]</code></td> + <td>匹配带有一个名为<em>attr</em>的属性的元素，其值开头为<em>value</em>子字符串。</td> + </tr> + <tr> + <td><code>[<em>attr</em>$=<em>value</em>]</code></td> + <td><code>li[class$="-box"]</code></td> + <td>匹配带有一个名为<em>attr</em>的属性的元素，其值结尾为<em>value</em>子字符串</td> + </tr> + <tr> + <td><code>[<em>attr</em>*=<em>value</em>]</code></td> + <td><code>li[class*="box"]</code></td> + <td>匹配带有一个名为<em>attr</em>的属性的元素，其值的字符串中的任何地方，至少出现了一次<em>value</em>子字符串。</td> + </tr> + </tbody> +</table> + +<p>下个示例展示了这些选择器的用法：</p> + +<ul> + <li><code>li[class^="a"]</code>匹配了任何值开头为<code>a</code>的属性，于是匹配了前两项。</li> + <li><code>li[class$="a"]</code>匹配了任何值结尾为<code>a</code>的属性，于是匹配了第一和第三项。</li> + <li><code>li[class*="a"]</code>匹配了任何值的字符串中出现了<code>a</code>的属性，于是匹配了所有项。</li> +</ul> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-substring.html", '100%', 800)}}</p> + +<h2 id="大小写敏感">大小写敏感</h2> + +<p>如果你想在大小写不敏感的情况下，匹配属性值的话，你可以在闭合括号之前，使用<code>i</code>值。这个标记告诉浏览器，要以大小写不敏感的方式匹配ASCII字符。没有了这个标记的话，值会按照文档语言对大小写的处理方式，进行匹配——HTML中是大小写敏感的。</p> + +<p>下面的示例中，第一个选择器将会匹配一个开头为<code>a</code>的值，这样它只匹配了第一项，因为另外两项开头是大写的A。第二个选择器使用了大小写不敏感的标记，于是匹配了所有项。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}}</p> + +<div class="blockIndicator note"> +<p><strong>备注：</strong>此外还有一个更加新的<code>s</code>值，它会强制在上下文的匹配正常为大小写不敏感的时候，强行要求匹配时大小写敏感。不过，在浏览器中它不太受支持，而且在上下文为HTML时也没啥用。</p> +</div> + +<h2 id="接下来……">接下来……</h2> + +<p>现在我们完成了属性选择器的学习，你可以继续读下篇文章——关于<a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">伪类和伪元素选择器</a>的事情。</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="模块目录">模块目录</h2> + +<ol> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">层叠与继承</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors">CSS选择器</a> + <ul> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">标签、类和ID选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">伪类和伪元素</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Combinators">关系选择器</a></li> + </ul> + </li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model">盒模型</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景与边框</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/%E5%A4%84%E7%90%86_%E4%B8%8D%E5%90%8C_%E6%96%B9%E5%90%91%E7%9A%84_%E6%96%87%E6%9C%AC">处理不同文字方向的文本</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Overflowing_content">溢出的内容</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units">值和单位</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">在CSS中调整大小</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Images_media_form_elements">图像、媒体和表单元素</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables">样式化表格</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Debugging_CSS">调试CSS</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Organizing">组织CSS</a></li> +</ol> diff --git a/files/zh-cn/learn/css/building_blocks/selectors/combinators/index.html b/files/zh-cn/learn/css/building_blocks/selectors/combinators/index.html new file mode 100644 index 0000000000..3766312aff --- /dev/null +++ b/files/zh-cn/learn/css/building_blocks/selectors/combinators/index.html @@ -0,0 +1,109 @@ +--- +title: 关系选择器 +slug: Learn/CSS/Building_blocks/Selectors/Combinators +translation_of: Learn/CSS/Building_blocks/Selectors/Combinators +--- +<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}</p> + +<p>我们要了解的最后一种选择器被命名为关系选择器（Combinator），这是因为它们在其他选择器之间和其他选择器与文档内容的位置之间建立了一种有用的关系的缘故。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">学习前提：</th> + <td>基础电脑知识，<a href="https://developer.mozilla.org/zh-CN/Learn/Getting_started_with_the_web/Installing_basic_software">安装了基本的软件</a>，<a href="https://developer.mozilla.org/和CN/Learn/Getting_started_with_the_web/Dealing_with_files">处理文件</a>的基本知识， HTML基础（学习<a href="https://wiki.developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML">HTML介绍</a>），以及对CSS工作原理的了解（学习<a href="https://wiki.developer.mozilla.org/zh-CN/docs/Learn/CSS/First_steps">CSS初步</a>）</td> + </tr> + <tr> + <th scope="row">目标：</th> + <td>了解CSS里面可用的不同关系选择器。</td> + </tr> + </tbody> +</table> + +<h2 id="后代选择器">后代选择器</h2> + +<p>后代选择器——典型用单个空格（<code> </code>）字符——组合两个选择器，比如，第二个选择器匹配的元素被选择，如果他们有一个祖先（父亲，父亲的父亲，父亲的父亲的父亲，等等）元素匹配第一个选择器。选择器利用后代组合符被称作后代选择器。</p> + +<pre class="brush: css notranslate">body article p</pre> + +<p>下面的示例中，我们只会匹配处于带有<code>.box</code>类的元素里面的<code><p></code>元素。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/descendant.html", '100%', 500)}}</p> + +<h2 id="子代关系选择器">子代关系选择器</h2> + +<p>子代关系选择器是个大于号（<code>></code>），只会在选择器选中直接子元素的时候匹配。继承关系上更远的后代则不会匹配。例如，只选中作为<code><article></code>的直接子元素的<code><p></code>元素：</p> + +<pre class="brush: css notranslate">article > p</pre> + +<p>下个示例中，我们弄了个有序列表，内嵌于另一个无序列表里面。我用子代关系选择器，只选中为<code><ul></code>的直接子元素的<code><li></code>元素，给了它们一个顶端边框。</p> + +<p>如果你移去指定子代选择器的<code>></code>的话，你最后得到的是后代选择器，所有的<code><li></code>会有个红色的边框。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/child.html", '100%', 600)}}</p> + +<h2 id="邻接兄弟">邻接兄弟</h2> + +<p>邻接兄弟选择器（<code>+</code>）用来选中恰好处于另一个在继承关系上同级的元素旁边的物件。例如，选中所有紧随<code><p></code>元素之后的<code><img></code>元素：</p> + +<pre class="brush: css notranslate">p + img</pre> + +<p>常见的使用场景是， 改变紧跟着一个标题的段的某些表现方面，就像是我下面的示例那样。这里我们寻找一个紧挨<code><h1></code>的段，然后样式化它。</p> + +<p>如果你往<code><h1></code>和<code><p></code>之间插入其他的某个元素，例如<code><h2></code>，你将会发现，段落不再与选择器匹配，因而不会应用元素邻接时的前景和背景色。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/adjacent.html", '100%', 800)}}</p> + +<h2 id="通用兄弟">通用兄弟</h2> + +<p>如果你想选中一个元素的兄弟元素，即使它们不直接相邻，你还是可以使用通用兄弟关系选择器（<code>~</code>）。要选中所有的<code><p></code>元素后<em>任何地方</em>的<code><img></code>元素，我们会这样做：</p> + +<pre class="brush: css notranslate">p ~ img</pre> + +<p>在下面的示例中，我们选中了所有的 <code><h1></code>之后的<code><p></code>元素，虽然文档中还有个 <code><div></code>，其后的<code><p></code>还是被选中了。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/general.html", '100%', 600)}}</p> + +<h2 id="使用关系选择器">使用关系选择器</h2> + +<p>你能用关系选择器，将任何在我们前面的学习过程中学到的选择器组合起来，选出你的文档中的一部分。例如如果我们想选中为<code><ul></code>的直接子元素的带有“a”类的列表项的话，我可以用下面的代码。</p> + +<pre class="brush: css notranslate">ul > li[class="a"] { }</pre> + +<p>不过，建立一长列选中你的文档中很明确的部分的选择器的时候，小心一些。这些CSS规则难以复用，因为你让选择器在表示标记文本中的元素的相对位置上过于明确。</p> + +<p>建立简单的一个类，然后把它应用到有需求的元素上，经常会是更好的做法。不过话说回来，如果你需要让你的文档变换一下样式，但是没法编辑HTML（也许是因为它由CMS生成）的话，你的关系选择器的知识会派上用场。</p> + +<h2 id="小试牛刀！">小试牛刀！</h2> + +<p>我们已经在这篇文章里讲了许多内容，不过你能记住最重要的信息吗？你可以找些更深入的测试，在继续下去之前，验证你是否已经获取了这些信息——见<a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Selectors_Tasks">小试牛刀：选择器</a>。</p> + +<h2 id="继续学习">继续学习</h2> + +<p>这是我们选择器这节课的最后一节了。下面我们将会继续前进，学习CSS的另一个重要部分——<a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">CSS盒模型</a>。</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="模块目录">模块目录</h2> + +<ol> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">层叠与继承</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors">CSS选择器</a> + <ul> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">标签、类和ID选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">伪类和伪元素</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Combinators">关系选择器</a></li> + </ul> + </li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model">盒模型</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景与边框</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/%E5%A4%84%E7%90%86_%E4%B8%8D%E5%90%8C_%E6%96%B9%E5%90%91%E7%9A%84_%E6%96%87%E6%9C%AC">处理不同文字方向的文本</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Overflowing_content">溢出的内容</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units">值和单位</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">在CSS中调整大小</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Images_media_form_elements">图像、媒体和表单元素</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables">样式化表格</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Debugging_CSS">调试CSS</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Organizing">组织CSS</a></li> +</ol> diff --git a/files/zh-cn/learn/css/building_blocks/selectors/index.html b/files/zh-cn/learn/css/building_blocks/selectors/index.html new file mode 100644 index 0000000000..cbc655cf38 --- /dev/null +++ b/files/zh-cn/learn/css/building_blocks/selectors/index.html @@ -0,0 +1,228 @@ +--- +title: CSS选择器 +slug: Learn/CSS/Building_blocks/Selectors +tags: + - CSS + - CSS选择器 + - 初学者 + - 类 +translation_of: Learn/CSS/Building_blocks/Selectors +--- +<div> {{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</div> + +<p class="summary">{{Glossary("CSS")}}中，选择器用来指定网页上我们想要样式化的{{glossary("HTML")}}元素。有CSS选择器提供了很多种方法，所以在选择要样式化的元素时，我们可以做到很精细的地步。本文和本文的子篇中，我们将会详细地讲授选择器的不同使用方式，并了解它们的工作原理。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">学习前提：</th> + <td>计算机的基本知识， <a href="https://developer.mozilla.org/zh-CN/Learn/Getting_started_with_the_web/Installing_basic_software">安装了基础软件</a>，<a href="https://developer.mozilla.org/zh-CN/Learn/Getting_started_with_the_web/Dealing_with_files">处理文件</a>的基本知识，HTML基础（学习<a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML">HTML介绍</a>）以及对CSS工作方式的了解（学习<a href="/zh-CN/docs/Learn/CSS/First_steps">CSS初步</a>）</td> + </tr> + <tr> + <th scope="row">目标：</th> + <td>详细学习CSS选择器的工作方式。</td> + </tr> + </tbody> +</table> + +<h2 id="选择器是什么？">选择器是什么？</h2> + +<p>你也许已经见过选择器了。CSS选择器是CSS规则的第一部分。它是元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式。选择器所选择的元素，叫做“选择器的对象”。</p> + +<p><img alt="Some code with the h1 highlighted." src="https://mdn.mozillademos.org/files/16550/selector.png" style="border: 1px solid #cccccc; height: 218px; width: 471px;"></p> + +<p>前面的文章中，你也许已经遇到过几种不同的选择器，了解到选择器可以以不同的方式选择元素，比如选择诸如<code>h1</code>的元素，或者是根据class (类) 选择例如<code>.special</code>。</p> + +<p>CSS中，选择器由CSS选择器规范加以定义。就像是CSS的其他部分那样，它们需要浏览器的支持才能工作。你会遇到的大多数选择器都是在<a href="https://www.w3.org/TR/selectors-3/">CSS 3</a>中定义的，这是一个成熟的规范，因此你会发现浏览器对这些选择器有良好的支持。</p> + +<h2 id="选择器列表">选择器列表</h2> + +<p>如果你有多个使用相同样式的CSS选择器，那么这些单独的选择器可以被混编为一个“选择器列表”，这样，规则就可以应用到所有的单个选择器上了。例如，如果我的<code>h1</code>和<code>.special</code>类有相同的CSS，那么我可以把它们写成两个分开的规则。</p> + +<pre class="brush: css notranslate"><code>h1 { + color: blue; +} + +.special { + color: blue; +} </code></pre> + +<p>我也可以将它们组合起来，在它们之间加上一个逗号，变为选择器列表。</p> + +<pre class="brush: css notranslate"><code>h1, .special { + color: blue; +} </code></pre> + +<p>空格可以在逗号前或后，你可能还会发现如果每个选择器都另起一行，会更好读些。</p> + +<pre class="brush: css notranslate"><code>h1, +.special { + color: blue; +} </code></pre> + +<p>在下面的实时示例中，试着把两个有ID声明的选择器组合起来。外观在组合起来以后应该还是一样的。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} </p> + +<p>当你使用选择器列表时，如果任何一个选择器无效 (存在语法错误)，那么整条规则都会被忽略。</p> + +<p>在下面的示例中，无效的class选择器会被忽略，而<code>h1</code>选择器仍会被样式化。</p> + +<pre class="brush: css notranslate"><code>h1 { + color: blue; +} + +..special { + color: blue; +} </code></pre> + +<p>但是在被组合起来以后，整个规则都会失效，无论是<code>h1</code>还是这个class都不会被样式化。</p> + +<pre class="brush: css notranslate"><code>h1, ..special { + color: blue; +} </code></pre> + +<h2 id="选择器的种类">选择器的种类</h2> + +<p>有几组不同的选择器，知道了需要哪种选择器，你会更容易正确使用它们。在本文的子篇中，我们将会来更详细地看下不同种类的选择器。</p> + +<h3 id="类型、类和ID选择器">类型、类和ID选择器</h3> + +<p>这个选择器组，第一个是指向了所有HTML元素<code><h1>。</code></p> + +<pre class="brush: css notranslate">h1 { }</pre> + +<p>它也包含了一个class的选择器：</p> + +<pre class="brush: css notranslate">.box { }</pre> + +<p>亦或，一个id选择器：</p> + +<pre class="brush: css notranslate">#unique { }</pre> + +<h3 id="标签属性选择器">标签属性选择器</h3> + +<p>这组选择器根据一个元素上的某个标签的属性的存在以选择元素的不同方式：</p> + +<pre class="brush: css notranslate">a[title] { }</pre> + +<p>或者根据一个有特定值的标签属性是否存在来选择：</p> + +<pre class="brush: css notranslate">a[href="https://example.com"] { }</pre> + +<h3 id="伪类与伪元素">伪类与伪元素</h3> + +<p>这组选择器包含了伪类，用来样式化一个元素的特定状态。例如<code>:hover</code>伪类会在鼠标指针悬浮到一个元素上的时候选择这个元素：</p> + +<pre class="brush: css notranslate">a:hover { }</pre> + +<p>它还可以包含了伪元素，选择一个元素的某个部分而不是元素自己。例如，<code>::first-line</code>是会选择一个元素（下面的情况中是<code><p></code>）中的第一行，类似<code><span></code>包在了第一个被格式化的行外面，然后选择这个<code><span></code>。</p> + +<pre class="brush: css notranslate">p::first-line { }</pre> + +<h3 id="运算符">运算符</h3> + +<p>最后一组选择器可以将其他选择器组合起来，更复杂的选择元素。下面的示例用运算符（<code>></code>）选择了<code><article></code>元素的初代子元素。</p> + +<pre class="brush: css notranslate">article > p { }</pre> + +<h2 id="接下来要做的事情">接下来要做的事情</h2> + +<p>你可以看下下面的选择器参考表，可以获得到这个学习章节——或者总体来说是MDN上——的各种选择器的直接链接；你也可以继续下去，开始你的了解<a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">类型、类和ID选择器</a>的旅程。</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="选择器参考表">选择器参考表</h2> + +<p>下面的表格让你可以浏览你可以用的选择器，还有本指南中教你如何使用每种选择器的页面的链接。我还加上了一个能查看浏览器对每个选择器的支持信息的MDN页面链接。你可以把这个作为回头的参考，在你以后需要查询文献中提到的选择器的时候，或者是在你广义上实验CSS的时候。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">选择器</th> + <th scope="col">示例</th> + <th scope="col">学习CSS的教程</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/zh-CN/docs/Web/CSS/Type_selectors">类型选择器</a></td> + <td><code>h1 { }</code></td> + <td><a href="/zh-CN/docs/user:chrisdavidmills/CSS_Learn/CSS_Selectors/Type_Class_and_ID_Selectors#Type_selectors">类型选择器</a></td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/CSS/Universal_selectors">通配选择器</a></td> + <td><code>* { }</code></td> + <td><a href="/zh-CN/docs/user:chrisdavidmills/CSS_Learn/CSS_Selectors/Type_Class_and_ID_Selectors#The_universal_selector">通配选择器</a></td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/CSS/Class_selectors">类选择器</a></td> + <td><code>.box { }</code></td> + <td><a href="https://developer.mozilla.org/zh-CN/docs/user:chrisdavidmills/CSS_Learn/CSS_Selectors/Type_Class_and_ID_Selectors#Class_selectors">类选择器</a></td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/CSS/ID_selectors">ID选择器</a></td> + <td><code>#unique { }</code></td> + <td><a href="https://developer.mozilla.org/zh-CN/docs/user:chrisdavidmills/CSS_Learn/CSS_Selectors/Type_Class_and_ID_Selectors#ID_Selectors">ID选择器</a></td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/CSS/Attribute_selectors">标签属性选择器</a></td> + <td><code>a[title] { }</code></td> + <td><a href="https://developer.mozilla.org/zh-CN/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Attribute_selectors">标签属性选择器</a></td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/CSS/Pseudo-classes">伪类选择器</a></td> + <td><code>p:first-child { }</code></td> + <td><a href="https://developer.mozilla.org/zh-CN/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-class">伪类</a></td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/CSS/Pseudo-elements">伪元素选择器</a></td> + <td><code>p::first-line { }</code></td> + <td><a href="https://developer.mozilla.org/zh-CN/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-element">伪元素</a></td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/CSS/Descendant_combinator">后代选择器</a></td> + <td><code>article p</code></td> + <td><a href="https://developer.mozilla.org/zh-CN/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Combinators#Descendant_Selector">后代运算符</a></td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/CSS/Child_combinator">子代选择器</a></td> + <td><code>article > p</code></td> + <td><a href="https://developer.mozilla.org/zh-CN/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Combinators#Child_combinator">子代选择器</a></td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/CSS/Adjacent_sibling_combinator">相邻兄弟选择器</a></td> + <td><code>h1 + p</code></td> + <td><a href="https://developer.mozilla.org/zh-CN/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Combinators#Adjacent_sibling">相邻兄弟</a></td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/CSS/General_sibling_combinator">通用兄弟选择器</a></td> + <td><code>h1 ~ p</code></td> + <td><a href="https://developer.mozilla.org/zh-CN/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Combinators#General_sibling">通用兄弟</a></td> + </tr> + </tbody> +</table> + +<h2 id="模块目录">模块目录</h2> + +<ol> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">层叠与继承</a></li> + <li><a class="new" rel="nofollow" title="该页面尚未创建。">CSS选择器</a> + <ul> + <li><a class="new" rel="nofollow" title="该页面尚未创建。">标签，类，ID选择器</a></li> + <li><a class="new" rel="nofollow" title="该页面尚未创建。">属性选择器</a></li> + <li><a class="new" rel="nofollow" title="该页面尚未创建。">伪类和伪元素</a></li> + <li><a class="new" rel="nofollow" title="该页面尚未创建。">关系选择器</a></li> + </ul> + </li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model">盒模型</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景与边框</a></li> + <li><a class="new" rel="nofollow" title="该页面尚未创建。">处理不同文字方向的文本</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Overflowing_content">溢出的内容</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units">值和单位</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">在CSS中调整大小</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Images_media_form_elements">图像、媒体和表单元素</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables">样式化表格</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Debugging_CSS">调试CSS</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Organizing">组织CSS</a></li> +</ol> diff --git a/files/zh-cn/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html b/files/zh-cn/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html new file mode 100644 index 0000000000..776b149893 --- /dev/null +++ b/files/zh-cn/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html @@ -0,0 +1,393 @@ +--- +title: 伪类和伪元素 +slug: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements +translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements +--- +<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}</p> + +<p>下一组我们将了解的选择器被称为<strong>伪类</strong>和<strong>伪元素</strong>。这一类选择器的数量众多，通常用于很明确的目的。一旦你了解了如何使用它们，你便可以通过查阅列表来寻找合适的那一项以完成你想要的选择。与之前一样，每个选择器相关的MDN页面都将帮助你了解各浏览器的支持情况。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">学习前提：</th> + <td>基础电脑知识，<a href="https://developer.mozilla.org/zh-CN/Learn/Getting_started_with_the_web/Installing_basic_software">安装了基本的软件</a>，<a href="https://developer.mozilla.org/和CN/Learn/Getting_started_with_the_web/Dealing_with_files">处理文件</a>的基本知识， HTML基础（学习<a href="https://wiki.developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML">HTML介绍</a>），以及对CSS工作原理的了解（学习<a href="https://wiki.developer.mozilla.org/zh-CN/docs/Learn/CSS/First_steps">CSS初步</a>）</td> + </tr> + <tr> + <th scope="row">目标：</th> + <td>了解伪类和伪元素选择器</td> + </tr> + </tbody> +</table> + +<h2 id="什么是伪类？">什么是伪类？</h2> + +<p>伪类是选择器的一种，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候。它们表现得会像是你向你的文档的某个部分应用了一个类一样，帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易于维护。</p> + +<p>伪类就是开头为冒号的关键字：</p> + +<pre class="notranslate">:<em>pseudo-class-name</em></pre> + +<h3 id="简单伪类示例">简单伪类示例</h3> + +<p>让我们看下一个简单的示例。如果我们想要让一篇文章中的第一段变大加粗，可为此段加上一个类，然后为那个类添加CSS，正如下面的示例展示的这样：</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/first-child.html", '100%', 800)}}</p> + +<p>不过，这在维护的时候可能会很恼人——要是文档的头部又加上一段的话呢？我们会需要把这个类挪到新加的这段上。假如我们不加类，我们可以使用{{cssxref(":first-child")}}伪类选择器——这将<em>一直</em>选中文章中的第一个子元素，我们将不再需要编辑HTML（编辑HTML并不总是可行，也许是因为它是由一个CMS生成的）。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/first-child2.html", '100%', 700)}}</p> + +<p>所有的伪类以同样的方式实现。它们选中你的文档中处于某种状态的那部分，表现得就像是你已经向你的HTML加入类一样。看下MDN上的另外几个示例：</p> + +<ul> + <li><code><a href="/zh-CN/docs/Web/CSS/:last-child">:last-child</a></code></li> + <li><code><a href="/zh-CN/docs/Web/CSS/:only-child">:only-child</a></code></li> + <li><code><a href="/zh-Cn/docs/Web/CSS/:invalid">:invalid</a></code></li> +</ul> + +<h3 id="用户行为伪类">用户行为伪类</h3> + +<p>一些伪类只会在用户以某种方式和文档交互的时候应用。这些<strong>用户行为伪类</strong>，有时叫做<strong>动态伪类</strong>，表现得就像是一个类在用户和元素交互的时候加到了元素上一样。案例包括：</p> + +<ul> + <li><code><a href="/en-US/docs/Web/CSS/:hover">:hover</a></code>——上面提到过，只会在用户将指针挪到元素上的时候才会激活，一般就是链接元素。</li> + <li><code><a href="/en-US/docs/Web/CSS/:focus">:focus</a></code>——只会在用户使用键盘控制，选定元素的时候激活。</li> +</ul> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/hover.html", '100%', 500)}}</p> + +<h2 id="伪元素是啥？">伪元素是啥？</h2> + +<p>伪元素以类似方式表现，不过表现得是像你往标记文本中加入全新的HTML元素一样，而不是向现有的元素上应用类。伪元素开头为双冒号<code>::</code>。</p> + +<pre class="notranslate"><em>::pseudo-element-name</em></pre> + +<div class="blockIndicator note"> +<p><strong>备注：</strong>一些早期的伪元素曾使用单冒号的语法，所以你可能会在代码或者示例中看到。现代的浏览器为了保持后向兼容，支持早期的带有单双冒号语法的伪元素。</p> +</div> + +<p>例如，如果你想选中一段的第一行，你可以把它用一个<code><span></code>元素包起来，然后使用元素选择器；不过，如果包起来的单词/字符数目长于或者短于父元素的宽度，这样做会失败。由于我们一般不会知道一行能放下多少单词/字符——因为屏幕宽度或者字体大小改变的时候这也会变——通过改变HTML的方式来可预测地这么做是不可能的。</p> + +<p><code>::first-line</code>伪元素选择器会值得信赖地做到这件事——即使单词/字符的数目改变，它也只会选中第一行。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/first-line.html", '100%', 800)}}</p> + +<p>这表现得就像是<code><span></code>神奇地包在第一个被格式化的行一样，每当行长改变的时候还会更新。</p> + +<p>你可以看到它把两段的第一行都选中了。</p> + +<h2 id="把伪类和伪元素组合起来">把伪类和伪元素组合起来</h2> + +<p>如果你想让第一段的第一行加粗，你需要把<code>:first-child</code>和<code>::first-line</code>选择器放到一起。试着编辑前面的实时示例，让它使用下面的CSS。这里的意思是，我们想选择一个<code><article></code>元素里面的第一个<code><p></code>元素的第一行。</p> + +<pre class="brush: css notranslate"><code>article p:first-child::first-line { + font-size: 120%; + font-weight: bold; +}</code></pre> + +<h2 id="生成带有before和after的内容">生成带有::before和::after的内容</h2> + +<p>有一组特别的伪元素，它们和<code><a href="/en-US/docs/Web/CSS/content">content</a></code>属性一同使用，使用CSS将内容插入到你的文档中中。</p> + +<p>你能用这些插入一个文本字符串，和在下面的实时示例里那样。试着改变{{cssxref("content")}}属性的文本值，看看输出是怎么改变的。你也能改变<code>::before</code>伪元素为<code>::after</code>，看到这段文本插入到了元素的末尾而不是开头。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/before.html", '100%', 400)}}</p> + +<p>从CSS插入文本字符串，我们并不会在Web浏览器上经常这么做，因为对于一些屏幕阅读器来说，文本是不可见的，而且对于未来别人的查找和编辑也不是很方便。</p> + +<p>这些伪元素的更推荐的用法是插入一个图标，例如下面的示例加入的一个小箭头，作为一个视觉性的提示，而且我们并不希望屏幕阅读器读出它。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/after-icon.html", '100%', 400)}}</p> + +<p>这些伪元素经常用于插入空字符串，其后可以像页面上的其他元素被样式化。</p> + +<p>下个示例，我们已经用 <code>::before</code>伪元素加入了个空字符串。我们把它设为了<code>display: block</code>，以让它可以用width和height进行样式化。然后我们可以用CSS像任何元素那样样式化。你可以摆弄CSS，改变它的外观和行为。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/before-styled.html", '100%', 500)}}</p> + +<p><code>::before</code>和<code>::after</code>伪元素与<code>content</code>属性的共同使用，在CSS中被叫做“生成内容”，而且你会见到这种技术被用于完成各种任务。<a href="http://www.cssarrowplease.com/">CSS Arrow Please</a>网站就是一个著名的示例，它帮你用CSS生成一个箭头。在你创建你的箭头的时候看下CSS，你将会看到实际使用的{{cssxref("::before")}}和{{cssxref("::after")}}伪元素。无论什么时候你看到了这些选择器，都要看下{{cssxref("content")}}属性，以了解文档中添加了什么。</p> + +<h2 id="参考节">参考节</h2> + +<p>有很多伪类和伪元素，所以有一个用于参考的列表会有用。下面是列出它们的表格，链接到了MDN上它们的参考页。把这作为参考，看看你能选中什么。</p> + +<h3 id="伪类">伪类</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">选择器</th> + <th scope="col">描述</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ Cssxref(":active") }}</td> + <td>在用户激活（例如点击）元素的时候匹配。</td> + </tr> + <tr> + <td>{{ Cssxref(":any-link") }}</td> + <td>匹配一个链接的<code>:link</code>和<code>:visited</code>状态。</td> + </tr> + <tr> + <td>{{ Cssxref(":blank") }}</td> + <td>匹配空输入值的<a href="/en-US/docs/Web/HTML/Element/input"><code><input></code>元素</a>。</td> + </tr> + <tr> + <td>{{ Cssxref(":checked") }}</td> + <td>匹配处于选中状态的单选或者复选框。</td> + </tr> + <tr> + <td>{{ Cssxref(":current") }}</td> + <td>匹配正在展示的元素，或者其上级元素。</td> + </tr> + <tr> + <td>{{ Cssxref(":default") }}</td> + <td>匹配一组相似的元素中默认的一个或者更多的UI元素。</td> + </tr> + <tr> + <td>{{ Cssxref(":dir") }}</td> + <td>基于其方向性（HTML<code><a href="/en-US/docs/Web/HTML/Global_attributes/dir">dir</a></code>属性或者CSS<code><a href="/en-US/docs/Web/CSS/direction">direction</a></code>属性的值）匹配一个元素。</td> + </tr> + <tr> + <td>{{ Cssxref(":disabled") }}</td> + <td>匹配处于关闭状态的用户界面元素</td> + </tr> + <tr> + <td>{{ Cssxref(":empty") }}</td> + <td>匹配除了可能存在的空格外，没有子元素的元素。</td> + </tr> + <tr> + <td>{{ Cssxref(":enabled") }}</td> + <td>匹配处于开启状态的用户界面元素。</td> + </tr> + <tr> + <td>{{ Cssxref(":first") }}</td> + <td>匹配<a href="/en-US/docs/Web/CSS/Paged_Media">分页媒体</a>的第一页。</td> + </tr> + <tr> + <td>{{ Cssxref(":first-child") }}</td> + <td>匹配兄弟元素中的第一个元素。</td> + </tr> + <tr> + <td>{{ Cssxref(":first-of-type") }}</td> + <td>匹配兄弟元素中第一个某种类型的元素。</td> + </tr> + <tr> + <td>{{ Cssxref(":focus") }}</td> + <td>当一个元素有焦点的时候匹配。</td> + </tr> + <tr> + <td>{{ Cssxref(":focus-visible")}}</td> + <td>当元素有焦点，且焦点对用户可见的时候匹配。</td> + </tr> + <tr> + <td>{{ Cssxref(":focus-within") }}</td> + <td>匹配有焦点的元素，以及子代元素有焦点的元素。</td> + </tr> + <tr> + <td>{{ Cssxref(":future") }}</td> + <td>匹配当前元素之后的元素。</td> + </tr> + <tr> + <td>{{ Cssxref(":hover") }}</td> + <td>当用户悬浮到一个元素之上的时候匹配。</td> + </tr> + <tr> + <td>{{ Cssxref(":indeterminate") }}</td> + <td>匹配未定态值的UI元素，通常为<a href="/en-US/docs/Web/HTML/Element/input/checkbox">复选框</a>。</td> + </tr> + <tr> + <td>{{ Cssxref(":in-range") }}</td> + <td>用一个区间匹配元素，当值处于区间之内时匹配。</td> + </tr> + <tr> + <td>{{ Cssxref(":invalid") }}</td> + <td>匹配诸如<code><input></code>的位于不可用状态的元素。</td> + </tr> + <tr> + <td>{{ Cssxref(":lang") }}</td> + <td>基于语言（HTML<a href="/zh-CN/docs/Web/HTML/Global_attributes/lang">lang</a>属性的值）匹配元素。</td> + </tr> + <tr> + <td>{{ Cssxref(":last-child") }}</td> + <td>匹配兄弟元素中最末的那个元素。</td> + </tr> + <tr> + <td>{{ Cssxref(":last-of-type") }}</td> + <td>匹配兄弟元素中最后一个某种类型的元素。</td> + </tr> + <tr> + <td>{{ Cssxref(":left") }}</td> + <td>在<a href="/zh-CN/docs/Web/CSS/CSS_Pages">分页媒体</a>中，匹配左手边的页。</td> + </tr> + <tr> + <td>{{ Cssxref(":link")}}</td> + <td>匹配未曾访问的链接。</td> + </tr> + <tr> + <td>{{ Cssxref(":local-link")}}</td> + <td>匹配指向和当前文档同一网站页面的链接。</td> + </tr> + <tr> + <td>{{ Cssxref(":is", ":is()")}}</td> + <td>匹配传入的选择器列表中的任何选择器。</td> + </tr> + <tr> + <td>{{ Cssxref(":not") }}</td> + <td>匹配作为值传入自身的选择器未匹配的物件。</td> + </tr> + <tr> + <td>{{ Cssxref(":nth-child") }}</td> + <td>匹配一列兄弟元素中的元素——兄弟元素按照<var>an+b</var>形式的式子进行匹配（比如2n+1匹配元素1、3、5、7等。即所有的奇数个）。</td> + </tr> + <tr> + <td>{{ Cssxref(":nth-of-type") }}</td> + <td>匹配某种类型的一列兄弟元素（比如，<code><p></code>元素）——兄弟元素按照<var>an+b</var>形式的式子进行匹配（比如2n+1匹配元素1、3、5、7等。即所有的奇数个）。</td> + </tr> + <tr> + <td>{{ Cssxref(":nth-last-child") }}</td> + <td>匹配一列兄弟元素，从后往前倒数。兄弟元素按照<var>an+b</var>形式的式子进行匹配（比如2n+1匹配按照顺序来的最后一个元素，然后往前两个，再往前两个，诸如此类。从后往前数的所有奇数个）。</td> + </tr> + <tr> + <td>{{ Cssxref(":nth-last-of-type") }}</td> + <td>匹配某种类型的一列兄弟元素（比如，<code><p></code>元素），从后往前倒数。兄弟元素按照<var>an+b</var>形式的式子进行匹配（比如2n+1匹配按照顺序来的最后一个元素，然后往前两个，再往前两个，诸如此类。从后往前数的所有奇数个）。</td> + </tr> + <tr> + <td>{{ Cssxref(":only-child") }}</td> + <td>匹配没有兄弟元素的元素。</td> + </tr> + <tr> + <td>{{ Cssxref(":only-of-type") }}</td> + <td>匹配兄弟元素中某类型仅有的元素。</td> + </tr> + <tr> + <td>{{ Cssxref(":optional") }}</td> + <td>匹配不是必填的form元素。</td> + </tr> + <tr> + <td>{{ Cssxref(":out-of-range") }}</td> + <td>按区间匹配元素，当值不在区间内的的时候匹配。</td> + </tr> + <tr> + <td>{{ Cssxref(":past") }}</td> + <td>匹配当前元素之前的元素。</td> + </tr> + <tr> + <td>{{ Cssxref(":placeholder-shown") }}</td> + <td>匹配显示占位文字的input元素。</td> + </tr> + <tr> + <td>{{ Cssxref(":playing") }}</td> + <td>匹配代表音频、视频或者相似的能“播放”或者“暂停”的资源的，且正在“播放”的元素。</td> + </tr> + <tr> + <td>{{ Cssxref(":paused") }}</td> + <td>匹配代表音频、视频或者相似的能“播放”或者“暂停”的资源的，且正在“暂停”的元素。</td> + </tr> + <tr> + <td>{{ Cssxref(":read-only") }}</td> + <td>匹配用户不可更改的元素。</td> + </tr> + <tr> + <td>{{ Cssxref(":read-write") }}</td> + <td>匹配用户可更改的元素。</td> + </tr> + <tr> + <td>{{ Cssxref(":required") }}</td> + <td>匹配必填的form元素。</td> + </tr> + <tr> + <td>{{ Cssxref(":right") }}</td> + <td>在<a href="/zh-CN/docs/Web/CSS/CSS_Pages">分页媒体</a>中，匹配右手边的页。</td> + </tr> + <tr> + <td>{{ Cssxref(":root") }}</td> + <td>匹配文档的根元素。</td> + </tr> + <tr> + <td>{{ Cssxref(":scope") }}</td> + <td>匹配任何为参考点元素的的元素。</td> + </tr> + <tr> + <td>{{ Cssxref(":valid") }}</td> + <td>匹配诸如<code><input></code>元素的处于可用状态的元素。</td> + </tr> + <tr> + <td>{{ Cssxref(":target") }}</td> + <td>匹配当前URL目标的元素（例如如果它有一个匹配当前<a href="https://en.wikipedia.org/wiki/Fragment_identifier">URL分段</a>的元素）。</td> + </tr> + <tr> + <td>{{ Cssxref(":visited") }}</td> + <td>匹配已访问链接。</td> + </tr> + </tbody> +</table> + +<h3 id="伪元素">伪元素</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">选择器</th> + <th scope="col">描述</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ Cssxref("::after") }}</td> + <td>匹配出现在原有元素的实际内容之后的一个可样式化元素。</td> + </tr> + <tr> + <td>{{ Cssxref("::before") }}</td> + <td>匹配出现在原有元素的实际内容之前的一个可样式化元素。</td> + </tr> + <tr> + <td>{{ Cssxref("::first-letter") }}</td> + <td>匹配元素的第一个字母。</td> + </tr> + <tr> + <td>{{ Cssxref("::first-line") }}</td> + <td>匹配包含此伪元素的元素的第一行。</td> + </tr> + <tr> + <td>{{ Cssxref("::grammar-error") }}</td> + <td>匹配文档中包含了浏览器标记的语法错误的那部分。</td> + </tr> + <tr> + <td>{{ Cssxref("::selection") }}</td> + <td>匹配文档中被选择的那部分。</td> + </tr> + <tr> + <td>{{ Cssxref("::spelling-error") }}</td> + <td>匹配文档中包含了浏览器标记的拼写错误的那部分。</td> + </tr> + </tbody> +</table> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="模块目录">模块目录</h2> + +<ol> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">层叠与继承</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors">CSS选择器</a> + <ul> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">标签、类和ID选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">伪类和伪元素</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Combinators">关系选择器</a></li> + </ul> + </li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model">盒模型</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景与边框</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/%E5%A4%84%E7%90%86_%E4%B8%8D%E5%90%8C_%E6%96%B9%E5%90%91%E7%9A%84_%E6%96%87%E6%9C%AC">处理不同文字方向的文本</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Overflowing_content">溢出的内容</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units">值和单位</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">在CSS中调整大小</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Images_media_form_elements">图像、媒体和表单元素</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables">样式化表格</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Debugging_CSS">调试CSS</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Organizing">组织CSS</a><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing"> </a></li> +</ol> diff --git a/files/zh-cn/learn/css/building_blocks/selectors/selectors_tasks/index.html b/files/zh-cn/learn/css/building_blocks/selectors/selectors_tasks/index.html new file mode 100644 index 0000000000..17f2ecf366 --- /dev/null +++ b/files/zh-cn/learn/css/building_blocks/selectors/selectors_tasks/index.html @@ -0,0 +1,132 @@ +--- +title: 'Test your skills: Selectors' +slug: Learn/CSS/Building_blocks/Selectors/Selectors_Tasks +translation_of: Learn/CSS/Building_blocks/Selectors/Selectors_Tasks +--- +<div>{{LearnSidebar}}</div> + +<p>这个任务的目的是帮助你理解CSS里的选择器。</p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>:你可以 在下面那些交换编辑器中尝试解决问题，然而 把代码下载然后使用一个在线工具比如 <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a> 去解决这些问题可能对你更有作用。</p> + +<p>如果你卡住了，可以向我们寻求帮助 — 请参阅本页底部的{{anch("Assessment or further help")}} 部分。</p> +</div> + +<h2 id="选择器一">选择器一</h2> + +<p>在没有改变HTML的情况下，使用CSS去完成下面的要求：:</p> + +<ul> + <li>使一级标题的字体颜色为蓝色</li> + <li>使二级标题有一个蓝色背景且白色文本。</li> + <li>使跨距中换行的文本的字体大小为200%。</li> +</ul> + +<p><img alt="Text with the CSS applied for the solution to task 1." src="https://mdn.mozillademos.org/files/17118/selectors1.jpg" style="height: 781px; width: 1026px;"></p> + +<p>Try updating the live code below to recreate the finished example:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/type.html", '100%', 700)}}</p> + +<div class="blockIndicator note"> +<p>For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/selectors/type-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p> +</div> + +<h2 id="选择器二">选择器二</h2> + +<p>在没有改变HTML的情况下，对本例中内容的外观进行以下更改：</p> + +<ul> + <li>让id为 <code>special</code> 的元素有一个黄色背景。</li> + <li>让使用类 <code>alert</code> 的元素有一个 1px 的灰色边框。</li> + <li>如果一个元素使用了 <code>alert</code> 类还有 <code>stop</code>类， 让它的背景变为红色。</li> + <li>如果一个元素使用 <code>alert</code> 类还有 <code>go</code>类，让它的背景变为绿色。</li> +</ul> + +<p><img alt="Text with the CSS applied for the solution to task 2." src="https://mdn.mozillademos.org/files/17119/selectors2.jpg" style="height: 891px; width: 1027px;"></p> + +<p>Try updating the live code below to recreate the finished example:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/class-id.html", '100%', 800)}}</p> + +<div class="blockIndicator note"> +<p>For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/selectors/class-id-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p> +</div> + +<h2 id="选择器三">选择器三</h2> + +<p>在本例中，尝试在不添加HTML的情况下进行以下更改。</p> + +<ul> + <li>链接文本的样式：使链接为橘色，被访问后变为绿色，当被hover时，移除链接文本的下划线。</li> + <li>让容器里的第一个元素的字体大小为:150%，并且让这个元素的第一行是红色的。</li> + <li>让表格中每隔一行条带化，分别给它们一个颜色为#333的背景和一个白色前景。</li> +</ul> + +<p><img alt="Text with the CSS applied for the solution to task 3." src="https://mdn.mozillademos.org/files/17120/selectors3.jpg" style="height: 926px; width: 1227px;"></p> + +<p>Try updating the live code below to recreate the finished example:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/pseudo.html", '100%', 800)}}</p> + +<div class="blockIndicator note"> +<p>For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/selectors/pseudo-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p> +</div> + +<h2 id="选择器四">选择器四</h2> + +<p>在这个任务中尝试下面这个任务:</p> + +<ul> + <li>让任何直接跟随二级标题的段落颜色为红色。</li> + <li>移除使用了list类的无效列表的儿子元素前面的原点并给他们添加一个1px的灰色下边框。</li> +</ul> + +<p><img alt="Text with the CSS applied for the solution to task 4." src="https://mdn.mozillademos.org/files/17121/selectors4.jpg" style="height: 788px; width: 1222px;"></p> + +<p>Try updating the live code below to recreate the finished example:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/combinators.html", '100%', 800)}}</p> + +<div class="blockIndicator note"> +<p>For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/selectors/combinators-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p> +</div> + +<h2 id="选择器五">选择器五</h2> + +<p>在最后一个任务中，使用属性选择器添加CSS以执行以下操作：</p> + +<ul> + <li>Target the <code><a></code> element with a <code>title</code> attribute and make the border pink (<code>border-color: pink</code>).</li> + <li>Target the <code><a></code> element with an <code>href</code> attribute that contains the word <code>contact</code> somewhere in its value and make the border orange (<code>border-color: orange</code>).</li> + <li>Target the <code><a></code> element with an <code>href</code> value starting with <code>https</code> and give it a green border (<code>border-color: green</code>).</li> +</ul> + +<p><img alt="Four links with different color borders." src="https://mdn.mozillademos.org/files/17147/selectors-attribute.png" style="height: 485px; width: 1264px;"></p> + +<p>Try updating the live code below to recreate the finished example:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/attribute-links.html", '100%', 800)}}</p> + +<div class="blockIndicator note"> +<p>For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/selectors/attribute-links-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p> +</div> + +<h2 id="Assessment_or_further_help">Assessment or further help</h2> + +<p>You can practice these examples in the Interactive Editors mentioned above.</p> + +<p>If you would like your work assessed, or are stuck and want to ask for help:</p> + +<ol> + <li>Put your work into an online shareable editor such as <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a>. You can write the code yourself, or use the starting point files linked to in the above sections.</li> + <li>Write a post asking for assessment and/or help at the <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a>. Your post should include: + <ul> + <li>A descriptive title such as "Assessment wanted for Selectors skill test 1".</li> + <li>Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.</li> + <li>A link to the example you want to be assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.</li> + <li>A link to the actual task or assessment page, so we can find the question you want help with.</li> + </ul> + </li> +</ol> diff --git a/files/zh-cn/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html b/files/zh-cn/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html new file mode 100644 index 0000000000..82253a8997 --- /dev/null +++ b/files/zh-cn/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html @@ -0,0 +1,117 @@ +--- +title: 类型、类和ID选择器 +slug: Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors +translation_of: Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors +--- +<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}</p> + +<p>本节课中，我们看下可用的最简单的选择器，在你的工作中，它们很有可能会是最常用到的。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">学习前提：</th> + <td>基本电脑知识，<a href="https://developer.mozilla.org/zh-CN/Learn/Getting_started_with_the_web/Installing_basic_software">安装了基础的软件</a>，<a href="https://developer.mozilla.org/zh-CN/Learn/Getting_started_with_the_web/Dealing_with_files">处理文件</a>的基础知识，HTML基础（学习<a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML">HTML介绍</a>），以及对CSS工作原理的理解（学习<a href="/zh-CN/docs/Learn/CSS/First_steps">CSS初步</a>）</td> + </tr> + <tr> + <th scope="row">目标：</th> + <td>学习不同的CSS选择器，通过它们将CSS应用到文档中。</td> + </tr> + </tbody> +</table> + +<h2 id="类型选择器">类型选择器</h2> + +<p><strong>类型选择器</strong>有时也叫做“标签名选择器<em>”</em>或者是”元素选择器“，因为它在文档中选择了一个HTML标签/元素的缘故。在下面的示例中，我们已经用了span、em和strong选择器，<code><span></code>、<code><em></code>和<code><strong></code>元素的所有实例这样就都被样式化了。</p> + +<p><strong>试着加上一条CSS规则，选择<code><h1></code>元素，把它的颜色变为蓝色。</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/type.html", '100%', 1100)}}</p> + +<h2 id="全局选择器">全局选择器</h2> + +<p>全局选择器，是由一个星号（<code>*</code>）代指的，它选中了文档中的所有内容（或者是父元素中的所有内容，比如，它紧随在其他元素以及邻代运算符之后的时候）。下面的示例中，我们已经用全局选择器，移去了所有元素上的外边距。这就是说，和浏览器以外边距隔开标题和段的方式默认加上的样式不同的是，每个物件都紧紧地挨在一起，我们不能那么容易就看清楚不同的段。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/universal.html", '100%', 750)}}</p> + +<p>这种行为有时能在“重置样式表”中看到，其中所有浏览器所做的样式化都会被忽略。这些一度很受欢迎，但是把所有的样式化忽略掉的话，通常就是指，你必须做把这些样式带回来的工作！因此我们应小心使用全局选择器，以处理诸如下面所述之类的很特殊的情况。</p> + +<h3 id="使用全局选择器，让选择器更易读">使用全局选择器，让选择器更易读</h3> + +<p>全局选择器的一种用法是让选择器更易读，更明显地表明它们的作用。例如，如果我想选中任何<code><article></code>元素的第一子元素，不论它是什么元素，都给它加粗，我可以将{{cssxref(":first-child")}}选择器（我们将会在<a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">伪类和伪元素</a>课中进一步了解）用作<code><article></code>元素选择器的一个兄弟选择器：</p> + +<pre class="brush: css notranslate">article :first-child { + +}</pre> + +<p>但是这会和<code>article:first-child</code>混淆，而后者选择了作为其他元素的第一子元素的<code><article></code>元素。</p> + +<p>为了避免这种混淆，我们可以向<code>:first-child</code>选择器加入全局选择器，这样选择器所做的事情很容易就能看懂。选择器正选中<code><article></code>元素的<em>任何</em>第一子元素：</p> + +<pre class="brush: css notranslate">article *:first-child { + +} </pre> + +<h2 id="类选择器">类选择器</h2> + +<p>类选择器以一个句点（<code>.</code>）开头，会选择文档中应用了这个类的所有物件。在下面的实时示例中，我们已经建立了一个名为<code>.highlight</code>的类，把它应用到了我的文档中的几个地方。所有包含此类的元素都被高亮了。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class.html", '100%', 750)}}</p> + +<h3 id="指向特定元素的类">指向特定元素的类</h3> + +<p>你能建立一个指向应用一个类的特定元素。在下一个示例里面，我们将会用不同方式高亮一个带有<code>highlight</code>类的<code><span></code>和带有 <code>highlight</code>类的<code><h1></code>标题。我们通过使用附加了类的欲选元素的选择器做到这点，其间没有空格。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class-type.html", '100%', 750)}}</p> + +<p>这种方式使CSS没那么可复用，因为类现在只会应用到那个特定元素，在认为规则也该应用到其他元素的时候，你会需要另外加上一个选择器。</p> + +<h3 id="多个类被应用的时候指向一个元素">多个类被应用的时候指向一个元素</h3> + +<p>你能对一个元素应用多个类，然后分别指向它们，或者仅仅在选择器中存在所有这些类的时候选择这一元素。在你的站点上，构建可以以不同方式组合起来的组件的时候，这会有用。</p> + +<p>在下面的示例中，有一个包含了一条笔记的<code><div></code>。灰色的边框在盒子带有<code>notebox</code>类的时候应用。如果它还有一个<code>warning</code>或是<code>danger</code>类，我们改变{{cssxref("border-color")}}。</p> + +<p>为了告诉浏览器我们只想匹配带有所有这些类的元素，我们可以将这些类不加空格地连成一串。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class-many.html", '100%', 900)}}</p> + +<h2 id="ID选择器">ID选择器</h2> + +<p>ID选择器开头为<code>#</code>而非句点，不过基本上和类选择器是同种用法。可是在一篇文档中，一个ID只会用到一次。它能选中设定了<code>id</code>的元素，你能把ID放在类型选择器之前，只指向元素和ID都匹配的类。在下面的示例里，你可以看看这两种用法。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/id.html", '100%', 750)}}</p> + +<div class="blockIndicator note"> +<p><strong>备注：</strong>正如我们在和特定性相关的课里面学到的那样，ID所指特定，会优先于大多数其他选择器。所以很难处理它们。大多数情况下，给一个元素加个类，而不是使用ID，会更好。不过要是ID是唯一一种指定这个元素的方式的话——也许是因为你没法访问标记标记因此不能编辑——这种方式可行。</p> +</div> + +<h2 id="下一篇">下一篇</h2> + +<p>来看<a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性选择器</a>，继续探索选择器。</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="模块目录">模块目录</h2> + +<ol> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">层叠与继承</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors">CSS选择器</a> + <ul> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">标签、类和ID选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">伪类和伪元素</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Combinators">关系选择器</a></li> + </ul> + </li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model">盒模型</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景与边框</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/%E5%A4%84%E7%90%86_%E4%B8%8D%E5%90%8C_%E6%96%B9%E5%90%91%E7%9A%84_%E6%96%87%E6%9C%AC">处理不同文字方向的文本</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Overflowing_content">溢出的内容</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units">值和单位</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">在CSS中调整大小</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Images_media_form_elements">图像、媒体和表单元素</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables">样式化表格</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Debugging_CSS">调试CSS</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Organizing">组织CSS</a><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing"> </a></li> +</ol> diff --git a/files/zh-cn/learn/css/building_blocks/sizing_items_in_css/index.html b/files/zh-cn/learn/css/building_blocks/sizing_items_in_css/index.html new file mode 100644 index 0000000000..870ef031ff --- /dev/null +++ b/files/zh-cn/learn/css/building_blocks/sizing_items_in_css/index.html @@ -0,0 +1,129 @@ +--- +title: 在CSS中调整大小 +slug: Learn/CSS/Building_blocks/Sizing_items_in_CSS +translation_of: Learn/CSS/Building_blocks/Sizing_items_in_CSS +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}</div> + +<p>在前面的课程中你已经看到了几种使用CSS为页面中元素设定尺寸的方法。 在我们设计网页的时候，需要理解这些不同方法之间的差异。在本课程中，我们将总结设定元素尺寸的方法，并定义几个术语，这些内容将会在未来对你有所帮助。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提：</th> + <td>基本的电脑知识，<a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">安装了必要的软件</a>，<a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">处理文件</a>的基础知识 , HTML基础（学习<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>），理解CSS如何工作（学习<a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a>）。</td> + </tr> + <tr> + <th scope="row">目标：</th> + <td>理解在CSS中约束物体大小的不同方式。</td> + </tr> + </tbody> +</table> + +<h2 id="原始尺寸，或固有尺寸">原始尺寸，或固有尺寸</h2> + +<p>在受CSS设置影响之前，HTML元素有其原始的尺寸。一个直观的例子就是图像。一副图像的长和宽由这个图像文件自身确定。这个尺寸就是固有尺寸。</p> + +<p>如果你把图片放置在网页中的时候没有在<code><img></code> 标签或CSS中设置其尺寸，那么将使用其固有尺寸显示。我们给下面的示例图像绘制了一个边框，以便你看出图像文件的长宽。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-image.html", '100%', 600)}}</p> + +<p>一个空的{{htmlelement("div")}}是没有尺寸的。如果你在你的HTML文件中添加一个空{{htmlelement("div")}} 并给予其边框（就像刚才我们为图像做的那样），你会在页面上看到一条线。这是边框被压缩后的效果— 它内部没有内容。在我们下面的例子中，边框宽度扩展到整个容器宽度，因为它是块级元素，而块级元素的行为就是这样的。它没有高度，或者说高度为0，因为内部没有内容。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-text.html", '100%', 500)}}</p> + +<p>在上面的例子中，试着在空元素内部添加些内容。现在边框内包含一些文字了，因为元素的高度由其所含内容高度确定。再强调一次，这就是元素的固有尺寸 — 由其所包含的内容决定。</p> + +<h2 id="设置具体的尺寸">设置具体的尺寸</h2> + +<p>我们当然可以给设计中的元素指定具体大小。 当给元素指定尺寸（然后其内容需要适合该尺寸）时，我们将其称为<strong>外部尺寸</strong>。以上面例子中的 <code><div></code> 举例 — 我们可以给它一个具体的 {{cssxref("width")}} 和 {{cssxref("height")}} 值, 然后不论我们放什么内容进去它都是该尺寸。 正如我们在<a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">上一课</a>有关溢出的内容中所发现的，如果内容的数量超出了元素可容纳的空间，则设置的高度会导致内容溢出。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/height.html", '100%', 600)}}</p> + +<p>由于存在溢出问题，在网络上使用长度或百分比固定元素的高度需要非常小心。</p> + +<h3 id="使用百分数">使用百分数</h3> + +<p>许多时候，百分数是长度单位，正如我们在<a href="/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units#Percentages">Value and units这节课中讨论的那样</a>，它们常常可与长度互换。当使用百分数时，你需要清楚，它是<strong>什么</strong>东西的百分数。对于一个处于另外一个容器当中的盒子，如果你给予了子盒子一个百分数作为宽度，那么它指的是父容器宽度的百分数。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/percent-width.html", '100%', 600)}}</p> + +<p>这是因为百分数是以包含盒子的块为根据解析的。如果我们的<code><div></code>没有被指定百分数的值，那么它会占据100%的可用空间，因为它是块级别的元素。如果我们给了它一个百分数作为宽度，那么这就是它原来情况下可以占据空间的百分数。</p> + +<h3 id="把百分数作为内外边距">把百分数作为内外边距</h3> + +<p>如果你把<code>margins</code>和<code>padding</code>设置为百分数的话，你会注意到一些奇怪的表现。在下面的例子里，我们有一个盒子，我们给了里面的盒子10%的{{cssxref("margin")}}，外面的盒子10%的{{cssxref("padding")}}。盒子底部和顶部的内外边距，和左右外边距有同样的大小。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/percent-mp.html", '100%', 700)}}</p> + +<p>例如，你也许会希望上下的外边距是元素高的一个百分数，左右外边距是元素宽的百分数。但是，情况不是这样的！</p> + +<p>当你用百分数设定内外边距的时候，值是以<strong>内联尺寸</strong>进行计算的，也即对于左右书写的语言来说的宽度。在我们的例子里面，所有的内外边距是这一宽度的10%，也就是说，你可以让盒子周围的内外边距大小相同。在你以这种方式使用百分数的时候，这是一个需要记住的事实。</p> + +<h2 id="min-和max-尺寸">min-和max-尺寸</h2> + +<p>除了让万物都有一个确定的大小以外，我们可以让CSS给定一个元素的最大或最小尺寸。如果你有一个包含了变化容量的内容的盒子，而且你总是想让它<strong>至少</strong>有个确定的高度，你应该给它设置一个{{cssxref("min-height")}}属性。盒子就会一直保持大于这个最小高度，但是如果有比这个盒子在最小高度状态下所能容纳的更多内容，那么盒子就会变大。</p> + +<p>I在以下的示例中，你可以看到两个盒子，两个都有150像素的确定高度，左边的盒子有150像素高，右边的盒子有需要更多空间才能装下的内容，所以它变得比150像素高。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/min-height.html", '100%', 800)}}</p> + +<p>这在避免溢出的同时并处理变化容量的内容的时候是很有用的。</p> + +<p>{{cssxref("max-width")}}的常见用法为，在没有足够空间以原有宽度展示图像时，让图像缩小，同时确保它们不会比这一宽度大。</p> + +<p>作为示例，如果你设定一个图像的属性为<code>width: 100%</code>，而且它的原始宽度小于容器，图像会被强制拉伸以变大，看起来像素更加明显。如果它的原始宽度大于容器，它则会溢出。两种情形都不是你想要看到的。</p> + +<p>如果你使用了<code>max-width: 100%</code>，那么图像可以变得比原始尺寸更小，但是不会大于原始尺寸的100%。</p> + +<p>在下面的示例里，我们使用了两次相同的图片。第一次使用，属性值已设为<code>width: 100%</code>，位于比图片大的容器里，因此图片拉伸到了与容器相同的宽度；第二次的属性值则设为<code>max-width: 100%</code>，因此它并没有拉伸到充满容器；第三个盒子再一次包含了相同的图片，同时设定了<code>max-width: 100%</code>属性，这时你能看到它是怎样缩小来和盒子大小相适应的。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/max-width.html", '100%', 800)}}</p> + +<p>这个技术是用来让图片<strong>可响应</strong>的，所以在更小的设备上浏览的时候，它们会合适地缩放。你无论怎样都不应该用这个技术先载入大原始尺寸的图片，再对它们在浏览器中进行缩放。图像应该合适地调整尺寸，以使它们不会比预计中展示时所需要的最大尺寸大。下载过大的图像会造成你的网站变慢，如果用户使用按量收费的网络连接，会让用户花更多钱。</p> + +<div class="blockIndicator note"> +<p><strong>备注：</strong>了解更多关于<a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">响应式图片技术</a>的事情。</p> +</div> + +<h2 id="视口单位">视口单位</h2> + +<p>视口，即你在浏览器中看到的部分页面，也是有尺寸的。在CSS中，我们有与视口尺寸相关的度量单位，即意为视口宽度的<code>vw</code>单位，以及意为视口高度的 <code>vh</code>单位。使用这些单位，你可以把一些东西做得随用户的视口改变大小。</p> + +<p><code>1vh</code>等于视口高度的1%，<code>1vw</code>则为视口宽度的1%.你可以用这些单位约束盒子的大小，还有文字的大小。在下面的示例里，我们有一个大小被设为20vh和20vw的盒子。这个盒子里面有一个字母<code>A</code>，其{{cssxref("font-size")}}属性被设成了10vh。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/vw-vh.html", '100%', 600)}}</p> + +<p><strong>如果你改变了<code>vh</code>和<code>vw</code>的对应值，盒子和字体的大小也会改变；视口大小的变化也会让它们的大小变化，因为它们是依照视口来定大小的。想看到随着你改变视口大小的时候示例的变化的话，你需要在一个新浏览器视窗里面载入此示例，因为你可以控制该视窗的大小，同时上面示例所在的嵌入的<code><iframe></code>的大小即是对上面示例而言的视口。<a href="https://mdn.github.io/css-examples/learn/sizing/vw-vh.html">打开此示例</a>，调整浏览器视窗的大小，观察在盒子和文本的大小上所发生的事情。</strong></p> + +<p>在你的设计中，根据视口改变物件的大小是很有用的。例如，如果你想要在你其他内容之前，有一个充满整个视口的视觉宣传段落，让你的页面的那个部分有100vh高的话，会把剩下的内容推到视口的下面，只有向下滚动文档的时候它们才会出现。</p> + +<h2 id="小结">小结</h2> + +<p>本节课，你已经得到了一个对于你可能在约束网站上的内容大小的时候，会遇到的一些关键问题的详细介绍。当你继续学习<a href="/en-US/docs/Learn/CSS/CSS_layout">CSS布局</a>的时候，约束大小会成为掌握不同布局途径的非常重要的基础，所以在继续之前有必要在这里理解这些概念。</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="模块目录">模块目录</h2> + +<ol> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">层叠与继承</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors">CSS选择器</a> + <ul> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">标签，类，ID选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">伪类和伪元素</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Combinators">关系选择器</a></li> + </ul> + </li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model">盒模型</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景与边框</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">处理不同文字方向的文本</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Overflowing_content">溢出的内容</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units">值和单位</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">在CSS中调整大小</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Images_media_form_elements">图像、媒体和表单元素</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables">样式化表格</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Debugging_CSS">调试CSS</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Organizing">组织CSS</a><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing"> </a></li> +</ol> diff --git a/files/zh-cn/learn/css/building_blocks/styling_tables/index.html b/files/zh-cn/learn/css/building_blocks/styling_tables/index.html new file mode 100644 index 0000000000..cce5429572 --- /dev/null +++ b/files/zh-cn/learn/css/building_blocks/styling_tables/index.html @@ -0,0 +1,311 @@ +--- +title: 样式化表格 +slug: Learn/CSS/Building_blocks/Styling_tables +translation_of: Learn/CSS/Building_blocks/Styling_tables +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes")}}</div> + +<p class="summary">设计一个 HTML表格不是世界上最迷人的工作，但有时我们必须这样做。本文提供了一个使HTML表格看起来不错的指南，其中一些功能在前面的文章中已作详细介绍。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">预备知识：</th> + <td>HTML 基础(学习 <a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), HTML表格(见HTML表格模块(TBD))，了解CSS工作原理(study <a href="/zh-CN/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>.)</td> + </tr> + <tr> + <th scope="row">目标：</th> + <td>学习如何有效地对HTML表格进行样式化。</td> + </tr> + </tbody> +</table> + +<h2 id="一个典型的HTML表格">一个典型的HTML表格</h2> + +<p>让我们从一个典型的HTML表格开始。恩，我说典型——大多数HTML表格都是关于鞋子，天气，或者员工的。我们决定通过制作英国著名的朋克乐队来让事情变得更有趣。标记看起来是这样的</p> + +<pre class="brush: html"><table> + <caption>A summary of the UK's most famous punk bands</caption> + <thead> + <tr> + <th scope="col">Band</th> + <th scope="col">Year formed</th> + <th scope="col">No. of Albums</th> + <th scope="col">Most famous song</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">Buzzcocks</th> + <td>1976</td> + <td>9</td> + <td>Ever fallen in love (with someone you shouldn't've)</td> + </tr> + <tr> + <th scope="row">The Clash</th> + <td>1976</td> + <td>6</td> + <td>London Calling</td> + </tr> + + ... some rows removed for brevity + + <tr> + <th scope="row">The Stranglers</th> + <td>1974</td> + <td>17</td> + <td>No More Heroes</td> + </tr> + </tbody> + <tfoot> + <tr> + <th scope="row" colspan="2">Total albums</th> + <td colspan="2">77</td> + </tr> + </tfoot> +</table></pre> + +<p>由于{{htmlattrxref("scope","th")}}、{{htmlelement("caption")}}、{{htmlelement("thead")}}、{{htmlelement("tbody")}}等特性，表格被很好地标记了，易于使用，并且易于访问，不幸的是，它在屏幕上呈现时看起来不太好（见它的预览版 <a href="http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-unstyled.html">punk-bands-unstyled.html</a>）：</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13064/table-unstyled.png" style="display: block; margin: 0 auto;"></p> + +<p>它看起来很拥挤，很难阅读，也很无聊。我们需要使用一些CSS来解决这个问题。</p> + +<h2 id="自主学习：样式化我们的表格">自主学习：样式化我们的表格</h2> + +<p>在这个自主学习部分中，我们将一起来样式化我们的表格。</p> + +<ol> + <li>首先，复制<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/punk-bands-unstyled.html">实例标记</a>到本地，下载这两个图像(<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/noise.png">noise</a>和 <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/leopardskin.jpg">leopardskin</a>)，然后将三个结果文件放在本地计算机的某个工作目录中。</li> + <li>接下来，创建一个名为<code>style.css</code>的新文件并将其保存在与其他文件相同的目录中。</li> + <li>将CSS链接到HTML中，将下面的HTML代码放到HTML的{{htmlelement("head")}}中：</li> +</ol> + +<pre class="brush: html"><link href="style.css" rel="stylesheet" type="text/css"></pre> + +<h3 id="间距和布局">间距和布局</h3> + +<p>我们需要做的第一件事是整理出空间/布局——默认的表格样式是如此的拥挤！要做到这一点，请将以下CSS添加到您的 <code>style.css</code> 文件：</p> + +<pre class="brush: css">/* spacing */ + +table { + table-layout: fixed; + width: 100%; + border-collapse: collapse; + border: 3px solid purple; +} + +thead th:nth-child(1) { + width: 30%; +} + +thead th:nth-child(2) { + width: 20%; +} + +thead th:nth-child(3) { + width: 15%; +} + +thead th:nth-child(4) { + width: 35%; +} + +th, td { + padding: 20px; +}</pre> + +<p>需要注意的最重要的部分如下：</p> + +<ul> + <li>在你的表上，给{{cssxref("table-layout")}}属性设置一个为<code>fixed</code>的值通常是一个好主意，因为它使表的行为在默认情况下更可预测。通常情况下，表列的尺寸会根据所包含的内容大小而变化，这会产生一些奇怪的结果。通过 <code>table-layout: fixed</code>，您可以根据列标题的宽度来规定列的宽度，然后适当地处理它们的内容。这就是为什么我们使用了<code>thead th:nth-child(<em>n</em>)</code> 选择了四个不同的标题({{cssxref(":nth-child")}})选择器（“选择第n个子元素，它是一个顺序排列的{{htmlelement("th")}}元素，且其父元素是{{htmlelement("thead")}}元素”）并给定了它们的百分比宽度。整个列宽度与列标题的宽度是一样的，这是一种很好的设定表列尺寸的方式。Chris Coyier在<a href="https://css-tricks.com/fixing-tables-long-strings/">Fixed Table Layouts</a>中更详细地讨论了这一技术。<br> + <br> + 我们将它与一个100%的{{cssxref("width")}}组合在一起，这意味着该表将填充它放入的任何容器，并且能很好的响应（虽然它仍然需要更多的工作来让它在窄屏宽度上看起来很好）。</li> + <li>一个{{cssxref("border-collapse")}}属性的<code>collapse</code>值对于任何表样式的工作来说都是一个标准的最佳实践。默认情况下，当您在表元素上设置边框时，它们之间将会有间隔，如下图所示：<img alt="" src="https://mdn.mozillademos.org/files/13068/no-border-collapse.png" style="display: block; margin: 0 auto;">这看起来不太好(虽然可能是你想要的样子，谁知道呢?)。使用 <code>border-collapse: collapse;</code> ，让边框合为一条，现在看起来好多了：<img alt="" src="https://mdn.mozillademos.org/files/13066/border-collapse.png" style="display: block; margin: 0 auto;"></li> + <li>我们在整个表设置了一个{{cssxref("border")}}，这是必要的，因为我们将在表页眉和页脚后面设置一些边框——当你在表格外面没有一个边界而且以空隙结尾的时候，它看起来很奇怪，而且是不连贯的。</li> + <li>我们在{{htmlelement("th")}}和{{htmlelement("td")}}元素上设置了一些{{cssxref("padding")}}——这些元素使数据项有了一些空间，使表看起来更加清晰。</li> +</ul> + +<p>此刻，我们的表看起来好多了：</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13070/table-with-spacing.png" style="display: block; margin: 0 auto;"></p> + +<h3 id="一些简单的排版：">一些简单的排版：</h3> + +<p>现在我们把类型整理一下。</p> + +<p>首先，我们在<a href="https://www.google.com/fonts">Google Fonts</a>上找到了一种适合于朋克乐队的字体的字体。如果你愿意，你可以去那里找一个不同的。现在，您只需替换我们提供的{{htmlelement("link")}}元素和定制的{{cssxref("font-family")}}声明，并使用Google字体提供给您的内容。</p> + +<p>首先，将下面的{{htmlelement("link")}}元素添加到您的HTML头部，就在您现有的 <code><link></code> 元素之上：</p> + +<pre class="brush: html"><link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'> +</pre> + +<p>现在将下面的CSS添加到您的<code>style.css</code>文件，在之前内容后面添加：</p> + +<pre class="brush: css">/* typography */ + +html { + font-family: 'helvetica neue', helvetica, arial, sans-serif; +} + +thead th, tfoot th { + font-family: 'Rock Salt', cursive; +} + +th { + letter-spacing: 2px; +} + +td { + letter-spacing: 1px; +} + +tbody td { + text-align: center; +} + +tfoot th { + text-align: right; +}</pre> + +<p>这里没有什么特别的东西。我们通常会对字体样式进行调整，使其更易于阅读：</p> + +<ul> + <li>我们已经设置了一个全局无衬线字体;这纯粹是一种风格上的选择。我们还在{{htmlelement("thead")}}和{{htmlelement("tfoot")}}元素的标题上设置了自定义字体，这是一种很不错的、很有朋克风格的外观。</li> + <li>我们在标题和单元格上设置了一些{{cssxref("letter-spacing")}}，因为我们觉得它有助于提高可读性。再次强调，这主要是一种风格上的选择。</li> + <li>我们在{{htmlelement("tbody")}}中的表格单元中对文本进行了居中对齐，使它们与标题对齐。默认情况下，单元格被赋予了一个{{cssxref("text-align")}}的<code>left</code>值，并且标题被赋予了一个<code>center</code>值，但是通常情况下，让两者对齐看起来更好。标题字体的默认粗体值足以区分它们的外观。</li> + <li>我们在{{htmlelement("tfoot")}}中对标题进行了右对齐，以便与它的数据点更好地关联。</li> +</ul> + +<p>结果看起来更整洁一些：</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13072/table-with-typography.png" style="display: block; margin: 0 auto;"></p> + +<h3 id="图形和颜色">图形和颜色</h3> + +<p>现在轮到图形和颜色了！因为表格上充满“朋克“和“个性”，我们需要给它再搭配一些鲜艳的造型。别担心，你不必让你的表格”燥起来“，你可以选择一些更巧妙、更有品位的东西。</p> + +<p>首先将下面的CSS添加到<code>style.css</code>文件中，在底部添加:</p> + +<pre>thead, tfoot { + background: url(leopardskin.jpg); + color: white; + text-shadow: 1px 1px 1px black; +} + +thead th, tfoot th, tfoot td { + background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5)); + border: 3px solid purple; +} +</pre> + +<p>同样，对于表格这里没有什么特别的，但有几件事值得注意。</p> + +<p>我们已经将一个{{cssxref("background-image")}}添加到{{htmlelement("thead")}}和{{htmlelement("tfoot")}}，并将页眉和页脚的所有文本颜色{{cssxref("color")}}更改为白色(并给它一个{{cssxref("text-shadow")}})，这样它的可读性就更好了。你应该确保你的文字与你的背景形成鲜明的对比，使得它是可读的。</p> + +<p>我们还为{{htmlelement("th")}}和 {{htmlelement("td")}}添加了一个线性渐变，在页眉和页脚中添加了一个漂亮的纹理，同时也为这些元素提供了一个明亮的紫色边框。有多个嵌套的元素是很有用的，这样您就可以将样式层叠在一起。是的，我们可以通过设置多组背景图像属性值来在{{htmlelement("thead")}}和 {{htmlelement("tfoot")}}元素上同时使用背景图像和线性渐变，但是我们决定分开使用，因为考虑到不支持多个背景图像或线性渐变的老浏览器。</p> + +<h4 id="斑马条纹图案">斑马条纹图案</h4> + +<p>我们想用一个单独的部分来展示如何实现斑马条纹（<strong>zebra stripes</strong>）——通过改变不同数据行的颜色，使表中交替行不同的数据行可以更容易地进行解析和读取。将下面的CSS添加到您的 <code>style.css</code> 文件底部：</p> + +<pre class="brush: css">tbody tr:nth-child(odd) { + background-color: #ff33cc; +} + +tbody tr:nth-child(even) { + background-color: #e495e4; +} + +tbody tr { + background-image: url(noise.png); +} + +table { + background-color: #ff33cc; +}</pre> + +<ul> + <li>您在前面看到了{{cssxref(":nth-child")}}选择器用于选择特定的子元素。它也可以用一个公式作为参数，来选择一个元素序列。公式<code>2n-1</code>会选择所有奇数的子元素(1、3、5等)，而公式<code>2n</code>会选择所有偶数的子元素(2、4、6等等)。我们在代码中使用了<code>odd</code>和<code>even</code>的关键字，这与前面提到的公式作用完全相同。在这里，我们给奇数行和偶数行不同的(醒目的)颜色。</li> + <li>我们还为所有的行添加了一个重复的噪点背景色块（一个半透明的<code>.png</code>，有一点视觉上的扭曲）来提供一些纹理。</li> + <li>最后，我们给整个表格提供了一个纯的背景颜色，这样浏览器不支持<code>:nth-child</code>选择器仍然有它们的正文行的背景。</li> +</ul> + +<p>这种颜色爆炸的结果如下：</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13074/table-with-color.png" style="display: block; margin: 0 auto;"></p> + +<p>现在，这可能有点过头不符合你的品味，但我们在这里想要指出的一点是，表格并非只能是枯燥无味的，学术性的。</p> + +<h3 id="样式化标题">样式化标题</h3> + +<p>对我们的表格还有最后一点处理——样式化标题。要做到这一点，请将以下内容添加到您的<code>style.css</code> 文件底部：</p> + +<pre class="brush: css">caption { + font-family: 'Rock Salt', cursive; + padding: 20px; + font-style: italic; + caption-side: bottom; + color: #666; + text-align: right; + letter-spacing: 1px; +}</pre> + +<p>这里没有什么值得注意的地方，除了{{cssxref("caption-side")}}属性，它被赋予了一个<code>bottom</code>的值。这就导致标题被放置在表格的底部，与其他声明一起提供了最后的外观（见预览版<a href="http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html">punk-bands-complete.html</a>）：</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13076/table-with-caption.png" style="display: block; height: 357px; margin: 0px auto; width: 723px;"></p> + +<h2 id="自主学习：样式化你自己的表格">自主学习：样式化你自己的表格</h2> + +<p>现在，我们希望您可以使用我们的示例表格HTML(或者使用您自己的一些！)，并将其样式设计成比我们的表更好的设计和不那么花哨的东西。</p> + +<h2 id="表格样式小贴士">表格样式小贴士</h2> + +<p>在继续之前，我们认为我们将为您提供一个快速列表，列出了上面提到的最有用的点：</p> + +<ul> + <li>使您的表格标记尽可能简单，并且保持灵活性，例如使用百分比，这样设计就更有响应性。</li> + <li>使用 {{cssxref("table-layout")}}<code>: fixed</code> 创建更可控的表布局，可以通过在标题{{cssxref("width")}}中设置{{cssxref("width")}}来轻松设置列的宽度。</li> + <li>使用 {{cssxref("border-collapse")}}<code>: collapse</code> 使表元素边框合并，生成一个更整洁、更易于控制的外观。</li> + <li>使用{{htmlelement("thead")}}, {{htmlelement("tbody")}}和{{htmlelement("tfoot")}} 将表格分割成逻辑块，并提供额外的应用CSS的地方，因此如果需要的话，可以更容易地将样式层叠在一起。</li> + <li>使用斑马线来让其他行更容易阅读。</li> + <li>使用 {{cssxref("text-align")}}直线对齐您的{{htmlelement("th")}}和{{htmlelement("td")}}文本，使内容更整洁、更易于跟随。</li> +</ul> + +<h2 id="小试牛刀！">小试牛刀！</h2> + +<p>我们在这篇文章里面讲了很多，但是你能记住最重要的信息吗？你能找到些更进一步的测试，在你继续之前，想要验证你已经吸收了这些信息的话，请见<a href="https://wiki.developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Tables_tasks">Test your skills: tables</a>。</p> + +<h2 id="总结">总结</h2> + +<p>现在，我们身后的表格样式令人炫目，令人兴奋，我们需要一些其他的东西来占据我们的时间。不要担心——下一章会介绍如何调试CSS，如何解决诸如布局不能像所应该的那样进行呈现的问题，或者元素无法像你预料的那样生效的问题。那里包含了使用浏览器开发者工具寻找你的问题的解决方案的信息。</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="模块目录">模块目录</h2> + +<ol> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">层叠与继承</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors">CSS选择器</a> + <ul> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">标签，类，ID选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">伪类和伪元素</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Combinators">关系选择器</a></li> + </ul> + </li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model">盒模型</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景与边框</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">处理不同文字方向的文本</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Overflowing_content">溢出的内容</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units">值和单位</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">在CSS中调整大小</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Images_media_form_elements">图像、媒体和表单元素</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables">样式化表格</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Debugging_CSS">调试CSS</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Organizing">组织CSS</a></li> +</ol> diff --git a/files/zh-cn/learn/css/building_blocks/tables_tasks/index.html b/files/zh-cn/learn/css/building_blocks/tables_tasks/index.html new file mode 100644 index 0000000000..cb5c0e67d0 --- /dev/null +++ b/files/zh-cn/learn/css/building_blocks/tables_tasks/index.html @@ -0,0 +1,59 @@ +--- +title: 测试技能：表格 +slug: Learn/CSS/Building_blocks/Tables_tasks +tags: + - Beginner + - CSS + - Example +translation_of: Learn/CSS/Building_blocks/Tables_tasks +--- +<div>{{LearnSidebar}}</div> + +<div></div> + +<p>此任务的目的是为了帮助你检测在<u><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables">样式化表格</a></u>课程中学到的技巧的理解。</p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: You can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a> to work on the tasks.<br> + <br> + If you get stuck, then ask us for help — see the {{anch("Assessment or further help")}} section at the bottom of this page.</p> +</div> + +<h2 id="任务">任务</h2> + +<p>在之前的课程中，我们以一种杀马特的方式样式化了一个表格。在这个任务中，我们打算样式化同样的表格，但是使用一些在外部文章<u><a href="https://alistapart.com/article/web-typography-tables/">Web排版：设计可读而不是可看的表格</a></u>概述的表格设计良好实践。</p> + +<p>我们要完成的表格如下图所示。完成这个任务有许多方法，但是我建议你使用和向导中所用的相似的模式来完成以下的事情。</p> + +<ul> + <li>把标题和包含数字的列数据右对齐</li> + <li>把标题和包含文本的列数据左对齐</li> + <li>添加顶部和底部边框，以及页脚上方的边框</li> + <li>将主表的所有奇数行条纹化</li> +</ul> + +<p><img alt="A table with striped rows." src="https://mdn.mozillademos.org/files/17145/mdn-table-bands.png" style="height: 710px; width: 1266px;"></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/tasks/tables/table.html", '100%', 1000)}}</p> + +<div class="blockIndicator note"> +<p>For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/tables/table-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p> +</div> + +<h2 id="Assessment_or_further_help">Assessment or further help</h2> + +<p>You can practice these examples in the Interactive Editors mentioned above.</p> + +<p>If you would like your work assessed, or are stuck and want to ask for help:</p> + +<ol> + <li>Put your work into an online shareable editor such as <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a>. You can write the code yourself, or use the starting point files linked to in the above sections.</li> + <li>Write a post asking for assessment and/or help at the <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a>. Your post should include: + <ul> + <li>A descriptive title such as "Assessment wanted for tables skill test".</li> + <li>Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.</li> + <li>A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.</li> + <li>A link to the actual task or assessment page, so we can find the question you want help with.</li> + </ul> + </li> +</ol> diff --git a/files/zh-cn/learn/css/building_blocks/the_box_model/index.html b/files/zh-cn/learn/css/building_blocks/the_box_model/index.html new file mode 100644 index 0000000000..4d822ed50b --- /dev/null +++ b/files/zh-cn/learn/css/building_blocks/the_box_model/index.html @@ -0,0 +1,348 @@ +--- +title: 盒模型 +slug: Learn/CSS/Building_blocks/The_box_model +translation_of: Learn/CSS/Building_blocks/The_box_model +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}</div> + +<div></div> + +<p>在 CSS 中，所有的元素都被一个个的“盒子（box）”包围着，理解这些“盒子”的基本原理，是我们使用CSS实现准确布局、处理元素排列的关键。</p> + +<p>本文围绕 “盒模型” 为主题展开。旨在于完成学习后，您能够在“理解盒装模型原理”的基础上，完成更加复杂的布局任务。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">预备知识（Prerequisites）:</th> + <td> + <p>基本的计算机知识，<a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">安装基本的软件</a>，<a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">文件处理</a>基本知识, HTML基础知识 (如果不了解HTML，请移步 <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">学习HTML入门</a>)，以及CSS如何工作的基本常识 (如果不了解CSS，请移步 <a href="/en-US/docs/Learn/CSS/First_steps">学习CSS第一步</a>.)</p> + </td> + </tr> + <tr> + <th scope="row">学习目标（Objective）:</th> + <td>学习盒模型的基本理论，了解盒装模型的工作原理，了解盒模型与替代模型的区别以及如何进行切换。</td> + </tr> + </tbody> +</table> + +<h2 id="块级盒子（Block_box）_和_内联盒子（Inline_box）">块级盒子（Block box） 和 内联盒子（Inline box）</h2> + +<p>在 CSS 中我们广泛地使用两种“盒子” —— <strong>块级</strong><strong>盒子</strong> (<strong>block box</strong>) 和 <strong>内联盒子</strong> (<strong>inline box</strong>)<strong>。</strong>这两种盒子会在<strong>页面流</strong>（page flow）和<strong>元素之间的关系</strong>方面表现出不同的行为:</p> + +<p>一个被定义成块级的（block）盒子会表现出以下行为:</p> + +<ul> + <li>盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽</li> + <li>每个盒子都会换行</li> + <li>{{cssxref("width")}} 和 {{cssxref("height")}} 属性可以发挥作用</li> + <li>内边距（padding）, 外边距（margin） 和 边框（border） 会将其他元素从当前盒子周围“推开”</li> +</ul> + +<p>除非特殊指定，诸如标题(<code><h1></code>等)和段落(<code><p></code>)默认情况下都是块级的盒子。</p> + +<p>如果一个盒子对外显示为 <code>inline</code>，那么他的行为如下:</p> + +<ul> + <li>盒子不会产生换行。</li> + <li> {{cssxref("width")}} 和 {{cssxref("height")}} 属性将不起作用。</li> + <li>垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 <code>inline</code> 状态的盒子推开。</li> + <li>水平方向的内边距、外边距以及边框会被应用且会把其他处于 <code>inline</code> 状态的盒子推开。</li> +</ul> + +<p>用做链接的 <code><a></code> 元素、 <code><span></code>、 <code><em></code> 以及 <code><strong></code> 都是默认处于 <code>inline</code> 状态的。</p> + +<p>我们通过对盒子{{cssxref("display")}} 属性的设置，比如 <code>inline</code> 或者 <code>block</code> ，来控制盒子的外部显示类型。</p> + +<h2 id="补充_内部和外部显示类型">补充: 内部和外部显示类型</h2> + +<p>在这里最好也解释下<strong>内部</strong> 和 <strong>外部</strong> 显示类型。如上所述， css的box模型有一个外部显示类型，来决定盒子是块级还是内联。</p> + +<p>同样盒模型还有内部显示类型，它决定了盒子内部元素是如何布局的。默认情况下是按照 <strong><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">正常文档流</a> </strong>布局，也意味着它们和其他块元素以及内联元素一样(如上所述).</p> + +<p>但是，我们可以通过使用类似 <code>flex</code> 的 <code>display</code> 属性值来更改内部显示类型。 如果设置 <code>display: flex</code>，在一个元素上，外部显示类型是 <code>block</code>，但是内部显示类型修改为 <code>flex</code>。 该盒子的所有直接子元素都会成为flex元素，会根据 <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">弹性盒子（Flexbox</a> <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">）</a>规则进行布局，稍后您将了解这些规则。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: 想要了解更多有关显示值以及盒子在块和内联布局中的工作原理，请参阅 <a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Block and Inline Layout</a>.</p> +</div> + +<p>当你进一步了解css布局的更多细节的时候，你会了解到 <code>flex</code>， 和其他内部显示类型会用到的值，例如 <code><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">grid</a></code>。</p> + +<p>块级和内联布局是web上默认的行为 —— 正如上面所述， 它有时候被称为 <em>正常文档流</em>， 因为如果没有其他说明，我们的盒子布局默认是块级或者内联。</p> + +<h2 id="不同显示类型的例子">不同显示类型的例子</h2> + +<p>让我们继续看看别的例子。下面三个html元素，都有一个外部显示类型 <code>block</code>。第一个是一个段落，在 CSS 中加了边框。浏览器把它渲染成一个块级盒子，所以段落从新的一行开始，而且宽度占满一行。</p> + +<p>第二个是一个列表，布局属性是 <code>display: flex</code>。 将在容器中建立一个flex布局，但是每个列表是一个块级元素 —— 像段落一样 —— 会充满整个容器的宽度并且换行。</p> + +<p>下面有个块级段落，里面有两个 <code><span></code> 元素。正常情况下是 <code>inline</code>，但是其中一个加了block类，设置属性 <code>display: block</code>。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/block.html", '100%', 1000)}} </p> + +<p>我们可以看到 <code>inline</code> 元素在下面例子中的表现。 <code><span></code> 在第一段默认是内联元素所以不换行。</p> + +<p>还有一个 <code><ul></code> 设置为 <code>display: inline-flex</code>，使得在一些flex元素外创建一个内联框。</p> + +<p>最后设置两个段落为 <code>display: inline</code>。 inline flex 容器和段落在一行上而不是像块级元素一样换行。</p> + +<p><strong>你可以修改 <code>display: inline</code> 为 <code>display: block</code> 或者 <code>display: inline-flex</code> 改为 <code>display: flex</code> 来观察显示模式切换。</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline.html", '100%', 1000)}} </p> + +<p>在后面的内容中会遇到诸如弹性盒子布局的内容；现在需要记住的是， <code>display</code> 属性可以改变盒子的外部显示类型是块级还是内联，这将会改变它与布局中的其他元素的显示方式。 </p> + +<p>剩下的内容，我们会专注于外部显示类型。</p> + +<h2 id="什么是CSS_盒模型">什么是CSS 盒模型?</h2> + +<p>完整的 CSS 盒模型应用于块级盒子，内联盒子只使用盒模型中定义的部分内容。模型定义了盒的每个部分 —— margin, border, padding, and content —— 合在一起就可以创建我们在页面上看到的内容。为了增加一些额外的复杂性，有一个标准的和替代（IE）的盒模型。</p> + +<h3 id="盒模型的各个部分">盒模型的各个部分</h3> + +<p> CSS中组成一个块级盒子需要:</p> + +<ul> + <li><strong>Content box</strong>: 这个区域是用来显示内容，大小可以通过设置 {{cssxref("width")}} 和 {{cssxref("height")}}.</li> + <li><strong>Padding box</strong>: 包围在内容区域外部的空白区域； 大小通过 {{cssxref("padding")}} 相关属性设置。</li> + <li><strong>Border box</strong>: 边框盒包裹内容和内边距。大小通过 {{cssxref("border")}} 相关属性设置。</li> + <li><strong>Margin box</strong>: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 {{cssxref("margin")}} 相关属性设置。</li> +</ul> + +<p>如下图：</p> + +<p><img alt="Diagram of the box model" src="https://mdn.mozillademos.org/files/16558/box-model.png" style="height: 300px; width: 544px;"></p> + +<h3 id="标准盒模型">标准盒模型</h3> + +<p>在标准模型中，如果你给盒设置 <code>width</code> 和 <code>height</code>，实际设置的是 <em>content box</em>。 padding 和 border 再加上设置的宽高一起决定整个盒子的大小。 见下图。</p> + +<p>假设定义了 <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code>, and <code>padding</code>:</p> + +<pre class="brush: css notranslate">.box { + width: 350px; + height: 150px; + margin: 25px; + padding: 25px; + border: 5px solid black; +} +</pre> + +<p>如果使用标准模型宽度 = 410px (350 + 25 + 25 + 5 + 5)，高度 = 210px (150 + 25 + 25 + 5 + 5)，padding 加 border 再加 content box。</p> + +<p><img alt="Showing the size of the box when the standard box model is being used." src="https://mdn.mozillademos.org/files/16559/standard-box-model.png" style="height: 300px; width: 500px;"></p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: margin 不计入实际大小 —— 当然，它会影响盒子在页面所占空间，但是影响的是盒子外部空间。盒子的范围到边框为止 —— 不会延伸到margin。</p> +</div> + +<h3 id="替代（IE）盒模型">替代（IE）盒模型</h3> + +<p>你可能会认为盒子的大小还要加上边框和内边距，这样很麻烦，而且你的想法是对的! 因为这个原因，css还有一个替代盒模型。使用这个模型，所有宽度都是可见宽度，所以内容宽度是该宽度减去边框和填充部分。使用上面相同的样式得到 (width = 350px, height = 150px).</p> + +<p><img alt="Showing the size of the box when the alternate box model is being used." src="https://mdn.mozillademos.org/files/16557/alternate-box-model.png" style="height: 240px; width: 440px;"></p> + +<p>默认浏览器会使用标准模型。如果需要使用替代模型，您可以通过为其设置 <code>box-sizing: border-box</code> 来实现。 这样就可以告诉浏览器使用 <code>border-box</code> 来定义区域，从而设定您想要的大小。</p> + +<pre class="brush: css notranslate"><code>.box { + box-sizing: border-box; +} </code></pre> + +<p>如果你希望所有元素都使用替代模式，而且确实很常用，设置 <code>box-sizing</code> 在 <code><html></code> 元素上，然后设置所有元素继承该属性，正如下面的例子。如果想要深入理解，请看 <a href="https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/">the CSS Tricks article on box-sizing</a>。</p> + +<pre class="brush: css notranslate"><code class="language-css"><span class="selector token">html</span> <span class="punctuation token">{</span> + <span class="property token">box-sizing</span><span class="punctuation token">:</span> border-box<span class="punctuation token">;</span> +<span class="punctuation token">}</span> +<span class="selector token">*, *<span class="pseudo-element token">::before</span>, *<span class="pseudo-element token">::after</span></span> <span class="punctuation token">{</span> + <span class="property token">box-sizing</span><span class="punctuation token">:</span> inherit<span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<div class="blockIndicator note"> +<p><strong>注：</strong> 一个有趣的历史记录 ——Internet Explorer默认使用替代盒模型，没有可用的机制来切换。（译者注：IE8+ 支持使用<code class="language-css"><span class="property token">box-sizing</span></code> 进行切换 ）</p> +</div> + +<h2 id="玩转盒模型">玩转盒模型</h2> + +<p>下面的例子中，你可以看到两个盒子。都有类 <code>.box</code>，给了相同的 <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code>, and <code>padding</code>。唯一区别是第二个设置了替代模型。</p> + +<p><strong>你能改变第二个盒子的大小 (通过添加 CSS 到 <code>.alternate</code> 类中) 让它和第一个盒子宽高一样吗?</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}} </p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-box-model">You can find a solution for this task here</a>.</p> +</div> + +<h3 id="使用调试工具来查看盒模型">使用调试工具来查看盒模型</h3> + +<p>您的 <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">浏览器开发者工具</a> 可以使您更容易地理解box模型。如果您在Firefox的DevTools中查看一个元素，您可以看到元素的大小以及它的外边距、内边距和边框。这是一个很好的检查元素大小的方式，可以便捷的判断您的盒子大小是否符合预期 !</p> + +<p><img alt="Inspecting the box model of an element using Firefox DevTools" src="https://mdn.mozillademos.org/files/16560/box-model-devtools.png" style="height: 683px; width: 1150px;"></p> + +<h2 id="外边距，内边距，边框">外边距，内边距，边框</h2> + +<p>您已经在上面的示例中看到了{{cssxref("margin")}}、{{cssxref("padding")}}和{{cssxref("border")}}属性。该示例中使用的是属性的<strong>简写</strong>，允许我们一次设置盒子的四个边。这些简写等价于分别控制盒子的不同边的普通写法。</p> + +<p>接下来，我们更详细地研究这些属性：</p> + +<h3 id="外边距">外边距</h3> + +<p>外边距是盒子周围一圈看不到的空间。它会把其他元素从盒子旁边推开。 外边距属性值可以为正也可以为负。设置负值会导致和其他内容重叠。无论使用标准模型还是替代模型，外边距总是在计算可见部分后额外添加。</p> + +<p>我们可以使用{{cssxref("margin")}}属性一次控制一个元素的所有边距，或者每边单独使用等价的普通属性控制：</p> + +<ul> + <li>{{cssxref("margin-top")}}</li> + <li>{{cssxref("margin-right")}}</li> + <li>{{cssxref("margin-bottom")}}</li> + <li>{{cssxref("margin-left")}}</li> +</ul> + +<p><strong>在下面的示例中，尝试更改外边距的值，来查看当前元素和其包含元素，在外边距设置为正时是如何推开周边元素，以及设置为负时，是如何收缩空间的。</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin.html", '100%', 1000)}} </p> + +<h4 id="外边距折叠"><strong>外边距折叠</strong></h4> + +<p>理解外边距的一个关键是外边距折叠的概念。如果你有两个外边距相接的元素，这些外边距将合并为一个外边距，即最大的单个外边距的大小。</p> + +<p>在下面的例子中，我们有两个段落。顶部段落的页 <code>margin-bottom</code>为50px。第二段的<code>margin-top</code> 为30px。因为外边距折叠的概念，所以框之间的实际外边距是50px，而不是两个外边距的总和。</p> + +<p><strong>您可以通过将第2段的 <code>margin-top</code> 设置为0来测试它。两个段落之间的可见边距不会改变——它保留了第一个段落 <code>margin-bottom</code>设置的50像素。</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin-collapse.html", '100%', 800)}} </p> + +<p>有许多规则规定了什么时候外边距会折叠，什么时候不会折叠。相关更多信息，请参阅 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">mastering margin collapsing</a>。现在首先要记住的事情是，外边距会折叠这个事情。如果你用外边距创建空间而没有得到你想要的效果，那这可能就是这个原因。</p> + +<h3 id="边框">边框</h3> + +<p>边框是在边距和填充框之间绘制的。如果您正在使用标准的盒模型，边框的大小将添加到框的宽度和高度。如果您使用的是替代盒模型，那么边框的大小会使内容框更小，因为它会占用一些可用的宽度和高度。</p> + +<p>为边框设置样式时，有大量的属性可以使用——有四个边框，每个边框都有样式、宽度和颜色，我们可能需要对它们进行操作。</p> + +<p>可以使用{{cssxref("border")}}属性一次设置所有四个边框的宽度、颜色和样式。</p> + +<p>分别设置每边的宽度、颜色和样式，可以使用：</p> + +<ul> + <li>{{cssxref("border-top")}}</li> + <li>{{cssxref("border-right")}}</li> + <li>{{cssxref("border-bottom")}}</li> + <li>{{cssxref("border-left")}}</li> +</ul> + +<p>设置所有边的颜色、样式或宽度，请使用以下属性：</p> + +<ul> + <li>{{cssxref("border-width")}}</li> + <li>{{cssxref("border-style")}}</li> + <li>{{cssxref("border-color")}}</li> +</ul> + +<p>设置单边的颜色、样式或宽度，可以使用最细粒度的普通属性之一：</p> + +<ul> + <li>{{cssxref("border-top-width")}}</li> + <li>{{cssxref("border-top-style")}}</li> + <li>{{cssxref("border-top-color")}}</li> + <li>{{cssxref("border-right-width")}}</li> + <li>{{cssxref("border-right-style")}}</li> + <li>{{cssxref("border-right-color")}}</li> + <li>{{cssxref("border-bottom-width")}}</li> + <li>{{cssxref("border-bottom-style")}}</li> + <li>{{cssxref("border-bottom-color")}}</li> + <li>{{cssxref("border-left-width")}}</li> + <li>{{cssxref("border-left-style")}}</li> + <li>{{cssxref("border-left-color")}}</li> +</ul> + +<p><strong>设置边框的颜色、样式或宽度，可以使用最细粒度的普通属性或者简写属性。在下面的示例中，我们使用了各种普通属性或者简写属性来创建边框。尝试一下不同的属性，以检查您是否理解它们是如何工作的。MDN中的边框属性页面为您提供可用的不同边框样式的信息。</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/border.html", '100%', 1000)}} </p> + +<h3 id="内边距">内边距</h3> + +<p>内边距位于边框和内容区域之间。与外边距不同，您不能有负数量的内边距，所以值必须是0或正的值。应用于元素的任何背景都将显示在内边距后面，内边距通常用于将内容推离边框。</p> + +<p><br> + 我们可以使用{{cssxref("padding")}}简写属性控制元素所有边，或者每边单独使用等价的普通属性：</p> + +<ul> + <li>{{cssxref("padding-top")}}</li> + <li>{{cssxref("padding-right")}}</li> + <li>{{cssxref("padding-bottom")}}</li> + <li>{{cssxref("padding-left")}}</li> +</ul> + +<p><strong>如果在下面的示例中更改类<code>.box</code>的内边距值，您可以看到，这将更改文本开始的位置。</strong></p> + +<p><br> + <strong>您还可以更改类<code>.container</code>的内边距，这将在容器和方框之间留出空间。任何元素上的内边距都可以更改，并在其边界和元素内部的任何内容之间留出空间。</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/padding.html", '100%', 800)}} </p> + +<h2 id="盒子模型和内联盒子">盒子模型和内联盒子</h2> + +<p>以上所有的方法都完全适用于块级盒子。有些属性也可以应用于内联盒子，例如由<code><span></code>元素创建的那些内联盒子。</p> + +<p><br> + 在下面的示例中，我们在一个段落中使用了<code><span></code>，并对其应用了宽度、高度、边距、边框和内边距。可以看到，宽度和高度被忽略了。外边距、内边距和边框是生效的，但它们不会改变其他内容与内联盒子的关系，因此内边距和边框会与段落中的其他单词重叠。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-box-model.html", '100%', 800)}} </p> + +<h2 id="使用display_inline-block">使用display: inline-block</h2> + +<p>display有一个特殊的值，它在内联和块之间提供了一个中间状态。这对于以下情况非常有用:您不希望一个项切换到新行，但希望它可以设定宽度和高度，并避免上面看到的重叠。</p> + +<p>一个元素使用 <code>display: inline-block</code>，实现我们需要的块级的部分效果：</p> + +<ul> + <li>设置<code>width</code> 和<code>height</code> 属性会生效。</li> + <li><code>padding</code>, <code>margin</code>, 以及<code>border</code> 会推开其他元素。</li> +</ul> + +<p>但是，它不会跳转到新行，如果显式添加<code>width</code> 和<code>height</code> 属性，它只会变得比其内容更大。</p> + +<p><strong>在下一个示例中，我们将<code>display: inline-block</code>添加到<code><span></code>元素中。尝试将此更改为<code>display: block</code> 或完全删除行，以查看显示模型中的差异</strong>。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block.html", '100%', 800)}} </p> + +<p>当您想要通过添加内边距使链接具有更大的命中区域时，这是很有用的。<code><a></code>是像<code><span</code>>一样的内联元素；你可以使用<code>display: inline-block</code>来设置内边距，让用户更容易点击链接。</p> + +<p>这种情况在导航栏中很常见。下面的导航使用flexbox显示在一行中，我们为<code><a></code>元素添加了内边距，因为我们希望能够在<code><a></code>在鼠标移动到上面时改变背景色。内边距似乎覆盖了<code><ul></code>元素上的边框。这是因为<code><a></code>是一个内联元素。</p> + +<p><strong>使用<code>.links-list a</code>选择器将<code>display: inline-block</code>添加到样式规则中，您将看到它是如何通过内边距推开其他元素来修复这个问题的。</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block-nav.html", '100%', 600)}} </p> + +<h2 id="总结">总结</h2> + +<p>这就是你需要了解的关于盒子模型的大部分内容。如果以后你发现对于盒模型的布局仍有困惑，你将会回来温故这些内容。</p> + +<p>在下一节课中，我们将看看如何使用 <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景和边框</a> 来使你的普通盒子看起来更有趣。</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="模块目录">模块目录</h2> + +<ol> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">层叠与继承</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors">CSS选择器</a> + <ul> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">标签，类，ID选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">伪类和伪元素</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Combinators">关系选择器</a></li> + </ul> + </li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model">盒模型</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景与边框</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">处理不同文字方向的文本</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Overflowing_content">溢出的内容</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units">值和单位</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">在CSS中调整大小</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Images_media_form_elements">图像、媒体和表单元素</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables">样式化表格</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Debugging_CSS">调试CSS</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Organizing">组织CSS</a><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing"> </a></li> +</ol> diff --git a/files/zh-cn/learn/css/building_blocks/values_and_units/index.html b/files/zh-cn/learn/css/building_blocks/values_and_units/index.html new file mode 100644 index 0000000000..4a8145d460 --- /dev/null +++ b/files/zh-cn/learn/css/building_blocks/values_and_units/index.html @@ -0,0 +1,388 @@ +--- +title: CSS的值与单位 +slug: Learn/CSS/Building_blocks/Values_and_units +translation_of: Learn/CSS/Building_blocks/Values_and_units +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}</div> + +<p>CSS中使用的每个属性都允许拥有一个或一组值，查看MDN上的任何属性页将帮助您理解对任何特定属性有效的值。在本节课中，我们将学习一些最常用的值和单位。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">预备知识:</th> + <td>基本的计算机知识，<a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">安装基本的软件</a>，<a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">文件处理</a>基本知识, HTML基础知识 (<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">学习HTML入门</a>)，以及CSS如何工作的基本常识 (如果完全不了解CSS，请移步 <a href="/en-US/docs/Learn/CSS/First_steps">学习CSS第一步</a>.)</td> + </tr> + <tr> + <th scope="row">目标:</th> + <td>了解CSS属性中使用的不同类型的值和单位。</td> + </tr> + </tbody> +</table> + +<h2 id="什么是CSS的值">什么是CSS的值?</h2> + +<p>在CSS规范和MDN的属性页上，您将能够发现值的存在，因为它们将被尖括号包围，如<code><color></code>或<code><length></code>。当您看到值<code><color></code>对特定属性有效时，这意味着您可以使用任何有效的颜色作为该属性的值，如 <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value"><color></a></code>参考页面所列。</p> + +<div class="blockIndicator note"> +<p><strong>注意</strong>：您还将看到被称为数据类型的CSS值。这些术语基本上是可以互换的——当你在CSS中看到一些被称为数据类型的东西时，它实际上只是一种表示值的奇特方式。</p> +</div> + +<div class="blockIndicator note"> +<p><strong>注意</strong>： 是的，CSS值倾向于使用尖括号表示，以区别于CSS属性(例如{{cssxref("color")}}属性和 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value"><color></a> 数据类型)。您可能还会混淆CSS数据类型和HTML元素，因为它们都使用尖括号，但这不太可能——它们在完全不一样的上下文中使用。</p> +</div> + +<p>在下面的例子中，我们使用关键字设置标题的颜色，使用<code>rgb()</code>函数设置背景：</p> + +<pre class="brush: css"><code>h1 { + color: black; + background-color: rgb(197,93,161); +} </code> +</pre> + +<p>CSS中的值是一种定义允许子值集合的方法。这意味着如果您看到<code><color></code>是有效的，那么您就不需要考虑可以使用哪些不同类型的颜色值—关键字、十六进制值、<code>rgb()</code>函数等等。假设浏览器支持这些可用的<code><color></code>值，则可以使用它们任意一个。MDN上针对每个值的页面将提供有关浏览器支持的信息。例如，如果您查看 <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value"><color></a></code>的页面，您将看到浏览器兼容性部分列出了不同类型的颜色值以及对它们的支持。</p> + +<p>让我们来看看您可能经常遇到的一些值和单位类型，并提供一些示例，以便您尝试使用各种值的可能性。</p> + +<h2 id="数字，长度和百分比">数字，长度和百分比</h2> + +<p>您可能会发现自己在CSS中使用了各种数值数据类型。 以下全部归类为数值：</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">数值类型</th> + <th scope="col">描述</th> + </tr> + </thead> + <tbody> + <tr> + <td><code><a href="/en-US/docs/Web/CSS/integer"><integer></a></code></td> + <td><code><a href="/en-US/docs/Web/CSS/integer"><integer></a></code>是一个整数，比如1024或-55。</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/CSS/number"><number></a></code></td> + <td><code><a href="/en-US/docs/Web/CSS/number"><number></a></code>表示一个小数——它可能有小数点后面的部分，也可能没有，例如0.255、128或-1.2。</td> + </tr> + <tr> + <td><code><dimension></code></td> + <td><code><dimension></code>是一个<code><number></code>，它有一个附加的单位，例如45deg、5s或10px。<code><dimension></code>是一个伞形类别，包括<code><length></code>、<code><angle></code>、<code><time></code>和<code><resolution></code>类型。</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/CSS/percentage"><percentage></a></code></td> + <td><code><a href="/en-US/docs/Web/CSS/percentage"><percentage></a></code>表示一些其他值的一部分，例如50%。百分比值总是相对于另一个量，例如，一个元素的长度相对于其父元素的长度。</td> + </tr> + </tbody> +</table> + +<h3 id="长度">长度</h3> + +<p>最常见的数字类型是<code><length></code>，例如10px(像素)或30em。CSS中有两种类型的长度——相对长度和绝对长度。重要的是要知道它们之间的区别，以便理解他们控制的元素将变得有多大。</p> + +<h4 id="绝对长度单位">绝对长度单位</h4> + +<p>以下都是<strong>绝对</strong>长度单位——它们与其他任何东西都没有关系，通常被认为总是相同的大小。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">单位</th> + <th scope="col">名称</th> + <th scope="col">等价换算</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>cm</code></td> + <td>厘米</td> + <td>1cm = 96px/2.54</td> + </tr> + <tr> + <td><code>mm</code></td> + <td>毫米</td> + <td>1mm = 1/10th of 1cm</td> + </tr> + <tr> + <td><code>Q</code></td> + <td>四分之一毫米</td> + <td>1Q = 1/40th of 1cm</td> + </tr> + <tr> + <td><code>in</code></td> + <td>英寸</td> + <td>1in = 2.54cm = 96px</td> + </tr> + <tr> + <td><code>pc</code></td> + <td>十二点活字</td> + <td>1pc = 1/16th of 1in</td> + </tr> + <tr> + <td><code>pt</code></td> + <td>点</td> + <td>1pt = 1/72th of 1in</td> + </tr> + <tr> + <td><code>px</code></td> + <td>像素</td> + <td>1px = 1/96th of 1in</td> + </tr> + </tbody> +</table> + +<p>这些值中的大多数在用于打印时比用于屏幕输出时更有用。例如，我们通常不会在屏幕上使用cm。惟一一个您经常使用的值，估计就是px(像素)。</p> + +<h4 id="相对长度单位">相对长度单位</h4> + +<p>相对长度单位相对于其他一些东西，比如父元素的字体大小，或者视图端口的大小。使用相对单位的好处是，经过一些仔细的规划，您可以使文本或其他元素的大小与页面上的其他内容相对应。下表列出了web开发中一些最有用的单位。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">单位</th> + <th scope="col">相对于</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>em</code></td> + <td>在 font-size 中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小，如 width</td> + </tr> + <tr> + <td><code>ex</code></td> + <td>字符“x”的高度</td> + </tr> + <tr> + <td><code>ch</code></td> + <td>数字“0”的宽度</td> + </tr> + <tr> + <td><code>rem</code></td> + <td>根元素的字体大小</td> + </tr> + <tr> + <td><code>lh</code></td> + <td>元素的line-height</td> + </tr> + <tr> + <td><code>vw</code></td> + <td>视窗宽度的1%</td> + </tr> + <tr> + <td><code>vh</code></td> + <td>视窗高度的1%</td> + </tr> + <tr> + <td><code>vmin</code></td> + <td>视窗较小尺寸的1%</td> + </tr> + <tr> + <td><code>vmax</code></td> + <td>视图大尺寸的1%</td> + </tr> + </tbody> +</table> + +<h4 id="探索一个例子">探索一个例子</h4> + +<p>在下面的示例中，您可以看到一些相对长度单位和绝对长度单位的行为。第一个框以像素为单位设置{{cssxref("width")}}。作为一个绝对单位，这个宽度将保持不变，无论其他如何变化。</p> + +<p>第二个框的宽度设置为<code>vw</code>(视口宽度)单位。这个值相对于视口宽度，所以10<code>vw</code>是视口宽度的10%。如果您更改浏览器窗口的宽度，那么框的大小应该会更改，但是这个示例使用<iframe>嵌入到页面中，所以这将不起作用。要查看实际情况，您必须在打开示例的浏览器选项卡后尝试该示例 <a href="https://mdn.github.io/css-examples/learn/values-units/length.html">试一试</a>。</p> + +<p>第三个盒子使用em单位。这些是相对于字体大小的。我在包含{{htmlelement("div")}}的元素上设置了一个1em的字体大小，它有一个<code>.wrapper</code>类。将这个值更改为1.5em，您将看到所有元素的字体大小都增加了，但是只有最后一项会变宽，因为宽度与字体大小有关。</p> + +<p>按照上面的说明操作之后，尝试以其他方式处理这些值，看看您将收获什么。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/length.html", '100%', 820)}}</p> + +<h4 id="ems_and_rems">ems and rems</h4> + +<p><code>em</code>和<code>rem</code>是您在从框到文本调整大小时最常遇到的两个相对长度。了解这些方法是如何工作的以及它们之间的区别是很有意义的，尤其是当您开始学习更复杂的主题时，比如样式化文本或CSS布局。下面的示例提供了一个演示。</p> + +<p>HTML是一组嵌套的列表—我们总共有三个列表，并且两个示例都有相同的HTML。唯一的区别是第一个类具有ems，第二个类具有rems。</p> + +<p>首先，我们将16px设置为<code><html></code>元素的字体大小。</p> + +<p><strong>概括地说，在排版属性中 em 单位的意思是“父元素的字体大小”</strong>。带有ems类的{{htmlelement("ul")}}内的{{htmlelement("li")}}元素从它们的父元素中获取大小。因此，每一个连续的嵌套级别都会逐渐变大，因为每个嵌套的字体大小都被设置为1.3em—是其父嵌套字体大小的1.3倍。</p> + +<p><strong>概括地说</strong><strong>，rem单位的意思是“根元素的字体大小”</strong>。(“根em”的rem标准。){{htmlelement("ul")}}内的{{htmlelement("li")}}元素和一个rems类从根元素(<code><html>)</code>中获取它们的大小。这意味着每一个连续的嵌套层都不会不断变大。</p> + +<p>但是，如果您在CSS中更改<html>字体大小，您将看到所有其他相关内容都发生了更改，包括rem和em大小的文本。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/em-rem.html", '100%', 1000)}} </p> + +<h3 id="百分比">百分比</h3> + +<p>在许多情况下，百分比与长度的处理方法是一样的。百分比的问题在于，它们总是相对于其他值设置的。例如，如果将元素的字体大小设置为百分比，那么它将是元素父元素字体大小的百分比。如果使用百分比作为宽度值，那么它将是父值宽度的百分比。</p> + +<p>在下面的示例中，两个百分比大小的框和两个像素大小的框具有相同的类名。这两款相机分别为200px和40%宽。</p> + +<p>不同之处在于，第二组两个框位于一个400像素宽的包装器中。第二个200px宽的盒子和第一个一样宽，但是第二个40%的盒子现在是400px的40%——比第一个窄多了!</p> + +<p>尝试更改包装器的宽度或百分比值，看看这是如何工作的。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/percentage.html", '100%', 850)}} </p> + +<p>下一个示例以百分比设置字体大小。每个<code><li></code>都有80%的字体大小，因此嵌套列表项在从父级继承其大小时将逐渐变小。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/percentage-fonts.html", '100%', 650)}} </p> + +<p>注意，虽然许多值接受长度或百分比，但也有一些值只接受长度。您可以在MDN属性引用页面上看到它能接受哪些值。如果允许的值包括<code><length-percent></code>，则可以使用长度或百分比。如果允许的值只包含<length>，则不可能使用百分比。</p> + +<h3 id="数字">数字</h3> + +<p>有些值接受数字，不添加任何单位。接受无单位数字的属性的一个例子是不透明度属性（<code>opacity</code> ），它控制元素的不透明度(它的透明程度)。此属性接受0(完全透明)和1(完全不透明)之间的数字。</p> + +<p>在下面的示例中，尝试将不透明度值更改为0到1之间的各种小数值，并查看框及其内容是如何变得透明或者不透明的。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/opacity.html", '100%', 500)}} </p> + +<div class="blockIndicator note"> +<p><strong>注意</strong>: 当您在CSS中使用数字作为值时，它不应该用引号括起来。</p> +</div> + +<h2 id="颜色">颜色</h2> + +<p>在CSS中指定颜色的方法有很多，其中一些是最近才实现的。在CSS中，相同的颜色值可以在任何地方使用，无论您指定的是文本颜色、背景颜色还是其他颜色。</p> + +<p>现代计算机的标准颜色系统是24位的，它允许通过不同的红、绿、蓝通道的组合显示大约1670万种不同的颜色，每个通道有256个不同的值(256 x 256 x 256 = 16,777,216)。让我们来看看在CSS中指定颜色的一些方法。</p> + +<div class="blockIndicator note"> +<p><strong>注意：</strong> 在本教程中，我们将研究具有良好浏览器支持的常用指定颜色的方法；虽然还有其他的，但是他们没有很好的支持，也不太常见。</p> +</div> + +<h3 id="颜色关键词">颜色关键词</h3> + +<p>在这学习示例或MDN上的其他示例中，您经常会看到使用的颜色关键字，因为它们是一种指定颜色的简单易懂的方式。有一些关键词，其中一些有相当有趣的名字！您可以在页面上看到 <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value"><color></a></code>值的完整列表。</p> + +<p><strong>在下面的示例中尝试使用不同的颜色值，以了解它们是如何工作的。</strong></p> + +<h3 id="十六进制RGB值">十六进制RGB值</h3> + +<p>您可能遇到的下一种颜色值类型是十六进制代码。每个十六进制值由一个散列/磅符号(#)和六个十六进制数字组成，每个十六进制数字都可以取0到f(代表15)之间的16个值中的一个——所以是0123456789abcdef。每对值表示一个通道—红色、绿色和蓝色—并允许我们为每个通道指定256个可用值中的任意一个(16 x 16 = 256)。</p> + +<p>这些值有点复杂，不太容易理解，但是它们比关键字更通用——您可以使用十六进制值来表示您想在配色方案中使用的任何颜色。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hex.html", '100%', 700)}} </p> + +<p><strong>同样，大胆尝试更改值，看看颜色如何变化吧！</strong></p> + +<h3 id="RGB_和_RGBA的值">RGB 和 RGBA的值</h3> + +<p>我们将在这里讨论的第三种方案是RGB。RGB值是一个函数—RGB()—它有三个参数，表示颜色的红色、绿色和蓝色通道值，与十六进制值的方法非常相似。RGB的不同之处在于，每个通道不是由两个十六进制数字表示的，而是由一个介于0到255之间的十进制数字表示的——这有点容易理解。</p> + +<p>让我们重写上一个例子，使用RGB颜色：</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgb.html", '100%', 700)}} </p> + +<p>您还可以使用RGBA颜色——它们的工作方式与RGB颜色完全相同，因此您可以使用任何RGB值，但是有第四个值表示颜色的alpha通道，它控制不透明度。如果将这个值设置为<code>0</code>，它将使颜色完全透明，而设置为<code>1</code>将使颜色完全不透明。介于两者之间的值提供了不同级别的透明度。</p> + +<div class="blockIndicator note"> +<p><strong>注意</strong>: 在颜色上设置alpha通道与使用我们前面看到的{{cssxref("opacity")}}属性有一个关键区别。当你使用不透明度时，你让元素和它里面的所有东西都不透明，而使用RGBA颜色只让你指定的颜色不透明。</p> +</div> + +<p>在下面的例子中，我添加了一个背景图片到我们的彩色方块的包含块中。然后我设置了不同的不透明度值——注意当alpha通道值较小时， 背景如何显示的。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgba.html", '100%', 770)}}</p> + +<p><strong>在本例中，尝试更改alpha通道值，看看它如何影响颜色输出。</strong><strong> </strong></p> + +<div class="blockIndicator note"> +<p><strong>注意：</strong>在某种程度上，现代浏览器得到了更新，从而让<code>rgba()</code> 和<code>rgb()</code> （以及 <code>hsl()</code>和 <code>hsla()</code>;见下文）成为彼此的纯别名并开始表现完全相同，因此<code>rgba()</code> 和<code>rgb()</code> 接受带有和不带有alpha通道值的颜色。 尝试将上面示例的<code>rgba()</code> 函数更改为<code>rgb()</code> ，看看颜色是否仍然有效！ 使用哪种样式由您决定，但是将非透明和透明的颜色定义分开使用不同的功能可以（非常）更好地支持浏览器，并且可以直观地指示代码中定义透明颜色的位置。</p> +</div> + +<h3 id="HSL_和_HSLA_的值">HSL 和 HSLA 的值</h3> + +<p>与RGB相比，HSL颜色模型的支持稍差一些(在旧版本的IE中不支持)，它是在设计师们感兴趣之后实现的。<code>hsl()</code> 函数接受色调、饱和度和亮度值作为参数，而不是红色、绿色和蓝色值，这些值的不同方式组合，可以区分1670万种颜色：</p> + +<ul> + <li><strong>色调</strong>： 颜色的底色。这个值在0和360之间，表示色轮周围的角度。</li> + <li><strong>饱和度</strong>： 颜色有多饱和？ 它的值为0 - 100%，其中0为无颜色(它将显示为灰色阴影)，100%为全色饱和度</li> + <li><strong>亮度</strong>：颜色有多亮？ 它从0 - 100%中获取一个值，其中0表示没有光(它将完全显示为黑色)，100%表示完全亮(它将完全显示为白色)</li> +</ul> + +<p>我们可以更新RGB的例子来使用HSL颜色，就像这样:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsl.html", '100%', 700)}} </p> + +<p>就像RGB有RGBA一样，HSL也有HSLA等效物，它使您能够指定alpha通道值。我已经在下面通过将RGBA示例更改为使用HSLA颜色来演示了这一点。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsla.html", '100%', 770)}} </p> + +<p>您可以在项目中使用这些颜色值中的任何一个。对于大多数项目，您可能会选择一个调色板，然后在整个项目中使用这些颜色——以及您所选择的定义这些颜色的方法。你可以混合使用不同的颜色模型，但是为了一致性，通常最好是你的整个项目使用相同的一个!</p> + +<h2 id="图片">图片</h2> + +<p><code><a href="/en-US/docs/Web/CSS/image"><image></a></code> 数据类型用于图像为有效值的任何地方。它可以是一个通过 <code>url()</code>函数指向的实际图像文件，也可以是一个渐变。</p> + +<p>在下面的例子中，我们演示了一个图像和一个渐变作为CSS <code>background-image</code>属性的值。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/image.html", '100%', 740)}} </p> + +<div class="blockIndicator note"> +<p><strong>注意：</strong><code><image></code>还有一些其他可能的值，但是这些都是较新的，并且目前对浏览器的支持很差。如果您想了解<code><image></code>数据类型，请查看MDN页面。</p> +</div> + +<h2 id="位置">位置</h2> + +<p><code><a href="/en-US/docs/Web/CSS/position_value"><position></a></code> 数据类型表示一组2D坐标，用于定位一个元素，如背景图像(通过 <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-position">background-position</a></code>)。它可以使用关键字(如 <code>top</code>, <code>left</code>, <code>bottom</code>, <code>right</code>, 以及<code>center</code> )将元素与2D框的特定边界对齐，以及表示框的顶部和左侧边缘偏移量的长度。</p> + +<p>一个典型的位置值由两个值组成——第一个值水平地设置位置，第二个值垂直地设置位置。如果只指定一个轴的值，另一个轴将默认为 <code>center</code>。</p> + +<p>在下面的示例中，我们使用关键字将背景图像从容器的顶部到右侧放置了40px。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/position.html", '100%', 720)}} </p> + +<p><strong>尝试使用这些值，看看如何把这些图像移来移去。</strong></p> + +<h2 id="字符串和标识符">字符串和标识符</h2> + +<p>在上面的示例中，我们看到关键字被用作值的地方(例如<code><color></code>关键字，如 <code>red</code>, <code>black</code>, <code>rebeccapurple</code>, and <code>goldenrod</code>)。这些关键字被更准确地描述为标识符，一个CSS可以理解的特殊值。因此它们没有使用引号括起来——它们不被当作字符串。</p> + +<p>在某些地方可以使用CSS中的字符串，例如 <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#Generating_content_with_before_and_after">在指定生成的内容时</a>。在本例中，引用该值以证明它是一个字符串。在下面的示例中，我们使用非引号括起来的颜色关键字和引号括起来的内容字符串。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/strings-idents.html", '100%', 550)}} </p> + +<h2 id="函数">函数</h2> + +<p>我们将查看的最后一种类型的值是一组称为函数的值。在编程中，函数是一段可重用的代码，可以多次运行，以完成重复的任务，对开发人员和计算机都是如此。函数通常与JavaScript、Python或c++等语言相关联，但它们也以属性值的形式存在于CSS中。我们已经在颜色部分看到了函数的作用——<code>rgb()</code>、<code>hsl()</code>等。用于从文件返回图像的值——<code>url()</code>——也是一个函数。</p> + +<p>行为更类似于传统编程语言的值是<code>calc()</code>函数。这个函数使您能够在CSS中进行简单的计算。如果您希望计算出在为项目编写CSS时无法定义的值，并且需要浏览器在运行时为您计算出这些值，那么它特别有用。</p> + +<p>例如，下面我们使用<code>calc()</code>使框宽为20% + 100px。20%是根据父容器.wrapper的宽度来计算的，因此如果宽度改变，它也会改变。我们不能事先做这个计算，因为我们不知道父类的20%是多少，所以我们使用<code>calc()</code>来告诉浏览器为我们做这个计算。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/calc.html", '100%', 450)}}</p> + +<h2 id="总结">总结</h2> + +<p>本文简要介绍了您可能会遇到的最常见的值和单位类型。你可以看看所有不同类型的 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Values_and_Units">CSS的值和单位</a> 参考页面；当你学习这些课程时，你将会遇到很多这样的情况。</p> + +<p>需要记住的关键一点是，每个属性都有一个已定义的允许值列表，每个值都有一个定义来解释子值是什么。然后您可以在MDN上查看详细信息。</p> + +<p>例如，理解 <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/image"><image></a></code>还允许您创建一个颜色渐变有意义的，但也许这个章节并不会提供太多明显的相关知识！</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="模块目录">模块目录</h2> + +<ol> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">层叠与继承</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors">CSS选择器</a> + <ul> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">标签，类，ID选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">伪类和伪元素</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Combinators">关系选择器</a></li> + </ul> + </li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model">盒模型</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景与边框</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">处理不同文字方向的文本</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Overflowing_content">溢出的内容</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units">值和单位</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">在CSS中调整大小</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Images_media_form_elements">图像、媒体和表单元素</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables">样式化表格</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Debugging_CSS">调试CSS</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Organizing">组织CSS</a></li> +</ol> diff --git a/files/zh-cn/learn/css/building_blocks/处理_不同_方向的_文本/index.html b/files/zh-cn/learn/css/building_blocks/处理_不同_方向的_文本/index.html new file mode 100644 index 0000000000..f907c93a3c --- /dev/null +++ b/files/zh-cn/learn/css/building_blocks/处理_不同_方向的_文本/index.html @@ -0,0 +1,151 @@ +--- +title: 处理不同方向的文本 +slug: Learn/CSS/Building_blocks/处理_不同_方向的_文本 +translation_of: Learn/CSS/Building_blocks/Handling_different_text_directions +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}</div> + +<p>目前为止我们在CSS学习中遇到的许多属性和属性值与显示器的物理尺度紧密相关。例如，我们会在上、右、下、左设置边框。这些物理尺寸与水平排布的文本相得益彰，并且，默认浏览器对方向从左到右的文本（如英文或法文）的支持，要优于从右到左的文本（如阿拉伯语）的支持。</p> + +<p>然而，CSS在最近几年得到了改进，以更好地支持不同方向的文本，包括从右到左，也包括从上到下的文本（如日文）——这些不同的方向属性被称为书写模式。随着学习的深入，当你开始试着对页面进行布局时，对书写模式的了解将会对你很有帮助，为此我们在这里加以介绍。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">先决条件：</th> + <td>计算机基础知识，基本软件（参见<a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">basic software installed</a>），文件管理的基本知识（参见<a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">working with files</a>），HTML基础（HTML 学习<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>）以及CSS基础（学习<a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a>）。</td> + </tr> + <tr> + <th scope="row">目标：</th> + <td>了解书写模式对现代CSS的重要</td> + </tr> + </tbody> +</table> + +<h2 id="什么是书写模式">什么是书写模式</h2> + +<p>CSS中的书写模式是指文本的排列方向是横向还是纵向的。{{cssxref("writing-mode")}} 属性使我们从一种模式切换到另一种模式。为此，你不必使用一种竖向的语言——你还可以更改部分文字的方向以实现创新性的布局。</p> + +<p>下面的例子中，我们使用<code>writing-mode: vertical-rl</code>对一个标题的显示进行设置。现在，标题文本是竖向的了。竖向文本在平面设计中很常见，也可以为你的网页设计增添更加有趣的外观。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/simple-vertical.html", '100%', 800)}}</p> + +<p><code><a href="/en-US/docs/Web/CSS/writing-mode">writing-mode</a></code>的三个值分别是：</p> + +<ul> + <li><code>horizontal-tb</code>: 块流向从上至下。对应的文本方向是横向的。</li> + <li><code>vertical-rl</code>: 块流向从右向左。对应的文本方向是纵向的。</li> + <li><code>vertical-lr</code>: 块流向从左向右。对应的文本方向是纵向的。</li> +</ul> + +<p>因此，<code>writing-mode</code>属性实际上设定的是页面上块级元素的显示方向——要么是从上到下，要么是从右到左，要么是从左到右。而这决定了文本的方向。</p> + +<h2 id="书写模式、块级布局和内联布局">书写模式、块级布局和内联布局</h2> + +<p>我们已经讨论了块级布局和内联布局（<a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model#Block_and_inline_boxes">block and inline layout</a>），也知道外部显示类型元素分为块级元素和内联元素。如上所述，块级显示和内联显示与文本的书写模式（而非屏幕的物理显示）密切相关。如果你使用书写模式的显示是横向的，如英文，那么块在页面上的显示就是从上到下的。</p> + +<p>用一个例子可以更清楚地说明这一点。下一个例子中有两个盒子，分别包含一个标题和一个段落。第一个盒子应用的是<code>writing-mode: horizontal-tb</code>，这是一个从上到下的横向的书写模式。第二个盒子应用的是<code>writing-mode: vertical-rl</code>，这是一个从右到左的纵向的书写模式。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/block-inline.html", '100%', 1200)}}</p> + +<p>当我们切换书写模式时，我们也在改变块和内联文本的方向。<code>horizontal-tb</code>书写模式下块的方向是从上到下的横向的，而 <code>vertical-rl</code>书写模式下块的方向是从右到左的纵向的。因此，块维度指的总是块在页面书写模式下的显示方向。而内联维度指的总是文本方向。 </p> + +<p>这张图展示了在水平书写模式下的两种维度。<img alt="" src="https://mdn.mozillademos.org/files/17148/horizontal-tb-zh.png" style="height: 353px; width: 634px;"></p> + +<p>这张图片展示了纵向书写模式下的两种维度。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/17149/vertical-zh.png"></p> + +<p>一旦你开始接触CSS布局，尤其是更新的布局方法，这些关于块级元素和内联元素的概念会变得非常重要。我之后会返回来再看。</p> + +<h3 id="方向">方向</h3> + +<p>除了书写模式，我们还可以设置文本方向。正如上面所言，有些语言（如阿拉伯语）是横向书写的，但是是从右向左。当你在对页面布局进行创新时，你可能不这么使用——如果你只是想讲某部分内容放到右边排列下来，还有其他方法可以选择——然而，重要的是能意识到，这其实是CSS本身功能的一部分。网页可不仅限于从左向右排列的语言！</p> + +<p>由于书写模式和文本方向都是可变的，新的CSS布局方法不再定义从左到右和从上到下，而是将这些连同内联元素和块级元素的<em>开头</em>和<em>结尾</em>一起考量。现在不必过于担心，但是带着这些概念开始你的布局，你会发现这对你掌握CSS非常有用。</p> + +<h2 id="逻辑属性和逻辑值">逻辑属性和逻辑值</h2> + +<p>我们之所以要在这里探讨书写模式和方向，是因为目前为止我们已经了解了很多与屏幕的物理显示密切相关的很多属性，而书写模式和方向在水平书写模式下会很有意义。</p> + +<p>让我们再来看看那两个盒子——一个用<code>horizontal-tb</code>设定了书写模式，一个用<code>vertical-rl</code>设定了书写模式。我为这两个盒子分别设定了宽度（ {{cssxref("width")}}）。可以看到，当盒子处于纵向书写模式下时，宽度也发生了变化，从而导致文本超出了盒子的范围。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/width.html", '100%', 1200)}}</p> + +<p>通过这一些列调整，我们想要的实际上是使宽和高随着书写模式一起变化。当处于纵向书写模式之下时，我们希望盒子可以向横向模式下一样得到拓宽。</p> + +<p>为了更容易实现这样的转变，CSS最近开发了一系列映射属性。这些属性用逻辑（<strong>logical</strong>）和相对变化（<strong>flow relative</strong>）代替了像宽<code>width</code>和高<code>height</code>一样的物理属性。</p> + +<p>横向书写模式下，映射到<code>width</code>的属性被称作内联尺寸（{{cssxref("inline-size")}}）——内联维度的尺寸。而映射<code>height</code>的属性被称为块级尺寸（{{cssxref("block-size")}}），这是块级维度的尺寸。下面的例子展示了替换掉<code>width</code>的<code>inline-size</code>是如何生效的。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/inline-size.html", '100%', 1200)}}</p> + +<h3 id="逻辑外边距、边框和内边距属性">逻辑外边距、边框和内边距属性</h3> + +<p>我们在前面两节中学习了CSS的盒模型和CSS边框。在外边距、边框和内边距属性中，你会发现许多物理属性，例如 {{cssxref("margin-top")}}、 {{cssxref("padding-left")}}和 {{cssxref("border-bottom")}}。就像width和height有映射，这些属性也有相应的映射。</p> + +<p><code>margin-top</code>属性的映射是{{cssxref("margin-block-start")}}——总是指向块级维度开始处的边距。</p> + +<p>{{cssxref("padding-left")}}属性映射到 {{cssxref("padding-inline-start")}}，这是应用到内联开始方向（这是该书写模式文本开始的地方）上的内边距。{{cssxref("border-bottom")}}属性映射到的是{{cssxref("border-block-end")}}，也就是块级维度结尾处的边框。</p> + +<p>下面是物理和逻辑属性之间的对比。</p> + +<p><strong>如果你用<code>writing-mode</code>把盒子<code>.box</code>的书写模式改为<code>vertical-rl</code>，你将会看到尽管盒子的物理方向变了，盒子的物理属性仍然没变，然而逻辑属性会随着书写模式一起改变。</strong></p> + +<p><strong>你还可以看到，二级标题{{htmlelement("h2")}}有一个黑色的底部边框<code>border-bottom</code>。你知道如何使得底部边框无论在那种书写模式下都位于文本的下方吗？</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/logical-mbp.html", '100%', 1200)}}</p> + +<p>对于每一个普通边距，都有许多属性可以参考，你可以在MDN页面（<a href="/en-US/docs/Web/CSS/CSS_Logical_Properties">Logical Properties and Values</a>）查看所有映射属性。</p> + +<h3 id="逻辑值">逻辑值</h3> + +<p>目前为止我们看到的都是逻辑属性的名称。还有一些属性的取值是一些物理值（如<code>top</code>、<code>right</code>、<code>bottom</code>和<code>left</code>）。这些值同样拥有逻辑值映射（<code>block-start</code>、<code>inline-end</code>、<code>block-end</code>和<code>inline-start</code>）。</p> + +<p>例如，你可以将一张图片移到左边，并使文本环绕图片。你可以将<code>left</code>替换为<code>inline-start</code> ，就像下面的例子中一样。</p> + +<p><strong>将这个例子的书写模式改为<code>vertical-rl</code>，看看图片会发生什么。将<code>inline-start</code>改为<code>inline-end</code>来改变图片的移动。</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/float.html", '100%', 1200)}}</p> + +<p>之类，我们同样使用逻辑边距值来保证在任何书写模式下边距的位置都是对的。</p> + +<div class="blockIndicator note"> +<p>译者注：<code><a href="/zh-CN/docs/CSS/float">float</a></code>的逻辑值暂时只有Firefox和Firefox for Android支持，上面的例子可能无法生效。</p> +</div> + +<h3 id="应该使用物理属性还是逻辑属性呢？">应该使用物理属性还是逻辑属性呢？</h3> + +<p>逻辑属性是在物理属性之后出现的，因而最近才开始在浏览器中应用。你可以通过查看MDN的属性页面来了解浏览器对逻辑属性的支持情况。如果你并没有应用多种书写模式，那么现在你可能更倾向于使用物理属性，因为这些在你使用弹性布局和网格布局时非常有用。</p> + +<h2 id="总结">总结</h2> + +<p>本章介绍的概念在CSS的重要性越来越大。了解块级方向和内联方向，以及文本的排列方向如何随书写模式发生变化，将来会非常有用。即便你仅使用横向的书写模式，这也能帮助你了解。</p> + +<p>在下一部分，我们将会看一下CSS中的溢出。</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="模块目录">模块目录</h2> + +<ol> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">层叠与继承</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors">CSS选择器</a> + <ul> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">标签，类，ID选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">伪类和伪元素</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Combinators">关系选择器</a></li> + </ul> + </li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model">盒模型</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景与边框</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">处理不同文字方向的文本</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Overflowing_content">溢出的内容</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units">值和单位</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">在CSS中调整大小</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Images_media_form_elements">图像、媒体和表单元素</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables">样式化表格</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Debugging_CSS">调试CSS</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Organizing">组织CSS</a><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing"> </a></li> +</ol> diff --git a/files/zh-cn/learn/css/css_layout/flexbox/index.html b/files/zh-cn/learn/css/css_layout/flexbox/index.html new file mode 100644 index 0000000000..22b14745c6 --- /dev/null +++ b/files/zh-cn/learn/css/css_layout/flexbox/index.html @@ -0,0 +1,329 @@ +--- +title: 弹性盒子 +slug: Learn/CSS/CSS_layout/Flexbox +tags: + - CSS + - CSS 布局 + - Layouts + - Learn + - flexbox + - 初学者 + - 弹性框 + - 教程 + - 文章 +translation_of: Learn/CSS/CSS_layout/Flexbox +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}</div> + +<p class="summary">弹性盒子是一种用于按行或按列布局元素的一维布局方法 。元素可以膨胀以填充额外的空间, 收缩以适应更小的空间。 本文将解释所有的基本原理。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提:</th> + <td>HTML 基础 (study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>)，和了解CSS如何工作的(study <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>.)</td> + </tr> + <tr> + <th scope="row">目标:</th> + <td>学会如何使用弹性盒子布局系统来创建Web布局。</td> + </tr> + </tbody> +</table> + +<h2 id="为什么是_弹性盒子">为什么是 弹性盒子?</h2> + +<p>长久以来，CSS 布局中唯一可靠且跨浏览器兼容的创建工具只有 <a href="/zh-CN/docs/Learn/CSS/CSS_layout/Floats">floats</a> 和 <a href="/zh-CN/docs/Learn/CSS/CSS_layout/Positioning">positioning</a>。这两个工具大部分情况下都很好使，但是在某些方面它们具有一定的局限性，让人难以完成任务。</p> + +<p>以下简单的布局需求是难以或不可能用这样的工具（ <a href="/zh-CN/docs/Learn/CSS/CSS_layout/Floats">floats</a> 和 <a href="/zh-CN/docs/Learn/CSS/CSS_layout/Positioning">positioning</a>）方便且灵活的实现的：</p> + +<ul> + <li>在父内容里面垂直居中一个块内容。</li> + <li>使容器的所有子项占用等量的可用宽度/高度，而不管有多少宽度/高度可用。</li> + <li>使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同。</li> +</ul> + +<p>正如你将在后面的章节中看到的一样，弹性盒子使得很多布局任务变得更加容易。让我们继续吧！</p> + +<h2 id="一个简单的例子">一个简单的例子</h2> + +<p>在本文中，我们将通过一系列练习来帮助你了解 弹性盒子的工作原理。开始前，您应该拷贝 mozila github 仓库的 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">弹性盒子0.html</a> 到本地 。在现代浏览器里打开它（比如 Firefox、Chrome），然后打开你的编辑器看一眼它的代码。你可以看它的<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox0.html">线上</a>实例。</p> + +<p>你可以看到这个页面有一个含有顶级标题的 {{htmlelement("header")}} 元素，和一个包含三个 {{htmlelement("article")}} 的 {{htmlelement("section")}} 元素。我们将使用这些来创建一个非常的标准三列布局，如下所示：</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13406/flexbox-example1.png" style="border-style: solid; border-width: 1px; display: block; height: 324px; margin: 0px auto; width: 800px;"></p> + +<h2 id="指定元素的布局为_flexible">指定元素的布局为 flexible</h2> + +<p>首先，我们需要选择将哪些元素将设置为柔性的盒子。我们需要给这些 flexible 元素的父元素 {{cssxref("display")}} 设置一个特定值。在本例中，我们想要设置 {{htmlelement("article")}} 元素，因此我们给 {{htmlelement("section")}}（变成了 flex 容器）设置 display：</p> + +<pre class="brush: css">section { + display:flex +}</pre> + +<p>结果如下：</p> + +<p><br> + <img alt="" src="https://mdn.mozillademos.org/files/13408/flexbox-example2.png" style="border-style: solid; border-width: 1px; display: block; height: 348px; margin: 0px auto; width: 800px;"></p> + +<p>所以，就这样一个简单的声明就给了我们所需要的一切—非常不可思议，对吧？ 我们的多列布局具有大小相等的列，并且列的高度都是一样。 这是因为这样的 flex 项（flex容器的子项）的默认值是可以解决这些的常见问题的。 后面还有更多内容。</p> + +<div class="note"> +<p><span style="font-size: 14px;"><strong>注意：</strong>假如你想设置行内元素为 flexible box，也可以置</span> {{cssxref("display")}} 属性的值为 <code>inline-flex。</code></p> +</div> + +<h2 id="flex_模型说明">flex 模型说明</h2> + +<p>当元素表现为 flex 框时，它们沿着两个轴来布局：</p> + +<p><img alt="flex_terms.png" class="default internal" src="/files/3739/flex_terms.png" style="display: block; margin: 0px auto;"></p> + +<ul> + <li><strong>主轴（main axis）</strong>是沿着 flex 元素放置的方向延伸的轴（比如页面上的横向的行、纵向的列）。该轴的开始和结束被称为<strong> main start</strong> 和<strong> main end</strong>。</li> + <li><strong>交叉轴（cross axis）</strong>是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 <strong>cross start</strong> 和<strong> cross end</strong>。</li> + <li>设置了 <code>display: flex</code> 的父元素（在本例中是 {{htmlelement("section")}}）被称之为 <strong>flex 容器（flex container）。</strong></li> + <li>在 flex 容器中表现为柔性的盒子的元素被称之为 <strong>flex 项</strong>（<strong>flex item</strong>）（本例中是 {{htmlelement("article")}} 元素。</li> +</ul> + +<p>了解这些术语以便你阅读后续章节。 如果您对使用的任何术语感到困惑，您可以随时返回这里。</p> + +<h2 id="列还是行">列还是行?</h2> + +<p>弹性盒子提供了 {{cssxref("flex-direction")}} 这样一个属性，它可以指定主轴的方向（弹性盒子子类放置的地方）— 它默认值是 <code>row</code>，这使得它们在按你浏览器的默认语言方向排成一排（在英语/中文浏览器中是从左到右）。</p> + +<p>尝试将以下声明添加到 section 元素的 css 规则里：</p> + +<pre class="brush: css">flex-direction: column;</pre> + +<p>你会看到，这会将那些元素设置为列布局，就像我们添加这些 CSS 之前。在继续之前，请从示例中删除此规则。</p> + +<div class="note"> +<p><strong>注意：</strong>你还可以使用 <code>row-reverse </code>和 <code>column-reverse </code>值反向排列 flex 项目。用这些值试试看吧！</p> +</div> + +<h2 id="换行">换行</h2> + +<p>当你在布局中使用定宽或者定高的时候，可能会出现问题即处于容器中的 弹性盒子子元素会溢出，破坏了布局。你可以看一下 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox-wrap0.html">弹性盒子-wrap0.html</a> 示例（你也可以拷贝到本地），如下所示：</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13410/flexbox-example3.png" style="display: block; height: 646px; margin: 0px auto; width: 800px;"></p> + +<p>在这里我们看到，子代确实超出了它们的容器。 解决此问题的一种方法是将以下声明添加到 section css 规则中：</p> + +<pre class="brush: css">flex-wrap: wrap</pre> + +<p>同时，把以下规则也添加到{{htmlelement("article")}} 规则中：</p> + +<pre class="brush: css">flex: 200px;</pre> + +<p>现在尝试一下吧；你会看到布局比原来好多了：</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13412/flexbox-example4.png" style="display: block; height: 646px; margin: 0px auto; width: 800px;">现在我们有了多行 弹性盒子— 任何溢出的元素将被移到下一行。在 article 元素上设置的 flex: 200px 规则，意味着每个元素的宽度至少是200px；我们将在后面更详细地讨论这个属性。你可能还注意到，最后一行上的最后几个项每个都变得更宽，以便把整个行填满。</p> + +<p>但是这里我们可以做得更多。首先，改变 {{cssxref("flex-direction")}} 属性值为 <code>row-reverse</code> — 你会看到仍然有多行布局，但是每一行元素排列的方向和原来是相反的了。</p> + +<h2 id="flex-flow_缩写">flex-flow 缩写</h2> + +<p>到这里，应当注意到存在着 {{cssxref("flex-direction")}} 和 {{cssxref("flex-wrap")}} — 的缩写 {{cssxref("flex-flow")}}。比如，你可以将</p> + +<pre class="brush: css">flex-direction: row; +flex-wrap: wrap;</pre> + +<p>替换为</p> + +<pre class="brush: css">flex-flow: row wrap;</pre> + +<h2 id="flex_项的动态尺寸">flex 项的动态尺寸</h2> + +<p>现在让我们回到第一个例子，看看是如何控制 flex 项占用空间的比例的。打开你本地的 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">弹性盒子0.html</a>，或者拷贝 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox1.html">弹性盒子1.html</a> 作为新的开始（<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox1.html">查看线上</a>）。</p> + +<p>第一步，将以下规则添加到 CSS 的底部：</p> + +<pre class="brush: css">article { + flex: 1; +}</pre> + +<p>这是一个无单位的比例值，表示每个 flex 项沿主轴的可用空间大小。本例中，我们设置 {{htmlelement("article")}} 元素的 flex 值为 1，这表示每个元素占用空间都是相等的，占用的空间是在设置 padding 和 margin 之后剩余的空间。因为它是一个比例，这意味着将每个 flex 项的设置为 400000 的效果和 1 的时候是完全一样的。</p> + +<p>现在在上一个规则下添加：</p> + +<pre class="brush: css">article:nth-of-type(3) { + flex: 2; +}</pre> + +<p>现在当你刷新，你会看到第三个 {{htmlelement("article")}} 元素占用了两倍的可用宽度和剩下的一样 — 现在总共有四个比例单位可用。 前两个 flex 项各有一个，因此它们占用每个可用空间的1/4。 第三个有两个单位，所以它占用2/4或这说是1/2的可用空间。</p> + +<p>您还可以指定 flex 的最小值。 尝试修改现有的 article 规则：</p> + +<pre class="brush: css">article { + flex: 1 200px; +} + +article:nth-of-type(3) { + flex: 2 200px; +}</pre> + +<p>这表示“每个flex 项将首先给出200px的可用空间，然后，剩余的可用空间将根据分配的比例共享“。 尝试刷新，你会看到分配空间的差别。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13406/flexbox-example1.png" style="border-style: solid; border-width: 1px; display: block; height: 324px; margin: 0px auto; width: 800px;"></p> + +<p>弹性盒子的真正价值可以体现在它的灵活性/响应性，如果你调整浏览器窗口的大小，或者增加一个 {{htmlelement("article")}} 元素，这时的布局仍旧是好的。</p> + +<h2 id="flex_缩写与全写">flex: 缩写与全写</h2> + +<p>{{cssxref("flex")}} 是一个可以指定最多三个不同值的缩写属性：</p> + +<ul> + <li>第一个就是上面所讨论过的无单位比例。可以单独指定全写 {{cssxref("flex-grow")}} 属性的值。</li> + <li>第二个无单位比例 — {{cssxref("flex-shrink")}} — 一般用于溢出容器的 flex 项。这指定了从每个 flex 项中取出多少溢出量，以阻止它们溢出它们的容器。 这是一个相当高级的弹性盒子功能，我们不会在本文中进一步说明。</li> + <li>第三个是上面讨论的最小值。可以单独指定全写 {{cssxref("flex-basis")}} 属性的值。</li> +</ul> + +<p>我们建议不要使用全写属性，除非你真的需要（比如要去覆盖之前写的）。使用全写会多写很多的代码，它们也可能有点让人困惑。</p> + +<h2 id="水平和垂直对齐">水平和垂直对齐</h2> + +<p>还可以使用 弹性盒子的功能让 flex 项沿主轴或交叉轴对齐。让我们一起看一下新例子 — <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flex-align0.html">flex-align0.html</a>（<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flex-align0.html">在线浏览</a>）— 我们将会有一个整洁，灵活的按钮/工具栏。 此时，你看到了一个水平菜单栏，其中一些按钮卡在左上角，就像下面这样：</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13414/flexbox-example5.png" style="display: block; height: 77px; margin: 0px auto; width: 600px;"></p> + +<p>首先，拷贝一份到本地。</p> + +<p>然后，将下面的 CSS 添加到例子的底部：</p> + +<pre class="brush: css">div { + display: flex; + align-items: center; + justify-content: space-around; +}</pre> + +<p>刷新一下页面，你就会看到这些按钮很好的垂直水平居中了。我们是通过下面所说的两个新的属性做到的。</p> + +<p>{{cssxref("align-items")}} 控制 flex 项在交叉轴上的位置。</p> + +<ul> + <li>默认的值是 <code>stretch</code>，其会使所有 flex 项沿着交叉轴的方向拉伸以填充父容器。如果父容器在交叉轴方向上没有固定宽度（即高度），则所有 flex 项将变得与最长的 flex 项一样长（即高度保持一致）。我们的第一个例子在默认情况下得到相等的高度的列的原因。</li> + <li>在上面规则中我们使用的 <code>center</code> 值会使这些项保持其原有的高度，但是会在交叉轴居中。这就是那些按钮垂直居中的原因。</li> + <li>你也可以设置诸如 <code>flex-start</code> 或 <code>flex-end</code> 这样使 flex 项在交叉轴的开始或结束处对齐所有的值。查看 {{cssxref("align-items")}} 了解更多。</li> +</ul> + +<p>你可以用 {{cssxref("align-self")}} 属性覆盖 {{cssxref("align-items")}} 的行为。比如，你可以这样：</p> + +<pre class="brush: css">button:first-child { + align-self: flex-end; +}</pre> + +<p>去看看它产生的效果，然后删除它。</p> + +<p>{{cssxref("justify-content")}} 控制 flex 项在主轴上的位置。</p> + +<ul> + <li>默认值是 <code>flex-start</code>，这会使所有 flex 项都位于主轴的开始处。</li> + <li>你也可以用 <code>flex-end</code> 来让 flex 项到结尾处。</li> + <li><code>center</code> 在 <code>justify-content</code> 里也是可用的，可以让 flex 项在主轴居中。</li> + <li>而我们上面用到的值 <code>space-around</code> 是很有用的——它会使所有 flex 项沿着主轴均匀地分布，在任意一端都会留有一点空间。</li> + <li>还有一个值是 <code>space-between</code>，它和 <code>space-around</code> 非常相似，只是它不会在两端留下任何空间。</li> +</ul> + +<p>在继续下面之前，多多使用提到过的属性吧，看看它们的效果。</p> + +<h2 id="flex_项排序">flex 项排序</h2> + +<p>弹性盒子也有可以改变 flex 项的布局位置的功能，而不会影响到源顺序（即 dom 树里元素的顺序）。这也是传统布局方式很难做到的一点。</p> + +<p>代码也很简单，将下面的 CSS 添加到示例代码下面。</p> + +<pre class="brush: css">button:first-child { + order: 1; +}</pre> + +<p>刷新下，然后你会看到 "Smile" 按钮移动到了主轴的末尾。下面我们谈下它实现的一些细节：</p> + +<ul> + <li>所有 flex 项默认的 {{cssxref("order")}} 值是 0。</li> + <li>order 值大的 flex 项比 order 值小的在显示顺序中更靠后。</li> + <li>相同 order 值的 flex 项按源顺序显示。所以假如你有四个元素，其 order 值分别是2，1，1和0，那么它们的显示顺序就分别是第四，第二，第三，和第一。</li> + <li>第三个元素显示在第二个后面是因为它们的 order 值一样，且第三个元素在源顺序中排在第二个后面。</li> +</ul> + +<p>你也可以给 order 设置负值使它们比值为 0 的元素排得更前面。比如，你可以设置 "Blush" 按钮排在主轴的最前面：</p> + +<pre class="brush: css">button:last-child { + order: -1; +}</pre> + +<h2 id="flex_嵌套">flex 嵌套</h2> + +<p>弹性盒子也能创建一些颇为复杂的布局。设置一个元素为flex项目，那么他同样成为一个 flex 容器，它的孩子(直接子节点)也表现为 flexible box 。看一下 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/complex-flexbox.html">complex-弹性盒子.html</a>（<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/complex-flexbox.html">在线浏览</a>）。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13418/flexbox-example7.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<p>这个例子的 HTML 是相当简单的。我们用一个 {{htmlelement("section")}} 元素包含了三个 {{htmlelement("article")}}元素。第三个 {{htmlelement("article")}} 元素包含了三个 {{htmlelement("div")}}：</p> + +<pre>section - article + article + article - div - button + div button + div button + button + button</pre> + +<p>现在让我们看一下布局用到的代码。</p> + +<p>首先，我们设置 {{htmlelement("section")}} 的子节点布局为 flexible box。</p> + +<pre class="brush: css">section { + display: flex; +}</pre> + +<p>下面我们给 {{htmlelement("article")}} 元素设置 flex 值。特别注意这里的第二条CSS规则—我们设置第三个 {{htmlelement("article")}} 元素的子节点的布局同样为 flex ，但是属性值为列布局。</p> + +<pre class="brush: css">article { + flex: 1 200px; +} + +article:nth-of-type(3) { + flex: 3 200px; + display: flex; + flex-flow: column; +} +</pre> + +<p>接下来，我们选择了第一个 {{htmlelement("div")}}。首先使用 <code>flex: 1 100px;</code> 简单的给它一个最小的高度 100px，然后设置它的子节点（{{htmlelement("button")}} 元素）为 flex 项。在这里我们将它们放在一个包装行(wrap row)中，使它们居中对齐，就像我们在前面看到的单个按钮示例中做的那样。 </p> + +<pre class="brush: css">article:nth-of-type(3) div:first-child { + flex: 1 100px; + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: space-around; +}</pre> + +<p>最后，我们给按钮设置大小，有意思的是我们给它一个值为1的 flex 属性。如果你调整浏览器窗口宽度，你会看到这是一个非常有趣的效果。按钮将尽可能占用最多的空间，尽可能多的堆在同一条线上，但是当它们不再适合在同一条线上，他们中的一些会到下一行去。</p> + +<pre class="brush: css">button { + flex: 1; + margin: 5px; + font-size: 18px; + line-height: 1.5; +}</pre> + +<h2 id="跨浏览器兼容性">跨浏览器兼容性</h2> + +<p>大多数浏览器都支持 弹性盒子，诸如 Firefox, Chrome, Opera, Microsoft Edge 和 IE 11，较新版本的 Android/iOS 等等。但是你应该要意识到仍旧有被人使用的老浏览器不支持 弹性盒子（或者支持，但是只是支持非常非常老版本的 弹性盒子）。</p> + +<p>虽然你只是在学习和实验，这不太要紧; 然而，如果您正在考虑在真实网站中使用弹性盒子，则需要进行测试，并确保在尽可能多的浏览器中您的用户体验仍然可以接受。</p> + +<p>弹性盒子相较其他一些 CSS 特性可能更为棘手。 例如，如果浏览器缺少 CSS 阴影，则该网站可能仍然可用。 但是假如不支持 弹性盒子功能就会完全打破布局，使其不可用。</p> + +<p>我们将在未来的模块中讨论克服棘手的跨浏览器支持问题的策略。</p> + +<h2 id="测试你的技能">测试你的技能</h2> + +<p>我们在文章里面覆盖了很多内容，但你是否能记住最重要的知识? 在你继续学习前，你可以进行<a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox_skills">测试</a>来验证你是否掌握了这些知识。</p> + +<h2 id="总结">总结</h2> + +<p>到这里，介绍弹性盒子的基础知识就结束了。 我们希望你体会到乐趣，并且玩的开心，能随着你的学习与你一起向前。 接下来，我们将看到CSS布局的另一个重要方面—网格系统。</p> + +<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}</div> diff --git a/files/zh-cn/learn/css/css_layout/floats/index.html b/files/zh-cn/learn/css/css_layout/floats/index.html new file mode 100644 index 0000000000..80e50f515e --- /dev/null +++ b/files/zh-cn/learn/css/css_layout/floats/index.html @@ -0,0 +1,550 @@ +--- +title: 浮动 +slug: Learn/CSS/CSS_layout/Floats +tags: + - CSS + - Guide + - 列 + - 初学者 + - 布局 + - 教程 + - 浮动 + - 清除 +translation_of: Learn/CSS/CSS_layout/Floats +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}</div> + +<p class="summary">{{cssxref("float")}} 属性最初只用于在成块的文本内浮动图像，但是现在它已成为在网页上创建多列布局的最常用工具之一。本文将阐述它的有关知识。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">要求:</th> + <td>HTML基础知识(学习<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">入门 HTML</a>)，和CSS的工作理念（学习 <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">入门 CSS</a>)。</td> + </tr> + <tr> + <th scope="row">目标：</th> + <td>学习如何创建浮动特性,比如首字下沉、浮动图像，和多个列在网页布局。</td> + </tr> + </tbody> +</table> + +<h2 id="浮动的背景知识">浮动的背景知识</h2> + +<p>最初，引入 {{cssxref("float")}} 属性是为了能让 web 开发人员实现简单的布局，包括在一列文本中浮动的图像，文字环绕在它的左边或右边。你可能在报纸版面上看到过。</p> + +<p>但 Web 开发人员很快意识到，任何东西都可以浮动，而不仅仅是图像，所以浮动的使用范围扩大了。之前的 <a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Active_learning_A_fancy_paragraph">fancy paragraph example</a> 的课程展示了如何使用浮动创建一个有趣的drop-cap（首字下沉）效果。</p> + +<p>浮动曾被用来实现整个网站页面的布局，它使信息列得以横向排列（默认的设定则是按照这些列在源代码中出现的顺序纵向排列）。目前出现了更新更好的页面布局技术，所以使用浮动来进行页面布局应被看作<a href="/zh-CN/docs/Learn/CSS/CSS_layout/传统的布局方法">传统的布局方法。</a></p> + +<p>在这一章中，我们仅就浮动这一命令本身的性能展开讲解。</p> + +<h2 id="简单的例子">简单的例子</h2> + +<p>让我们来探讨如何使用浮动。我们将从一个非常简单的例子开始，包括在图像周围浮动一个文本块。你可以跟随在你的电脑上创建新的 <code>index.html</code> 文件，以填充它 <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">simple HTML template</a>, 以下代码插入它在适当的地方。底部的部分你可以看到一个它应该是什么样子的例子。</p> + +<p>首先,我们写一些简单的HTML——添加以下到HTML的{{htmlelement("body")}}内,删除之前{{htmlelement("body")}}里面的东西：</p> + +<pre class="brush: html notranslate"><h1>Simple float example</h1> + +<img src="https://mdn.mozillademos.org/files/13340/butterfly.jpg" alt="A pretty butterfly with red, white, and brown coloring, sitting on a large leaf"> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p></pre> + +<p>现在将以下CSS应用到您的HTML (使用一个{{htmlelement("style")}} 元素或一个{{htmlelement("link")}} 到一个单独的 <code>.css </code>文件——你来选择)：</p> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 900px; + margin: 0 auto; +} + +p { + line-height: 2; + word-spacing: 0.1rem; +}</pre> + +<p>如果你现在保存并刷新，你会看到和你预期的效果差不多——图片坐落在文本的上方，目前看起来有点丑陋。我们本可以让图片在它的容器内居中，但取而代之，我们将使用float来让图片周围的文本浮起来。将以下规则添加到你之前的规则下面：</p> + +<pre class="brush: css notranslate">img { + float: left; + margin-right: 30px; +}</pre> + +<p>现在，如果您保存和刷新，你会看到类似下面的东西：</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><h1>Simple float example</h1> + +<img src="https://mdn.mozillademos.org/files/13340/butterfly.jpg" alt="A pretty butterfly with red, white, and brown coloring, sitting on a large leaf"> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> +</pre> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 900px; + margin: 0 auto; +} + +p { + line-height: 2; + word-spacing: 0.1rem; +} + +img { + float: left; + margin-right: 30px; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', '100%', 800) }}</p> + +<p>因此，让我们考虑一下浮动是如何工作的——浮动元素 (这个例子中的{{htmlelement("img")}} 元素)会脱离正常的文档布局流，并吸附到其父容器的左边 (这个例子中的{{htmlelement("body")}}元素)。在正常布局中位于该浮动元素之下的内容，此时会围绕着浮动元素，填满其右侧的空间。</p> + +<p>注意浮动内容仍然遵循盒子模型诸如外边距和边界。我们设置一下图片右侧的外边距就能阻止右侧的文字紧贴着图片。</p> + +<p>向右浮动的内容是一样的效果，只是反过来了——浮动元素会吸附到右边，而其他内容将从左侧环绕它。尝试将上一个例子中的浮动值改为 <code>right</code> ，再把 <code>margin-right</code> 换成 <code>margin-left</code> ，看看结果是什么。</p> + +<h2 id="再看我们的首字下沉例子">再看我们的首字下沉例子</h2> + +<p>如上所述，我们的 <a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Active_learning_A_fancy_paragraph">fancy paragraph example</a> 从早先的课程精选了一个漂亮的首字下沉。在这个例子中,我们有一个简单的段落：</p> + +<pre class="brush: html notranslate"><p>This is my very important paragraph. + I am a distinguished gentleman of such renown that my paragraph + needs to be styled in a manner befitting my majesty. Bow before +my splendour, dear students, and go forth and learn CSS!</p></pre> + +<p>我们的CSS看起来像这样：</p> + +<pre class="brush: css notranslate">p { + width: 400px; + margin: 0 auto; +} + +p::first-line { + text-transform: uppercase; +} + +p::first-letter { + font-size: 3em; + border: 1px solid black; + background: red; + float: left; + padding: 2px; + margin-right: 4px; +}</pre> + +<p>结果如下：</p> + +<p>{{ EmbedLiveSample('再看我们的首字下沉例子', '100%', 130) }}</p> + +<p>这里的效果与我们在图像的第一个例子中所做的没有很大的不同，但是这一次，我们在信中的第一个字母后面的其余部分是浮动的，在使这封信看起来显得又大又大胆又有趣之后。</p> + +<p>你可以漂浮任何的东西，只要有两个项目的空间，以配合在一起。这使我们很好地谈论多列布局。</p> + +<h2 id="多列浮动布局">多列浮动布局</h2> + +<p>浮动通常用于创建多个列布局，并且由于其广泛的浏览器支持已经有相当一段时间。尽管事实上，他们不是真的打算这个工作，并有一些奇怪的副作用必须处理，你会在后面的文章中看到。</p> + +<h3 id="两列布局">两列布局</h3> + +<p>让我们先从最简单的例子——两列布局。您可以通过创建一个新的 <code>index.html</code> 文件在您的计算机上，用<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">simple HTML template</a>填充它, 并在适当的地方插入下面的代码。在本节的底部，您可以看到一个活的例子，最终代码应该看起来像。</p> + +<p>首先，我们需要一些内容放入我们的列。使用以下内容替换body中的任何内容：</p> + +<pre class="brush: html notranslate"><h1>2 column layout example</h1> +<div> + <h2>First column</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> +</div> + +<div> + <h2>Second column</h2> + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> +</div></pre> + +<p>每个列都需要一个外部元素来包含其内容，并让我们一次操作它的所有内容。在这个例子中，我们选择了{{htmlelement("div")}}，但你可以选择更多语义合适的东西{{htmlelement("article")}}、{{htmlelement("section")}}、和{{htmlelement("aside")}}，诸如此类。</p> + +<p>现在为CSS将以下内容应用到HTML以提供一些基本设置：</p> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 900px; + margin: 0 auto; +}</pre> + +<p>在宽度达到900px之前，整个视图的宽度将达到90%，在超过900px后，它将保持在这个宽度，并在视口中居中。默认情况下，子元素(这个{{htmlelement("h1")}} 和两个 {{htmlelement("div")}})将跨越整个body宽度的100%。如果我们希望将两个{{htmlelement("div")}}放在一起，那么我们需要将它们的宽度设置为父元素的宽度的100%，或者更小，这样它们就可以彼此匹配。将下面的内容添加到CSS的底部：</p> + +<pre class="brush: css notranslate">div:nth-of-type(1) { + width: 48%; +} + +div:nth-of-type(2) { + width: 48%; +}</pre> + +<p>在这里我们设置了他们的父亲的宽度的48％ —— 这总计96％，留下我们4％自由作为两列之间的沟槽，给内容一些空间呼吸。现在我们只需要浮动列，像这样：</p> + +<pre class="brush: css notranslate">div:nth-of-type(1) { + width: 48%; + float: left; +} + +div:nth-of-type(2) { + width: 48%; + float: right; +}</pre> + +<p>把这些结合在一起应该跟我们结果一样：</p> + +<div class="hidden"> +<h6 id="Playable_code_2">Playable code 2</h6> + +<pre class="brush: html notranslate"><h1>2 column layout example</h1> + +<div> + <h2>First column</h2> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> +</div> + +<div> + <h2>Second column</h2> + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> +</div> +</pre> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 900px; + margin: 0 auto; +} + +div:nth-of-type(1) { + width: 48%; + float: left; +} + +div:nth-of-type(2) { + width: 48%; + float: right; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_2', '100%', 520) }}</p> + +<p>你会注意到，我们所有列使用宽度百分比——这是一个很好的策略，因为它创建一个流式布局（<strong>liquid layout</strong>），一种调整为不同的屏幕尺寸，并在较小的屏幕尺寸下保持相同的列宽度比例。请尝试调整浏览器窗口的宽度，以便自己查看。这是响应式网页设计的一个有价值的工具，我们将在以后的模块中讨论。</p> + +<div class="note"> +<p><strong>注意：</strong>你可以看到这个例子运行在 <a href="https://mdn.github.io/learning-area/css/css-layout/floats/0_two-column-layout.html">0_two-column-layout.html</a> (参见 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/floats/0_two-column-layout.html">the source code</a>).</p> +</div> + +<p>需要注意的一件事是，当它们变得非常窄时，列就会变得很糟糕。切换回窄屏幕的单列布局通常是有意义的（如手机)，使用媒体查询可以实现这一功能。再一次，你们将在未来的响应式网页设计模块中学习这些知识。</p> + +<p>另一种选择是将宽度设置为一个固定的单位如rem或像素——你可以看到一个例子<code><a href="https://mdn.github.io/learning-area/css/css-layout/floats/two-column-layout-fixed.html">two-column-layout-fixed.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/floats/two-column-layout-fixed.html">see source code</a>)，或者通过删除<code>max-width</code> 声明来转换您自己的示例，并改变各个宽度为 <code>900px</code>, <code>430px</code>和 <code>430px</code>。这就是<strong>固定宽度布局</strong>（<strong>fixed-width layout</strong>）——如果您现在调整浏览器大小，您将看到布局不再调整以适应视图宽度，在尺寸更小时您将需要滚动来查看它的全部。</p> + +<p>现在我们将转去使用流体布局。</p> + +<h3 id="三列布局">三列布局</h3> + +<p>你已经有了一个两列布局工作，添加一个第三列(或更多)并不是太难。你只需要添加另一个列在同一个父元素。开始通过添加以下 {{htmlelement("div")}}就在另外两个后面(或使用 <code><a href="https://mdn.github.io/learning-area/css/css-layout/floats/0_two-column-layout.html">0_two-column-layout.html</a></code> 作为开始）：</p> + +<pre class="brush: html notranslate"><div> + <h2>Third column</h2> + <p>Nam consequat scelerisque mattis. Duis pulvinar dapibus magna, eget congue purus mollis sit amet. Sed euismod lacus sit amet ex tempus, a semper felis ultrices. Maecenas a efficitur metus. Nullam tempus pharetra pharetra. Morbi in leo mauris. Nullam gravida ligula eros, lacinia sagittis lorem fermentum ut. Praesent dapibus eros vel mi pretium, nec convallis nibh blandit. Sed scelerisque justo ac ligula mollis laoreet. In mattis, risus et porta scelerisque, augue neque hendrerit orci, sit amet imperdiet risus neque vitae lectus. In tempus lectus a quam posuere vestibulum. Duis quis finibus mi. Nullam commodo mi in enim maximus fermentum. Mauris finibus at lorem vel sollicitudin.</p> +</div></pre> + +<p>现在更新你的CSS如下：</p> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 900px; + margin: 0 auto; +} + +div:nth-of-type(1) { + width: 36%; + float: left; +} + +div:nth-of-type(2) { + width: 30%; + float: left; + margin-left: 4%; +} + +div:nth-of-type(3) { + width: 26%; + float: right; +}</pre> + +<p>这将给我们以下结果：</p> + +<div class="hidden"> +<h6 id="Playable_code_3">Playable code 3</h6> + +<pre class="brush: html notranslate"><h1>3 column layout example</h1> + +<div> + <h2>First column</h2> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> +</div> + +<div> + <h2>Second column</h2> + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> +</div> + +<div> + <h2>Third column</h2> + <p>Nam consequat scelerisque mattis. Duis pulvinar dapibus magna, eget congue purus mollis sit amet. Sed euismod lacus sit amet ex tempus, a semper felis ultrices. Maecenas a efficitur metus. Nullam tempus pharetra pharetra. Morbi in leo mauris. Nullam gravida ligula eros, lacinia sagittis lorem fermentum ut. Praesent dapibus eros vel mi pretium, nec convallis nibh blandit. Sed scelerisque justo ac ligula mollis laoreet. In mattis, risus et porta scelerisque, augue neque hendrerit orci, sit amet imperdiet risus neque vitae lectus. In tempus lectus a quam posuere vestibulum. Duis quis finibus mi. Nullam commodo mi in enim maximus fermentum. Mauris finibus at lorem vel sollicitudin.</p> +</div> +</pre> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 900px; + margin: 0 auto; +} + +div:nth-of-type(1) { + width: 36%; + float: left; +} + +div:nth-of-type(2) { + width: 30%; + float: left; + margin-left: 4%; +} + +div:nth-of-type(3) { + width: 26%; + float: right; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_3', '100%', 800) }}</p> + +<p>这个例子我们已经很熟悉了；唯一真正的区别是我们有了这个额外的列——为了让它放到合适的位置我们已经把它放在左边了；我们还给了它一个4%的 {{cssxref("margin-left")}}，来在第一和第二列之间拉开一段距离。我们设置了列的宽度以便它们都能匹配——36% + 30% + 4% + 26% = 96%，在第二和第三列之间有4%的空间。（这个空间总是出现在向左浮动的第二列和向右浮动的第三列之间。）</p> + +<p>这里需要注意的一点是，您必须仔细考虑将列放在什么位置，以及如何浮动它们，以获得所需的结果。你的内容应该是有意义的，当你阅读它的源代码和它的视觉布局的时候；但是，使用浮动可以使可视化布局与源顺序不同。来说明我们的意思，尝试改变第二列的 {{cssxref("float")}}值为 <code>right</code> （或者看一看<a href="https://mdn.github.io/learning-area/css/css-layout/floats/three-column-layout-wrong-order.html">three-column-layout-wrong-order.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/floats/three-column-layout-wrong-order.html">源码</a>)）你会看到现在的视觉顺序是这样的：</p> + +<pre class="notranslate">div1 div3 div2</pre> + +<p>这是因为第二个<div>源代码顺序上比第三个<div>等级要高 (DOM上第二个<div>先出现并声明了<code>float: right;</code>) ，所以在浮动顺序上也会比第三个<div>等级要高。又因为两者同时像右浮动，第二个<div>就会更加地靠右。</p> + +<p>然而视觉受损的人使用屏幕阅读器来听你的内容，仍然会听到这个顺序的内容：</p> + +<pre class="notranslate"><code>div1 div2 div3</code></pre> + +<p>内容布局和样式对它们没有影响。无论用户如何消费，内容都应该是合理的。</p> + +<div class="note"> +<p><strong>注意：</strong>完成了这一点您可以找到的例子<a href="https://mdn.github.io/learning-area/css/css-layout/floats/1_three-column-layout.html">1_three-column-layout.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/floats/1_three-column-layout.html">see source code</a>).</p> +</div> + +<h2 id="清除浮动">清除浮动</h2> + +<p>现在你已经知道了关于 float 属性的一些有趣事实，不过你很快就能够碰到一个问题——所有在浮动下面的自身不浮动的内容都将围绕浮动元素进行包装，如果没有处理这些元素，就会变得很糟糕。为了说明我们的意思，尝试在第三个{{htmlelement("div")}} 元素下面添加以下HTML（并检出<code><a href="https://mdn.github.io/learning-area/css/css-layout/floats/2_float-disaster.html">2_float-disaster.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/floats/2_float-disaster.html">source code</a>)）：</p> + +<pre class="brush: html notranslate"><footer> + <p>&copy;2016 your imagination. This isn't really copyright, this is a mockery of the very concept. Use as you wish.</p> +</footer></pre> + +<p>你会看到页脚在最长的列旁边环绕着，这看起来很糟糕——我们希望页脚保持在底部，在所有的列下面。幸运的是，有一种简单的方法可以解决这个问题—— {{cssxref("clear")}} 属性。当你把这个应用到一个元素上时，它主要意味着"此处停止浮动"——这个元素和源码中后面的元素将不浮动，除非您稍后将一个新的{{cssxref("float")}}声明应用到此后的另一个元素。</p> + +<p>所以，要解决我们的问题，添加以下规则到您的CSS：</p> + +<pre class="brush: css notranslate">footer { + clear: both; +}</pre> + +<p>这将会给你一个页脚，它会在你的列下面，就像它应该做的那样：</p> + +<div class="hidden"> +<h6 id="Playable_code_4">Playable code 4</h6> + +<pre class="brush: html notranslate"><h1>3 column layout example</h1> + +<div> + <h2>First column</h2> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> +</div> + +<div> + <h2>Second column</h2> + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> +</div> + +<div> + <h2>Third column</h2> + <p>Nam consequat scelerisque mattis. Duis pulvinar dapibus magna, eget congue purus mollis sit amet. Sed euismod lacus sit amet ex tempus, a semper felis ultrices. Maecenas a efficitur metus. Nullam tempus pharetra pharetra. Morbi in leo mauris. Nullam gravida ligula eros, lacinia sagittis lorem fermentum ut. Praesent dapibus eros vel mi pretium, nec convallis nibh blandit. Sed scelerisque justo ac ligula mollis laoreet. In mattis, risus et porta scelerisque, augue neque hendrerit orci, sit amet imperdiet risus neque vitae lectus. In tempus lectus a quam posuere vestibulum. Duis quis finibus mi. Nullam commodo mi in enim maximus fermentum. Mauris finibus at lorem vel sollicitudin.</p> +</div> + +<footer> + <p>&copy;2016 your imagination. This isn't really copyright, this is a mockery of the very concept. Use as you wish.</p> +</footer> +</pre> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 900px; + margin: 0 auto; +} + +div:nth-of-type(1) { + width: 36%; + float: left; +} + +div:nth-of-type(2) { + width: 30%; + float: left; + margin-left: 4%; +} + +div:nth-of-type(3) { + width: 26%; + float: right; +} + +footer { + clear: both; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_4', '100%', 865) }}</p> + +<p>{{cssxref("clear")}} 可以取三个值：</p> + +<ul> + <li><code>left</code>：停止任何活动的左浮动</li> + <li><code>right</code>：停止任何活动的右浮动</li> + <li><code>both</code>：停止任何活动的左右浮动</li> +</ul> + +<p>你通常只想设定一个 <code>clear: both</code> 在你想让浮动停止的元素上。在某些情况下，你会想要只取消<code>left</code> 或 <code>right</code> 引用。</p> + +<div class="note"> +<p><strong>注：</strong>你可以在这个阶段找到例子 <code><a href="https://mdn.github.io/learning-area/css/css-layout/floats/2a_fixed-by-clear.html">2a_fixed-by-clear.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/floats/2a_fixed-by-clear.html">see source code</a>).</p> +</div> + +<h2 id="浮动问题">浮动问题</h2> + +<p>以上部分提供了使用浮动创建简单布局的基础，但是还有一些问题需要解决。 让我们谈谈这些问题。</p> + +<h3 id="整个宽度可能难以计算">整个宽度可能难以计算</h3> + +<p>到目前为止，我们的例子是没有应用样式的浮动框——这很容易。当你开始给这些框加上样式时，比如添加背景、外边距、内边距等等，问题就来了。为了演示这个问题，可以将下面的 CSS 加入到你的代码里 (你也可以看这个例子 <code><a href="https://mdn.github.io/learning-area/css/css-layout/floats/3_broken-layout.html">3_broken-layout.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/floats/3_broken-layout.html">source code</a>))：</p> + +<pre class="brush: css notranslate">div, footer { + padding: 1%; + border: 2px solid black; + background-color: red; +}</pre> + +<p>此时，您将看到您的布局已损坏 —— 由于内边距和边界引入的额外宽度，一行容纳不下三列了，因此第三列下降到另外两列之下。</p> + +<p>有两个方法可以解决问题，最好的方法是给你的html加上下面的css。</p> + +<pre class="brush: css notranslate">* { + box-sizing: border-box; +}</pre> + +<p>{{cssxref("box-sizing")}} 通过更改盒模型来拯救我们，盒子的宽度取值为 content + padding + border，而不仅是之前的content——所以当增加内边距或边界的宽度时，不会使盒子更宽——而是会使内容调整得更窄。</p> + +<p>我们有另一个问题——页脚正压在最长列上， 在这一点并不理想——我们来试着清除页脚浮动的同时给出一些顶部外边距（ <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top" title="The margin-top CSS property sets the margin area on the top of an element. A positive value will place it farther than normal from its neighbors, while a negative value will place it closer."><code>margin-top</code></a> ）来解决这个问题：</p> + +<pre class="brush: css notranslate">footer { + clear: both; + margin-top: 4%; +} </pre> + +<p>然而，这不起作用 ——浮动的元素存在于正常的文档布局流之外，在某些方面的行为相当奇怪：</p> + +<ul> + <li>首先，他们在父元素中所占的面积的有效高度为0 ——尝试在浏览器中加载 <a href="https://mdn.github.io/learning-area/css/css-layout/floats/1_three-column-layout.html">1_three-column-layout.html</a> 并用开发工具查看 {{htmlelement("body")}} 的高度，你将会看到我们的意思是什么——所报告的正文高度只有 {{htmlelement("h1")}} 的高度 。这个可以通过很多方式解决，但是我们所依赖的是在父容器的底部清除浮动，如我们在我们的当前示例所做的那样。 如果检查当前示例中正文的高度，您应该看它的高度是行为本身。</li> + <li>其次，非浮动元素的外边距不能用于它们和浮动元素之间来创建空间——这是我们在这里眼前的问题，我们将在下面实施修复。</li> + <li>还有一些关于浮动的奇怪的事情——Chris Coyier优秀的<a href="https://css-tricks.com/all-about-floats/">关于Floats</a>文章概述了其他一些以及修复这些。</li> +</ul> + +<p>所以，让我们解决这个！ 首先，在HTML的代码里添加新的{{htmlelement("div")}} 元素，位于在<footer>标签的上方：</p> + +<pre class="brush: html notranslate"><div class="clearfix"></div></pre> + +<p>如果您没有一个可用的元素来清除您的浮动(比如我们的页脚)，在您想要清除的浮动之后添加一个看不见的“clearfix div”是非常有用的，但是在这里页脚也要用到。接下来我们要做的是，移除页脚样式规则中的 <code>clear: both;</code> 声明，取而代之将其放在clearfix div中：</p> + +<pre class="brush: css notranslate">.clearfix { + clear: both; +}</pre> + +<p>我们的页脚现在有一个很好的顶部外边距，但也有另一个问题——clearfix div 背景、内边距和边界与我们的列和页脚相同！为了解决这个问题，让我们先给每个列块一个类（ <code>class</code> ）<code>column</code>：</p> + +<pre class="brush: html notranslate"><div class="column"> + ... +</div></pre> + +<p> 现在让我们改变应用盒子样式的规则到这些块和页脚，这样只有列块被样式化：</p> + +<pre class="brush: css notranslate">.column, footer { + padding: 1%; + border: 2px solid black; + background-color: red; +}</pre> + +<p>至此，修复问题大概就那样。</p> + +<div class="note"> +<p><strong>注：</strong> 查看在这个阶段最后一个解决的例子<a href="https://mdn.github.io/learning-area/css/css-layout/floats/4_fixed-layout-border-box.html">4_fixed-layout-border-box.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/floats/4_fixed-layout-border-box.html">source code</a>)。</p> +</div> + +<p>这里要注意的另一小点是，<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing" title="The CSS box-sizing property is used to alter the default CSS box model used to calculate width and height of the elements."><code>box-sizing</code></a> 出现可以追溯到Internet Explorer 8——如果您明确需要支持较老的浏览器，您可能需要手动调整列的宽度，以允许内边距和边界宽度。这不是一种非常精确的技术，特别是考虑到你不能用百分比来确定边界——你只需要在尽可能充满父宽度的同时留出足够的空间。你可以看到这样的实战修复<code><a href="https://mdn.github.io/learning-area/css/css-layout/floats/fixed-layout-adjusted-percentages.html">fixed-layout-adjusted-percentages.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/floats/fixed-layout-adjusted-percentages.html">见源代码</a>)。</p> + +<h3 id="浮动项目的背景高度">浮动项目的背景高度</h3> + +<p>到目前为止，我们建好的示例是有效的，但另一个问题是列高度是不同的—— 如果列都是相同的高度，它看起来会更好。</p> + +<p>我们可以通过给所有的列固定{{cssxref("height")}} 来解决这个问题(see <code><a href="https://mdn.github.io/learning-area/css/css-layout/floats/5_fixed-height-columns.html">5_fixed-height-columns.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/floats/5_fixed-height-columns.html">源代码</a>)：</p> + +<pre class="brush: css notranslate">.column { + height: 550px; +}</pre> + +<p>然而在许多情况下这并不理想——它使设计呆板。如果你能保证列中总是有相同数量的内容，这是可以的，但这并不总是如此——在很多类型的网站上，内容也会定期更改。</p> + +<p>这正是像flexbox这样的新布局技术所解决的问题。Flexbox可以自动地延长列，这样他们就会像最长的一列一样。</p> + +<p>你也可以考虑：</p> + +<ol> + <li>将这些列的背景颜色设置为父元素的背景颜色，这样您就不会看到高度是不同的。这是目前最好的选择。</li> + <li>将它们设置为固定的高度，并使内容滚动{{cssxref("overflow")}} (参见我们溢流部分的示例。)</li> + <li>使用一种叫做伪列（faux columns）的技术——这包括将背景(和边界)从实际的列中提取出来，并在列的父元素上画一个伪造的背景，看起来像列的背景一样。不幸的是，这将无法处理列边界。 详见对于<a href="http://alistapart.com/article/fauxcolumns">伪列</a>和<a href="https://www.addedbytes.com/blog/code/faux-columns-for-liquid-layouts/">伪列流体布局</a>的教程。</li> +</ol> + +<h3 id="清除浮动会变复杂">清除浮动会变复杂</h3> + +<p>我们在文章中建立的简单例子很容易理解，但是当布局变得更加复杂清理（clearing）也会变得更加复杂。你需要确保所有的浮动都能尽快清除，以避免它们给下方的内容制造麻烦。如果您没有一个方便的容器来进行清理，那么在必要的时候使用clearfix块。</p> + +<h2 id="纸上得来终觉浅！">纸上得来终觉浅！</h2> + +<p>你已经读完了这一篇文章，但是你还记得几成呢？在继续阅读之前你可以在这里找到一些测试来检验一下：<a href="/en-US/docs/Learn/CSS/CSS_layout/Floats_skills">Test your skills: Floats</a>.</p> + +<h2 id="总结">总结</h2> + +<p>现在，您应该已经拥有了一些强大的工具来创建相当复杂的web布局。太好了!在下一篇文章中，我们将进一步研究定位。</p> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}</p> diff --git a/files/zh-cn/learn/css/css_layout/fundamental_layout_comprehension/index.html b/files/zh-cn/learn/css/css_layout/fundamental_layout_comprehension/index.html new file mode 100644 index 0000000000..bd0ea5662f --- /dev/null +++ b/files/zh-cn/learn/css/css_layout/fundamental_layout_comprehension/index.html @@ -0,0 +1,70 @@ +--- +title: Fundamental Layout Comprehension +slug: Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension +translation_of: Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">如果您已经完成了这个模块的学习，那么您将已经学习了今天进行CSS布局以及使用旧的CSS所需的基本知识。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">任务需知:</th> + <td> + <p>在尝试此评估之前，您应该已经阅读了本模块中的所有文章。</p> + </td> + </tr> + <tr> + <th scope="row">任务目标:</th> + <td> + <p>测试您对本单元所涵盖的基本布局技能的理解与掌握应用。</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="项目简介">项目简介</h2> + +<p>我们已经为你提供了一些原始的html、基本的css文件和图像——现在你需要设计一个跟下面图片相似的布局页面。<img alt="" src="https://mdn.mozillademos.org/files/16076/layout-task-complete.png" style="height: 706px; width: 1000px;"></p> + +<h3 id="基本步骤">基本步骤</h3> + +<p>你可以在这下载基本的html css和图片素材 <a href="https://github.com/mdn/learning-area/tree/master/css/css-layout/fundamental-layout-comprehension">here</a>.</p> + +<p>将HTML文档和css保存到你自己计算机的目录中，并将图像添加到名为images的文件夹中，在浏览器中打开index.html文件应该会给您提供一个具有基本样式但没有布局的页面，该页面应该类似下面所示的图像。</p> + +<p>此页面开始于浏览器在正常流中显示的布局的所有内容。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16075/layout-task-start.png" style="height: 675px; width: 1000px;"></p> + +<h3 id="目标">目标</h3> + +<p>你需要实现你自己的布局。下面是你应该完成的目标：</p> + +<ol> + <li>在一行中显示导航选项，并且选项之间拥有相同的空间。</li> + <li>导航条应随着内容一起滚动并且在触碰到视口顶部之后于顶部固定。</li> + <li>文章内的图片应该被文本包围。</li> + <li>{{htmlelement("article")}} 与 {{htmlelement("aside")}} 元素应该为双列布局。它们的列尺寸应该是弹性的，以便在浏览器窗口收缩得更小的时候能够变窄。</li> + <li>照片应该以有 1px 间隔的两列网格显示出来。</li> +</ol> + +<p>在实现布局的过程中你不需要修改 HTML，下面是你应该使用的技术：</p> + +<ul> + <li>Positioning</li> + <li>Float</li> + <li>Flexbox</li> + <li>CSS Grid Layout</li> +</ul> + +<p>你能够用好几种方法来实现这些目标，完成一件事的方法并不只有一个。尝试不同的方式，并且看看哪个最有效。尝试之后写下笔记，你可以在本练习的帖子中或者 <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC 频道讨论你实现它们的方式。</p> + +<h2 id="评估">评估</h2> + +<p> </p> + +<p>如果这个评估是一系列课程的一部分，你应该可以让你的老师或导师为你批改。 如果你是自学，可以很容易地在 <a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294" rel="noopener">Learning Area Discourse thread</a> 或 <a href="https://wiki.mozilla.org/IRC" rel="noopener">Mozilla IRC</a> 的 <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC频道回复得到批改指南。请先自己试着做——作弊学不到任何东西！</p> + +<p> </p> diff --git a/files/zh-cn/learn/css/css_layout/grid_skills/index.html b/files/zh-cn/learn/css/css_layout/grid_skills/index.html new file mode 100644 index 0000000000..9379b24d92 --- /dev/null +++ b/files/zh-cn/learn/css/css_layout/grid_skills/index.html @@ -0,0 +1,96 @@ +--- +title: '测试你的技能: 网格布局' +slug: Learn/CSS/CSS_layout/Grid_skills +translation_of: Learn/CSS/CSS_layout/Grid_skills +--- +<div>{{LearnSidebar}}</div> + +<div></div> + +<p>此任务的目的是让你使用CSS网格布局，并测试你是否了解网格和网格项的行为方式。 你将会完成三个包括不同的元素小任务。</p> + +<div class="blockIndicator note"> +<p><strong>提示</strong>: 您可以在下面的交互式编辑器中试用解决方案，不过，下载代码并使用在线工具(如CodePen、jsFiddle或Glitch)处理这些任务可能会更有帮助。<br> + <br> + 如果您遇到困难，请向我们寻求帮助 — 参阅本页底部的 {{anch("评估或进一步帮助")}} 部分。</p> +</div> + +<h2 id="网格布局（一）">网格布局（一）</h2> + +<p>在此任务中，你需要创建一个网格，要求其中的四个子元素能自动排布。网格内要有三列并且将可用空间等分，列和行的间距均为20px。</p> + +<p>在三列网格布局中有四个物体放入其中。</p> + +<p>尝试更新下面的实时代码以复现上面的示例:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/tasks/grid/grid1.html", '100%', 700)}}</p> + +<div class="blockIndicator note"> +<p>评估或进一步的工作目的, 可以<a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/grid/grid1-download.html">下载此任务的源文件</a>在你自己的编辑器或在线编辑器工作。</p> +</div> + +<h2 id="网格布局_二">网格布局 二</h2> + +<p>In this example we already have a grid defined. By editing the CSS rules for the two child elements, cause them to span over several grid tracks each; the second item should overlay the first as in the image below.</p> + +<p><img alt="A box with two items inside one overlaying the other." src="https://mdn.mozillademos.org/files/17067/grid-task2.png" style="height: 589px; width: 1264px;"></p> + +<p>Try updating the live code below to recreate the finished example:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/tasks/grid/grid2.html", '100%', 800)}}</p> + +<p>Additional questions:</p> + +<ul> + <li>Can you now cause the first item to display on top without changing the order of items in the source?</li> +</ul> + +<div class="blockIndicator note"> +<p>For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/grid/grid2-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p> +</div> + +<h2 id="Grid_Layout_Three">Grid Layout Three</h2> + +<p>There are four direct children in this grid; the starting point has them displayed using auto-placement. Use the grid-area and grid-template-areas properties to lay the items out as shown in the image.</p> + +<p><img alt="Four items displayed in a grid." src="https://mdn.mozillademos.org/files/17068/grid-task3.png" style="height: 375px; width: 1269px;"></p> + +<p>Try updating the live code below to recreate the finished example:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/tasks/grid/grid3.html", '100%', 800)}}</p> + +<div class="blockIndicator note"> +<p>For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/grid/grid3-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p> +</div> + +<h2 id="Grid_and_Flex_Layout_4">Grid and Flex Layout 4</h2> + +<p>You will need to use both Grid Layout and Flexbox to recreate the example as seen in the image. You do not need to make any changes to the HTML in order to do this.</p> + +<p><img alt="Two rows of cards, each with an image and a set of tags." src="https://mdn.mozillademos.org/files/17079/grid-task4.png" style="height: 1158px; width: 1428px;"></p> + +<p>Try updating the code below to create your example: </p> + +<p>{{EmbedGHLiveSample("css-examples/learn/tasks/grid/grid4.html", '100%', 1200)}}</p> + +<div class="blockIndicator note"> +<p>For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/grid/grid4-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p> +</div> + +<h2 id="Assessment_or_further_help">Assessment or further help</h2> + +<p>You can practice these examples in the Interactive Editors mentioned above.</p> + +<p>If you'd like your work assessed, or are stuck and want to ask for help:</p> + +<ol> + <li>Put your work into an online shareable editor such as <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a>. You can write the code yourself, or use the starting point files linked to in the above sections.</li> + <li>Write a post asking for assessment and/or help at the <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a>. Your post should include: + <ul> + <li>A descriptive title such as "Assessment wanted for Grid layout 1 skill test".</li> + <li>Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.</li> + <li>A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.</li> + <li>A link to the actual task or assessment page, so we can find the question you want help with.</li> + </ul> + </li> +</ol> diff --git a/files/zh-cn/learn/css/css_layout/grids/index.html b/files/zh-cn/learn/css/css_layout/grids/index.html new file mode 100644 index 0000000000..eca25a84b8 --- /dev/null +++ b/files/zh-cn/learn/css/css_layout/grids/index.html @@ -0,0 +1,1308 @@ +--- +title: 网格 +slug: Learn/CSS/CSS_layout/Grids +tags: + - CSS + - CSS网格 + - 初学者 + - 学习 + - 布局 + - 引导 + - 教程 + - 文章 + - 编码脚本 + - 网格 + - 网格框架 + - 网格设计 +translation_of: Learn/CSS/CSS_layout/Grids +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</div> + +<p class="summary">CSS网格是一个用于web的二维布局系统。利用网格，你可以把内容按照行与列的格式进行排版。另外，网格还能非常轻松地实现一些复杂的布局。关于使用网格进行页面排版，这篇文章包含了你需要的一切知识。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">预备知识:</th> + <td>HTML基础 (学习<a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML"> HTML简介</a>)，以及了解CSS如何工作的(学习 <a href="/zh-CN/docs/Learn/CSS/Introduction_to_CSS">CSS简介</a> 和 <a href="/zh-CN/docs/Learn/CSS/Styling_boxes">盒子样式</a>。)</td> + </tr> + <tr> + <th scope="row">目标:</th> + <td>要了解网格布局系统背后的基本概念，以及如何在一个网页上实现一个网格布局。</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>译者注：本篇中旧版教程主要讲如何自己编写网格布局，最后过渡到浏览器支持的 CSS Grid Layout。而当前（2019-04-29）大多数浏览器已经支持了 CSS Grid Layout，没必要自己编写了，新版教程仅介绍 CSS Grid Layout 的用法</strong></p> +</div> + +<h2 id="什么是网格布局？">什么是网格布局？</h2> + +<p>网格是由一系列水平及垂直的线构成的以一种布局模式。根据网格，我们能够将设计元素进行排列，帮助我们设计一系列具有固定位置以及宽度的元素的页面，使我们的网站页面更加统一。</p> + +<p>一个网格通常具有许多的<strong>列（column）</strong>与<strong>行（row）</strong>，以及行与行、列与列之间的间隙，这个间隙一般被称为<strong>沟槽（gutter）</strong>。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13899/grid.png" style="display: block; height: 553px; margin: 0px auto; width: 1196px;"></p> + +<p>[临时图； 将很快替换更好的图片。]</p> + +<div class="note"> +<p><strong>注意</strong>：任何有设计背景的人似乎都感到惊讶，CSS没有内置的网格系统，而我们似乎使用各种次优方法来创建网格状的设计。正如你将在本文的最后一部分中发现的那样，这将被改变，但是你可能需要知道在未来一段时间内创建网格的现有方法。</p> +</div> + +<h2 id="在CSS中创建自己的网格">在CSS中创建自己的网格</h2> + +<p>决定好你的设计所需要的网格后，你可以创建一个CSS网格版面并放入各类元素。我们先来看看网格的基础功能，然后尝试做一个简单的网格系统。</p> + +<p>下面这个视频提供了一个很好的解释：</p> + +<p>{{EmbedYouTube("KOvGeFUHAC0")}}</p> + +<h3 id="定义一个网格">定义一个网格</h3> + +<p>一如既往，你可以下载教程<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/0-starting-point.html">文件</a>（你可以在线看到<a href="https://mdn.github.io/learning-area/css/css-layout/grids/0-starting-point.html">效果</a>）。例子中有一个容器，容器中有一些子项。默认情况下，子项按照正常布局流自顶而下排布。在这篇文章中，我们会从这开始，对这些文件做一些改变，来了解网格是如何工作的。</p> + +<p>首先，将容器的{{cssxref("display")}}属性设置为<code>grid</code>来定义一个网络。与弹性盒子一样，将父容器改为网格布局后，他的直接子项会变为网格项。把下面的css规则加到你的文件中。</p> + +<pre class="notranslate">.container { + display: grid; +} +</pre> + +<p>与弹性盒子不同的是，在定义网格后，网页并不会马上发生变化。因为<code>display: grid</code>的声明只创建了一个只有一列的网格，所以你的子项还是会像正常布局流那样从上而下一个接一个的排布。</p> + +<p>为了让我们的容器看起来更像一个网格，我们要给刚定义的网格加一些列。那就让我们加三个宽度为<code>200px</code>的列。当然，这里可以用任何长度单位，包括百分比。</p> + +<pre class="notranslate">.container { + display: grid; + grid-template-columns: 200px 200px 200px; +}</pre> + +<p>在规则里加入你的第二个声明。刷新页面后，你会看到子项们排进了新定义的网格中。</p> + +<div class="hidden"> +<h6 id="简单的网格示例">简单的网格示例 </h6> + +<pre class="notranslate">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} + +.container > div { + border-radius: 5px; + padding: 10px; + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); +} </pre> + +<pre class="notranslate"><div class="container"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> + <div>Six</div> + <div>Seven</div> +</div> </pre> + +<pre class="notranslate">.container { + display: grid; + grid-template-columns: 200px 200px 200px; +} </pre> +</div> + +<p>{{ EmbedLiveSample('Grid_1', '100%', 400) }}</p> + +<h3 id="使用fr单位的灵活网格">使用fr单位的灵活网格</h3> + +<p>除了长度和百分比，我们也可以用<code>fr</code>这个单位来灵活地定义网格的行与列的大小。这个单位表示了可用空间的一个比例，可能有点抽像，看看下面的例子吧。</p> + +<p>使用下面的规则来创建3个<code>1fr</code>的列：</p> + +<pre class="notranslate">.container { + display: grid; + grid-template-columns: 1fr 1fr 1fr; +}</pre> + +<p>将窗口调窄（由于示例中设定了{{cssxref("max-width")}}，可能需要很窄），你应该能看到每一列的宽度可以会随着可用空间变小而变小。<code>fr</code> 单位按比例划分了可用空间，如果没有理解，可以试着改一下数值，看看会发生什么，比如下面的代码：</p> + +<pre class="notranslate">.container { + display: grid; + grid-template-columns: 2fr 1fr 1fr; +}</pre> + +<p>这个定义里，第一列被分配了<code>2fr</code>可用空间，余下的两列各被分配了<code>1fr</code>的可用空间，这会使得第一列的宽度是第二第三列的两倍。另外，<code>fr</code>可以与一般的长度单位混合使用，比如<code>grid-template-columns: 300px 2fr 1fr</code>，那么第一列宽度是<code>300px</code>，剩下的两列会根据除去<code>300px</code>后的可用空间按比例分配。</p> + +<div class="hidden"> +<h6 id="使用了fr单位的简单网格示例">使用了fr单位的简单网格示例</h6> + +<pre class="notranslate">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} + +.container { + display: grid; + grid-template-columns: 2fr 1fr 1fr; +} + +.container > div { + border-radius: 5px; + padding: 10px; + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); +} + </pre> + +<pre class="notranslate"><div class="container"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> + <div>Six</div> + <div>Seven</div> +</div> </pre> +</div> + +<p>{{ EmbedLiveSample('Grid_2', '100%', 400) }}</p> + +<div class="blockIndicator note"> +<p><strong>注意：</strong><code>fr</code>单位分配的是<em>可用</em>空间而非<em>所有</em>空间，所以如果某一格包含的内容变多了，那么整个可用空间就会减少，可用空间是不包括那些已经确定被占用的空间的。</p> +</div> + +<h3 id="网格间隙">网格间隙</h3> + +<p>使用 {{cssxref("grid-column-gap")}} 属性来定义列间隙；使用 {{cssxref("grid-row-gap")}} 来定义行间隙；使用 {{cssxref("grid-gap")}} 可以同时设定两者。</p> + +<pre class="notranslate">.container { + display: grid; + grid-template-columns: 2fr 1fr 1fr; + grid-gap: 20px; +}</pre> + +<p>间隙距离可以用任何长度单位包括百分比来表示，但不能使用<code>fr</code>单位。</p> + +<div class="hidden"> +<h6 id="添加了间隙的简单网格示例">添加了间隙的简单网格示例</h6> + +<pre class="notranslate">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} + +.container { + display: grid; + grid-template-columns: 2fr 1fr 1fr; + grid-gap: 20px; +} + +.container > div { + border-radius: 5px; + padding: 10px; + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); +} + </pre> + +<pre class="notranslate"><div class="container"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> + <div>Six</div> + <div>Seven</div> +</div> +</pre> +</div> + +<p>{{ EmbedLiveSample('Grid_3', '100%', 400) }}</p> + +<div class="blockIndicator note"> +<p><strong>注意：</strong><code>*gap</code>属性曾经有一个<code>grid-</code>前缀，不过后来的标准进行了修改，目的是让他们能够在不同的布局方法中都能起作用。尽管现在这个前缀不会影响语义，但为了代码的健壮性，你可以把两个属性都写上。</p> +</div> + +<pre class="notranslate">.container { + display: grid; + grid-template-columns: 2fr 1fr 1fr; + grid-gap: 20px; + gap: 20px; +}</pre> + +<h3 id="重复构建行列">重复构建行/列</h3> + +<p>你可以使用<code>repeat</code>来重复构建具有某些宽度配置的某些列。举个例子，如果要创建多个等宽轨道，可以用下面的方法。</p> + +<pre class="notranslate">.container { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 20px; +}</pre> + +<p>和之前一样，你仍然得到了3个<code>1fr</code>的列。第一个传入repeat函数的值（<code>3</code>）表明了后续列宽的配置要重复多少次，而第二个值（<code>1fr</code>）表示需要重复的构建配置，这个配置可以具有多个长度设定。例如<code>repeat(2, 2fr 1fr)</code>，如果你仍然不明白，可以实际测试一下效果，这相当于填入了<code>2fr 1fr 2fr 1fr</code>。</p> + +<h3 id="显式网格与隐式网格">显式网格与隐式网格</h3> + +<p>到目前为止，我们定义过了列，但还没有管过行。但在这之前，我们要来理解一下显式网格和隐式网格。显式网格是我们用<code>grid-template-columns</code> 或 <code>grid-template-rows</code> 属性创建的。而隐式网格则是当有内容被放到网格外时才会生成的。显式网格与隐式网格的关系与弹性盒子的main和cross轴的关系有些类似。</p> + +<p>隐式网格中生成的行/列大小是参数默认是<code>auto</code>，大小会根据放入的内容自动调整。当然，你也可以使用{{cssxref("grid-auto-rows")}}和{{cssxref("grid-auto-columns")}}属性手动设定隐式网格的大小。下面的例子将<code>grid-auto-rows</code>设为了<code>100px</code>，然后你可以看到那些隐式网格中的行（因为这个例子里没有设定{{cssxref("grid-template-rows")}}，因此，所有行都位于隐式网格内）现在都是100像素高了。</p> + +<p>译者注：简单来说，隐式网格就是为了放显式网格放不下的元素，浏览器根据已经定义的显式网格自动生成的网格部分。</p> + +<div class="hidden"> +<h6 id="修改隐式网格尺寸的示例">修改隐式网格尺寸的示例</h6> + +<pre class="notranslate">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} + +.container > div { + border-radius: 5px; + padding: 10px; + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); +} </pre> + +<pre class="notranslate"><div class="container"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> + <div>Six</div> + <div>Seven</div> +</div> + </pre> +</div> + +<pre class="notranslate">.container { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: 100px; + grid-gap: 20px; +}</pre> + +<p>{{ EmbedLiveSample('Grid_4', '100%', 400) }}</p> + +<h3 id="方便的minmax_函数">方便的minmax() 函数</h3> + +<p>100像素高的行/列有时可能会不够用，因为时常会有比100像素高的内容加进去。所以，我们希望可以将其设定为至少100像素，而且可以跟随内容来自动拓展尺寸保证能容纳所有内容。显而易见，你很难知道网页上某个元素的尺寸在不同情况下会变成多少，一些额外的内容或者更大的字号就会导致许多能做到像素级精准的设计出现问题。所以，我们有了{{cssxref("minmax")}}函数。</p> + +<p>{{cssxref("minmax")}} 函数为一个行/列的尺寸设置了取值范围。比如设定为 <code>minmax(100px, auto)</code>，那么尺寸就至少为100像素，并且如果内容尺寸大于100像素则会根据内容自动调整。在这里试一下把 <code>grid-auto-rows</code> 属性设置为<code>minmax</code>函数。</p> + +<pre class="notranslate">.container { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: minmax(100px, auto); + grid-gap: 20px; +}</pre> + +<p>如果所有网格内的内容均小于100像素，那么看起来不会有变化，但如果在某一项中放入很长的内容或者图片，你可以看到这个格子所在的哪一行的高度变成能刚好容纳内容的高度了。注意我们修改的是<code>grid-auto-rows</code> ，因此只会作用于隐式网格。当然，这一项属性也可以应用于显示网格，更多内容可以参考{{cssxref("minmax")}}页面。</p> + +<h3 id="自动使用多列填充">自动使用多列填充</h3> + +<p>现在来试试把学到的关于网格的一切，包括repeat与minmax函数，组合起来，来实现一个非常有用的功能。某些情况下，我们需要让网格自动创建很多列来填满整个容器。通过设置<code>grid-template-columns</code>属性，我们可以实现这个效果，不过这一次我们会用到{{cssxref("repeat")}}函数中的一个关键字<code>auto-fill</code>来替代确定的重复次数。而函数的第二个参数，我们使用{{cssxref("minmax")}}函数来设定一个行/列的最小值，以及最大值<code>1fr</code>。</p> + +<p>在你的文件中试试看，你也许可以用到以下的代码。</p> + +<div class="hidden"> +<h6 id="自动使用多列填充的网格">自动使用多列填充的网格</h6> + +<pre class="notranslate">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} + +.container > div { + border-radius: 5px; + padding: 10px; + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); +} + </pre> + +<pre class="notranslate"><div class="container"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> + <div>Six</div> + <div>Seven</div> +</div> </pre> +</div> + +<pre class="notranslate">.container { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + grid-auto-rows: minmax(100px, auto); + grid-gap: 20px; +}</pre> + +<p>{{ EmbedLiveSample('Grid_5', '100%', 400) }}</p> + +<p>你应该能看到形成了一个包含了许多至少200像素宽的列的网格，将容器填满。随着容器宽度的改变，网格会自动根据容器宽度进行调整，每一列的宽度总是大于200像素，并且容器总会被列填满。（This works because grid is creating as many 200 pixel columns as will fit into the container, then sharing whatever space is leftover between all of the columns — the maximum is 1fr which, as we already know, distributes space evenly between tracks.）</p> + +<h2 id="基于线的元素放置">基于线的元素放置</h2> + +<p>在定义完了网格之后，我们要把元素放入网格中。我们的网格有许多分隔线，第一条线的起始点与文档书写模式相关。在英文中，第一条列分隔线（即网格边缘线）在网格的最左边而第一条行分隔线在网格的最上面。而对于阿拉伯语，第一条列分隔线在网格的最右边，因为阿拉伯文是从右往左书写的。</p> + +<p>我们根据这些分隔线来放置元素，通过以下属性来指定从那条线开始到哪条线结束。</p> + +<ul> + <li>{{cssxref("grid-column-start")}}</li> + <li>{{cssxref("grid-column-end")}}</li> + <li>{{cssxref("grid-row-start")}}</li> + <li>{{cssxref("grid-row-end")}}</li> +</ul> + +<p>这些属性的值均为分隔线序号，你也可以用以下缩写形式来同时指定开始与结束的线。</p> + +<ul> + <li>{{cssxref("grid-column")}}</li> + <li>{{cssxref("grid-row")}}</li> +</ul> + +<p>注意开始与结束的线的序号要使用<code>/</code>符号分开。</p> + +<p>下载<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/8-placement-starting-point.html">这个文件</a>（或者查看<a href="https://mdn.github.io/learning-area/css/css-layout/grids/8-placement-starting-point.html">在线预览</a>）。文件中已经定义了一个网格以及一篇简单的文章位于网格之外。你可以看到元素已经被自动放置到了我们创建的网格中。</p> + +<p>接下来，尝试用定义网格线的方法将所有元素放置到网格中。将以下规则加入到你的css的末尾：</p> + +<pre class="notranslate">header { + grid-column: 1 / 3; + grid-row: 1; +} + +article { + grid-column: 2; + grid-row: 2; +} + +aside { + grid-column: 1; + grid-row: 2; +} + +footer { + grid-column: 1 / 3; + grid-row: 3; +}</pre> + +<div class="hidden"> +<h6 id="基于线的元素放置_2">基于线的元素放置</h6> + +<pre class="notranslate"> body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; + } + + .container { + display: grid; + grid-template-columns: 1fr 3fr; + grid-gap: 20px; + } +header { + grid-column: 1 / 3; + grid-row: 1; +} + +article { + grid-column: 2; + grid-row: 2; +} + +aside { + grid-column: 1; + grid-row: 2; +} + +footer { + grid-column: 1 / 3; + grid-row: 3; +} + +header, +footer { + border-radius: 5px; + padding: 10px; + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); +} + +aside { + border-right: 1px solid #999; +} +</pre> + +<pre class="notranslate"><div class="container"> + <header>This is my lovely blog</header> + <article> + <h1>My article</h1> + <p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + </article> + <aside> + <h2>Other things</h2> + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.</p> + </aside> + <footer>Contact me@mysite.com</footer> +</div> </pre> +</div> + +<p>{{ EmbedLiveSample('Grid_6', '100%', 400) }}</p> + +<div class="blockIndicator note"> +<p><strong>注意：</strong>你也可以用<code>-1</code>来定位到最后一条列分隔线或是行分隔线，并且可以用负数来指定倒数的某一条分隔线。但是这只能用于显式网格，对于<a href="https://wiki.developer.mozilla.org/zh-CN/docs/Glossary/Grid">隐式网格</a><code>-1</code>不一定能定位到最后一条分隔线。</p> +</div> + +<h2 id="使用grid-template-areas属性放置元素">使用grid-template-areas属性放置元素</h2> + +<p>另一种往网格放元素的方式是用{{cssxref("grid-template-areas")}}属性，并且你要命名一些元素并在属性中使用这些名字作为一个区域。</p> + +<p>将之前基于线的元素放置代码删除（或者重新下载一份新的文件），然后加入以下CSS规则：</p> + +<pre class="notranslate">.container { + display: grid; + grid-template-areas: + "header header" + "sidebar content" + "footer footer"; + grid-template-columns: 1fr 3fr; + grid-gap: 20px; +} + +header { + grid-area: header; +} + +article { + grid-area: content; +} + +aside { + grid-area: sidebar; +} + +footer { + grid-area: footer; +}</pre> + +<p>刷新页面，然后你应该能看到的元素会被放到与之前相同的地方，整个过程不需要我们指定任何分隔线序号。</p> + +<div class="hidden"> +<h6 id="基于线的元素放置_3">基于线的元素放置</h6> + +<pre class="notranslate">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} + +header, +footer { + border-radius: 5px; + padding: 10px; + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); +} + +aside { + border-right: 1px solid #999; +} + +.container { + display: grid; + grid-template-areas: + "header header" + "sidebar content" + "footer footer"; + grid-template-columns: 1fr 3fr; + grid-gap: 20px; +} + +header { + grid-area: header; +} + +article { + grid-area: content; +} + +aside { + grid-area: sidebar; +} + +footer { + grid-area: footer; +} + </pre> + +<pre class="notranslate"><div class="container"> + <header>This is my lovely blog</header> + <article> + <h1>My article</h1> + <p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + </article> + <aside><h2>Other things</h2> + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.</p> + </aside> + <footer>Contact me@mysite.com</footer> +</div> </pre> +</div> + +<p>{{ EmbedLiveSample('Grid_7', '100%', 400) }}</p> + +<p><code>grid-template-areas</code>属性的使用规则如下：</p> + +<ul> + <li>你需要填满网格的每个格子</li> + <li>对于某个横跨多个格子的元素，重复写上那个元素<code>grid-area</code>属性定义的区域名字</li> + <li>所有名字只能出现在一个连续的区域，不能在不同的位置出现</li> + <li>一个连续的区域必须是一个矩形</li> + <li>使用<code>.</code>符号，让一个格子留空</li> +</ul> + +<p>你可以在文件中尽情发挥你的想象来测试各种网格排版，比如把页脚放在内容之下，或者把侧边栏一直延伸到最底。这种直观的元素放置方式很棒，你在CSS中看到的就是实际会出现的排版效果。</p> + +<h2 id="一个用CSS网格实现的网格排版框架">一个用CSS网格实现的网格排版框架</h2> + +<p>网格排版框架一般由12到16列的网格构成，你可以用CSS网格系统直接实现而不需要任何第三方的工具，毕竟这是标准定义好了的。</p> + +<p>下载这个<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/11-grid-system-starting-point.html">初始文件</a>，文件中包含了一个定义了12列网格的容器。文件中的一些内容我们曾在前两个示例中使用过，我们暂时可以先用基于线的元素放置模式来将我们的内容放到这个12列的网格中。</p> + +<pre class="notranslate">header { + grid-column: 1 / 13; + grid-row: 1; +} + +article { + grid-column: 4 / 13; + grid-row: 2; +} + +aside { + grid-column: 1 / 4; + grid-row: 2; +} + +footer { + grid-column: 1 / 13; + grid-row: 3; +}</pre> + +<div class="hidden"> +<h6 id="一个CSS网格系统">一个CSS网格系统</h6> + +<pre class="notranslate">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} + +.container { + display: grid; + grid-template-columns: repeat(12, minmax(0,1fr)); + grid-gap: 20px; +} + +header { + grid-column: 1 / 13; + grid-row: 1; +} + +article { + grid-column: 4 / 13; + grid-row: 2; +} + +aside { + grid-column: 1 / 4; + grid-row: 2; +} + +footer { + grid-column: 1 / 13; + grid-row: 3; +} + +header, +footer { + border-radius: 5px; + padding: 10px; + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); +} + +aside { + border-right: 1px solid #999; +} + </pre> + +<pre class="notranslate"><div class="container"> + <header>This is my lovely blog</header> + <article> + <h1>My article</h1> + <p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + </article> + <aside><h2>Other things</h2> + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.</p> + </aside> + <footer>Contact me@mysite.com</footer> +</div> + </pre> +</div> + +<p>{{ EmbedLiveSample('Grid_8', '100%', 400) }}</p> + +<p>你可以使用<a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox Grid Inspector</a>去查看页面中的网格线，你应该能看到这12列的网格是如何工作的。</p> + +<p><img alt="A 12 column grid overlaid on our design." src="https://mdn.mozillademos.org/files/16045/learn-grids-inspector.png"></p> + +<h2 id="纸上得来终觉浅！">纸上得来终觉浅！</h2> + +<p>你已经读完了这篇教程，那你记住那些最重要的内容了么？ 在继续之前，您可以通过一些其他测试来验证您是否真正学习到了这些知识，参见<a href="https://wiki.developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Grid_skills">技能测试：网格</a>.</p> + +<h2 id="小结">小结</h2> + +<p>我们在这篇文章中接触了CSS网格版面的主要特性，你现在应该可以在你自己的设计中使用了。想深入了解这些内容，你可以读一读下面关于网格版面的文章，可以下面的推荐阅读里看到。</p> + +<h2 id="推荐阅读">推荐阅读</h2> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layout#Guides">CSS网格指南</a></li> + <li><a href="https://wiki.developer.mozilla.org/zh-CN/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">CSS网格检查器：检查的你的网格版面</a></li> +</ul> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}</p> + +<hr> +<div class="blockIndicator warning"> +<p>以下是旧版教程</p> +</div> + +<h2 id="在你的项目中使用“网格系统”">在你的项目中使用“网格系统”</h2> + +<p>为了确保整个网站或应用程序的一致性体验，从一开始就将其置于网格系统上，这意味着您不需要考虑某个元素相对于其他元素的宽度。您的选择限于“该元素将跨越多少个网格列”。</p> + +<p>您的“网格系统”可以简单地是在设计过程中使用常规网格所做的决策。如果你的设计开始于一个图形编辑应用，如Photoshop的话，你可以参考这篇文章中所描述的过程创建一个网格 <a href="http://www.elliotjaystocks.com/blog/a-better-photoshop-grid-for-responsive-web-design/">一个更好响应网页设计的Photoshop网格</a>由<a href="http://www.elliotjaystocks.com/blog/a-better-photoshop-grid-for-responsive-web-design/">艾利特杰伊</a>提供。</p> + +<p>您的网格系统也可能是一个框架—— 无论是由第三方还是您为您自己的的项目创建的——通过CSS强制实现网格。</p> + +<h2 id="创建简单的网格框架">创建简单的网格框架</h2> + +<p>首先，看看我们将如何为你的项目创建一个简单的网格框架。</p> + +<p>目前大多数网格类型布局是使用浮动创建的。如果你阅读过<a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Floats">我们前面关于浮动的文章</a>，你可以看到我们如何使用这种技术来创建一个多列布局——这是任何使用网格系统的本质方法。</p> + +<p>要创建的最简单的网格框架类型是固定宽度的 —— 我们只需要计算出想要设计的总宽度，想要多少列，以及沟槽和列的宽度。如果我们决定在具有列根据浏览器宽度增长和缩小的网格上布置设计，我们需要计算出列和沟槽之间的百分比宽度。</p> + +<p>在接下来的部分中，我们会讨论如何创建这两者。我们将创建一个12列网格 —— 一种很常见的选择，因为12可以被6、4、3和2整除，被认为非常适应不同的情况。</p> + +<h3 id="一个简单的定宽网格">一个简单的定宽网格</h3> + +<p>首先，创建一个使用固定宽度列的网格系统。</p> + +<p>制作本地样本<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid.html">simple-grid.html</a>的文件副本，该文件在其body中包含以下标记。</p> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="row"> + <div class="col">1</div> + <div class="col">2</div> + <div class="col">3</div> + <div class="col">4</div> + <div class="col">5</div> + <div class="col">6</div> + <div class="col">7</div> + <div class="col">8</div> + <div class="col">9</div> + <div class="col">10</div> + <div class="col">11</div> + <div class="col">12</div> + </div> + <div class="row"> + <div class="col span1">13</div> + <div class="col span6">14</div> + <div class="col span3">15</div> + <div class="col span2">16</div> + </div> +</div></pre> + +<p>第一行显示单个列的大小，第二行显示网格上一些不同大小的区域——目的是将其转换为12列上的两行演示网格。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13901/simple-grid-finished.png" style="display: block; height: 50px; margin: 0px auto; width: 952px;"></p> + +<p>为包装容器提供980像素的宽度，其右侧有20px的padding，这使总共列/沟槽宽度960像素——在这里，padding被整个content的宽度减去，因为我们将这里所有元素的{{cssxref("box-sizing")}}属性的值设置为 <code>border-box</code> (可以看 <a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Styling_boxes/Box_model_recap#Changing_the_box_model_completely">Changing the box model completely</a> 有更详细的解释)。在<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/style"><style></a>元素中，添加以下代码。</p> + +<pre class="brush: css notranslate">* { + box-sizing: border-box; +} + + +body { + width: 980px; + margin: 0 auto; +} + +.wrapper { + padding-right: 20px; +}</pre> + +<p>在网格的每一行的行容器从另一行中清除一行，在上一个规则下面添加以下规则：</p> + +<pre class="brush: css notranslate">.row { + clear: both; +}</pre> + +<p>此清除意味着我们不需要应用构成完整十二列的元素去填充每一行。行将保持分离，并且彼此不干扰。</p> + +<p>列之间的沟槽为20像素宽。我们在每列的左侧创建一个20px的外边距（margin）作为沟槽——包括第一列，以平衡容器右侧的填充的20像素。所以，我们共有12个沟槽 — 12×20 = 240。</p> + +<p>我们需要从960像素的总宽度中减去它，为列提供720像素。如果我们除以12，每列就应该是60像素宽。</p> + +<p>下一步是为<code>.col类</code>创建一个规则集，让它向左浮动，给它一个20像素的{{cssxref("margin-left")}}形成一个沟槽，一个60像素的 {{cssxref("width")}}。将以下规则添加到CSS的底部：</p> + +<pre class="brush: css notranslate">.col { + float: left; + margin-left: 20px; + width: 60px; + background: rgb(255, 150, 150); +}</pre> + +<p>现在，最上面一行的每一列将被整齐地排列为网格。</p> + +<div class="note"> +<p><strong>注意：</strong>我们还为每个列指定了一个浅红色，以便您可以准确地看到每个列占用多少空间。</p> +</div> + +<p>那些我们想要跨越多个列的布局容器需要被赋予特殊的类，来将它们的{{cssxref("width")}} 值调整到所需的列数（加上之间的沟槽）。我们需要创建一个额外的类，以允许容器跨越2到12列。每个宽度是将该列数的列宽加上沟槽宽度得到的结果，总是比列数少1。</p> + +<p>在CSS的底部添加以下内容：</p> + +<pre class="brush: css notranslate">/* Two column widths (120px) plus one gutter width (20px) */ +.col.span2 { width: 140px; } +/* Three column widths (180px) plus two gutter widths (40px) */ +.col.span3 { width: 220px; } +/* And so on... */ +.col.span4 { width: 300px; } +.col.span5 { width: 380px; } +.col.span6 { width: 460px; } +.col.span7 { width: 540px; } +.col.span8 { width: 620px; } +.col.span9 { width: 700px; } +.col.span10 { width: 780px; } +.col.span11 { width: 860px; } +.col.span12 { width: 940px; }</pre> + +<p>创建这些类后，我们现在可以在网格上布置不同的宽度列。尝试保存并在浏览器中加载页面以查看效果。</p> + +<div class="note"> +<p><strong>注意：</strong>如果您无法使上述示例工作，请尝试将其与我们在GitHub上<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid-finished.html">完成的版本</a>进行比较（也可以看<a href="http://mdn.github.io/learning-area/css/css-layout/grids/simple-grid-finished.html">在线运行</a>）。</p> +</div> + +<p>尝试修改元素上的类，添加和删除一些容器，看看如何改变布局。例如，您可以使第二行如下所示：</p> + +<pre class="brush: css notranslate"><div class="row"> + <div class="col span8">13</div> + <div class="col span4">14</div> +</div></pre> + +<p>现在你有一个网格系统工作！你可以简单地定义行和每一行的列数，然后填充每个容器所需的内容。</p> + +<h3 id="创建流体网格">创建流体网格</h3> + +<p>我们的网格工作得很好，但它有一个固定的宽度。我们真的想要一个灵活（流体）网格，它将随着浏览器<a href="http://note.youdao.com/zh-CN/docs/Glossary/viewport">视口中</a>的可用空间而增长和缩小。为了实现这一点，我们可以使用参考像素宽度并将其转换为百分比。</p> + +<p>将固定的宽度变为基于百分比的灵活（flexible）宽度的公式如下。</p> + +<pre class="notranslate">target / context = result</pre> + +<p>对于列宽来说，<strong>上下文</strong>是一个960像素的包装器，<strong>目标的宽度</strong>是60像素，我们可以使用以下计算百分比。</p> + +<pre class="notranslate">60 / 960 = 0.0625</pre> + +<p>然后我们移动小数点2个位置，给出6.25％的百分比。因此，在我们的CSS中，我们可以替换60像素列宽度为6.25％。</p> + +<p>我们需要对沟槽宽度做同样的事情：</p> + +<pre class="notranslate">20 / 960 = 0.02083333333</pre> + +<p>因此，我们需要更换20像素<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/margin-left">margin-left</a>在我们的.col规则和20像素<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/padding-right">padding-right</a>的.wrapper有2.08333333％。</p> + +<h4 id="更新网格">更新网格</h4> + +<p>要开始使用本部分，请制作您之前的示例页面的新副本，或者将我们的<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid-finished.html">simple-grid-finished.html</a>代码的本地副本用作起点。</p> + +<p>更新第二个CSS规则（使用.wrapper选择器）如下：</p> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 980px; + margin: 0 auto; +} + +.wrapper { + padding-right: 2.08333333%; +}</pre> + +<p>不仅我们给了它一个百分比<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/width">width</a>，我们还添加了一个<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/max-width">max-width</a>属性，以阻止布局变得太宽。</p> + +<p>接下来，更新第四个CSS规则（使用.col选择器）如下：</p> + +<pre class="brush: css notranslate">.col { + float: left; + margin-left: 2.08333333%; + width: 6.25%; + background: rgb(255, 150, 150); +}</pre> + +<p>现在来看稍微更费力的部分 — 我们需要更新所有的 <code>.col.span </code>规则，使用百分比而不是像素宽度。这需要一点时间与计算器; 为了省你一些努力，我们已经为你做了下面。</p> + +<p>使用以下内容更新CSS规则的底部块：</p> + +<pre class="brush: css notranslate">/* Two column widths (12.5%) plus one gutter width (2.08333333%) */ +.col.span2 { width: 14.58333333%; } +/* Three column widths (18.75%) plus two gutter widths (4.1666666) */ +.col.span3 { width: 22.91666666%; } +/* And so on... */ +.col.span4 { width: 31.24999999%; } +.col.span5 { width: 39.58333332%; } +.col.span6 { width: 47.91666665%; } +.col.span7 { width: 56.24999998%; } +.col.span8 { width: 64.58333331%; } +.col.span9 { width: 72.91666664%; } +.col.span10 { width: 81.24999997%; } +.col.span11 { width: 89.5833333%; } +.col.span12 { width: 97.91666663%; }</pre> + +<p>现在保存您的代码，在浏览器中加载它，并尝试更改视口宽度 - 您应该看到列宽调整很好地适合！</p> + +<div class="note"> +<p><strong>注意：</strong>如果您无法使上述示例工作，请尝试将其与我们<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid.html">在GitHub上完成的版本进行比较</a>（<a href="http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid.html">请参见它</a>如何<a href="http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid.html">运行</a>的）。</p> +</div> + +<h3 id="使用calc_函数更容易的计算">使用calc() 函数更容易的计算</h3> + +<p>你可以使用<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc()">calc()</a>函数在你的CSS里面做数学 — 这允许你插入简单的数学方程到你的CSS值，计算一个值应该是什么。当需要执行复杂的数学运算时，它是特别有用的，甚至可以计算使用不同单位的计算，例如“我希望此元素的高度始终为父级高度的100％，减去50px”。<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/MediaRecorder_API/Using_the_MediaRecorder_API#Keeping_the_interface_constrained_to_the_viewport_regardless_of_device_height_with_calc()">从MediaRecorder API教程中</a>查看<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/MediaRecorder_API/Using_the_MediaRecorder_API#Keeping_the_interface_constrained_to_the_viewport_regardless_of_device_height_with_calc()">此示例</a>。</p> + +<p>无论如何，回到我们的网格！跨越网格的多个列的任何列具有6.25％的总宽度乘以跨越的列数加上2.08333333％乘以槽的数量（其将总是列数减去1）。该calc()函数允许我们在宽度值内部执行此计算，因此对于跨4列的任何项目，我们可以执行此操作，例如：</p> + +<pre class="brush: css notranslate">.col.span4 { + width: calc((6.25%*4) + (2.08333333%*3)); +}</pre> + +<p>尝试使用以下代码替换您的底部规则，然后在浏览器中重新加载它，看看是否得到相同的结果：</p> + +<pre class="brush: css notranslate">.col.span2 { width: calc((6.25%*2) + 2.08333333%); } +.col.span3 { width: calc((6.25%*3) + (2.08333333%*2)); } +.col.span4 { width: calc((6.25%*4) + (2.08333333%*3)); } +.col.span5 { width: calc((6.25%*5) + (2.08333333%*4)); } +.col.span6 { width: calc((6.25%*6) + (2.08333333%*5)); } +.col.span7 { width: calc((6.25%*7) + (2.08333333%*6)); } +.col.span8 { width: calc((6.25%*8) + (2.08333333%*7)); } +.col.span9 { width: calc((6.25%*9) + (2.08333333%*8)); } +.col.span10 { width: calc((6.25%*10) + (2.08333333%*9)); } +.col.span11 { width: calc((6.25%*11) + (2.08333333%*10)); } +.col.span12 { width: calc((6.25%*12) + (2.08333333%*11)); }</pre> + +<div class="note"> +<p><strong>注意：</strong>您可以在<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-calc.html">fluid-grid-calc.html</a>（也可以<a href="http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-calc.html">看到它的live</a>）中看到我们的完成版本。</p> +</div> + +<div class="note"> +<p><strong>注意：</strong>如果你不能让这个工作，它可能是因为你的浏览器不支持该calc()功能，虽然它是相当支持跨浏览器 - 远在IE9</p> +</div> + +<h3 id="语义与“非语义”网格系统">语义与“非语义”网格系统</h3> + +<p>向您的标记添加类来定义布局意味着您的内容和标记与其视觉呈现相关联。有时你会听到这种使用描述为“非语义”的CSS类 - 描述内容的外观 - 而不是描述内容的类的语义使用。这正是我们的情况下span2，span3类，等等。</p> + +<p>这些不是唯一的办法，你可以改为决定网格。然后将大小信息添加到现有语义类的规则中。例如，如果你有一个<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/div"><div></a>类content，你想跨越8列，你可以复制从span8类的宽度，给你一个像这样的规则：</p> + +<pre class="brush: css notranslate">.content { + width: calc((6.25%*8) + (2.08333333%*7)); +}</pre> + +<div class="note"> +<p><strong>注意</strong>：如果你使用一个预处理器，如<a href="http://sass-lang.com/">Sass</a>，你可以创建一个简单的mixin来插入这个值。</p> +</div> + +<h3 id="在网格中启用偏移容器">在网格中启用偏移容器</h3> + +<p>我们创建的网格工作良好，只要我们想要启动所有的容器与网格的左手边齐平。如果我们想在第一个容器之前留下一个空的列空间 - 或者在容器之间 - 我们需要创建一个偏移类来添加一个左边距到我们的网站，以推动它在网格上。更多数学！</p> + +<p>让我们试试这个。</p> + +<p>从您之前的代码开始，或使用我们的<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid.html">fluid-grid.html</a>文件作为起点。</p> + +<p>让我们在CSS中创建一个类，它将容器元素偏移一列宽度。将以下内容添加到CSS的底部：</p> + +<pre class="brush: css notranslate">.offset-by-one { + margin-left: calc(6.25% + (2.08333333%*2)); +}</pre> + +<p>如果你喜欢自己计算百分比，请使用这一个：</p> + +<pre class="brush: css notranslate">.offset-by-one { + margin-left: 10.41666666%; +}</pre> + +<p>现在可以将此类添加到任何容器，列如你要在其左侧留下一列宽的空白。在HTML中添加这个：</p> + +<pre class="brush: html notranslate"><div class="col span6">14</div></pre> + +<p>尝试替换它</p> + +<pre class="brush: html notranslate"><div class="col span5 offset-by-one">14</div></pre> + +<div class="note"> +<p><strong>注意</strong>：您需要减少跨越的列数，为偏移量腾出空间！</p> +</div> + +<p>尝试加载和刷新以查看差异，或查看我们的<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-offset.html">fluid-grid-offset.html</a>示例（见<a href="http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-offset.html">在线运行</a>）。完成的示例应如下所示：</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13903/offset-grid-finished.png" style="display: block; height: 47px; margin: 0px auto; width: 944px;"></p> + +<div class="note"> +<p><strong>注意</strong>：作为一个额外的练习，你能实现一个offset-by-two类吗？</p> +</div> + +<h3 id="浮动网格限制">浮动网格限制</h3> + +<p>当使用浮动网格时，你需要注意：你的总宽度要加起来正确，并且你不能在一行中包含跨（越）度为多列的超过该行所能包含的元素。由于浮动工作方式，如果网格列的数量相对于网格变得太宽，则末端上的元素将下降到下一行，从而打破网格。</p> + +<p>还要记住，元素的内容比它们占据的行更宽，它会溢出，会看起来像一团糟。</p> + +<p>这个系统的最大限制是它基本上是一维的。我们处理的是列元素只能跨越多个列，而不能跨越行。这些旧的布局方法非常难以控制元素的高度，而没有明确设置高度，这是一个非常不灵活的方法 - 它只有当你能保证你的内容将是一定的高度才有效。</p> + +<h2 id="Flexbox_网格">Flexbox 网格?</h2> + +<p>如果你阅读我们以前关于<a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Flexbox">flexbox的</a>文章，可能会认为flexbox是创建网格系统的理想解决方案。目前有一些基于flexbox的网格系统可用，flexbox可以解决我们在创建上面的网格时已经发现的许多问题。</p> + +<p>然而，flexbox从来没有被设计为网格系统，并且在作为一体时提出了一系列新的挑战。作为一个简单的例子，我们可以把我们上面使用同样的例子标记和使用以下CSS样式的wrapper，row和col类：</p> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 980px; + margin: 0 auto; +} + +.wrapper { + padding-right: 2.08333333%; +} + + +.row { + display: flex; +} + +.col { + margin-left: 2.08333333%; + margin-bottom: 1em; + width: 6.25%; + flex: 1 1 auto; + background: rgb(255,150,150); +}</pre> + +<p>你可以在你自己的例子中尝试这些替换，或者看看我们的<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/flexbox-grid.html">flexbox-grid.html</a>示例代码（看它如何<a href="http://mdn.github.io/learning-area/css/css-layout/grids/flexbox-grid.html">运行</a>）。</p> + +<p>这里我们把每一行变成一个flex容器。使用基于flexbox的网格，我们仍然需要行，以便允许我们添加小于100％的元素。我们设置该容器display: flex。</p> + +<p>在.col我们将<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex">flex</a>属性的第一个值（<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-grow">flex-grow</a>）设置为1，项目可以增长，第二个值（<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-shrink">flex-shrink</a>）为1，所以项目可以收缩，第三个值（<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-basis">flex-basis</a>）auto。由于我们的元素有一个<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/width">width</a>集合，auto将使用该宽度作为flex-basis值。</p> + +<p>在顶端，我们在网格上获得十二个整洁的盒子，并且它们随着我们改变视口宽度而同样地增长和收缩。然而，在下一行，我们只有四个项目，这些也从60px基础增长和收缩。只有四个他们可以增长比上面的行中的项目多，结果是他们都占据第二行相同的宽度。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13905/flexbox-grid-incomplete.png" style="display: block; height: 71px; margin: 0px auto; width: 944px;"></p> + +<p>为了解决这个问题，我们仍然需要包含我们的span类来提供一个宽度来替换flex-basis那个元素所使用的值。</p> + +<p>他们也不尊重上面的网格，因为他们不知道如何使用它。</p> + +<p><strong>Flexbox</strong>是<strong>一维</strong>设计。它处理单个维度，即行或列。不能为列和行创建严格的网格，这意味着如果我们要为网格使用flexbox，我们仍然需要为浮动布局计算百分比。</p> + +<p>在您的项目中，您可能仍然选择使用flexbox'grid'，因为flexbox提供的额外对齐和空间分布能力超过浮动。但是，您应该知道，您仍在使用工具，而不是它的设计目的。所以你可能会觉得它让你跳过额外的箍，得到你想要的最终结果。</p> + +<h2 id="第三方网格系统">第三方网格系统</h2> + +<p>现在我们了解了我们的网格计算背后的数学，我们是一个很好的地方看看一些第三方网格系统的共同使用。如果你在网上搜索“CSS Grid框架”，你会发现一个巨大的选项列表可供选择。流行的框架如<a href="http://getbootstrap.com/">Bootstrap</a>和<a href="http://foundation.zurb.com/">Foundation</a>包括一个网格系统。还有独立的网格系统，使用CSS或使用预处理器开发。</p> + +<p>让我们来看看这些独立系统之一，因为它演示了使用网格框架的常见技术。我们将使用的网格是Skeleton的一部分，一个简单的CSS框架。</p> + +<p>开始访问<a href="http://getskeleton.com/">Skeleton网站</a>，并选择“下载”以下载ZIP文件，解压缩此文件并将skeleton.css和normalize.css文件复制到一个新目录中。</p> + +<p>制作我们的<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/html-skeleton.html">html-skeleton.html</a>文件副本，并将其保存在与骨架相同的目录中，并规范化CSS。</p> + +<p>在HTML页面中包含骨架并规范化CSS，方法是在其头部添加以下内容：</p> + +<pre class="brush: html notranslate"><link href="normalize.css" rel="stylesheet"> +<link href="skeleton.css" rel="stylesheet"></pre> + +<p>Skeleton不仅仅包括一个网格系统 - 它还包含用于排版的CSS和其他可以用作起点的页面元素。我们现在将这些默认值，但是 - 这是我们真正感兴趣的网格在这里。</p> + +<div class="note"> +<p><strong>注意</strong>：Normalize是由Nicolas Gallagher编写的一个非常有用的小型CSS库，它自动执行一些有用的基本布局修复，并使默认元素样式在不同浏览器之间更一致。</p> +</div> + +<p>我们将使用类似的HTML到我们前面的例子。在您的HTML内文中添加以下内容：</p> + +<pre class="brush: html notranslate"><div class="container"> + <div class="row"> + <div class="col">1</div> + <div class="col">2</div> + <div class="col">3</div> + <div class="col">4</div> + <div class="col">5</div> + <div class="col">6</div> + <div class="col">7</div> + <div class="col">8</div> + <div class="col">9</div> + <div class="col">10</div> + <div class="col">11</div> + <div class="col">12</div> + </div> + <div class="row"> + <div class="col">13</div> + <div class="col">14</div> + <div class="col">15</div> + <div class="col">16</div> + </div> +</div></pre> + +<p>要开始使用Skeleton，我们需要给包装器<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/div"><div></a>一个类container- 这已经包括在我们的HTML中。这将以960像素的最大宽度为中心。你可以看到盒子现在从不变得宽于960像素。</p> + +<p>你可以看一下skeleton.css文件，看看我们应用这个类时使用的CSS。在<div>使用居中auto左，右页边距，以及20像素的填充应用于左侧和右侧。Skeleton也设置<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing">box-sizing</a>属性border-box像我们以前做的，所以此元素的填充和边框将包括在总宽度。</p> + +<pre class="brush: css notranslate">.container { + position: relative; + width: 100%; + max-width: 960px; + margin: 0 auto; + padding: 0 20px; + box-sizing: border-box; +}</pre> + +<p>元素只能是网格的一部分（如果它们在一行内），因此与前面的示例一样，我们需要一个额外的<div>或其他元素，其中一个类row嵌套在content <div>实际的内容容器之间<div>。我们已经做到了这一点。</p> + +<p>现在让我们布置集装箱。骨架基于12列网格。顶行框都需要类，one column以使它们跨越一列。</p> + +<p>现在添加这些，如下面的代码段所示：</p> + +<pre class="brush: html notranslate"><div class="container"> + <div class="row"> + <div class="col one column">1</div> + <div class="col one column">2</div> + <div class="col one column">3</div> + /* and so on */ + </div> +</div></pre> + +<p>接下来，给出第二行类上的容器，解释它们应该跨越的列数，如下：</p> + +<pre class="brush: html notranslate"><div class="row"> + <div class="col one column">13</div> + <div class="col six columns">14</div> + <div class="col three columns">15</div> + <div class="col two columns">16</div> +</div></pre> + +<p>尝试保存HTML文件并将其加载到浏览器中以查看效果。</p> + +<div class="note"> +<p><strong>注意</strong>：如果您无法使此示例工作，请尝试将其与我们的<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/html-skeleton-finished.html">html-skeleton-finished.html</a>文件进行比较（见<a href="http://mdn.github.io/learning-area/css/css-layout/grids/html-skeleton-finished.html">在线运行</a>）。</p> +</div> + +<p>如果你看看skeleton.css文件，你可以看到这是如何工作的。例如，Skeleton对下面定义的样式元素添加了“三列”类。</p> + +<pre class="brush: css notranslate">.three.columns { width: 22%; }</pre> + +<p>所有的Skeleton（或任何其他网格框架）正在设置预定义的类，您可以通过将它们添加到您的标记使用。这和你自己计算这些百分比的工作完全一样。</p> + +<p>正如你所看到的，当使用Skeleton时，我们需要写很少的CSS。它处理所有的浮动我们当我们添加类到我们的标记。正是这种将布局的责任转移到其他使网格系统的框架成为一个引人注目的选择的能力！</p> + +<p>骨架是比你可能遇到的一些框架更简单的网格系统。大型框架（如Bootstrap和Foundation）中的网格为各种屏幕宽度提供了更多的功能和额外的断点。但是，它们都以类似的方式工作 - 通过向您的标记添加特定类，您可以使用预定义网格控制元素的布局。</p> + +<h2 id="本地CSS网格与网格布局">本地CSS网格与网格布局</h2> + +<p>我们在本文一开始所说的，CSS的之前没有过一个真正的体系，用于创建网格布局。但这已经改变了。大部分常用的浏览器的最新版本已经提供了对新<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layout">CSS的网格布局模块</a>的支持。</p> + +<p>我们看过上面的Skeleton Grid框架 - 像其他第三方网格，甚至是手工构建的网格，它需要你添加<div>s形成行，然后指定这些行中的项目将跨越的列数。</p> + +<p>使用CSS网格布局，您可以完全在CSS中指定网格，而不需要将这些帮助类添加到标记。让我们看看我们的简单示例，看看我们将如何使用CSS Grid Layout创建相同的布局。</p> + +<h3 id="构建本地网格">构建本地网格</h3> + +<p>首先，通过制作<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/css-grid.html">css-grid.html</a>文件的本地副本来开始。它包含以下标记：</p> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="col">1</div> + <div class="col">2</div> + <div class="col">3</div> + <div class="col">4</div> + <div class="col">5</div> + <div class="col">6</div> + <div class="col">7</div> + <div class="col">8</div> + <div class="col">9</div> + <div class="col">10</div> + <div class="col">11</div> + <div class="col">12</div> + <div class="col">13</div> + <div class="col span6">14</div> + <div class="col span3">15</div> + <div class="col span2">16</div> +</div></pre> + +<p>这次我们有一个父 <code><div></code> 的类 <code>wrapper</code>，所有的子元素只是直接出现在包装器内——没有行元素。我们已经将一个类添加到应该跨越多个列的项目。</p> + +<p>现在将以下内容添加到<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/style"><style></a>元素中：</p> + +<pre class="brush: css notranslate">.wrapper { + width: 90%; + max-width: 960px; + margin: 0 auto; + display: grid; + grid-template-columns: repeat(12, 1fr); + grid-gap: 20px; +} + +.col { + background: rgb(255,150,150); +}</pre> + +<p>这里我们设置.wrapper规则，因此它是90％的身体宽度，居中，并且 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/max-width">max-width</a> 为 960px。</p> + +<p>现在为CSS网格属性。我们可以使用{{cssxref("display")}} 属性的 <code>grid</code> 值声明一个网格，使用 {{cssxref("grid-gap")}} 设置网格的间隔，然后使用{{cssxref("grid-template-columns")}} 属性、 <code>repeat()</code> 函数和 <code>fr</code> 单位——这个为网格布局定义的单位——创建一个12列等宽的网格。</p> + +<p>该fr单元是一小部分单元-它描述在网格容器的可用空间的一小部分。如果所有列都是1fr，它们将占用相等的空间量。这消除了计算百分比以创建灵活网格的需要。</p> + +<p>创建网格后，网格自动布局规则将立即在这个网格上布置我们的框，我们得到一个十二列灵活的网格布局。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13907/css-grid-incomplete.png" style="display: block; height: 70px; margin: 0px auto; width: 971px;"></p> + +<p>要对跨越网格上的多个列轨道的容器进行样式化，我们可以使用该<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid-column">grid-column</a>属性。跨6列例如：</p> + +<pre class="brush: css notranslate">.span6 { + grid-column: auto / span 6; +}</pre> + +<p>跨越3：</p> + +<pre class="brush: css notranslate">.span3 { + grid-column: auto / span 3; +}</pre> + +<p>正斜杠之前的值是开始列——在这种情况下，我们没有明确设置，允许浏览器放在下一个可用的列。然后我们可以设置它跨越6，3或我们想要的许多列。</p> + +<p>在CSS的底部添加以下内容：</p> + +<pre class="brush: css notranslate">.span2 { grid-column: auto / span 2;} +.span3 { grid-column: auto / span 3;} +.span4 { grid-column: auto / span 4;} +.span5 { grid-column: auto / span 5;} +.span6 { grid-column: auto / span 6;} +.span7 { grid-column: auto / span 7;} +.span8 { grid-column: auto / span 8;} +.span9 { grid-column: auto / span 9;} +.span10 { grid-column: auto / span 10;} +.span11 { grid-column: auto / span 11;} +.span12 { grid-column: auto / span 12;}</pre> + +<p>OK！尝试保存和刷新，你会看到容器适当地跨多个列。</p> + +<p>CSS网格是<strong>二维</strong>的，因此随着布局的增长和缩小，元素保持水平和垂直排列。</p> + +<p>您可以通过将以下内容替换最后的4个字符串来进行测试<div>：</p> + +<pre class="brush: html notranslate"><div class="col">13some<br>content</div> +<div class="col span6">14this<br>is<br>more<br>content</div> +<div class="col span3">15this<br>is<br>less</div> +<div class="col span2">16</div></pre> + +<p>这里我们有意添加了一些行break（<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/br"><br></a>）标签，以强制某些列变得比其他列高。如果你尝试保存和刷新，你会看到列的高度调整为与最高的容器一样高，所以一切都保持整洁。</p> + +<p>最终的布局如下：</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13909/css-grid-finished.png" style="display: block; height: 130px; margin: 0px auto; width: 972px;"></p> + +<div class="note"> +<p>注意：如果您无法使此示例工作，您可以检查您的代码与我们的<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/css-grid-finished.html">完成版本</a>（也可以看<a href="http://mdn.github.io/learning-area/css/css-layout/grids/css-grid-finished.html">在线运行</a>）。</p> +</div> + +<h3 id="一些不错的CSS网格特性">一些不错的CSS网格特性</h3> + +<p>对于CSS网格，我们不需要通过边距来抵消它们。尝试在您的CSS中进行这些更改：</p> + +<pre class="brush: css notranslate">.content { + grid-column: 2 / 8; +}</pre> + +<pre class="brush: html notranslate"><div class="col span2 content">16</div></pre> + +<p>容器16，现在将下一个可用的行上跨越第2列到第8列。</p> + +<p>我们可以像跨越列一样轻松地跨越多行：</p> + +<pre class="brush: css notranslate">.content { + grid-column: 2 / 8; + grid-row: 3 / 5; +}</pre> + +<p>现在将容器16，跨越行3至5以及列2至8。</p> + +<p>不需要使用边距伪造沟槽或显式计算它们的宽度 — CSS网格具有这种功能内置的<code>grid-gap</code> 属性。</p> + +<p>我们只是接触了CSS网格布局所有可能的皮毛，但在本文的行文中要理解的关键是，你不需要用网格创建一个网格系统——它已经是一个了。您可以编写CSS，将项目直接放入预定义的网格上。要了解更多，请看 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout Module</a>。</p> + +<h3 id="主动学习：编写自己的简单网格">主动学习：编写自己的简单网格</h3> + +<p>在<a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Introduction">CSS布局aticle简介中</a>，我们包括一个关于<a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Introduction#CSS_tables">CSS表</a>的部分，其中包括一个简单的形式示例（参见<a href="https://mdn.github.io/learning-area/css/styling-boxes/box-model-recap/css-tables-example.html">css-tables-example.html</a>实例和<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/box-model-recap/css-tables-example.html">源代码</a>）。我们希望您复制此示例，并执行以下操作：</p> + +<ol> + <li>删除 <div>元素 — 将会对你的内容处理行数和列。就不再需要此作为CSS网格。</li> + <li>使用CSS网格属性创建一个接近原始的表单布局，你必须设定容器元素的宽度，并思考怎么设置列的的间隙和行差距。</li> +</ol> + +<div class="note"> +<p><strong>注意</strong>：先去做这个，如果你真的卡住了，你可以检查你的代码和我们的<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/css-tables-as-grid.html">css-tables-as-grid.html</a>例子。不要作弊，先试着练习！</p> +</div> + +<h2 id="概要">概要</h2> + +<p>阅读这篇文章后，你应该已经了解了网格布局和网格框架如何在CSS中工作。你也已经窥探未来的CSS网格，现在应该明白，我们今天使用的网格框架本质上是一个临时的解决方案，直到我们有一个广泛支持的本地方式在CSS中实现这一点。</p> + +<p>{{PreviousMenu("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="在本单元中">在本单元中</h2> + +<ul> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Practical positioning examples</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Grids">Grids</a></li> +</ul> diff --git a/files/zh-cn/learn/css/css_layout/index.html b/files/zh-cn/learn/css/css_layout/index.html new file mode 100644 index 0000000000..eaf24d0bda --- /dev/null +++ b/files/zh-cn/learn/css/css_layout/index.html @@ -0,0 +1,78 @@ +--- +title: CSS 布局 +slug: Learn/CSS/CSS_layout +tags: + - Beginner + - CSS + - Floating + - Grids + - Guide + - Landing + - Layout + - Learn + - Module + - Multiple column + - Positioning + - Styling CSS boxes + - TopicStub + - flexbox + - float +translation_of: Learn/CSS/CSS_layout +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">此刻，我们已经看过CSS的基础知识，如何设置文本的样式，以及如何设置和操作内容所在的框。 现在是时候看看如何把你的盒子放在与视口相关的正确位置上。 我们已经涵盖了必要的先决条件，所以我们现在可以深入到CSS布局，查看不同的显示设置，涉及浮动和定位的传统布局方法，以及像flexbox这样的现代布局工具。</p> + +<h2 id="前提条件：">前提条件：</h2> + +<p>在开始前，你应该已经具备:</p> + +<ol> + <li>对HTML的基础了解，在<a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>部分讨论过的。</li> + <li>一定的CSS基础，在<a href="/zh-CN/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>部分讨论过的。</li> + <li>了解如何<a href="/zh-CN/docs/Learn/CSS/Building_blocks">样式化盒子模型</a>.</li> +</ol> + +<div class="note"> +<p><span style="font-size: 14px;"><strong>提示</strong></span>: 如果你在一台电脑/平板电脑/其他设备上工作，而你没有能力创建自己的文件，你可以尝试（大部分）在线编码程序中的代码示例，如 <a href="http://jsbin.com/">JSBin</a> 或 <a href="https://thimble.mozilla.org/">Thimble</a> 。</p> +</div> + +<h2 id="指南">指南</h2> + +<p>这些文章将提供在CSS中可用的基本布局工具和技术的指导。</p> + +<dl> + <dt><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Introduction">介绍 CSS 布局</a></dt> + <dd>本文将重述一些我们在之前的模块中已经涉及的CSS布局功能——例如不同的 {{cssxref("display")}} 值——并介绍我们将在本单元中涵盖的一些概念。</dd> + <dt><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Normal_Flow">正常布局流</a></dt> + <dd>这篇文章介绍正常的流布局，或者说，在你没有改变默认布局规则情况下的页面元素布局方式。</dd> + <dt><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Flexbox">弹性盒</a></dt> + <dd><a href="/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">弹性盒</a> 是一种新技术，但在如今各个浏览器都广泛支持的情况下，它已经开始准备广泛应用了。 弹性盒子提供了工具，允许快速创建曾经被证明用CSS很难实现的一些复杂，灵活的布局和功能。 本文将解释所有的基本原理。</dd> + <dt><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Grids">网格</a></dt> + <dd>网格是一个成熟的设计工具，许多现代网站布局是基于规则网格。在本文中，我们将看看基于网格的设计，以及如何使用CSS来创建网格——两者都通过现在的工具，和刚刚开始在浏览器中可用的新技术。</dd> + <dt><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Floats">浮动</a></dt> + <dd>最初对于文本块中的浮动图像，{{cssxref("float")}}属性已经成为在网页上创建多个列布局的最常用工具之一。本文解释所有。</dd> + <dt><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Positioning">定位</a></dt> + <dd>定位允许您从常规文档布局流程中取出元素，并使它们具有不同的行为，例如坐在另一个之上，或始终保持在浏览器视口内的同一位置。 本文解释不同的{{cssxref("position")}} 值，以及如何使用它们。</dd> + <dt><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">多列布局</a></dt> + <dd>多列布局声明提供了一种多列组织内容的方式，正如你在一些报纸中看到的那样。 这篇文章介绍怎么使用这一特性。</dd> + <dt><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Responsive_Design">响应式布局</a></dt> + <dd>随着越来越多的屏幕尺寸出现在支持Web的设备上，响应式Web设计（RWD）的概念出现了：一组允许网页改变其布局和外观以适应不同的屏幕宽度、分辨率等的实践。这一想法改变了我们为多设备Web设计的方式，在本文中，我们将帮助您了解掌握它所需的主要技术。</dd> + <dt><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Media_queries">媒体查询入门指南</a></dt> + <dd><strong>媒体查询</strong> 提供了一种仅当浏览器和设备环境与您指定的规则匹配时才应用css的方法，例如“viewport（视区）宽度大于480像素”。媒体查询是响应式Web设计的一个关键部分，因为它们允许您根据视区的大小创建不同的布局，但也可以用于检测有关网站运行环境的其他内容，例如用户是否使用触摸屏而不是鼠标。在本节中，您将首先了解媒体查询中使用的语法，然后在一个演示如何使简单设计具有响应性的示例中继续使用它们。</dd> + <dt><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">传统布局方法</a></dt> + <dd>网格系统是css布局中使用的一个非常常见的特性，在css网格布局之前，它们往往使用浮动或其他布局特性来实现。您可以将布局想象为一组列（例如4、6或12），然后将网页内容放入这些列中。在本文中，我们将探讨这些旧方法是如何工作的，以便您了解在处理旧项目时如何使用它们。</dd> + <dt><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">支持旧浏览器</a></dt> + <dd> + <p>在本模块中，我们建议使用弹性盒和网格作为主要布局方法。但是，您的网站会遇到使用旧浏览器的访问者，或者不支持您使用的新布局方法的浏览器。在网络开发上一直有这种状况——那就是随着新特性的开发，不同的浏览器将优先支持不同的特性。本文解释了如何使用现代web技术而不将使用旧版本浏览器的用户拒之门外。</p> + </dd> + <dt><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">测试: 基本布局掌握</a></dt> + <dd>通过布置网页来测试你对不同布局方法的知识的掌握。</dd> +</dl> + +<h2 id="参见">参见</h2> + +<dl> + <dt><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">练习定位案例</a></dt> + <dd>在最后一篇文章中介绍了定位的基础知识，现在将讨论构建几个真实世界的例子，以说明你可以通过定位做什么样的事情。</dd> +</dl> diff --git a/files/zh-cn/learn/css/css_layout/introduction/index.html b/files/zh-cn/learn/css/css_layout/introduction/index.html new file mode 100644 index 0000000000..ef7ff27324 --- /dev/null +++ b/files/zh-cn/learn/css/css_layout/introduction/index.html @@ -0,0 +1,704 @@ +--- +title: 介绍 CSS 布局 +slug: Learn/CSS/CSS_layout/Introduction +tags: + - CSS + - flexbox + - 介绍 + - 初学者 + - 学习 + - 定位 + - 布局 + - 文章 + - 流 + - 浮动 + - 网格 + - 表格 +translation_of: Learn/CSS/CSS_layout/Introduction +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}</div> + +<p class="summary">本文将回顾我们以前模块中已经介绍过的一些CSS布局特性——例如不同的{{cssxref("display")}}值——并介绍我们将在本模块中使用的一些概念。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>对HTML有一些基本的了解 (学习“<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML介绍</a>”), 并且理解CSS的工作原理 (学习“<a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS介绍</a>”).</td> + </tr> + <tr> + <th scope="row">目标:</th> + <td>对CSS页面布局技术有一个总体的了解. 每种技术都能够在后面的教程中获取到更加详细的信息.</td> + </tr> + </tbody> +</table> + +<p>CSS页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。在这个模块中将涉及更多关于页面<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Layout_mode">布局技术</a>的细节：</p> + +<ul> + <li>正常布局流</li> + <li>{{cssxref("display")}}属性</li> + <li>弹性盒子</li> + <li>网格</li> + <li>浮动</li> + <li>定位</li> + <li>CSS 表格布局</li> + <li>多列布局</li> +</ul> + +<p>每种技术都有它们的用途，各有优缺点，相互辅助。通过理解各个布局方法的设计理念，你能够找到构建你想要的网页需要的布局方案。</p> + +<h2 id="正常布局流Normal_flow">正常布局流(Normal flow)</h2> + +<p>正常布局流(normal flow)是指在不对页面进行任何布局控制时，浏览器默认的HTML布局方式。让我们快速地看一个HTML的例子：</p> + +<pre class="brush: html notranslate"><p>I love my cat.</p> + +<ul> + <li>Buy cat food</li> + <li>Exercise</li> + <li>Cheer up friend</li> +</ul> + +<p>The end!</p></pre> + +<p>默认情况下，浏览器的显示如下:</p> + +<p>{{ EmbedLiveSample('正常布局流Normal_flow', '100%', 200) }}</p> + +<p>注意，HTML元素完全按照源码中出现的先后次序显示——第一个段落、无序列表、第二个段落。</p> + +<p>出现在另一个元素下面的元素被描述为<strong>块</strong>元素，与出现在另一个元素旁边的<strong>内联元素</strong>不同，内联元素就像段落中的单个单词一样。</p> + +<div class="blockIndicator note"> +<p>注意：块元素内容的布局方向被描述为<strong>块方向</strong>。块方向在英语等具有水平<strong>书写模式</strong>(<code>writing mode</code>)的语言中垂直运行。它可以在任何垂直书写模式的语言中水平运行。对应的<strong>内联方向</strong>是内联内容（如句子）的运行方向。</p> +</div> + +<p>当你使用css创建一个布局时，你正在离开<strong>正常布局流</strong>，但是对于页面上的多数元素，<strong>正常布局流</strong>将完全可以创建你所需要的布局。从一个结构良好的Html文档开始是如此重要，因为你可以按照默认的方式来搭建页面，而不是自己发明轮子。</p> + +<p>下列布局技术会覆盖默认的布局行为：</p> + +<ul> + <li><strong> {{cssxref("display")}} </strong>属性 — 标准的value,比如<code>block</code>, <code>inline</code> 或者 <code>inline-block</code> 元素在正常布局流中的表现形式 (见 <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">Types of CSS boxes</a>). 接着是全新的布局方式，通过设置<code>display</code>的值, 比如 <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids">CSS Grid</a> 和 <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>.</li> + <li><strong>浮动</strong>——应用 <strong>{{cssxref("float")}}</strong> 值，诸如 <code>left</code> 能够让块级元素互相并排成一行，而不是一个堆叠在另一个上面。</li> + <li><strong>{{cssxref("position")}} </strong>属性 — 允许你精准设置盒子中的盒子的位置，正常布局流中，默认为 <code>static</code> ，使用其它值会引起元素不同的布局方式，例如将元素固定到浏览器视口的左上角。</li> + <li><strong>表格布局</strong>— 表格的布局方式可以用在非表格内容上，可以使用<code>display: table</code>和相关属性在非表元素上使用。</li> + <li><strong>多列布局</strong>— 这个 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns">Multi-column layout</a> 属性 可以让块按列布局，比如报纸的内容就是一列一列排布的。</li> +</ul> + +<h2 id="display属性">display属性</h2> + +<p>在css中实现页面布局的主要方法是设定<code>display</code>属性的值。此属性允许我们更改默认的显示方式。正常流中的所有内容都有一个<code>display</code>的值，用作元素的默认行为方式。例如，英文段落显示在一个段落的下面，这是因为它们的样式是<code>display:block</code>。如果在段落中的某个文本周围创建链接，则该链接将与文本的其余部分保持内联，并且不会打断到新行。这是因为{{htmlelement("a")}}元素默认为<code>display:inline</code>。</p> + +<p>您可以更改此默认显示行为。例如，{{htmlelement("li")}}元素默认为<code>display:block</code>，这意味着在我们的英文文档中，列表项显示为一个在另一个之下。如果我们将显示值更改为<code>inline</code>，它们现在将显示在彼此旁边，就像单词在句子中所做的那样。事实上，您可以更改任何元素的<code>display</code>值，这意味着您可以根据它们的语义选择html元素，而不必关心它们的外观。他们的样子是你可以改变的。</p> + +<p>除了可以通过将一些内容从<code>block</code>转换为<code>inline</code>（反之亦然）来更改默认表示形式之外，还有一些更大的布局方法以<code>display</code>值开始。但是，在使用这些属性时，通常需要调用其他属性。在讨论布局时，对我们来说最重要的两个值是<code>display</code>:<code>flex</code>和<code>display</code>:<code>grid</code>。</p> + +<h2 id="弹性盒子Flexbox">弹性盒子(Flexbox)</h2> + +<p>Flexbox 是CSS 弹性盒子布局模块（<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexible Box Layout</a> Module）的缩写，它被专门设计出来用于创建横向或是纵向的一维页面布局。要使用flexbox，你只需要在想要进行flex布局的父元素上应用<code>display: flex</code> ，所有直接子元素都将会按照flex进行布局。我们来看一个例子。</p> + +<p>下面这些HTML标记描述了一个class为<code>wrapper</code>的容器元素，它的内部有三个<code><div></code>元素。它们在我们的英文文档当中，会默认地作为块元素从上到下进行显示。</p> + +<p>现在，当我们把<code>display: flex</code>添加到它的父元素时，这三个元素就自动按列进行排列。这是由于它们变成了<em>flex项(flex items)</em>，按照flex容器（也就是它们的父元素）的一些flex相关的初值进行flex布局：它们整整齐齐排成一行，是因为父元素上<code>flex-direction</code>的初值是<code>row</code>。它们全都被拉伸至和最高的元素高度相同，是因为父元素上<code>align-items</code>属性的初值是<code>stretch</code>。这就意味着所有的子元素都会被拉伸到它们的flex容器的高度，在这个案例里就是所有flex项中最高的一项。所有项目都从容器的开始位置进行排列，排列成一行后，在尾部留下一片空白。</p> + +<div id="Flex_1"> +<div class="hidden"> +<h6 id="Flexbox_Example_1">Flexbox Example 1</h6> + +<pre class="brush: css notranslate">* {box-sizing: border-box;} + +.wrapper > div { + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +} + </pre> +</div> + +<pre class="brush: css notranslate">.wrapper { + display: flex; +} +</pre> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three</div> +</div> +</pre> +</div> + +<p>{{ EmbedLiveSample('Flex_1', '300', '200') }}</p> + +<p>除了上述可以被应用到flex容器的属性以外，还有很多属性可以被应用到flex项(flex items)上面。这些属性可以改变flex项在flex布局中占用宽/高的方式，允许它们通过伸缩来适应可用空间。</p> + +<p>作为一个简单的例子，我们可以在我们的所有子元素上添加{{cssxref("flex")}} 属性，并赋值为<code>1</code>，这会使得所有的子元素都伸展并填充容器，而不是在尾部留下空白，如果有更多空间，那么子元素们就会变得更宽，反之，他们就会变得更窄。除此之外，如果你在HTML标记中添加了一个新元素，那么它们也会变得更小，来为新元素创造空间——不管怎样，最终它们会调整自己直到占用相同宽度的空间。</p> + +<div id="Flex_2"> +<div class="hidden"> +<h6 id="Flexbox_Example_2">Flexbox Example 2</h6> + +<pre class="brush: css notranslate"> * {box-sizing: border-box;} + + .wrapper > div { + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; + } + </pre> +</div> + +<pre class="brush: css notranslate">.wrapper { + display: flex; +} + +.wrapper > div { + flex: 1; +} +</pre> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three</div> +</div> +</pre> +</div> + +<p>{{ EmbedLiveSample('Flex_2', '300', '200') }}</p> + +<div class="note"> +<p><strong>注意：</strong>为了找到更多关于Flexbox的信息，看看我们的 <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a> 的文章。</p> +</div> + +<h2 id="Grid布局">Grid布局</h2> + +<p>Flexbox用于设计横向或纵向的布局，而Grid布局则被设计用于同时在两个维度上把元素按行和列排列整齐。</p> + +<p>同flex一样，你可以通过指定display的值来转到grid布局：<code>display: grid</code>。下面的例子使用了与flex例子类似的HTML标记，描述了一个容器和若干子元素。除了使用<code>display:grid</code>，我们还分别使用 {{cssxref("grid-template-rows")}} 和 {{cssxref("grid-template-columns")}} 两个属性定义了一些行和列的轨道。定义了三个<code>1fr</code>的列，还有两个<code>100px</code>的行之后，无需再在子元素上指定任何规则，它们自动地排列到了我们创建的格子当中。</p> + +<div id="Grid_1"> +<div class="hidden"> +<h6 id="Grid_example_1">Grid example 1</h6> + +<pre class="brush: css notranslate"> * {box-sizing: border-box;} + + .wrapper > div { + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; + } + </pre> +</div> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 100px 100px; + grid-gap: 10px; +} +</pre> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three</div> + <div class="box4">Four</div> + <div class="box5">Five</div> + <div class="box6">Six</div> +</div> +</pre> +</div> + +<p>{{ EmbedLiveSample('Grid_1', '300', '330') }}</p> + +<p>一旦你拥有了一个grid，你也可以显式地将元素摆放在里面，而不是依赖于浏览器进行自动排列。在下面的第二个例子里，我们定义了一个和上面一样的grid，但是这一次我们只有三个子元素。我们利用 {{cssxref("grid-column")}} 和 {{cssxref("grid-row")}} 两个属性来指定每一个子元素应该从哪一行/列开始，并在哪一行/列结束。这就能够让子元素在多个行/列上展开。</p> + +<div id="Grid_2"> +<div class="hidden"> +<h6 id="Grid_example_2">Grid example 2</h6> + +<pre class="brush: css notranslate"> * {box-sizing: border-box;} + + .wrapper > div { + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; + } + </pre> +</div> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 100px 100px; + grid-gap: 10px; +} + +.box1 { + grid-column: 2 / 4; + grid-row: 1; +} + +.box2 { + grid-column: 1; + grid-row: 1 / 3; +} + +.box3 { + grid-row: 2; + grid-column: 3; +} +</pre> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three</div> +</div> +</pre> +</div> + +<p>{{ EmbedLiveSample('Grid_2', '300', '330') }}</p> + +<div class="note"> +<p><strong>注意</strong>: 这两个例子只是展示了grid布局的冰山一角，要深入了解grid布局，请参阅我们的文章<a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid Layout</a>。</p> +</div> + +<p>这篇指南的其余部分介绍了其他的布局方式，它们与你的页面的主要布局结构关系不大，但是却能够帮助你实现特殊的操作。同时，只要你理解了每一个布局任务的初衷，你就能够马上意识到哪一种布局更适合你的组件。</p> + +<h2 id="浮动">浮动</h2> + +<p>把一个元素“浮动”(float)起来，会改变该元素本身和在正常布局流（normal flow）中跟随它的其他元素的行为。这一元素会浮动到左侧或右侧，并且从正常布局流(normal flow)中移除，这时候其他的周围内容就会在这个被设置浮动({{cssxref("float")}})的元素周围环绕。</p> + +<p>{{cssxref("float")}} 属性有四个可能的值：</p> + +<ul> + <li><code>left</code> — 将元素浮动到左侧。</li> + <li><code>right</code> — 将元素浮动到右侧。</li> + <li><code>none</code> — 默认值, 不浮动。</li> + <li><code>inherit</code> — 继承父元素的浮动属性。</li> +</ul> + +<p>在下面这个例子当中，我们把一个<code><div></code>元素浮动到左侧，并且给了他一个右侧的{{cssxref("margin")}}，把文字推开。这给了我们文字环绕着这个<code><div></code>元素的效果，在现代网页设计当中，这是你唯一需要学会的事情。</p> + +<div id="Float_1"> +<div class="hidden"> +<h6 id="Floats_example">Floats example</h6> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 900px; + margin: 0 auto; +} + +p { + line-height: 2; + word-spacing: 0.1rem; +} + +.box { + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); + padding: 10px; + border-radius: 5px; +} +</pre> +</div> + +<pre class="brush: html notranslate"><h1>Simple float example</h1> + +<div class="box">Float</div> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +</pre> + +<pre class="brush: css notranslate"> +.box { + float: left; + width: 150px; + height: 150px; + margin-right: 30px; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('Float_1', '100%', 600) }}</p> + +<div class="note"> +<p><strong>注意: </strong>: CSS浮动的知识会在我们关于 <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">浮动</a>的教程当中被详细地解释。除此之外，如果您想要了解在Flexbox和Grid布局出现之前我们是如何进行列布局的（仍然有可能碰到这种情形），请阅读我们关于<a href="/zh-CN/docs/Learn/CSS/CSS_layout/%E4%BC%A0%E7%BB%9F%E7%9A%84%E5%B8%83%E5%B1%80%E6%96%B9%E6%B3%95">传统布局方式</a>的文章.</p> +</div> + +<h2 id="定位技术">定位技术</h2> + +<p>定位(positioning)能够让我们把一个元素从它原本在正常布局流(normal flow)中应该在的位置移动到另一个位置。定位(positioning)并不是一种用来给你做主要页面布局的方式，它更像是让你去管理和微调页面中的一个特殊项的位置。</p> + +<p>有一些非常有用的技术在特定的布局下依赖于{{cssxref("position")}}属性。同时，理解定位(positioning)也能够帮助你理解正常布局流(normal flow)，理解把一个元素移出正常布局流(normal flow)是怎么一回事。</p> + +<p>有五种主要的定位类型需要我们了解：</p> + +<ul> + <li><strong>静态定位(Static positioning)</strong>是每个元素默认的属性——它表示“将元素放在文档布局流的默认位置——没有什么特殊的地方”。</li> + <li><strong>相对定位(Relative positioning)</strong>允许我们相对于元素在正常的文档流中的位置移动它——包括将两个元素叠放在页面上。这对于微调和精准设计(design pinpointing)非常有用。</li> + <li><strong>绝对定位(Absolute positioning)</strong>将元素完全从页面的正常布局流(normal layout flow)中移出，类似将它单独放在一个图层中。我们可以将元素相对于页面的 <code><html></code> 元素边缘固定，或者相对于该元素的<em>最近被定位祖先元素(nearest positioned ancestor element)</em>。绝对定位在创建复杂布局效果时非常有用，例如通过标签显示和隐藏的内容面板或者通过按钮控制滑动到屏幕中的信息面板。</li> + <li><strong>固定定位(Fixed positioning)</strong>与绝对定位非常类似，但是它是将一个元素相对浏览器视口固定，而不是相对另外一个元素。 这在创建类似在整个页面滚动过程中总是处于屏幕的某个位置的导航菜单时非常有用。</li> + <li><strong>粘性定位(Sticky positioning)</strong>是一种新的定位方式，它会让元素先保持和<code>position: static</code>一样的定位，当它的相对视口位置(offset from the viewport)达到某一个预设值时，他就会像<code>position: fixed</code>一样定位。</li> +</ul> + +<h3 id="简单定位示例">简单定位示例</h3> + +<p>我们将展示一些示例代码来熟悉这些布局技术. 这些示例代码都作用在下面这一个相同的HTML上：</p> + +<pre class="brush: html notranslate"><h1>Positioning</h1> + +<p>I am a basic block level element.</p> +<p class="positioned">I am a basic block level element.</p> +<p>I am a basic block level element.</p></pre> + +<p>该HTML将使用以下CSS默认样式：</p> + +<pre class="brush: css notranslate">body { + width: 500px; + margin: 0 auto; +} + +p { + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); + padding: 10px; + margin: 10px; + border-radius: 5px; +}</pre> + +<p>渲染效果如下:</p> + +<p>{{ EmbedLiveSample('简单定位示例', '100%', 300) }}</p> + +<h3 id="相对定位">相对定位</h3> + +<p>相对定位(relative positioning)让你能够把一个正常布局流(normal flow)中的元素从它的默认位置按坐标进行相对移动。比如将一个图标往下调一点，以便放置文字. 我们可以通过下面的规则添加相对定位来实现效果: </p> + +<pre class="brush: css notranslate">.positioned { + position: relative; + top: 30px; + left: 30px; +}</pre> + +<p>这里我们给中间段落的{{cssxref("position")}} 一个 <code>relative</code>值——这属性本身不做任何事情，所以我们还添加了{{cssxref("top")}}和{{cssxref("left")}}属性。这些可以将受影响的元素向下向右移——这可能看起来和你所期待的相反，但你需要把它看成是左边和顶部的元素被“推开”一定距离，这就导致了它的向下向右移动。</p> + +<p>添加此代码将给出以下结果：</p> + +<div id="Relative_1"> +<div class="hidden"> +<h6 id="Relative_positioning_example">Relative positioning example</h6> + +<pre class="brush: html notranslate"><h1>Relative positioning</h1> + +<p>I am a basic block level element.</p> +<p class="positioned">This is my relatively positioned element.</p> +<p>I am a basic block level element.</p></pre> + +<pre class="brush: css notranslate">body { + width: 500px; + margin: 0 auto; +} + +p { + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); + padding: 10px; + margin: 10px; + border-radius: 5px; +} +</pre> +</div> + +<pre class="brush: css notranslate">.positioned { + position: relative; + background: rgba(255,84,104,.3); + border: 2px solid rgb(255,84,104); + top: 30px; + left: 30px; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('Relative_1', '100%', 300) }}</p> + +<h3 id="绝对定位">绝对定位</h3> + +<p>绝对定位用于将元素移出正常布局流(normal flow)，以坐标的形式相对于它的容器定位到web页面的任何位置，以创建复杂的布局。有趣的是，它经常被用于与相对定位和浮动的协同工作。</p> + +<p>回到我们最初的非定位示例，我们可以添加以下的CSS规则来实现绝对定位：</p> + +<pre class="brush: css notranslate">.positioned { + position: absolute; + top: 30px; + left: 30px; +}</pre> + +<p>这里我们给我们的中间段一个{{cssxref("position")}}的 <code>absolute</code>值，并且和前面一样加上 {{cssxref("top")}} 和{{cssxref("left")}} 属性。但是，添加此代码将给出以下结果：</p> + +<div id="Absolute_1"> +<div class="hidden"> +<h6 id="Absolute_positioning_example">Absolute positioning example</h6> + +<pre class="brush: html notranslate"><h1>Absolute positioning</h1> + +<p>I am a basic block level element.</p> +<p class="positioned">This is my absolutely positioned element.</p> +<p>I am a basic block level element.</p></pre> + +<pre class="brush: css notranslate">body { + width: 500px; + margin: 0 auto; +} + +p { + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); + padding: 10px; + margin: 10px; + border-radius: 5px; +}</pre> +</div> + +<pre class="brush: css notranslate">.positioned { + position: absolute; + background: rgba(255,84,104,.3); + border: 2px solid rgb(255,84,104); + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Absolute_1', '100%', 300) }}</p> + +<p>这和之前截然不同！定位元素现在已经与页面布局的其余部分完全分离，并位于页面的顶部。其他两段现在靠在一起，好像之前那个中间段落不存在一样。{{cssxref("top")}}和{{cssxref("left")}}属性对绝对位置元素的影响不同于相对位置元素。在这一案例当中，他们没有指定元素相对于原始位置的移动程度。相反，在这一案例当中，它们指定元素应该从页面边界的顶部和左边的距离(确切地说，是 <code><html></code>元素的距离)。我们也可以修改作为容器的那个元素（在这里是<code><html></code>元素），要了解这方面的知识，参见关于<a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning">定位(positioning)</a>的课程</p> + +<p>我们现在暂时不讨论固定定位（ fixed positioning ）——它基本上以相同的方式工作，除了它仍然固定在浏览器窗口的边缘，而不是它定位的父节点的边缘。</p> + +<h3 id="固定定位">固定定位</h3> + +<p>固定定位(fixed positioning)同绝对定位(absolute positioning)一样，将元素从文档流(document flow)当中移出了。但是，定位的坐标不会应用于"容器"边框来计算元素的位置，而是会应用于视口(viewport)边框。利用这一特性，我们可以轻松搞出一个固定位置的菜单，而不受底下的页面滚动的影响。</p> + +<p>在这个例子里面，我们在HTML加了三段很长的文本来使得页面可滚动，又加了一个带有<code>position: fixed</code>的盒子。</p> + +<pre class="brush: html notranslate"><h1>Fixed positioning</h1> + +<div class="positioned">Fixed</div> + +<p>Paragraph 1.</p> +<p>Paragraph 2.</p> +<p>Paragraph 3.</p> +</pre> + +<div id="Fixed_1"> +<div class="hidden"> +<h6 id="Fixed_positioning_example">Fixed positioning example</h6> + +<pre class="brush: html notranslate"><h1>Fixed positioning</h1> + +<div class="positioned">Fixed</div> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +</pre> + +<pre class="brush: css notranslate">body { + width: 500px; + margin: 0 auto; +} + +.positioned { + background: rgba(255,84,104,.3); + border: 2px solid rgb(255,84,104); + padding: 10px; + margin: 10px; + border-radius: 5px; +}</pre> +</div> + +<pre class="brush: css notranslate">.positioned { + position: fixed; + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Fixed_1', '100%', 200) }}</p> + +<h3 id="粘性定位">粘性定位</h3> + +<p>粘性定位(sticky positioning)是最后一种我们能够使用的定位方式。它将默认的静态定位(static positioning)和固定定位(fixed positioning)相混合。当一个元素被指定了<code>position: sticky</code>时，它会在正常布局流中滚动，直到它出现在了我们给它设定的相对于容器的位置，这时候它就会停止随滚动移动，就像它被应用了<code>position: fixed</code>一样。</p> + +<div id="Sticky_1"> +<div class="hidden"> +<h6 id="Sticky_positioning_example">Sticky positioning example</h6> + +<pre class="brush: html notranslate"><h1>Sticky positioning</h1> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<div class="positioned">Sticky</div> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> </pre> + +<pre class="brush: css notranslate">body { + width: 500px; + margin: 0 auto; +} + +.positioned { + background: rgba(255,84,104,.3); + border: 2px solid rgb(255,84,104); + padding: 10px; + margin: 10px; + border-radius: 5px; +}</pre> +</div> + +<pre class="brush: css notranslate">.positioned { + position: sticky; + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Sticky_1', '100%', 200) }}</p> + +<div class="note"> +<p><strong>注意</strong>: 想要发现更多关于定位的信息，请参阅我们的<a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a>和<a href="/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Practical positioning examples</a>文章。</p> +</div> + +<h2 id="表格布局">表格布局</h2> + +<p>HTML表格对于显示表格数据是很好的，但是很多年前——在浏览器中支持基本的CSS之前——web开发人员过去也常常使用表格来完成整个网页布局——将它们的页眉、页脚、不同的列等等放在不同的表行和列中。这在当时是有效的，但它有很多问题——表布局是不灵活的，繁重的标记，难以调试和语义上的错误（比如，屏幕阅读器用户在导航表布局方面有问题）。</p> + +<p>一个{{htmlelement("table")}}标签之所以能够像表格那样展示，是由于css默认给{{htmlelement("table")}}标签设置了一组table布局属性。当这些属性被应用于排列非{{htmlelement("table")}}元素时，这种用法被称为“使用CSS表格”。</p> + +<p>下面这个例子展示了一个这样的用法。使用CSS表格来进行布局，在现在这个时间点应该被认为是一种传统方法，它通常会被用于兼容一些不支持Flexbox和Grid的浏览器。</p> + +<p>让我们来看一个例子。首先，创建HTML表单的一些简单标记。每个输入元素都有一个标签，我们还在一个段落中包含了一个标题。为了进行布局，每个标签/输入对都封装在{{htmlelement("div")}}中。</p> + +<pre class="brush: html notranslate"><form> + <p>First of all, tell us your name and age.</p> + <div> + <label for="fname">First name:</label> + <input type="text" id="fname"> + </div> + <div> + <label for="lname">Last name:</label> + <input type="text" id="lname"> + </div> + <div> + <label for="age">Age:</label> + <input type="text" id="age"> + </div> +</form></pre> + +<p>现在，我们例子中的CSS。除了使用 {{cssxref("display")}} 属性外，大多数CSS都是相当普通的。 {{htmlelement("form")}}, {{htmlelement("div")}}, {{htmlelement("label")}}和{{htmlelement("input")}}被告知要分别显示表、表行和表单元——基本上，它们会像HTML表格标记一样，导致标签和输入在默认情况下排列整齐。我们所要做的就是添加一些大小、边缘等等，让一切看起来都好一点，我们就完成了。</p> + +<p>你会注意到标题段落已经给出了 <code>display: table-caption;</code>——这使得它看起来就像一个表格{{htmlelement("caption")}} ——同时出于设计需要，我们通过<code>caption-side: bottom;</code> 告诉标题应该展示在表格的底部，即使这个{{htmlelement("p")}}标记在源码中是在<code><input></code>之前。这就能让你有一点灵活的弹性。</p> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +form { + display: table; + margin: 0 auto; +} + +form div { + display: table-row; +} + +form label, form input { + display: table-cell; + margin-bottom: 10px; +} + +form label { + width: 200px; + padding-right: 5%; + text-align: right; +} + +form input { + width: 300px; +} + +form p { + display: table-caption; + caption-side: bottom; + width: 300px; + color: #999; + font-style: italic; +}</pre> + +<p>结果如下：</p> + +<p>{{ EmbedLiveSample('CSS_表格', '100%', '170') }}</p> + +<p>你可以在 <a href="https://mdn.github.io/learning-area/css/styling-boxes/box-model-recap/css-tables-example.html">css-tables-example.html</a> 看到预览版 (也可以见<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/box-model-recap/css-tables-example.html">源码</a>)</p> + +<h2 id="多列布局">多列布局</h2> + +<p>多列布局模组给了我们 一种把内容按列排序的方式，就像文本在报纸上排列那样。由于在web内容里让你的用户在一个列上通过上下滚动来阅读两篇相关的文本是一种非常低效的方式，那么把内容排列成多列可能是一种有用的技术。</p> + +<p>要把一个块转变成多列容器(multicol container)，我们可以使用 {{cssxref("column-count")}}属性来告诉浏览器我们需要多少列，也可以使用{{cssxref("column-width")}}来告诉浏览器以至少某个宽度的尽可能多的列来填充容器。</p> + +<p>在下面这个例子中，我们从一个class为<code>container</code>的<code><div></code>容器元素里边的一块HTML开始。</p> + +<pre class="brush: html notranslate"><div class="container"> + <h1>Multi-column layout</h1> + + <p>Paragraph 1.</p> + <p>Paragraph 2.</p> + +</div> +</pre> + +<p>我们指定了该容器的<code>column-width</code>为200像素，这让浏览器创建了尽可能多的200像素的列来填充这一容器。接着他们共同使用剩余的空间来伸展自己的宽度。</p> + +<div id="Multicol_1"> +<div class="hidden"> +<h6 id="Multicol_example">Multicol example</h6> + +<pre class="brush: html notranslate"> <div class="container"> + <h1>Multi-column Layout</h1> + + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + + + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + + </div> + </pre> + +<pre class="brush: css notranslate">body { max-width: 800px; margin: 0 auto; } </pre> +</div> + +<pre class="brush: css notranslate"> .container { + column-width: 200px; + }</pre> +</div> + +<p>{{ EmbedLiveSample('Multicol_1', '100%', 200) }}</p> + +<h2 id="总结">总结</h2> + +<p>本文提供了关于您应该了解的所有布局技术的简要概述。阅读更多关于每一项技术的信息！</p> + +<p>{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}</p> diff --git a/files/zh-cn/learn/css/css_layout/media_queries/index.html b/files/zh-cn/learn/css/css_layout/media_queries/index.html new file mode 100644 index 0000000000..06f7fb7d51 --- /dev/null +++ b/files/zh-cn/learn/css/css_layout/media_queries/index.html @@ -0,0 +1,425 @@ +--- +title: 媒体查询入门指南 +slug: Learn/CSS/CSS_layout/Media_queries +translation_of: Learn/CSS/CSS_layout/Media_queries +--- +<p>{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}</p> + +<p><strong>CSS媒体查询</strong>为你提供了一种应用CSS的方法，仅在浏览器和设备的环境与你指定的规则相匹配的时候CSS才会真的被应用，例如“视口宽于480像素”的时候。媒体查询是响应式Web设计的关键部分，因为它允许你按照视口的尺寸创建不同的布局，不过它也可以用来探测和你的站点运行的环境相关联的其它条件，比如用户是在使用触摸屏还是鼠标。在本节课，你将会先学习到媒体查询的语法，然后继续在一个被安排好的示例中使用它，这个示例还会告诉你一个简单的设计是可以怎么被弄成响应式的。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">学习前提：</th> + <td>HTML基础知识（学习<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>），对CSS工作方式的大致了解（学习<a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a>和<a href="/en-US/docs/Learn/CSS/Building_blocks">CSS building blocks</a>）</td> + </tr> + <tr> + <th scope="row">目标：</th> + <td>理解如何使用媒体查询和用它建立响应式设计的最常见方法。</td> + </tr> + </tbody> +</table> + +<h2 id="媒体查询基础">媒体查询基础</h2> + +<p>最简单的媒体查询语法看起来是像这样的：</p> + +<pre class="brush: css notranslate">@media <em>media-type</em> and (<em>media-feature-rule</em>) { + /* CSS rules go here */ +}</pre> + +<p>它由以下部分组成：</p> + +<ul> + <li>一个媒体类型，告诉浏览器这段代码是用在什么类型的媒体上的（例如印刷品或者屏幕）；</li> + <li>一个媒体表达式，是一个被包含的CSS生效所需的规则或者测试；</li> + <li>一组CSS规则，会在测试通过且媒体类型正确的时候应用。</li> +</ul> + +<h3 id="媒体类型">媒体类型</h3> + +<p>你可以指定的媒体类型为：</p> + +<ul> + <li><code>all</code></li> + <li><code>print</code></li> + <li><code>screen</code></li> + <li><code>speech</code></li> +</ul> + +<p>下面的媒体查询将会在页面被打印的时候把body设定为只有12pt大小。当页面在浏览器中载入的时候，它将不会生效。</p> + +<pre class="brush: css notranslate"><code>@media print { + body { + font-size: 12pt; + } +}</code></pre> + +<div class="blockIndicator note"> +<p><strong>备注：</strong>这里的媒体类型是和所谓的{{glossary("MIME type")}}不同的东西。</p> +</div> + +<div class="blockIndicator note"> +<p><strong>备注：</strong> 在第三级媒体查询规范中，定义了其他一些媒体类型，它们已经不被建议使用，而且应该被避免使用。</p> +</div> + +<div class="blockIndicator note"> +<p><strong>备注：</strong>媒体类型是可选的，如果你没有在媒体查询中指示一个媒体类型的话，那么媒体查询默认会设为用于全部媒体类型。</p> +</div> + +<h3 id="媒体特征规则">媒体特征规则</h3> + +<p>在指定了类型以后，你可以用一条规则指向一种媒体特征。</p> + +<h4 id="宽和高">宽和高</h4> + +<p>为了建立响应式设计（已经广受浏览器支持），我们一般最常探测的特征是视口宽度，而且我们可以使用<code>min-width</code>、<code>max-width</code>和<code>width</code>媒体特征，在视口宽度大于或者小于某个大小——或者是恰好处于某个大小——的时候，应用CSS。</p> + +<p>这些特征是用来创建响应不同屏幕大小的布局的。例如，要想在视口正好是600像素的时候，让body的文本变为红色，你可能会使用下面的媒体查询。</p> + +<pre class="brush: css notranslate"><code>@media screen and (width: 600px) { + body { + color: red; + } +}</code></pre> + +<p>在浏览器中<a href="https://mdn.github.io/css-examples/learn/media-queries/width.html">打开这个示例</a>，或者<a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/width.html">查看源代码</a>。</p> + +<p><code>width</code>（和<code>height</code>）媒体特征可以以数值范围使用，于是就有了<code>min-</code>或者<code>max-</code>的前缀，指示所给的值是最小值还是最大值。例如，要让颜色在视口窄于400像素的时候变成蓝色的话，可以用<code>max-width</code>：</p> + +<pre class="brush: css notranslate"><code>@media screen and (max-width: 400px) { + body { + color: blue; + } +}</code></pre> + +<p>在浏览器中<a href="https://mdn.github.io/css-examples/learn/media-queries/max-width.html">打开示例</a>，或者<a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/max-width.html">查看源代码</a>。</p> + +<p>实践中，使用最小值和最大值对响应式设计有很多的用处，所以你会很少见到<code>width</code>或<code>height</code> 单独使用的情况。</p> + +<p>还有许多其他媒体特征可以供你测试，尽管于4级和5级媒体查询规范中引入了一些新特征，它们受浏览器支持仍然有限。在MDN上，每个特征都已经同浏览器支持信息一同记载下来，你可以在<a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">使用媒体查询：媒体特征</a>中找到一张完整的列表。</p> + +<h4 id="朝向">朝向</h4> + +<p>一个受到良好支持的媒体特征是<code>orientation</code>，我们可以用它测得竖放（portrait mode）和横放（landscape mode）模式。要在设备处于横向的时候改变body文本颜色的话，可使用下面的媒体查询。</p> + +<pre class="brush: css notranslate"><code>@media (orientation: landscape) { + body { + color: rebeccapurple; + } +}</code></pre> + +<p>在浏览器中<a href="https://mdn.github.io/css-examples/learn/media-queries/orientation.html">打开此示例</a>，或者<a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/orientation.html">查看源代码</a>。</p> + +<p>标准的桌面视图是横放朝向的，在这种朝向上能够表现良好的设计，在处于竖放模式的手机或平板电脑上可能不会表现得这么好。对朝向的测试可以帮你建立一个为竖放设备优化的布局。</p> + +<h4 id="使用指点设备">使用指点设备</h4> + +<p>作为四级规范的一部分，<code>hover</code>媒体特征被引入了进来。这种特征意味着你可以测试用户是否能在一个元素上悬浮，这也基本就是说他们正在使用某种指点设备，因为触摸屏和键盘导航是没法实现悬浮的。</p> + +<pre class="brush: css notranslate"><code>@media (hover: hover) { + body { + color: rebeccapurple; + } +}</code></pre> + +<p>在浏览器中<a href="https://mdn.github.io/css-examples/learn/media-queries/hover.html">打开此示例</a>，或者<a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/hover.html">查看源代码</a>。</p> + +<p>如果我们知道用户不能悬浮的话，我们可以默认显示一些交互功能。对于能够悬浮的用户，我们可以选择在悬浮在链接上的时候，让这些功能可用。</p> + +<p>还是在四级规范中，出现了<code>pointer</code>媒体特征。它可取三个值：<code>none</code>、<code>fine</code>和<code>coarse</code>。<code>fine</code>指针是类似于鼠标或者触控板的东西，它让用户可以精确指向一片小区域。<code>coarse</code>指针是你在触摸屏上的手指。<code>none</code>值意味着，用户没有指点设备，也许是他们正只使用键盘导航，或者是语音命令。</p> + +<p>使用<code>pointer</code>可以在用户使用屏幕时进行交互时，帮你更好地设计响应这种交互的界面。例如，如果你知道用户正在用触摸屏设备交互的时候，你可以建立更大的响应区域。</p> + +<h2 id="更复杂的媒体查询">更复杂的媒体查询</h2> + +<p>有了所有不同的可用的媒体查询，你可能想要把它们混合起来，或者建立查询列表——其中的任何一个都可以匹配生效。</p> + +<h3 id="媒体查询中的“与”逻辑">媒体查询中的“与”逻辑</h3> + +<p>为了混合媒体特征，你可以以与在上面使用<code>and</code>很相同的方式，用<code>and</code>来混合媒体类型和特征。例如，我们可能会想要测得<code>min-width</code>和<code>orientation</code>，而body的文字只会在视口至少为400像素宽，且设备横放时变为蓝色。</p> + +<pre class="brush: css notranslate"><code>@media screen and (min-width: 400px) and (orientation: landscape) { + body { + color: blue; + } +}</code></pre> + +<p>在浏览器中<a href="https://mdn.github.io/css-examples/learn/media-queries/and.html">打开此示例</a>，或者<a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/and.html">查看源代码</a>。</p> + +<h3 id="媒体查询中的“或”逻辑">媒体查询中的“或”逻辑</h3> + +<p>如果你有一组查询，且要其中的任何一个都可以匹配的话，那么你可以使用逗号分开这些查询。在下面的示例中，文本会在视口至少为400像素宽的时候<strong>或者</strong>设备处于横放状态的时候变为蓝色。如果其中的任何一项成立，那么查询就匹配上了。</p> + +<pre class="brush: css notranslate"><code>@media screen and (min-width: 400px), screen and (orientation: landscape) { + body { + color: blue; + } +}</code></pre> + +<p>在浏览器中<a href="https://mdn.github.io/css-examples/learn/media-queries/or.html">打开此示例</a>，或者<a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/or.html">查看源代码</a>。</p> + +<h3 id="媒体查询中的“非”逻辑">媒体查询中的“非”逻辑</h3> + +<p>你可以用<code>not</code>操作符让整个媒体查询失效。这就直接反转了整个媒体查询的含义。因而在下面的例子中，文本只会在朝向为竖着的时候变成蓝色。</p> + +<pre class="brush: css notranslate"><code>@media not all and (orientation: landscape) { + body { + color: blue; + } +}</code></pre> + +<p>在浏览器中<a href="https://mdn.github.io/css-examples/learn/media-queries/not.html">打开此示例</a>，或者<a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/not.html">查看源代码</a>。</p> + +<h2 id="怎么选择断点">怎么选择断点</h2> + +<p>响应式设计的早期，许多设计者会尝试指向非常特定的屏幕尺寸。人们公布了流行的手机和平板的屏幕尺寸列表，以让设计者创建可以整齐地放在那些视口里面的设计。</p> + +<p>现在有多得多的设备，以及多种多样的尺寸，让这种事变得不再可行。这也就是说，将所有的设计用在特定的尺寸上以外，一个更好的方法是在内容某种程度上开始变得混乱的时候，改变尺寸的设计。也许线太长了，或者盒子状的外侧栏开始挤在一起而难以阅读。那就是你想要使用媒体查询，将设计变得对剩余可用空间更加友好的时候。这种方式意味着，它无关使用的设备的确切大小，每个范围都被照顾到了。引入媒体查询的点就叫做<strong>断点</strong>。</p> + +<p>火狐开发者工具中的<a href="/en-US/docs/Tools/Responsive_Design_Mode">响应式设计模式</a>能很好地帮助弄清楚断点应该设置在哪里。你能容易就能让视口变大和变小，然后看下可以在哪里加入媒体查询、调整设计，从而改善内容。</p> + +<p><img alt="A screenshot of a layout in a mobile view in Firefox DevTools." src="https://mdn.mozillademos.org/files/16867/rwd-mode.png" style="height: 917px; width: 1443px;"></p> + +<h2 id="主动学习：移动优先的响应式设计">主动学习：移动优先的响应式设计</h2> + +<p>泛泛地说，你可以采用两种方式实现响应式设计。你可以从桌面或者最宽的视图开始，然后随着视口变得越来越小，加上断点，把物件挪开；你也可以从最小的视图开始，随着视口变得越来越大，增添布局内容。第二种方式被叫做<strong>移动优先</strong>的响应式设计，很多时候是最值得仿效的做法。</p> + +<p>用在最小的那个设备上的视图很多时候都是一个简单的单列内容，很像正常文本流显示的那样。这意味着，你很可能不需要为小设备做多少布局设计，合适地安排下你的源代码，默认情况下你就可以得到可读的布局。</p> + +<p>下面的教程会领你用一个非常简单的布局熟悉这种方式。在生产站点上，你的媒体查询中可能会有更多的东西需要调整，但是它们的方法是完全一样的。</p> + +<h3 id="教程：一个简单的移动优先布局">教程：一个简单的移动优先布局</h3> + +<p>我们的起始点是一个HTML文档，上面应用了一些CSS，为布局的各部分加入了背景颜色。</p> + +<pre class="brush: css notranslate"><code>* { + box-sizing: border-box; +} + +body { + width: 90%; + margin: 2em auto; + font: 1em/1.3 Arial, Helvetica, sans-serif; +} + +a:link, +a:visited { + color: #333; +} + +nav ul, +aside ul { + list-style: none; + padding: 0; +} + +nav a:link, +nav a:visited { + background-color: rgba(207, 232, 220, 0.2); + border: 2px solid rgb(79, 185, 227); + text-decoration: none; + display: block; + padding: 10px; + color: #333; + font-weight: bold; +} + +nav a:hover { + background-color: rgba(207, 232, 220, 0.7); +} + +.related { + background-color: rgba(79, 185, 227, 0.3); + border: 1px solid rgb(79, 185, 227); + padding: 10px; +} + +.sidebar { + background-color: rgba(207, 232, 220, 0.5); + padding: 10px; +} + +article { + margin-bottom: 1em; +} +</code></pre> + +<p>我们没有改变过任何布局，但是文件的源代码是以让内容可读的方式排列的。这个开头是重要的，也是能够确保内容在由屏幕阅读器读出来的时候，让其可以理解的一步。</p> + +<pre class="brush: html notranslate"><code><body> + <div class="wrapper"> + <header> + <nav> + <ul> + <li><a href="">About</a></li> + <li><a href="">Contact</a></li> + <li><a href="">Meet the team</a></li> + <li><a href="">Blog</a></li> + </ul> + </nav> + </header> + <main> + <article> + <div class="content"> + <h1>Veggies!</h1> + <p> + ... + </p> + </div> + <aside class="related"> + <p> + ... + </p> + </aside> + </article> + + <aside class="sidebar"> + <h2>External vegetable-based links</h2> + <ul> + <li> + ... + </li> + </ul> + </aside> + </main> + + <footer><p>&copy;2019</p></footer> + </div> + </body> +</code></pre> + +<p>这个简单的布局在移动端上也能表现得很好。如果我们在开发者工具中的响应式设计模式里面查看这个布局的话，我们可以看到，它作为一个直截了当的站点移动版布局来说，表现得相当优秀。</p> + +<p>在浏览器里<a href="https://mdn.github.io/css-examples/learn/media-queries/step1.html">打开步骤一</a>，或者<a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/step1.html">查看源代码</a>。</p> + +<p><strong>如果你想要在我们继续的时候，按步骤来并尝试这个示例，在你的电脑上建立一个<a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/step1.html">step1.html</a>的本地副本。</strong></p> + +<p>从这里开始，脱拽响应式设计的窗口，让它变得变得更宽，直到你看到一行变得非常长，有足够空间把导航栏放在一个水平行里面。这是我们加入第一个媒体查询的地方。我们将会使用em，因为这意味着，如果用户已经增加了文本的大小，断点会在行差不多也是这样长，但是视口更宽的时候产生；而文本更小的时候，视口也会更窄。</p> + +<p><strong>将下面的代码加到你的step1.html的CSS底部。</strong></p> + +<pre class="brush: css notranslate"><code>@media screen and (min-width: 40em) { + article { + display: grid; + grid-template-columns: 3fr 1fr; + column-gap: 20px; + } + + nav ul { + display: flex; + } + + nav li { + flex: 1; + } +} +</code></pre> + +<p>这个CSS让我们的文章里面有了个两列布局，两栏分别是文章的内容和在aside元素中相关的信息。我们也已经用弹性盒把导航栏放在了一行里面。</p> + +<p>在浏览器中<a href="https://mdn.github.io/css-examples/learn/media-queries/step2.html">打开步骤二</a>，或者<a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/step2.html">查看源代码</a>。</p> + +<p>让我们继续增加宽度，直到我们觉得这里有了足够多的空间来放置侧栏，再形成一列。在媒体查询中，我们会让main元素变成两栏网格。我们之后需要移除文章上的{{cssxref("margin-bottom")}}，让两个侧栏和彼此对齐，然后我们将会往页脚的顶部加上一个{{cssxref("border")}} 。一般来说，为了让设计看起来好看，这些小调整是你将会在每一个断点都需要做的。</p> + +<p><strong>再往你的step1.html的CSS的底部加入下面的代码：</strong></p> + +<pre class="brush: css notranslate"><code>@media screen and (min-width: 70em) { + main { + display: grid; + grid-template-columns: 3fr 1fr; + column-gap: 20px; + } + + article { + margin-bottom: 0; + } + + footer { + border-top: 1px solid #ccc; + margin-top: 2em; + } +}</code> +</pre> + +<p>在浏览器中<a href="https://mdn.github.io/css-examples/learn/media-queries/step3.html">打开步骤三</a>，或者<a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/step3.html">查看源代码</a>。</p> + +<p>如果你在不同的宽度下，看下最后的示例，你会看到设计是如何响应的，在可用的宽度下是如何表现为单栏、双栏或者三栏的。这是一个移动优先的响应式设计的非常简单的示例。</p> + +<h2 id="你真的需要媒体查询吗？">你真的需要媒体查询吗？</h2> + +<p>弹性盒、网格和多栏布局都给了你建立可伸缩的甚至是响应式组件的方式，而不需要媒体查询。这些布局方式能否在不加入媒体查询的时候实现你想要的设计，总是值得考虑的一件事。例如，你可能想要一组卡片，至少为二百像素宽，并在主文章里尽可能多地放下这些二百像素的卡片。这可以用网格布局实现，而完全不使用媒体查询。</p> + +<p>这可以由以下代码实现：</p> + +<pre class="brush: html notranslate"><code><ul class="grid"> + <li> + <h2>Card 1</h2> + <p>...</p> + </li> + <li> + <h2>Card 2</h2> + <p>...</p> + </li> + <li> + <h2>Card 3</h2> + <p>...</p> + </li> + <li> + <h2>Card 4</h2> + <p>...</p> + </li> + <li> + <h2>Card 5</h2> + <p>...</p> + </li> +</ul></code></pre> + +<pre class="brush: css notranslate"><code>.grid { + list-style: none; + margin: 0; + padding: 0; + display: grid; + gap: 20px; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); +} + +.grid li { + border: 1px solid #666; + padding: 10px; +}</code></pre> + +<p>在浏览器中<a href="https://mdn.github.io/css-examples/learn/media-queries/grid.html">打开网格布局示例</a>，或者<a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/grid.html">查看源代码</a>。</p> + +<p>在你的浏览器里打开这个示例，让屏幕变宽变窄，看一看列轨数目的变化。这个方法里面的好事是，网格不是靠视口宽度判断的，而是可以容纳组件的宽度。对媒体查询这章节的建议就是，你可能根本不需要它！但是，实践中你会发现，由媒体查询改进的现代布局方式的恰当使用，将会产生最佳效果。</p> + +<h2 id="小试牛刀！">小试牛刀！</h2> + +<p>你已经到了此文的结尾，但是你能记住最重要的信息吗？你可以在继续之前，找一个测试来验证下你是否已经掌握了这些信息。见<a href="/en-US/docs/Learn/CSS/CSS_layout/rwd_skills">小试牛刀：响应式Web设计</a>。</p> + +<h2 id="小结">小结</h2> + +<p>本节课中，你已经学到了媒体查询的知识，也发现了如何在实践中使用它们，来建立一个移动优先的响应式设计。</p> + +<p>你可以使用我们已经建立的起始点，试出更多的媒体查询，例如，也许你能使用<code>pointer</code>媒体特征，在你探测到访客有一个模糊指针的时候，改变导航栏的大小。</p> + +<p>你还能通过加入不同的组件进行实验，看下加入媒体查询，或者使用类似弹性盒或者网格的布局方式，哪个是让组件可响应的最佳途径。经常是没有什么对错的，你应该实验下，看看哪个对你的设计和内容效果最好。</p> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="模块目录">模块目录</h2> + +<ul> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal flow</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column layout</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Responsive design</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Beginner's guide to media queries</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy layout methods</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental layout comprehension assessment</a></li> +</ul> diff --git a/files/zh-cn/learn/css/css_layout/multiple-column_layout/index.html b/files/zh-cn/learn/css/css_layout/multiple-column_layout/index.html new file mode 100644 index 0000000000..c7a138adb3 --- /dev/null +++ b/files/zh-cn/learn/css/css_layout/multiple-column_layout/index.html @@ -0,0 +1,413 @@ +--- +title: 多列布局 +slug: Learn/CSS/CSS_layout/Multiple-column_Layout +tags: + - 多列布局 + - 学习 + - 布局 + - 教程 + - 新手 + - 自动分列 +translation_of: Learn/CSS/CSS_layout/Multiple-column_Layout +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", " Learn/CSS/CSS_layout/Responsive_Design ", "Learn/CSS/CSS_layout")}}</div> + +<p class="summary">多列布局声明提供了一种多列组织内容的方式，正如你在一些报纸中看到的那样。 这篇文章介绍怎么使用这一特性。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提:</th> + <td>HTML 基础 (study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), 和了解CSS如何工作的(study <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>.)</td> + </tr> + <tr> + <th scope="row">目标:</th> + <td>掌握在web页面中创建多列布局的方法?，正如你在一些报纸中看到的那样。 </td> + </tr> + </tbody> +</table> + +<h2 id="一个简单的例子">一个简单的例子</h2> + +<p>我们将学习怎么使用多列布局，通常也简写为 <em>multicol</em>。你可以从这里开始 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/multicol/0-starting-point.html">downloading the multicol starting point file</a> 然后在合适的地方加入CSS。在这一小节的结尾，你可以看到最终代码的效果。</p> + +<p>我们从一些很简单的HTML开始； 用带有类 <code>container</code> 的简单包装，里面是标题和一些段落。</p> + +<p>带有 <code>.container</code> 的 {{htmlelement("div")}} 将成为我们 multicol 的容器。 通过这两个属性开启 multicol {{cssxref("column-count")}} 或者 {{cssxref("column-width")}}。 <code>column-count</code> 将创建指定数量的列，所以如果你把下面的CSS加到样式表里让后重载入页面，你将得到3列：</p> + +<pre class="brush: css">.container { + column-count: 3; +} +</pre> + +<p>创建的这些列具有弹性的宽度 — 由浏览器计算出每一列分配多少空间。</p> + +<div id="Multicol_1"> +<div class="hidden"> +<h6 id="column-count_example">column-count example</h6> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} + </pre> +</div> + +<pre class="brush: html"><div class="container"> + <h1>Simple multicol example</h1> + + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. + Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. + Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse + ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit + quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique + elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit + cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis + dis parturient montes, nascetur ridiculus mus.</p> +</div> +</pre> + +<pre class="brush: css">.container { + column-count: 3; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('Multicol_1', '100%', 400) }}</p> + +<p>像下面这样使用 <code>column-width</code> 更改CSS：</p> + +<pre class="brush: css">.container { + column-width: 200px; +} +</pre> + +<p>浏览器将按照你指定的宽度尽可能多的创建列；任何剩余的空间之后会被现有的列平分。 这意味着你可能无法期望得到你指定宽度，除非容器的宽度刚好可以被你指定的宽度除尽。</p> + +<div id="Multicol_2"> +<div class="hidden"> +<h6 id="column-width_example">column-width example</h6> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +}</pre> + +<pre class="brush: html"><div class="container"> + <h1>Simple multicol example</h1> + + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. + Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. + Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse + ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit + quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique + elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit + cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis + dis parturient montes, nascetur ridiculus mus.</p> +</div></pre> +</div> + +<pre class="brush: css">.container { + column-width: 200px; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('Multicol_2', '100%', 400) }}</p> + +<h2 id="给多列增加样式">给多列增加样式</h2> + +<p>Multicol 创建的列无法单独的设定样式。 不存在让单独某一列比其他列更大的方法，同样无法为某一特定的列设置独特的背景色、文本颜色。你有两个机会改变列的样式：</p> + +<ul> + <li>使用 {{cssxref("column-gap")}} 改变列间间隙。</li> + <li>用 {{cssxref("column-rule")}} 在列间加入一条分割线。</li> +</ul> + +<p>以上面的代码为例，增加 <code>column-gap</code> 属性可以更改列间间隙：</p> + +<pre class="brush: css">.container { + column-width: 200px; + column-gap: 20px; +}</pre> + +<p>你可以尝试不同的值 — 该属性接受任何长度单位。现在再加入 <code>column-rule</code>。和你之前遇到的 {{cssxref("border")}} 属性类似， <code>column-rule</code> 是 {{cssxref("column-rule-color")}} 和 {{cssxref("column-rule-style")}}的缩写，接受同 <code>border</code> 一样的单位。</p> + +<pre class="brush: css">.container { + column-count: 3; + column-gap: 20px; + column-rule: 4px dotted rgb(79, 185, 227); +}</pre> + +<p>尝试设置不同的样式和颜色。</p> + +<div id="Multicol_3"> +<div class="hidden"> +<h6 id="Styling_the_columns">Styling the columns</h6> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} +.container { + column-count: 3; + column-gap: 20px; + column-rule: 4px dotted rgb(79, 185, 227); +}</pre> + +<pre class="brush: html"><div class="container"> + <h1>Simple multicol example</h1> + + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. + Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. + Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse + ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit + quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique + elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit + cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis + dis parturient montes, nascetur ridiculus mus.</p> +</div></pre> +</div> +</div> + +<p>{{ EmbedLiveSample('Multicol_3', '100%', 400) }}</p> + +<p>值得一提的是这条分割线本身并不占用宽度。它置于用 <code>column-gap</code> 创建的间隙内。如果需要更多空间，你需要增加 <code>column-gap</code> 的值。</p> + +<h2 id="列与内容折断">列与内容折断</h2> + +<p>多列布局的内容被拆成碎块。 和多页媒体上的内容表现大致一样 — 比如打印网页的时候。 当你把内容放入多列布局容器内，内容被拆成碎块放进列中，内容折断（译者注：比如断词断句）使得这一效果可以实现。</p> + +<p>有时，这种折断内容会降低阅读体验。在下面的举例中，我用 multicol 对一系列盒子布局，每一小块里有小标题和和一些文字。标题和文字可能被折断点拆开，从而降低阅读体验。</p> + +<div id="Multicol_4"> +<div class="hidden"> +<h6 id="Cards_example">Cards example</h6> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} </pre> +</div> + +<pre class="brush: html"><div class="container"> + <div class="card"> + <h2>I am the heading</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + + <div class="card"> + <h2>I am the heading</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + + <div class="card"> + <h2>I am the heading</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + <div class="card"> + <h2>I am the heading</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + + <div class="card"> + <h2>I am the heading</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + + <div class="card"> + <h2>I am the heading</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + + <div class="card"> + <h2>I am the heading</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + +</div> +</pre> + +<pre class="brush: css">.container { + column-width: 250px; + column-gap: 20px; +} + +.card { + background-color: rgb(207, 232, 220); + border: 2px solid rgb(79, 185, 227); + padding: 10px; + margin: 0 0 1em 0; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Multicol_4', '100%', 600) }}</p> + +<p>我们可以使用 <a href="/en-US/docs/Web/CSS/CSS_Fragmentation">CSS Fragmentation</a> 中声明的属性控制这一特性。 这份规范提供了一些属性来控制 multicol 和多页媒体中的内容拆分、折断。比如， 在规则 <code>.card</code> 上添加属性{{cssxref("break-inside")}}，并设值 <code>avoid</code> 。<code>.card</code> 是标题和文本的容器，我们不想拆开这个盒子。</p> + +<p>现阶段，增加旧属性 <code>page-break-inside: avoid</code> 能够获得更好的浏览器支持。</p> + +<pre class="brush: css">.card { + break-inside: avoid; + page-break-inside: avoid; + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); + padding: 10px; + margin: 0 0 1em 0; +} +</pre> + +<p>刷新页面，你的盒子就会呆在一起了。</p> + +<div id="Multicol_5"> +<div class="hidden"> +<h6 id="Multicol_Fragmentation">Multicol Fragmentation</h6> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} </pre> + +<pre class="brush: html"><div class="container"> + <div class="card"> + <h2>I am the heading</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + + <div class="card"> + <h2>I am the heading</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + + <div class="card"> + <h2>I am the heading</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + <div class="card"> + <h2>I am the heading</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + + <div class="card"> + <h2>I am the heading</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + + <div class="card"> + <h2>I am the heading</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + + <div class="card"> + <h2>I am the heading</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + +</div> +</pre> +</div> + +<pre class="brush: css">.container { + column-width: 250px; + column-gap: 20px; +} + +.card { + break-inside: avoid; + page-break-inside: avoid; + background-color: rgb(207, 232, 220); + border: 2px solid rgb(79, 185, 227); + padding: 10px; + margin: 0 0 1em 0; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Multicol_5', '100%', 600) }}</p> + +<h2 id="小结">小结</h2> + +<p>现在你知道多列布局的基本用法了，构建页面时又多了一种布局选择。</p> + +<h2 id="参考">参考</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Fragmentation">CSS Fragmentation</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts">Using multi-column layouts</a></li> +</ul> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">CSS 介绍</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">正常布局流（Normal Flow）</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">弹性盒子（Flexbox）</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">网格（Grid）</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">浮动（Floats）</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">定位（Positioning）</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">多列布局（Multiple-column Layout）</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">传统的布局实现（Legacy Layout Methods）</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">支持旧有浏览器（Supporting older browsers）</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> +</ul> diff --git a/files/zh-cn/learn/css/css_layout/normal_flow/index.html b/files/zh-cn/learn/css/css_layout/normal_flow/index.html new file mode 100644 index 0000000000..362c46ddf3 --- /dev/null +++ b/files/zh-cn/learn/css/css_layout/normal_flow/index.html @@ -0,0 +1,98 @@ +--- +title: 正常布局流 +slug: Learn/CSS/CSS_layout/Normal_Flow +tags: + - 浮动 + - 网格布局 +translation_of: Learn/CSS/CSS_layout/Normal_Flow +--- +<div>{{LearnSidebar}}</div> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</p> + +<p class="summary">这篇文章介绍正常的流布局，或者说，在你没有改变默认布局规则情况下的页面元素布局方式。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提:</th> + <td>HTML 基础 (study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), 和了解CSS如何工作的(study <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>.)</td> + </tr> + <tr> + <th scope="row">目标:</th> + <td>在做出改动之前，能够解释浏览器默认的布局方式.</td> + </tr> + </tbody> +</table> + +<p>如上小节对布局的介绍，如果你未曾应用任何CSS规则来改变它们的展现方式，网页上的元素将会按照正常布局流来组织。同样的，开始探索前，你可以通过调整元素位置，或者完全的移除元素来改变它们的表现效果。从一副简单的、结构良好并且在正常布局流下仍然易读的文档开始，是上手任何页面的最佳方式（译者注：几乎没有很简单的CSS，标签组织符合一般用法）。这样确保了你的内容的易读性，即便用户使用受限的浏览器或者屏幕阅读设备（译者注：比如有些老旧浏览器对某些CSS特性的支持不理想，或者有用户自定义CSS样式）。此外，由于正常布局流的设计初衷在于构建易读、合理的文档，遵循这样的指引原则，你在对布局做出改动时应该是与文档协同，而不是与之对抗。</p> + +<p>在深入探索不同的布局方式之前， 你最好回顾下在之前模块学习到的关于正常布局流的知识点（译者注：比如position display float table flex-box grid-layout）.</p> + +<h2 id="默认情况下，元素是如何布局的？">默认情况下，元素是如何布局的？</h2> + +<p>首先，取得元素的内容来放在一个独立的元素盒子中，然后在其周边加上内边距、边框和外边距 --- 就是我们之前看到的盒子模型。</p> + +<p>默认的，一个<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements">块级元素</a>的内容宽度是其父元素的100%，其高度与其内容高度一致。<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements">内联元素</a>的height width与内容一致。你无法设置内联元素的height width --- 它们就那样置于块级元素的内容里。 如果你想控制内联元素的尺寸，你需要为元素设置<code>display: block;</code> （或者，<code>display: inline-block;</code> inline-block 混合了inline 和 block的特性。)</p> + +<p>这样解释了独立元素的布局，但是元素之间又是如何相互影响的呢？ 正常布局流（在布局介绍里提到过）是一套在浏览器视口内放置、组织元素的系统。默认的，块级元素按照基于其父元素的<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/writing-mode">书写顺序</a>(<em>默认值:</em> horizontal-tb)的<em>块流动方向(block flow direction)</em>放置 --- 每个块级元素会在上一个元素下面另起一行，它们会被设置好的margin 分隔。在英语，或者其他水平书写、自上而下模式里，块级元素是垂直组织的。</p> + +<p>内联元素的表现有所不同 --- 它们不会另起一行；只要在其父级块级元素的宽度内有足够的空间，它们与其他内联元素、相邻的文本内容（或者被包裹的）被安排在同一行。如果空间不够，溢出的文本或元素将移到新的一行。</p> + +<p>如果两个相邻的元素都设置了margin 并且两个margin有重叠，那么更大的设置会被保留，小的则会消失 --- 这被称为外边距叠加，我们之前见到过。</p> + +<p>我们来看一个对全部这些做出解释的简单例子：</p> + +<div id="Normal_Flow"> +<pre class="brush: html notranslate"><h1>Basic document flow</h1> + +<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> + +<p>By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p> + +<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p> + +<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements will <span>wrap onto a new line if possible (like this one containing text)</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> + +<pre class="brush: css notranslate">body { + width: 500px; + margin: 0 auto; +} + +p { + background: rgba(255,84,104,0.3); + border: 2px solid rgb(255,84,104); + padding: 10px; + margin: 10px; +} + +span { + background: white; + border: 1px solid black; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Normal_Flow', '100%', 500) }}</p> + +<h2 id="小结">小结</h2> + +<p>现在你对正常布局流有所了解，知晓浏览器默认怎么组织元素，继续下一节，学习如何改变默认布局以产出符合你的设计的布局。</p> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="在这个模块中">在这个模块中</h2> + +<ul> + <li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Introduction">CSS 介绍</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Normal_Flow">正常布局流（Normal Flow）</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Flexbox">弹性盒子（Flexbox）</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Grids">网格（Grid）</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Floats">浮动（Floats）</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Positioning">位置（Positioning）</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">多列布局（Multiple-column Layout）</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Responsive_Design">响应式设计</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Media_queries">媒体查询入门指南 </a></li> + <li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">传统的布局实现（Legacy Layout Methods）</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">支持旧有浏览器（Supporting older browsers）</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">评估你对布局的理解</a></li> +</ul> diff --git a/files/zh-cn/learn/css/css_layout/position_skills/index.html b/files/zh-cn/learn/css/css_layout/position_skills/index.html new file mode 100644 index 0000000000..63c8a8f01a --- /dev/null +++ b/files/zh-cn/learn/css/css_layout/position_skills/index.html @@ -0,0 +1,70 @@ +--- +title: 'Test your skills: position' +slug: Learn/CSS/CSS_layout/Position_skills +tags: + - Position + - 定位 + - 布局 +translation_of: Learn/CSS/CSS_layout/Position_skills +--- +<div></div> + +<div>{{LearnSidebar}}</div> + +<div></div> + +<p>此任务的目的是让您使用在我们的position课程中介绍的CSS {{CSSxRef("position")}}属性以及对应值，您将通过两个小任务来复习刚才课程材料中介绍的不同元素。</p> + +<div class="blockIndicator note"> +<p><strong>小贴士</strong>: 您可以在下面的交互式编辑器中尝试解决方案，下载代码并使用在线工具（如CodePen、jsFiddle或Glitch）处理任务可能会有帮助。</p> + +<p>如果您遇到困难，请向我们寻求帮助-请参阅本页底部的 {{anch("Assessment or further help")}} 部分</p> +</div> + +<h2 id="定位练习一">定位练习一</h2> + +<p>在这项任务中，您需要将目标类别为5px灰色边框的元素定位到外部容器的右上角。</p> + +<p><img alt="The green box is at the top right of a container with a grey border." src="https://mdn.mozillademos.org/files/17077/position-task1.png" style="height: 661px; width: 1033px;"></p> + +<p>尝试更改下面的代码示例，重新完成的上述任务：</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/tasks/position/position1.html", '100%', 1000)}}</p> + +<p>作为一个额外的挑战，你能改变目标元素显示在文本下面吗？</p> + +<div class="blockIndicator note"> +<p>为了评估和进一步编辑,<a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/position/position1-download.html">下载源代码</a>在本地编辑器或在线编辑器中编辑</p> +</div> + +<h2 id="定位练习二">定位练习二</h2> + +<p>在下面的示例中，滚动条滚动时侧边栏将随内容一起滚动。更改它使滚动条滚动时侧边栏保持原位并且只滚动内容。</p> + +<p><img alt="The content is scrolled but the sidebar has stayed in place." src="https://mdn.mozillademos.org/files/17078/position-task2.png" style="height: 827px; width: 1123px;"></p> + +<p>尝试更改下面的代码示例，重新完成的上述任务：</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/tasks/position/position2.html", '100%', 1000)}}</p> + +<div class="blockIndicator note"> +<p>为了评估和进一步编辑,<a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/position/position1-download.html">下载源代码</a>在本地编辑器或在线编辑器中编辑</p> +</div> + +<h2 id="Assessment_or_further_help">Assessment or further help</h2> + +<p>You can practice these examples in the Interactive Editors mentioned above.</p> + +<p>If you would like your work assessed, or are stuck and want to ask for help:</p> + +<ol> + <li>Put your work into an online shareable editor such as <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a>. You can write the code yourself, or use the starting point files linked to in the above sections.</li> + <li>Write a post asking for assessment and/or help at the <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a>. Your post should include: + <ul> + <li>A descriptive title such as "Assessment wanted for Position skill test 1".</li> + <li>Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.</li> + <li>A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.</li> + <li>A link to the actual task or assessment page, so we can find the question you want help with.</li> + </ul> + </li> +</ol> diff --git a/files/zh-cn/learn/css/css_layout/practical_positioning_examples/index.html b/files/zh-cn/learn/css/css_layout/practical_positioning_examples/index.html new file mode 100644 index 0000000000..61da887ea2 --- /dev/null +++ b/files/zh-cn/learn/css/css_layout/practical_positioning_examples/index.html @@ -0,0 +1,418 @@ +--- +title: 定位实例练习 +slug: Learn/CSS/CSS_layout/Practical_positioning_examples +tags: + - 选项卡 +translation_of: Learn/CSS/CSS_layout/Practical_positioning_examples +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</div> + +<p class="summary">掌握了上一篇文章中的定位的基础知识，我们将着眼于实现一些现实中的例子，来演示你能用定位来做什么。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row"> + <p>预备知识：</p> + </th> + <td> + <p>HTML基础(学习<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>),和CSS怎么工作的 (学习<a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>.)</p> + </td> + </tr> + <tr> + <th scope="row"> + <p>目标：</p> + </th> + <td> + <p>了解定位的实例</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="列表消息盒子">列表消息盒子</h2> + +<p>我们研究的第一个例子是一个经典的选项卡消息框，你想用一块小区域包括大量信息时，一个非常常用的特征。这包括含有大信息量的应用，比如策略战争游戏，比如从移动版的网页，屏幕狭小、空间有限；比如你可能想要放置许多信息的紧凑消息框，不用就会充满整个UI。我们简单的例子完成后就会像下面这样：</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13368/tabbed-info-box.png" style="display: block; height: 400px; margin: 0px auto; width: 450px;"></p> + +<div class="note"> +<p><strong>注意：</strong>你能看完整的示例，可运行在 <a href="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html">info-box.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">source code</a>)。检出它以理解你在本文章里要建立什么。</p> +</div> + +<p>你可能会想：”为什么不仅仅做独立的选项卡为一个独立的网页，然后通过点击不同的标签来在不同的页面跳转来达到这个效果？“这样代码可能会简单一些，是的。但是这样每个独立的”页面“视图将会实际上是一个新加载的网页，跨视图更难保存信息，并把这个特征融入一个更大的UI设计。另外，所谓的”单页应用“正在变得非常流行——尤其是移动网页UI——因为把一切的服务放在一个单独的文件上可以减少HTTP请求的数量来浏览所有内容，从而提高性能。</p> + +<div class="note"> +<p><strong>注意：</strong>一些网络开发者甚至更超前，每次只加载一页的信息，并且使用JavaScript诸如 <a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>特征动态改变信息显示。但是，在你此时的学习中，我们希望尽可能保持简单。接下来会有一些JavaScript，但是只有一点。</p> +</div> + +<p>在开始之前，我们需要你拷贝文件到本地，当作起始的HTML文件—— <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box-start.html">info-box-start.html</a>. 保存到你的计算机合适的位置，然后在你的编辑器里打开。让我们看看包含在 body 里的HTML代码：</p> + +<pre class="brush: html"><section class="info-box"> + <ul> + <li><a href="#" class="active">Tab 1</a></li> + <li><a href="#">Tab 2</a></li> + <li><a href="#">Tab 3</a></li> + </ul> + <div class="panels"> + <article class="active-panel"> + <h2>The first tab</h2> + + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Vestibulum et orci scelerisque, vulputate tellus quis, lobortis dui. Vivamus varius libero at ipsum mattis efficitur ut nec nisl. Nullam eget tincidunt metus. Donec ultrices, urna maximus consequat aliquet, dui neque eleifend lorem, a auctor libero turpis at sem. Aliquam ut porttitor urna. Nulla facilisi.</p> + </article> + <article> + <h2>The second tab</h2> + + <p>This tab hasn't got any Lorem Ipsum in it. But the content isn't very exciting all the same.</p> + </article> + <article> + <h2>The third tab</h2> + + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. And now an ordered list: how exciting!</p> + + <ol> + <li>dui neque eleifend lorem, a auctor libero turpis at sem.</li> + <li>Aliquam ut porttitor urna.</li> + <li>Nulla facilisi</li> + </ol> + </article> + </div> +</section></pre> + +<p>这样我们已经得到了一个{{htmlelement("section")}}元素带有类（<code>class</code>）为 <code>info-box</code>。此元素又包含一个 {{htmlelement("ul")}} 和一个 {{htmlelement("div")}}。无序列表包含三个列表项，列表项有链接在内，实际上将成为用于点击后显示内容面板的选项卡。 <code>div</code> 包含三个{{htmlelement("article")}} 元素，构成对应于每个选项卡的内容面板。 每个面板包含一些示例内容。</p> + +<p>这里的思路是我们将样式化选项卡看起来是一个标准的水平导航菜单，使用绝对定位样式化面板互相坐落其顶上。我们也给你一点JavaScript包含到你的页面上，当选项卡被按下时，显示对应的面板，并且样式化选项卡本身。你不需要在这个阶段了解JavaScript本身，但是你应该尽快学习一些基本的 <a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript</a>——你的用户界面越复杂，越需要一些JavaScript来实现你渴望的功能。</p> + +<h3 id="一般设置">一般设置</h3> + +<p>开始前，在{{HTMLElement("style")}}开闭标签之间添加下面的代码：</p> + +<pre class="brush: css">html { + font-family: sans-serif; +} + +* { + box-sizing: border-box; +} + +body { + margin: 0; +}</pre> + +<p>这只是一些一般设置，在我们页面上设置了无衬线的字体、使用 {{cssxref("box-sizing")}} 模型，去掉 {{htmlelement("body")}} 默认外边距。</p> + +<p>下一步，在你早先的CSS下面加入如下代码：</p> + +<pre class="brush: css">.info-box { + width: 450px; + height: 400px; + margin: 0 auto; +}</pre> + +<p>这对内容设置具体的高度和宽度、在屏幕居中使用老把戏 <code>margin: 0 auto</code> 。在早先的课程中我们建议尽可能不固定内容容器的高度。这个情况下是可以的，因为我们是在选项卡中固定的内容，如果每个标签都有不同的高度，看起来也有些不和谐。</p> + +<h3 id="样式化我们的选项卡">样式化我们的选项卡</h3> + +<p>现在我们希望样式化选项卡看上去像选项卡——基本，这些是一个水平的导航标签，但不是点击之后加载不同的网页，和我们之前在课程中见到的不同，相反，他们在同一页面上显示不同的面板。首先，在你的CSS底部添加下列规则，从无序列表中移除默认的{{cssxref("padding-left")}}和{{cssxref("margin-top")}}值：</p> + +<pre class="brush: css">.info-box ul { + padding-left: 0; + margin-top: 0; +}</pre> + +<div class="note"> +<p><strong>注意：</strong>我们正在使用后代选择器，整个例子 <code>.info-box</code> 都位于链的开始——这样页面已经带有其他内容时，我们可以插入这个特征，不害怕与应用于页面其他部分的样式冲突。</p> +</div> + +<p>接下来，我们将样式化水平选项卡——列表项都要左浮动确保他们一行合起来，他们的{{cssxref("list-style-type")}}被设置为 <code>none</code> 用以去除项目符号，宽度（{{cssxref("width")}}）设置为 <code>150px</code> 以便于适应这个info-box。链接（ {{htmlelement("a")}} ）元素设置为{{cssxref("display")}} inline-block，这样他们将在一行显示，仍然保持样式可设置，他们会被样式化合适的选项卡按钮，通过一系列的其他属性。</p> + +<p>添加下列的CSS：</p> + +<pre class="brush: css">.info-box li { + float: left; + list-style-type: none; + width: 150px; +} + +.info-box li a { + display: inline-block; + text-decoration: none; + width: 100%; + line-height: 3; + background-color: red; + color: black; + text-align: center; +}</pre> + +<p>最后，对于本节，我们将会在链接状态上设置一些样式。首先，我们要设置标签的 <code>:focus</code> 和 <code>:hover</code> 状态，让他们在获得焦点/鼠标悬浮的时候看起来不同，给用户提供一些可视化反馈。其次，当某个选项卡的类（ <code>class</code> ）出现 <code>active</code> 时，我们为其设置一条相同的样式规则。我们将通过使用JavaScript来设置，当一个标签被点击时。把这些CSS放置在你的其他样式后面：</p> + +<pre class="brush: css">.info-box li a:focus, .info-box li a:hover { + background-color: #a60000; + color: white; +} + +.info-box li a.active { + background-color: #a60000; + color: white; +}</pre> + +<h3 id="样式化面板">样式化面板</h3> + +<p>下一步工作是样式化我们的面板，现在开始吧！</p> + +<p>首先，添加下列的规则去样式化 <code>.panels</code> {{htmlelement("div")}} 容器。我们简单的设置一个固定的高度，确保面板包含在info-box里面，{{cssxref("position")}} <code>relative</code> 设置 {{htmlelement("div")}} 为定位上下文，这样你能然后相对自身放置定位子元素，而不是相对{{htmlelement("html")}}元素，最后我们清除（{{cssxref("clear")}}）浮动，设置在上面CSS中，这样避免影响布局的剩余部分。</p> + +<pre class="brush: css">.info-box .panels { + height: 352px; + position: relative; + clear: both; +}</pre> + +<p>在本节的最后，我们将对包含我们面板的单独 {{htmlelement("article")}} 元素设置样式。我们添加的第一条规则就是绝对定位面板，让他们都位于{{htmlelement("div")}}容器的左上角——这一部分对整个布局特性是关键的，就像使面板互相位于顶部。规则设置面板为和容器同样的高度，给内容一些内边距，设置字体颜色（{{cssxref("color")}}），和背景颜色（{{cssxref("background-color")}}）。</p> + +<p>我们将添加的第二条规则，对带有类（ <code>class</code> ）为（ <code>active-panel</code> ）的面板，设置{{cssxref("z-index")}} 为 1，会让他位于其他的面板之上（默认定位元素 <code>z-index</code> 的值是 0，会使默认元素位于下面）。同样的，我们会在合适的时候用JavaScript 来添加这个类。</p> + +<pre class="brush: css">.info-box article { + position: absolute; + top: 0; + left: 0; + height: 352px; + padding: 10px; + color: white; + background-color: #a60000; +} + +.info-box .active-panel { + z-index: 1; +}</pre> + +<h3 id="添加我们的JavaScript">添加我们的JavaScript</h3> + +<p>让这些特性工作的最后一步是添加一些JavaScript。添加下列一块代码，准确的写在你的开始和结束的{{htmlelement("script")}}标签之间（在接下来的HTML内容中你将会发现这些）：</p> + +<pre class="brush: js">var tabs = document.querySelectorAll('.info-box li a'); +var panels = document.querySelectorAll('.info-box article'); + +for(i = 0; i < tabs.length; i++) { + var tab = tabs[i]; + setTabHandler(tab, i); +} + +function setTabHandler(tab, tabPos) { + tab.onclick = function() { + for(i = 0; i < tabs.length; i++) { + if(tabs[i].getAttribute('class')) { + tabs[i].removeAttribute('class'); + } + } + + tab.setAttribute('class', 'active'); + + for(i = 0; i < panels.length; i++) { + if(panels[i].getAttribute('class')) { + panels[i].removeAttribute('class'); + } + } + + panels[tabPos].setAttribute('class', 'active-panel'); + } +}</pre> + +<p>这些代码做了如下工作：</p> + +<ul> + <li>首先我们保存所有的选项卡和所有的面板引用到两个变量中，名为 <code>tabs</code> 和 <code>panels</code>，这样此后我们可以容易地为它们做事。</li> + <li>然后我们使用 <code>for</code> 循环遍历所有的选项卡，并且在每一个上运行叫做<code>setTabHandler()</code> 的函数，此函数建立当每个选项卡被点击时应该发生的功能。 运行时， 函数会被传递选项卡，和一个索引数<code>i</code> 指明选项卡在<code>tabs</code> 数组中的位置。</li> + <li>在 <code>setTabHandler()</code> 函数中，这个标签创建了一个 <code>onclick</code> 事件来处理点击，所以当标签被点击的时候，接下来会发生： + <ul> + <li>用一个 <code>for</code> 循环清除所有标签当前存在的类。</li> + <li>当点击的时候在标签上创建了一个 <code>active</code> 类——从相关联的元素中继承了CSS的一些属性，具有和panels的样式相同的 {{cssxref("color")}} 和 {{cssxref("background-color")}}。</li> + <li>用一个 <code>for</code> 循环清除所有面板当前存在的类。</li> + <li>当标签被点击的时候在和标签相对应的面板上创建了一个 <code>active-panel</code> 类——从相关联的元素中继承了CSS的一些属性，使其 {{cssxref("z-index")}} 属性被设置为1，让它能位于所有的面板的上面。</li> + </ul> + </li> +</ul> + +<p>这是第一个例子，保持你的代码打开，我们将会在第二个例子中继续添加。</p> + +<h2 id="一个固定位置的列表消息盒子_2">一个固定位置的列表消息盒子</h2> + +<p id="一个固定位置的列表消息盒子">在我们的第二个例子中，我们将会采用我们的第一个例子——我们的消息盒子——把她加到一个满的网页之中去。但是不仅仅是这样——我们将固定她的位置，以便于他能待在浏览器窗口的同一个位置。当主要内容滚动时，这个消息盒子将会待在屏幕的同一个位置。完成的例子：</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13364/fixed-info-box.png" style="border-style: solid; border-width: 1px; display: block; height: 585px; margin: 0px auto; width: 1118px;"></p> + +<div class="note"> +<p><strong>注意</strong>：你可以点击<a href="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/fixed-info-box.html">蓝字</a>预览完成后的效果，看看哪些部分是你在这篇文章里你要制作的。</p> +</div> + +<p>在开始的时候，你可以使用第一部分中完成的例子，或者从我们的Github仓库中拷贝 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">info-box.html</a> 到本地。</p> + +<h3 id="添加HTML">添加HTML </h3> + +<p>首先，我们需要一些额外的内容在当前的主内容中。添加下列{{htmlelement("section")}} 在你的 {{htmlelement("body")}} 标签之中，放在在已存在的部分之中：</p> + +<pre class="brush: html"><section class="fake-content"> + <h1>Fake content</h1> + <p>This is fake content. Your main web page contents would probably go here.</p> + <p>This is fake content. Your main web page contents would probably go here.</p> + <p>This is fake content. Your main web page contents would probably go here.</p> + <p>This is fake content. Your main web page contents would probably go here.</p> + <p>This is fake content. Your main web page contents would probably go here.</p> + <p>This is fake content. Your main web page contents would probably go here.</p> + <p>This is fake content. Your main web page contents would probably go here.</p> + <p>This is fake content. Your main web page contents would probably go here.</p> +</section></pre> + +<div class="note"> +<p><strong>注意</strong>：你可以随意更改假的内容，替换为你想要的真的内容。</p> +</div> + +<h3 id="更改存在的CSS">更改存在的CSS</h3> + +<p>接下来我们需要对之前的 CSS 进行一些小修改，让消息盒子放置和定位更好。删除margin: 0 auto （不需要居中显示），添加fixed定位；调整top 属性把它粘在浏览器的视域。</p> + +<p>它应该看起来像下面这样：</p> + +<pre class="brush: css">.info-box { + width: 450px; + height: 400px; + position: fixed; + top: 0; +}</pre> + +<h3 id="对主内容样式设计">对主内容样式设计</h3> + +<p>对于这个例子来说唯一剩下的事情就是给主内容提供一些样式设计。添加下面的规则到你剩下的 CSS 的下面：</p> + +<pre class="brush: css">.fake-content { + background-color: #a60000; + color: white; + padding: 10px; + height: 2000px; + margin-left: 470px; +}</pre> + +<p>开始我们给这个内容和消息盒子面板一样的背景颜色，颜色，内边距。然后给他一个大的margin-left使他移动到右边，为消息盒子在左边腾出位置，以便于各个部分不重叠。</p> + +<p>这标志着第二个例子的结束；我们希望你能感到第三个例子，完全是因为兴趣。</p> + +<h2 id="一个滑动隐藏的面板_2">一个滑动隐藏的面板</h2> + +<p id="一个滑动隐藏的面板">最后一个我们在这里介绍的例子是通过按图标使面板滑动出现或者消失——就像前面提到的，这种场景在移动端的布局很流行，因为移动端的屏幕很小，所以你不希望使用大部分界面来显示一个有用的内容而是用消息面板或者菜单代替。</p> + +<p>我们完工后的例子长这样：</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13366/hidden-sliding-panel.png" style="border-style: solid; border-width: 1px; display: block; height: 521px; margin: 0px auto; width: 950px;"></p> + +<div class="note"> +<p><strong>注意</strong>：你可以点击<a href="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/hidden-info-panel.html">蓝字</a>预览完成后的效果，仔细看看哪些部分是你在这篇文章里你要制作的。</p> +</div> + +<p>在一开始，老规矩在我们的Githib代码仓库拷贝<a href="https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/hidden-info-panel.html">hideen-info-panel-start.html</a>(<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/hidden-info-panel.html">源码</a>)。这个例子并没有用先前的例子，所以我们需要一个新的开始文件。让我们来仔细观察一下这个HTML文件：</p> + +<pre class="brush: css"><label for="toggle">❔</label> +<input type="checkbox" id="toggle"> +<aside> + + ... + +</aside></pre> + +<p>开始，我们看到了一个 {{htmlelement("label")}} 元素和 {{htmlelement("input")}} 元素——<code><label></code>元素普遍用来联系文字标签和表单，目的是能更好的理解表单（允许屏幕阅读器用户查看表单元素的描述）。这里通过<code>for</code>属性绑定<code>id</code>到了<code><input></code>标签的checkbox元素。</p> + +<div class="note"> +<p><strong>注意</strong>：我们已经设置了一个特殊的问题标记特性到我们的HTML中，来当作我们的信息图标——这代表着这个按钮将可以按下显示或隐藏面板。</p> +</div> + +<p>现在我们将这些元素用于稍微不同的目的——另一个 <code><label></code> 标签有用的副作用使你能通过点击checkbox的label标签来选择这个checkbox，就好像点击了这个checkbox自己一样。这就会实现有名的 <a href="https://css-tricks.com/the-checkbox-hack/">checkbox hack</a> 技术，可以提供无 JavaScript 的方法来通过按钮来控制一个元素。我们将通过其他两个元素控制 {{htmlelement("aside")}} 元素。（为了简洁起见，我们已将其内容从上述代码列表中删除）。</p> + +<p>在下面的部分我们将解释这一切如何运作。</p> + +<h3 id="设置表单元素样式">设置表单元素样式</h3> + +<p>首先让我们处理表单元素 - 在 {{htmlelement("style")}} 标签之间添加以下CSS：</p> + +<pre class="brush: css">label[for="toggle"] { + font-size: 3rem; + position: absolute; + top: 4px; + right: 5px; + z-index: 1; + cursor: pointer; +} + +input[type="checkbox"] { + position: absolute; + top: -100px; +}</pre> + +<p>第一条规则样式化 <code><label></code> 标签；我们：</p> + +<ul> + <li>设置更大的 {{cssxref("font-size")}} 使图标更大更美观。</li> + <li>设置 {{cssxref("position")}} 为 <code>absolute</code>，使用 {{cssxref("top")}} 属性和 {{cssxref("right")}} 属性来让他能很合适的位于右上角。</li> + <li>设置其 {{cssxref("z-index")}} 为1——因此当信息面板被赋予样式和显示的时候，不会覆盖我们的图标；相反图标依然会位于最上层能够再次被按下来隐藏信息平板。</li> + <li>使用 {{cssxref("cursor")}} 属性来改变鼠标的指针，当鼠标悬浮在图标上面的时候变成一个手形指针（就像你看到的当悬浮在链接上一样），作为一个额外的可视化线索告诉用户这个图标可以做一些有趣的事情。</li> +</ul> + +<p>第二条规则是在实际的 <code><input></code> 元素的checkbox 上设置{{cssxref("position")}} 属性为 <code>absolute</code>，并从屏幕上方隐藏掉它，我们并不希望在我们的用户界面里看到它。</p> + +<h3 id="设置面板的样式">设置面板的样式</h3> + +<p>现在是时候为实际的滑动面板设计风格了。在你的css底部添加下列规则：</p> + +<pre class="brush: css">aside { + background-color: #a60000; + color: white; + + width: 340px; + height: 98%; + padding: 10px 1%; + + position: fixed; + top: 0; + right: -370px; + + transition: 0.6s all; +}</pre> + +<p>这里有很多项——让我们一点一点讨论：</p> + +<ul> + <li>首先，我们在信息盒子中设置了一些简单的 {{cssxref("background-color")}} 和 {{cssxref("color")}}。</li> + <li>然后，我们在面板上设置一个固定的 {{cssxref("width")}} ，让它的 {{cssxref("height")}} 充满整个浏览器窗口的视口。</li> + <li>我们同样包括一些 {{cssxref("padding")}} 来组成我们想要的总的高度和宽度的值（如果我们没有设置 <code>box-sizing: border-box;</code> ，那就很有必要，正如这个例子）</li> + <li>然后，我们在面板上设置 {{cssxref("position")}}<code>: fixed;</code>，即使页面的内容在滚动，也总是显示在同一个位置。我们设置 {{cssxref("top")}} 属性，使其粘在视口顶部，设置 {{cssxref("right")}} 属性使其默认情况下位于屏幕的右边。</li> + <li>最后我们在元素上设置 {{cssxref("transition")}} 属性，Transitions是一个有意思的特性，允许你在状态改变的时候平滑的过渡，而不是粗暴的“开”或“关”。在这个例子中我们尝试在checkbox被选中时让面板平滑的滚动。（或者换句话说，当问题标记图标被点击以后——记住，点击 <code><label></code> 标签也会选择相对应的checkbox！我们已经告诉你这是一种hack了）你也将会学到更多……</li> +</ul> + +<h3 id="设置选择后的状态">设置选择后的状态</h3> + +<p>这是最后要添加的一点 CSS ——把这些放到你的 CSS 底部:</p> + +<pre class="brush: css">input[type=checkbox]:checked + aside { + right: 0px; +}</pre> + +<p>这里的选择器是复杂的——我们选择与 <code><input></code> 元素邻接的 <code><aside></code> 元素，但是仅仅在它被选择时（请注意使用 {{cssxref(":checked")}} 伪类来实现此目的），在这种情况下，我们将 <code><aside></code> 的 {{cssxref("right")}} 属性设置为0px，会造成面板再次出现在屏幕上（由于过渡属性会平滑的出现）。再一次点击这个标签会取消选中checkbox，面板将会跟着再一次消失。</p> + +<p>所以你有 ——一个相当巧妙的避免使用JavaScript来创建一个切换按钮效果方式。 这将在IE9及以上版本中起作用（平滑过渡将在IE10及更高版本中起作用）。这种效果确实有一些问题 ——这是有点滥用表单元素（它们不是为了这个目的），并且在可访问性方面效果不是很好——标签在默认情况下不可聚焦，并且表单元素的非语义使用可能会导致屏幕朗读器出现问题。 JavaScript和链接或按钮可能更合适，但这样的实验仍然很有趣。</p> + +<h2 id="总结">总结</h2> + +<p>这样完成了我们对定位的关注——现在，你应该理解基本机制的工作原理，同样理解了怎样应用这些知识去构建一些有趣的用户界面功能，不要由于你还未完全理解所有的知识而担心——定位是一个相当高级的话题，你可以随时读这篇文章来帮助你的理解。下一个主题我们将转向Flexbox。</p> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="在本单元中">在本单元中</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Practical positioning examples</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids">Grids</a></li> +</ul> diff --git a/files/zh-cn/learn/css/css_layout/responsive_design/index.html b/files/zh-cn/learn/css/css_layout/responsive_design/index.html new file mode 100644 index 0000000000..50f16d2923 --- /dev/null +++ b/files/zh-cn/learn/css/css_layout/responsive_design/index.html @@ -0,0 +1,324 @@ +--- +title: 响应式设计 +slug: Learn/CSS/CSS_layout/Responsive_Design +translation_of: Learn/CSS/CSS_layout/Responsive_Design +--- +<div>{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}</div> + +<p>早年设计Web时，页面是以适配特定的屏幕大小为考量创建的。如果用户正在使用比设计者考虑到的更小或者更大的屏幕，那么结果从多余的滚动条，到过长的行和没有被合理利用的空间，不一而足。随着人们使用的屏幕尺寸的种类越来越多，出现了响应式网页设计的概念（<em>responsive web design，RWD</em>），RWD指的是允许Web页面适应不同屏幕宽度因素等，进行布局和外观的调整的一系列实践。这是改变我们设计多设备网页的方式的思想，在这篇文章里，我们将会帮你理解掌握它时所需知道的主要技能。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">学习前提：</th> + <td>HTML基础（学习<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>），以及对CSS工作方式的理解（学习<a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a>和<a href="/en-US/docs/Learn/CSS/Building_blocks">CSS building blocks</a>）</td> + </tr> + <tr> + <th scope="row">目标：</th> + <td>理解响应式设计的基础概念以及历史</td> + </tr> + </tbody> +</table> + +<h2 id="历史上的网站布局">历史上的网站布局</h2> + +<p>在历史上的某个时刻，设计网站时，你有两个选择：</p> + +<ul> + <li>你可以创建一个“液态”站点，它会拉伸以充满整个浏览器视窗；</li> + <li>或者是一个“固定宽度”站点，它有一个以像素计的固定尺寸。</li> +</ul> + +<p>这两种途径会倾向于导致它的表现只有在设计者的屏幕上才是最佳的！液态站点导致了小屏幕上的设计会挤成一团（如下所示），以及大屏幕上难以阅读的很长的行长度。</p> + +<figure><img alt="A layout with two columns squashed into a mobile size viewport." src="https://mdn.mozillademos.org/files/16834/mdn-rwd-liquid.png" style="display: block; height: 406px; width: 300px;"> +<figcaption></figcaption> +</figure> + +<div class="blockIndicator note"> +<p><strong>备注：</strong>看一下这个简单的流式布局：<a href="https://mdn.github.io/css-examples/learn/rwd/liquid-width.html">示例</a>，<a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/liquid-width.html">源代码</a>。当查看示例时，来回拖拽你的浏览器窗口，改变其大小，看下不同尺寸下的显示情况。</p> +</div> + +<p>固定宽度站点的一个可能的后果是，在比站点更窄的屏幕上会出现一个水平滚动条（如下所示），在大屏幕上的设计边缘还会有许多空白。</p> + +<figure><img alt="A layout with a horizontal scrollbar in a mobile viewport." src="https://mdn.mozillademos.org/files/16835/mdn-rwd-fixed.png" style="display: block; height: 411px; width: 300px;"> +<figcaption></figcaption> +</figure> + +<div class="blockIndicator note"> +<p><strong>备注：</strong>看下这个简单的固定宽度布局：<a href="https://mdn.github.io/css-examples/learn/rwd/fixed-width.html">示例</a>，<a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/fixed-width.html">源代码</a>，重新观察一下你调整浏览器窗口大小后的结果。</p> +</div> + +<div class="blockIndicator note"> +<p><strong>备注：</strong>上面的截屏是在火狐开发者工具的<a href="/en-US/docs/Tools/Responsive_Design_Mode">响应式设计模式</a>中截取的。</p> +</div> + +<p>随着移动Web在早期的功能手机上开始成为现实，希望拥抱移动端的公司普遍希望为他们的网站创建一个有着不同的网址的移动版本（大多是像<em>m.example.com</em>或者<em>example.mobi</em>这类）。这意味着一个网站需要开发两个分开的版本，而且要保持时效性。</p> + +<p>除此以外，这些移动网站的体验经常缩水。由于移动设备变得更加强大，足以显示完整的网站，对于那些被困在移动版网站的移动端用户来说，这是很折磨人的，他们因此也没法获取他们知道在支持所有功能的桌面版网站上能找到的信息。</p> + +<h2 id="响应式设计之前的灵活布局">响应式设计之前的灵活布局</h2> + +<p>人们开发了许多方式，尽力解决建设网站时使用液态和固定宽度的方式所带来的弊端。2004年，Cameron Adams写了一篇题为《<a href="http://www.themaninblue.com/writing/perspective/2004/09/21/">Resolution dependent layout</a>》的帖子，描述了一种可以创造适应多种屏幕分辨率的设计的方式。这种方式需要JavaScript来探测屏幕的分辨率，载入恰当的CSS。</p> + +<p>Zoe Mickley Gillenwater深刻影响了<a href="http://zomigi.com/blog/voices-that-matter-slides-available/">她的著作</a>，在里面描述并标准化了可变站点建立的不同方式，试图在充满屏幕和完全保持固定尺寸之间找到最佳平衡。</p> + +<h2 id="响应式设计">响应式设计</h2> + +<p>“响应式设计”这个词是<a href="https://alistapart.com/article/responsive-web-design/">Ethan Marcotte在2010年首度提出的</a>，他将其描述为三种技术的混合使用。</p> + +<ol> + <li>第一个是液态网格，这早先已由Gillenwater进行探讨，可以在Marcotte的文章《<a href="https://alistapart.com/article/fluidgrids/">Fluid Grids</a>》（出版于2009年的《A List Apart》上）中读到。</li> + <li>第二个是<a href="http://unstoppablerobotninja.com/entry/fluid-images">液态图像</a>的理念。通过使用相当简单的将设置<code>max-width</code>属性设置为<code>100%</code>的技术，图像可以在包含它们的列变得比图像原始尺寸窄的时候，缩放得更小，但总不会变得更大。这使得图像可以被缩放，以被放到一个灵活尺寸的列，而不是溢出出去，同时也不会在列宽于图像的时候，使图像变得太大以至于画质变得粗糙。</li> + <li>第三个关键的组件是<a href="/en-US/docs/Web/CSS/Media_Queries">媒体查询</a>。媒体查询使以往Cameron Adams探讨过的、由JavaScript实现的布局类型切换，可以只使用CSS实现。和所有尺寸的屏幕都使用一种布局不同的是，布局是可以改变的：侧栏可以在小屏幕上重新布局，而替代用的导航栏也可以显示出来。</li> +</ol> + +<p>需要你理解的很重要的一点是<strong>响应式Web设计不是单独的技术</strong>，它是描述Web设计的一种方式、或者是一组最佳实践的一个词，它是用来建立可以<strong>响应</strong>查看内容的设备的样式的一个词。在Marcotte's原来的探索中，这意味着灵活网格（使用float）和媒体查询，但是在这篇文章写就的几乎十年以后，Web的响应式工作已经成为了默认做法。现代的CSS布局方式基本上就是响应式的，而且我们在Web平台上内置了新的东西，使得设计响应式站点变得容易。</p> + +<p>这篇文章的余下部分会为你指出，在建立响应式站点的时候，你可能会用到的各式Web平台的特色功能。</p> + +<h2 id="媒介查询">媒介查询</h2> + +<p>响应式设计仅仅是因为媒介查询才新兴起来的。媒介查询第三级规范已经在2009年成为了候选推荐，这意味着它可视为准备好在浏览器中开始支持了。媒介查询允许我们运行一系列测试，例如用户的屏幕是否大于某个宽度或者某个分辨率，并将CSS选择性地适应用户的需要应用在样式化页面上。</p> + +<p>例如，下面的媒体查询进行测试，以知晓当前的Web页面是否被展示为屏幕媒体（也就是说不是印刷文档），且视口至少有800像素宽。用于<code>.container</code>选择器的CSS将只会在这两件前提存在的情况下应用。</p> + +<pre class="brush: css notranslate"><code>@media screen and (min-width: 800px) { + .container { + margin: 1em 2em; + } +} </code> +</pre> + +<p>你可以在一张样式表上加入多条媒体查询，调整整个页面或者部分页面以达到适应各式屏幕尺寸的最佳效果。媒体查询，以及样式改变时的点，被叫做<em>断点</em>（breakpoints）。</p> + +<p>使用媒体查询时的一种通用方式是，为窄屏设备（例如移动设备）创建一个简单的单栏布局，然后检查是否是大些的屏幕，在你知道你有足够容纳的屏幕宽度的时候，开始采用一种多栏的布局 。这经常被描述为<strong>移动优先</strong>设计。</p> + +<p>在MDN文档中的<a href="/en-US/docs/Web/CSS/Media_Queries">媒体查询</a>中了解更多</p> + +<h2 id="灵活网格">灵活网格</h2> + +<p>响应式站点不只是在断点之间改变它们的布局，它们是建立在灵活网格上的。一个灵活网格意味着你不需要适配每个可能使用的设备尺寸，然后为其建立一个精确到像素级的适配布局。那种方式在现存有如此多种不同大小设备的前提下是不可能实现的，比如至少在台式机上，人们并不总是让他们的浏览器窗口最大化的。</p> + +<p>使用灵活网格，你只需要加进去一个断点，在内容看起来不齐整的时候改变设计。例如如果一行随着屏幕大小增加而增长得不可读的长，或者是一个盒子在变窄时把每行的两个单词挤到一起。</p> + +<p>早年间进行响应式设计的时候，我们唯一的实现布局的选项是使用<a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">float</a>。灵活浮动布局是这样实现的，让每个元素都有一个作为宽度的百分数，而且确保整个布局的和不会超过100%。在他对于液态网格文章的原文中，Marcotte详细描述了一种布局的法则，通过使用像素并把布局转化为百分数的方式设计。</p> + +<pre class="notranslate"><code>target / context = result </code> +</pre> + +<p>例如如果我们的预期栏尺寸为60像素，而且它所在的上下文（或者容器）为960像素，我们在将零点二的空间移动到右边以后，用960去除60，得到我们能够使用在我们的CSS上的值。</p> + +<pre class="brush: css notranslate"><code>.col { + width: 6.25%; /* 60 / 960 = 0.0625 */ +} </code> +</pre> + +<p>这种方式将会在今天整个Web上的许多地方上看到，而且它被我们的<a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy layout methods</a>一文中的布局一节中记载。可能你将会在工作中遇到使用这种方式的站点，所以有必要理解它，即使是在你不用建立一个使用浮动基础的灵活网格的情况下。</p> + +<p>下面的例子阐释了一个使用媒体查询和灵活网格的简单响应式设计。在窄屏幕上，布局将盒子堆叠在另一个的上面：</p> + +<figure><img alt="A mobile view of the layout with boxes stacked on top of each other vertically." src="https://mdn.mozillademos.org/files/16836/mdn-rwd-mobile.png" style="display: block; height: 407px; width: 300px;"> +<figcaption></figcaption> +</figure> + +<p>在宽些的屏幕上，它们变成了两列：</p> + +<figure><img alt="A desktop view of a layout with two columns." src="https://mdn.mozillademos.org/files/16837/mdn-rwd-desktop.png" style="display: block; height: 217px; width: 600px;"> +<figcaption></figcaption> +</figure> + +<div class="blockIndicator note"> +<p><strong>备注：</strong>你可以在GitHub上找到此示例的<a href="https://mdn.github.io/css-examples/learn/rwd/float-based-rwd.html">实时示例</a>和<a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/float-based-rwd.html">源代码</a>。</p> +</div> + +<h2 id="现代布局技术">现代布局技术</h2> + +<p>现代布局方式，例如<a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">多栏布局</a>、<a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">伸缩盒</a>和<a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">网格</a>默认是响应式的。它们都假设你在尽力创建一个可伸缩网格，而且给了你更容易这样做的方式。</p> + +<h3 id="多个列">多个列</h3> + +<p>这些布局方式中最老的一个是多个列，即当你指定一个<code>column-count</code>的时候，这意指你希望把你的内容分成多少列。浏览器之后会算出这些列的大小，这是一个随着屏幕尺寸变化的尺寸。</p> + +<pre class="brush: css notranslate"><code>.container { + column-count: 3; +} </code> +</pre> + +<p>如果你却去指定<code>column-width</code>的话，你是在指定一个<em>最小</em>宽度。浏览器会尽可能多数量地创建这一宽度的列，只要它们可以恰当地放进容器里面，然后将所有列之间的剩余空间共享出去。因而列的数量会随着空间的多少而改变。</p> + +<pre class="brush: css notranslate"><code>.container { + column-width: 10em; +} </code> +</pre> + +<h3 id="伸缩盒">伸缩盒</h3> + +<p>在伸缩盒中，初始的行为是，弹性的物件将参照容器里面的空间的大小，缩小和分布物件之间的空间。通过更改<code>flex-grow</code>和 <code>flex-shrink</code>的值，你可以指示在物件遇到周围有更多或者更少的空间的情况下，你所期望的物件表现。</p> + +<p>在下面的示例中，和布局专题的<a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox#Flexible_sizing_of_flex_items">Flexbox: Flexible sizing of flex items</a>中所描述的那样，使用了<code>flex: 1</code>的简写，可伸缩物件每个将会占据一份可伸缩容器中相等大小的空间。</p> + +<pre class="brush: css notranslate"><code>.container { + display: flex; +} + +.item { + flex: 1; +} </code> +</pre> + +<div class="blockIndicator note"> +<p><strong>备注：</strong>作为一个示例，我们已经重构了上面的简单响应式布局，这次我们用了伸缩盒。你可以看看我们是怎么样才不再需要使用奇怪的百分数值来计算列的尺寸的：<a href="https://mdn.github.io/css-examples/learn/rwd/flex-based-rwd.html">示例</a>、<a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/flex-based-rwd.html">源代码</a>。</p> +</div> + +<h3 id="CSS网格">CSS网格</h3> + +<p>在CSS网格布局中，<code>fr</code>单位许可了跨网格轨道可用空间的分布。下面的示例创建了一个有着3个大小为<code>1fr</code>的轨道的网格容器。这会创建三个列轨道，每个占据了容器中可用空间的一部分。你可以在<a href="/en-US/docs/Learn/CSS/CSS_layout/Grids#Flexible_grids_with_the_fr_unit">Flexible grids with the fr unit</a>下的学习布局网格专题了解更多和这一方式相关的信息。</p> + +<pre class="brush: css notranslate"><code>.container { + display: grid; + grid-template-columns: 1fr 1fr 1fr; +} </code> +</pre> + +<div class="blockIndicator note"> +<p><strong>备注：</strong>网格布局版本的代码要更简单，因为我们可以在.wrapper上定义列<a href="https://mdn.github.io/css-examples/learn/rwd/grid-based-rwd.html">：示例</a>，<a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/grid-based-rwd.html">源代码</a>。</p> +</div> + +<h2 id="响应式图像">响应式图像</h2> + +<p>最简单的处理响应式图像的方式是在Marcotte的早年的关于响应式设计的文章上所描述的那样。基本来说，你可以用一张有着所需最大尺寸的图像。然后缩放它。这仍然是今日所使用的一种方式，而且在大多数样式表里面，你在某些地方可以找到下面的CSS：</p> + +<pre class="brush: css notranslate"><code>img { + max-width: 100%: +} </code> +</pre> + +<p>这种方式有显然的弊端。图像有可能会显示得比它的原始尺寸小很多，以至于浪费带宽——一个移动端用户会下载几倍于他们在浏览器窗口中实际看到的大小的图像。此外，你可能不想在移动端和桌面端有相同的图像宽高比例。例如，在移动端，方形图像的表现会很好，但是在桌面端显示同样的内容则应用宽图像。或者，认识到移动端更小尺寸的图像的你也许会希望同时展示一张不同的图像，一张在小一点的屏幕上更容易理解的图像。这些东西不能简单通过缩放图像解决。</p> + +<p>响应式图像，使用了{{htmlelement("picture")}}元素和{{htmlelement("img")}} <code>srcset</code>和<code>sizes</code> 特性，解决了这两个问题。你可以提供附带着“提示”（描述图像最适合的屏幕尺寸和分辨率的元数据）的多种尺寸，浏览器将会选择对设备最合适的图像，以确保用户下载尺寸适合他们使用的设备的图像。</p> + +<p>你也可以给用于不同尺寸的图像做“艺术指导”，为不同的屏幕尺寸提供不同的图像裁切或者完全不同的图像。</p> + +<p>你可以在MDN这里的学习HTML一节中找到详细的<a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">响应式图像指南</a>。</p> + +<h2 id="响应式排版">响应式排版</h2> + +<p>在早期的工作没有考虑的一个响应式设计的元素是响应式排版的理念。本质上讲，这描述了根据屏幕真实使用范围的多少，在媒体查询的同时改变字体大小。</p> + +<p>在本例子中，我们想讲我们的一级标题设置为<code>4rem</code>，也就是说它将会有我们的基础字体的四倍大。这真的是个很大的标题！我们只想在大些的屏幕上有这么个超大的标题，那我们先弄个小点的标题，再使用媒体查询，在我们知道用户使用至少<code>1200px</code>的屏幕的时候，拿大些的尺寸覆写它。</p> + +<pre class="brush: css notranslate"><code>html { + font-size: 1em; +} + +h1 { + font-size: 2rem; +} + +@media (min-width: 1200px) { + h1 { + font-size: 4rem; + } +} </code> +</pre> + +<p>我们已经编辑了我们在上面的响应式网格示例，让它同时包含了使用了圈出方式的响应式类型。你也可以看下随着布局变为两栏，标题是怎样转换大小的。</p> + +<p>移动端，标题变小了：</p> + +<figure><img alt="A stacked layout with a small heading size." src="https://mdn.mozillademos.org/files/16838/mdn-rwd-font-mobile.png" style="display: block; height: 407px; width: 300px;"> +<figcaption></figcaption> +</figure> + +<p>但在桌面端，我们看到了大点的标题：</p> + +<figure><img alt="A two column layout with a large heading." src="https://mdn.mozillademos.org/files/16839/mdn-rwd-font-desktop.png" style="display: block; height: 169px; width: 600px;"> +<figcaption></figcaption> +</figure> + +<div class="blockIndicator note"> +<p><strong>备注：</strong> 查看这个编排好的示例：<a href="https://mdn.github.io/css-examples/learn/rwd/type-rwd.html">示例</a>，<a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/type-rwd.html">源代码</a>。</p> +</div> + +<p>正如这种排版方式展示的这样，你不需要让媒介查询只能改变页面的布局。它们也能用来调节每个元素，让它们在别的大小的屏幕上更加可用或者更具吸引力。</p> + +<h3 id="使用视口单位实现响应式排版">使用视口单位实现响应式排版</h3> + +<p>一个有趣的方式是使用视口单位<code>vw</code>来实现响应式排版。<code>1vw</code>等同于视口宽度的百分之一，即如果你用<code>vw</code>来设定字体大小的话，字体的大小将总是随视口的大小进行改变。</p> + +<pre class="brush: css notranslate">h1 { + font-size: 6vw; +}</pre> + +<p>问题在于，当做上面的事情的时候，因为文本总是随着视口的大小改变大小，用户失去了放缩任何使用<code>vw</code>单位的文本的能力。<strong>所以你永远都不要只用viewport单位设定文本。</strong></p> + +<p>这里有一个解决方法，它使用了<code><a href="/en-US/docs/Web/CSS/calc">calc()</a></code>，如果你将<code>vw</code>单位加到了使用固定大小（例如<code>em</code>或者<code>rem</code>）的值组，那么文本仍然是可放缩的。基本来说，是<code>vw</code>加在了放缩后的值上。</p> + +<pre class="brush: css notranslate">h1 { + font-size: calc(1.5rem + 3vw); +}</pre> + +<p>这就是说，我们只需要指定标题的字体大小一次，而不是为移动端设定它，然后再在媒介查询中重新定义它。字体会在你增加视口大小的时候逐渐增大。</p> + +<div class="blockIndicator note"> +<p>查看这种情况的一个编排好的示例： <a href="https://mdn.github.io/css-examples/learn/rwd/type-vw.html">示例</a>，<a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/type-vw.html">源代码</a>。</p> +</div> + +<h2 id="视口元标签">视口元标签</h2> + +<p>如果你看看一张响应式页面的HTML源代码，你通常将会在文档的<code><head></code>看到下面的{{htmlelement("meta")}}标签。</p> + +<pre class="brush: html notranslate"><code><meta name="viewport" content="width=device-width,initial-scale=1"></code> +</pre> + +<p>这个元标签告诉移动端浏览器，它们应该将视口宽度设定为设备的宽度，将文档放大到其预期大小的100%，在移动端以你所希望的为移动优化的大小展示文档。</p> + +<p>为何需要这个？因为移动端浏览器倾向于在它们的视口宽度上说谎。</p> + +<p>这个元标签的存在，是由于原来iPhone发布以后，人们开始在小的手机屏幕上阅览网页，而大多数站点未对移动端做优化的缘故。移动端浏览器因此会把视口宽度设为960像素，并以这个宽度渲染页面，结果展示的是桌面布局的缩放版本。其他的移动端浏览器（例如谷歌安卓上的）也是这么做的。用户可以在站点中放大、移动，查看他们感兴趣的那部分，但是这看起来很不舒服。如果你不幸遇到了一个没有响应式设计的网站，今天你还会看到这种情况。</p> + +<p>麻烦的是，你的带断点和媒介查询的响应式设计不会在移动端浏览器上像预期那样工作。如果你有个窄屏布局，在480像素及以下的视口宽度下生效，但是视口是按960像素设定的，你将不会在移动端看到你的窄屏布局。通过设定<code>width=device-width</code>，你用设备的实际宽度覆写了苹果默认的<code>width=960px</code>，然后你的媒介查询就会像预期那样生效。</p> + +<p><strong>所以你应该在你的文档头部<em>总是</em>包含上面那行HTML。</strong></p> + +<p>和视口元标签一起，你可以使用另外几个设定，但大体说来，上面那行就是你想要使用的。</p> + +<ul> + <li><code>initial-scale</code>：设定了页面的初始缩放，我们设定为1。</li> + <li><code>height</code>：特别为视口设定一个高度。</li> + <li><code>minimum-scale</code>：设定最小缩放级别。</li> + <li><code>maximum-scale</code>：设定最大缩放级别。</li> + <li><code>user-scalable</code>：如果设为<code>no</code>的话阻止缩放。</li> +</ul> + +<p>你应该避免使用<code>minimum-scale</code>、<code>maximum-scale</code>，尤其是将<code>user-scalable</code>设为<code>no</code>。用户应该有权力尽可能大或小地进行缩放，阻止这种做法会引起访问性问题。</p> + +<div class="blockIndicator note"> +<p><strong>备注：</strong> 有一个CSS @规则是被设计用来替换掉视口元标签的——<a href="/en-US/docs/Web/CSS/@viewport">@viewport</a>——但是浏览器对它的支持太差了。它是在IE和Edge中引入的，但自从Chromium内核的Edge发布以后，它就不再受到Edge浏览器支持了。</p> +</div> + +<h2 id="小结">小结</h2> + +<p>响应式设计指的是一个响应浏览环境的网页或者应用设计。它涵盖了很多CSS和HTML的功能和技术，现在基本上就是我们默认建设网站的方式。想一下你在手机上访问的网站，遇到一个缩放的桌面版网站，或者你需要向侧边滚动来寻找东西的网站可能是相当不寻常的。这是因为Web已经迁移到了这种响应式设计的方式上。</p> + +<p>在这些课里学到的布局方式的帮助下，实现响应式设计也变得愈加简单。如果你今天新近了解Web开发，那么你与响应式设计早期相比，手边有多得多的工具。因而，你有必要检查下你所引用的任何材料的年纪。尽管历史上的文章仍然有用，现代的CSS和HTML的使用让创建一个优雅且实用的设计变得远远更加容易，且无论你的访客使用什么设备浏览网站。</p> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="模块目录">模块目录</h2> + +<ul> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">介绍CSS布局</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">正常布局流</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">弹性盒</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">网格</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">浮动</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">定位</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">多列布局</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">响应式设计</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">媒体查询入门指南</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">传统布局方法</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">支持旧浏览器</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">基本布局掌握测验</a></li> +</ul> diff --git a/files/zh-cn/learn/css/css_layout/supporting_older_browsers/index.html b/files/zh-cn/learn/css/css_layout/supporting_older_browsers/index.html new file mode 100644 index 0000000000..8a9e4b9126 --- /dev/null +++ b/files/zh-cn/learn/css/css_layout/supporting_older_browsers/index.html @@ -0,0 +1,237 @@ +--- +title: 支持旧浏览器 +slug: Learn/CSS/CSS_layout/Supporting_Older_Browsers +translation_of: Learn/CSS/CSS_layout/Supporting_Older_Browsers +--- +<div>{{LearnSidebar}}</div> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}</p> + +<p class="summary">本文中，我们推荐使用弹性盒和网格作为你的设计的主要布局方式。但是，你的网站的访客会有人使用旧浏览器，或者是不支持你已经使用的方式。这总是Web上存在的情况，因为新的特性被开发出来，不同的浏览器会优先支持不同的特性。本文解释了如何使用现代的Web技术，而无需让采用旧技术的用户被拒之门外。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">学习前提：</th> + <td>HTML基础（学习<a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML">HTML介绍</a>），了解CSS工作的原理（学习<a href="/zh-CN/docs/Learn/CSS/Introduction_to_CSS">CSS介绍</a>和<a href="/zh-CN/docs/Learn/CSS/Styling_boxes">样式化盒子</a>）</td> + </tr> + <tr> + <th scope="row">目标：</th> + <td>理解怎么让你的布局为旧有的、不支持你想要使用的特性的浏览器提供支持。</td> + </tr> + </tbody> +</table> + +<h2 id="对于你的站点来说，浏览器生态是怎样的？">对于你的站点来说，浏览器生态是怎样的？</h2> + +<p>每个网站论目标用户都是不同的，在决定采用哪种方式之前，你需要查明使用旧浏览器浏览你的站点的用户的数量。如果你有一个已有的网站，你想要润色或者替换它，这是一件直截了当的事情，因为你很可能有了可用的、可以告诉你人们使用的技术的分析。如果你没有分析，或者这是一个全新的网站，那么例如<a href="http://gs.statcounter.com/">Statcounter</a>之类的站点可以提供以位置分类的数据。</p> + +<p>你应该同样考虑设备的类型和人们使用你的网站的方式。譬如，你可能更想有超出平均数量的移动设备的访问。可访问性和使用辅助性技术的人总应当被考虑，对于一些站点，这问题可能更加重要。以我的经验，开发者经常担心1%的使用旧版IE的用户的体验，而不去照顾多得多的有可访问性需求的用户。</p> + +<h2 id="对你想使用的特性的支持如何？">对你想使用的特性的支持如何？</h2> + +<p>一旦你知道了会访问你的网站的浏览器，你就可以在任何你想使用的技术，与该技术受到的支持以及为不能使用该技术的访客提供一个替代方案的难易度之间做权衡。在MDN上，我们在尽力让这个流程变得容易——在每个详述CSS属性的页面上提供浏览器的兼容性信息。例如，看一下{{cssxref("grid-template-columns")}}页面。在这个页面底部有一个表格，列出了主流的浏览器，还有它们开始支持这个属性的版本。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16047/browser-table.png" style="height: 1178px; width: 2102px;"></p> + +<p>另一个流行的查明一个特性有多受到支持的方式是<a href="https://caniuse.com/">Can I Use</a>网站。这个网站列出了主流的Web平台特性，附有它们的浏览器支持信息。你可以按位置查看使用数据——在你致力于一个用户大多数是世界上的某个区域的网站的时候会有用。你甚至可以链接你的Google Analytics账户，得到基于你的用户的信息。</p> + +<p>理解你的用户拥有的技术，以及支持你可能想要使用的东西，这样你就可以很好地作出你的所有决定，知道最多能多好地支持所有用户。</p> + +<h2 id="支持不意味着“看起来一样”">支持不意味着“看起来一样”</h2> + +<p>一个网站可能不会在所有浏览器上看起来都一样，因为你的一些用户将会是在一部手机上，而另一些用户是在桌面大屏幕上浏览你的网站；类似地，你的一些用户会是使用旧版浏览器的，而另外一些是最新版；你的一些用户可能是在聆听由屏幕阅读器朗读的你的内容，或者已经放大了页面来读到内容。支持所有人意味着提供保守设计版本的你的内容，这样在现代浏览器上，它会看起来很棒，而对于旧浏览器用户而言仍然以最低限度可用。</p> + +<p>基本级别的支持来源于良好地组织你的内容，从而让你的页面的正常布局流有意义。一个使用非常局限的功能手机的用户可能不怎么会体验到你的CSS，但是内容会以让阅读容易的方式流过。因而你应该总是从一个良好组织的HTML文档开始。<em>如果你移除掉你的样式表，你的内容还能被理解吗？</em></p> + +<p>一个选项是，把站点的这种原始视图作为回滚，用在使用很老旧或者受局限的浏览器的用户身上。如果你没有多少来到站点的人是使用这些浏览器的，将时间花在尝试给予他们和使用现代浏览器类似的体验上可能没有商业价值。将时间花在让站点具备更多可访问性的事情上，以服务远远更多的用户，可能会是更好的做法。这样的做法在纯HTML页面和花里胡哨之间是有余地的，CSS事实上让建立这些回滚变得简明。</p> + +<h2 id="在CSS中构建回滚">在CSS中构建回滚</h2> + +<p>CSS规范包含了在一个物件上同时应用两种布局的时候，解释浏览器如何反应的信息。例如，规范定义如果一个浮动元素同时又是用CSS网格布局实现的网格元素（Grid Item）的时候会发生什么。结合浏览器会忽略掉它不会理解的CSS的特点组合起来，你就得到了使用我们已经提到的<a href="/zh-CN/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">传统技术</a>构建简单布局的方法，在可以理解你的网格布局的现代浏览器中，传统布局方法会被网格布局覆写掉。</p> + +<p>在下面的示例中，我们已经浮动了三个<code><div></code>，所以它们显示在了一行中。任何使用不支持<a href="/zh-CN/docs/Learn/CSS/CSS_layout/Grids">CSS网格布局</a>的浏览器的人将会看到以浮动布局实现的一列盒子。一个成为了网格物件的浮动物件失去了浮动的动作，就是说通过把wrapper变成网格容器，浮动物件变成了网格物件。如果浏览器器支持网格布局，它会显示网格视图，否则它会忽略<code>display: grid</code>相关的属性，使用浮动布局。</p> + +<div id="Example1"> +<pre class="brush: css notranslate">* {box-sizing: border-box;} + +.wrapper { + background-color: rgb(79,185,227); + padding: 10px; + max-width: 400px; + display: grid; + grid-template-columns: 1fr 1fr 1fr; +} + +.item { + float: left; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +} +</pre> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="item">Item One</div> + <div class="item">Item Two</div> + <div class="item">Item Three</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('Example1', '100%', '200') }}</p> +</div> + +<div class="note"> +<p><strong>备注：</strong>{{cssxref("clear")}}属性也在被清除的物件变为网格物件的时候失效，所以你应该在一个会变成网格布局的布局上，加上被清除的尾部。</p> +</div> + +<h3 id="回滚方式">回滚方式</h3> + +<p>有很多布局方式，它们同这个浮动示例使用的方式是类似的。你可以选择能够与你需要建立的布局范式符合得最好的那个。</p> + +<dl> + <dd>浮动和<strong><strong>清除</strong></strong></dd> + <dd>如上所示，如果浮动和清除的物件变成了弹性或网格物件，浮动和清除属性不再影响布局。</dd> + <dt>display: inline-block</dt> + <dd>这种方式能被用来建立列布局，如果一个物件被设为<code>display: inline-block</code>，但是之后变成了弹性或者网格物件，inline-block行为将会被忽略。</dd> + <dt>display: table</dt> + <dd>这种在这几节课的<a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">介绍</a>中描述的建立CSS表格的方式可以被用作回滚。被设为CSS表格布局的物件将会在它们变为弹性或者网格物件的时候不再表现出这种行为。重要的是，被建立起来用于修复表格结构的匿名盒子没有被建立起来。</dd> + <dt>Multiple-column Layout</dt> + <dd>对于某些布局，你能用<a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">multi-col</a>作为回滚。如果你的容器有任何一个<code>column-*</code>属性被定义，之后变成了网格容器，那么多列行为不会实现。</dd> + <dt>作为网格的回滚的弹性盒</dt> + <dd><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">弹性盒</a>由于受到了IE10和IE11的支持，比网格有着更好的浏览器支持。不过，在这节课的稍后部分，你一定要看下旧浏览器对弹性盒相当参差不齐而且令人困惑的支持的相关信息。如果你把弹性容器做成了网格容器，任何应用到子元素的<code>flex</code>属性都会被忽略。</dd> +</dl> + +<p>对于许多在旧浏览器中微调的布局来说，你可能会发现你能用这种方式使用CSS，给访客亲切的体验。我们加入了一个更简单的基于旧的和受到良好支持技术的布局，然后用新一些的CSS建立一个可以由90%的用户看到的布局。但是存在这样的情况：回滚代码会需要包含新浏览器也能理解的东西；举例来说就是，我们要往我们的浮动物件中加入百分数宽度，从而让列看起来更像网格，拉伸以充满容器。</p> + +<p>在浮动布局中，百分数是依照容器计算的——33.333%是容器宽度的三分之一。但在网格中，这33.333%是根据物件所在的网格区域计算的，所以只要网格布局引入进来，物件的大小实际上变成了我们想要的大小的三分之一。</p> + +<div id="Example2"> +<pre class="brush: css notranslate">* {box-sizing: border-box;} + +.wrapper { + background-color: rgb(79,185,227); + padding: 10px; + max-width: 400px; + display: grid; + grid-template-columns: 1fr 1fr 1fr; +} + +.item { + float: left; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; + width: 33.333%; +} +</pre> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="item">Item One</div> + <div class="item">Item Two</div> + <div class="item">Item Three</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('Example2', '100%', '200') }}</p> +</div> + +<p>为了处理这种问题，我们需要有能够探测网格是否受到支持的方法，也就是探测它是否会覆写宽度的方法。CSS在这里为我们提供了一个解决方法。</p> + +<h2 id="特性查询">特性查询</h2> + +<p>特性查询允许你测试一个浏览器是否支持任何特定的一个CSS特性。这就是说，你可以写一些面向不支持某项特性的浏览器的CSS，然后检查以了解浏览器是否支持，如果支持的话就可以加进你的复杂布局了。</p> + +<p>如果我们向上面的示例中加入了一条特征查询，要是我们知道网格受到支持的话，我们可以用它把我们的物件宽度设定回<code>auto</code>。</p> + +<div id="Example3"> +<pre class="brush: css notranslate">* {box-sizing: border-box;} + +.wrapper { + background-color: rgb(79,185,227); + padding: 10px; + max-width: 400px; + display: grid; + grid-template-columns: 1fr 1fr 1fr; +} + +.item { + float: left; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; + width: 33.333%; +} + +@supports (display: grid) { + .item { + width: auto; + } +} +</pre> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="item">Item One</div> + <div class="item">Item Two</div> + <div class="item">Item Three</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('Example3', '100%', '200') }}</p> +</div> + +<p>对特性查询的支持，在各现代浏览器中都是很好的。但是你应该注意那些既不支持CSS网格，也不支持特征查询的浏览器。这就是说在上面详细介绍的一种方式，对这些浏览器而言，会表现得很好。我们要做的是，先在任何特性查询以外，编写我们的旧CSS。不支持网格也不支持特性查询的浏览器会使用这部分它们可以理解的布局信息，将其他东西全都忽略掉。支持特性查询和CSS网格等的浏览器会运行网格代码和特性查询之内的代码。</p> + +<p>对于特性查询的规范，也包含了测试浏览器是否支持某个特性的能力——这只在浏览器支持特性查询的时候有用。未来，一种检测支持的缺失的方式将会实现，同时不支持特性查询的浏览器也将退出历史舞台。但是现在，你要使用这种编写旧CSS的方式，然后覆写它，以求最广泛的支持。</p> + +<h2 id="弹性盒的旧版本">弹性盒的旧版本</h2> + +<p>在旧版浏览器中，你可以找到弹性盒规范的旧有修订版本。在编写这篇文章的时候，这大多数是IE10的问题，它在弹性盒上使用了<code>-ms-</code>前缀。这也意味着现在还存在着一些过时的文章和教程，<a href="https://css-tricks.com/old-flexbox-and-new-flexbox/">这篇有用的指导</a>帮助你分辨你看到的信息；如果你需要在很旧的浏览器中需要flex支持的话，它也会帮到你。</p> + +<h2 id="IE10和IE11的带前缀版的网格">IE10和IE11的带前缀版的网格</h2> + +<p>CSS网格规范最初成形于IE10，也就是说尽管IE10和IE11不支持<em>现代的</em>网格，虽然这种网格和本站记载的现代布局不同，它们还是有一个很堪用的网格布局版本。IE10和IE11的实现是以<code>-ms-</code>为前缀的，也就是说你可以给这两个浏览器用，而在非微软浏览器上，这种属性会被忽略。不过Edge仍然能理解旧语法，所以小心点，让每个东西都安全地在你的现代网格CSS中覆写。</p> + +<p><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">网格布局渐进增强</a>指导能帮你理解IE版的网格，我们在这节课的末尾加入了一些额外的有用的链接。不过，除非你有很多使用旧版IE的访客，你可能发现专注于建立一个由所有不支持的浏览器共用的回滚版本是一个更好的选择。</p> + +<h2 id="测试旧浏览器">测试旧浏览器</h2> + +<p>由于大多数浏览器都支持弹性盒和网格，测试旧浏览器想想就很难。一种方式是使用在线的测试工具，例如Sauce Labs，在<a href="https://developer.mozilla.org/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing">跨浏览器测试</a>模块里有详细说明。</p> + +<p>你也可以下载安装虚拟机，在你的电脑的容器环境中运行旧版浏览器。能够使用旧版IE是很有用的，为此，微软已经制作了<a href="https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/">一些可以免费下载的虚拟机</a>。这些对Mac、Windows和Linux操作系统都是可以用的，所以即使你没有Windows电脑，这也是一个测试旧的和现代Windows浏览器的绝佳办法。</p> + +<h2 id="小结">小结</h2> + +<p>你现在有了自信地使用例如网格和弹性盒技术、建立面向旧浏览器的回滚以及利用任何可能会在未来出现的 新技术所需的知识。</p> + +<h2 id="另见">另见</h2> + +<ul> + <li><a href="https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/">在CSS中使用媒体查询</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox">弹性盒的后向兼容性</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS网格布局和渐进优化</a></li> + <li><a href="https://www.smashingmagazine.com/2017/11/css-grid-supporting-browsers-without-grid/">使用CSS网格：支持没有网格的浏览器</a></li> + <li><a href="https://24ways.org/2012/css3-grid-layout/">使用IE10和IE11版网格的教程</a></li> + <li><a href="https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/">我应该尽力使用IE10的网格布局实现吗？</a></li> + <li><a href="https://24ways.org/2017/cascading-web-design/">有特性查询的层叠式Web设计</a></li> + <li><a href="https://gridbyexample.com/learn/2016/12/24/learning-grid-day24/">使用特性查询（视频）</a></li> +</ul> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="模块目录">模块目录</h2> + +<ul> + <li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Introduction">CSS布局介绍</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Normal_Flow">正常布局流</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Flexbox">弹性盒</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Grids">网格</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Floats">浮动</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Positioning">定位</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">多列布局</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Responsive_Design">响应式设计</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Media_queries">媒体查询入门指南</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">传统布局方式</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">支持旧浏览器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">基本布局掌握测验</a></li> +</ul> diff --git a/files/zh-cn/learn/css/css_layout/传统的布局方法/index.html b/files/zh-cn/learn/css/css_layout/传统的布局方法/index.html new file mode 100644 index 0000000000..58313b6fdd --- /dev/null +++ b/files/zh-cn/learn/css/css_layout/传统的布局方法/index.html @@ -0,0 +1,577 @@ +--- +title: 传统的布局方法 +slug: Learn/CSS/CSS_layout/传统的布局方法 +translation_of: Learn/CSS/CSS_layout/Legacy_Layout_Methods +--- +<div>{{LearnSidebar}}</div> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-Column_Layout", "Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}}</p> + +<p class="summary">在CSS布局中，网格系统是一种非常常见的布局方式，并且在CSS 网格布局之前，它们倾向于由浮动和其他的布局功能实现。假想你的布局是一组数字标注的列（例如4、6或者12），然后把你的内容填充到这些想象的列中。这篇文章将要探讨这种早期的方法是怎么实现的，来帮助你在旧项目工作时更好地理解他们。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">学习前提：</th> + <td>HTML 基础(学习 <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>),并且了解CSS是怎么工作的(学习 <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a> and <a href="/en-US/docs/Learn/CSS/Styling_boxes">Styling boxes</a>.)</td> + </tr> + <tr> + <th scope="row">目标：</th> + <td>了解浏览器CSS网格布局系统的基本概念。</td> + </tr> + </tbody> +</table> + +<h2 id="CSS网格布局之前的布局与网格系统">CSS网格布局之前的布局与网格系统</h2> + +<p>一个来自设计领域的人或许会惊讶，CSS直到最近才有网格系统，不仅如此，我们还用了许多次优方法来建立类网格设计。我们现在把这些称为“古老”的方法。</p> + +<p>对于新项目来说，大多数情况下CSS网格布局（CSS Grid Layout）被用来和其他一个或多个现代的布局方法结合，以形成布局的基础。但是你会时不时的遇到采用这种古老方法的“网格系统”。值得了解它们是如何工作的，以及为什么它们和CSS网格布局不同。</p> + +<p>这个课程将会解释基于float和flexbox的网格系统和网格框架是如何工作的。学习过网格布局之后，你可能会惊讶，这些看起来真的好复杂！如果你需要为不支持新技术的老浏览器上创建后备代码的话，这些知识将会变的十分有用，而且你也可以在使用这些类别系统的已有工程上工作。</p> + +<p>值得铭记在心的是，在我们探索这些系统时，它们里面没有哪个的建立方式是像通过CSS网格布局创建网格那样，真的建立一个网格。他们通过给目标一个大小， 然后推动它们，让它们<strong>看起来</strong>像网格一样排列成一条线。</p> + +<h2 id="两列布局">两列布局</h2> + +<p>让我们从最简单的实例开始——一个两列布局。你可以按照步骤在你的电脑上创建一个新的 <code>index.html</code>，先用一个<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">简单HTML模板</a>填充它，然后在适当的位置填充下面的代码。在这节底部，你可以看到一个展示最终代码样貌的实时实例。</p> + +<p>首先，我们需要在我们的栏中放入一些内容。把现在在body中的内容替换成下面的代码：</p> + +<pre class="brush: html"><h1>2 column layout example</h1> +<div> + <h2>First column</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> +</div> + +<div> + <h2>Second column</h2> + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> +</div></pre> + +<p>每一列都需要一个上一级元素来包含内容，这样我们可以一次性操作所有内容。在这个例子中我们选择了{{htmlelement("div")}}， 但是你可以选择其他更合适的，例如{{htmlelement("article")}}, {{htmlelement("section")}}, 和 {{htmlelement("aside")}}，或者是任何别的元素。</p> + +<p>现在我们来看CSS。首先，应用以下的代码来对HTML进行基本设置：</p> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 0 auto; +}</pre> + +<p>body将会占据90%的视口宽度，直到达到900像素，在这种情况下，它将固定并保持在视口正中。 默认情况下，它的子项（the {{htmlelement("h1")}} 和两个 {{htmlelement("div")}}）将会达到正文宽度的100%。如果我们希望两个{{htmlelement("div")}}，一个浮在窗口的一边，另一个浮动在另一边的话， 我们需要将它们的宽度设置为其父元素的100%或者更小，以便他们可以并排放置。将下面的代码加在CSS的底部：</p> + +<pre class="brush: css">div:nth-of-type(1) { + width: 48%; +} + +div:nth-of-type(2) { + width: 48%; +}</pre> + +<p>这里我们将它们都设置为了父元素宽度的48%——总共是96%，在两栏之间留4%的空隙，为它们提供一些宽松的空间。现在我们只需要将让列浮动，像这样：</p> + +<pre class="brush: css">div:nth-of-type(1) { + width: 48%; + float: left; +} + +div:nth-of-type(2) { + width: 48%; + float: right; +}</pre> + +<p>将这些都放在一起，会得到这样的结果：</p> + +<div id="Floated_Two_Col"> +<div class="hidden"> +<h6 id="简单两列布局">简单两列布局</h6> + +<pre class="brush: html"><h1>2 column layout example</h1> + +<div> + <h2>First column</h2> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> +</div> + +<div> + <h2>Second column</h2> + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> +</div> +</pre> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 0 auto; +} + +div:nth-of-type(1) { + width: 48%; + float: left; +} + +div:nth-of-type(2) { + width: 48%; + float: right; +} +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('Floated_Two_Col', '100%', 520) }}</p> + +<p>你有没有注意到我们在宽度的表示上都用的是百分比——这是一个很好的策略，这创建了一个<strong>流动布局（liquid layout），</strong>能够适应不同的屏幕大小，在小一些的屏幕上也能使列保持一样的比例。试一试自己来调整浏览器窗口的宽度，这是响应式网页非常有价值的一个工具。</p> + +<div class="note"> +<p><strong>备注：</strong>你可以在 <a href="http://mdn.github.io/learning-area/css/css-layout/floats/0_two-column-layout.html">0_two-column-layout.html</a> 实时查看这个实例（另见<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/floats/0_two-column-layout.html">源代码</a>）。</p> +</div> + +<h2 id="创建简单的传统网格框架">创建简单的传统网格框架</h2> + +<p>大多数传统的框架使用{{cssxref("float")}}属性来使列相邻排列，让它们看起来像是一个网格。以用float创建网格的流程工作，可以向你展示它们工作的原理，并介绍一些更高级的概念，并在<a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">浮动和清除</a>这节课中学到的内容之上搭建更多的东西。</p> + +<p>最简单的一类网格创建是固定宽度的——我们只需要计算设计中总的宽度、列的数目、每一列和间隔的宽度。但是，如果我们决定设计的网格是可以根据浏览器宽度缩放的，我们则需要计算每一列和间距的所占的宽度的百分比。</p> + +<p>下一部分我们将学习如何创建这两种方式的网格。我们会构建一个有12列的表格——我们选择了12这个常见的数字，来看它对不同情景的适应情况，因为12可以被6，4，3，和2完全整除。</p> + +<h3 id="一个简单的固定宽度网格">一个简单的固定宽度网格</h3> + +<p>让我们先来创建一个固定列宽度的网格系统吧。</p> + +<p>首先，把 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid.html">simple-grid.html</a>下载储存下来，其body中包含以下的标记：</p> + +<pre class="brush: html"><div class="wrapper"> + <div class="row"> + <div class="col">1</div> + <div class="col">2</div> + <div class="col">3</div> + <div class="col">4</div> + <div class="col">5</div> + <div class="col">6</div> + <div class="col">7</div> + <div class="col">8</div> + <div class="col">9</div> + <div class="col">10</div> + <div class="col">11</div> + <div class="col">12</div> + </div> + <div class="row"> + <div class="col span1">13</div> + <div class="col span6">14</div> + <div class="col span3">15</div> + <div class="col span2">16</div> + </div> +</div></pre> + +<p>我们的目标是把它变成一个有两行十二列的演示网格——第一行显示各列的大小，第二行显示网格上不同大小的区域。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13901/simple-grid-finished.png" style="display: block; height: 50px; margin: 0px auto; width: 952px;"></p> + +<p>在{{htmlelement("style")}}中，加入下面的代码，使容器右侧的内边距为20像素，总的宽度变为980像素。这样给我们留出960像素可以放置列和它们的间隔——这种情况下，内边距会被从总的内容宽度中减去，因为我们在{{cssxref("box-sizing")}}中将站点上所有的元素设置成了<code>border-box</code> （可以查看<a href="/zh-CN/docs/Learn/CSS/Styling_boxes/Box_model_recap#Changing_the_box_model_completely">完全改变盒模型</a>，获得更多解释）。</p> + +<pre class="brush: css">* { + box-sizing: border-box; +} + +body { + width: 980px; + margin: 0 auto; +} + +.wrapper { + padding-right: 20px; +}</pre> + +<p>现在使用包装了网格每行的列容器，清除网格中每行的浮动，在你前面的规则里加入下面的规则：</p> + +<pre class="brush: css">.row { + clear: both; +}</pre> + +<p>应用这条清除规则，意味着我们不用在每行上都填充12列元素。行与行之间不会互相干扰，并保持分隔。</p> + +<p>列与列之间保持20像素的间隔。我们使用每列元素的左外边框来实现这个间隔。然后我们一共有12个间隔 — 12 x 20 = 240。</p> + +<p>我们需要从960px的总宽减去这个间隔，然后剩下720像素给我们的列。如果用720除以12，我们知道每列有60个像素宽。</p> + +<p>接下来我们给<code>.col</code>类写一个规则, 让它向左浮动，给它设置20像素的{{cssxref("margin-left")}}来实现一个间隔，再设置60像素的{{cssxref("width")}}。把下面的规则加到你的CSS底部：</p> + +<pre class="brush: css">.col { + float: left; + margin-left: 20px; + width: 60px; + background: rgb(255, 150, 150); +}</pre> + +<p>单个列的最上面一行现在铺开成为了一个排列整齐的网格。</p> + +<div class="note"> +<p><strong>备注：</strong>我们也已经让每列变成亮红色，这样你就能准确看到每列占据了多少空间。</p> +</div> + +<p>如果我们想让布局容器横跨多列，必须要给它设置特殊的类，来适应列的数量的{{cssxref("width")}} 值（加上间隔的值）。我们需要新建额外的类来允许横跨2-12列。每个宽度是将该列数的列宽加上间隔宽度相加的结果，这些宽度总是比列数少一个。</p> + +<p>在你的CSS底部加入下面的内容：</p> + +<pre class="brush: css">/* Two column widths (120px) plus one gutter width (20px) */ +.col.span2 { width: 140px; } +/* Three column widths (180px) plus two gutter widths (40px) */ +.col.span3 { width: 220px; } +/* And so on... */ +.col.span4 { width: 300px; } +.col.span5 { width: 380px; } +.col.span6 { width: 460px; } +.col.span7 { width: 540px; } +.col.span8 { width: 620px; } +.col.span9 { width: 700px; } +.col.span10 { width: 780px; } +.col.span11 { width: 860px; } +.col.span12 { width: 940px; }</pre> + +<p>创建了这些类以后，我们可以在网格上布局不同宽度的列。试试保存并在你的浏览器上加载这个页面，来查看效果。</p> + +<div class="note"> +<p><strong>备注：</strong> 如果你在让上面的示例实现的时候正遇到麻烦，尝试将它和我们在GitHub上的<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid-finished.html">完成版</a>进行比较（再<a href="http://mdn.github.io/learning-area/css/css-layout/grids/simple-grid-finished.html">看下实时的示例</a>）。</p> +</div> + +<p>试试修改这些类，甚至添加、删除一些容器，来看看你能怎么改变这个布局。例如，你可以把第二行写成这样：</p> + +<pre class="brush: css"><div class="row"> + <div class="col span8">13</div> + <div class="col span4">14</div> +</div></pre> + +<p>现在你的网格布局生效了。你可以简单的定义这些行，和每行的列数，然后给他们添加你想要的内容。真棒！</p> + +<h3 id="创建液态网格">创建液态网格</h3> + +<p>这个网格表现的不错，但是它长度固定。 我们实际却想要一个弹性（流体）的网格，它可以随着浏览器的{{Glossary("viewport")}}大小的变化自动伸缩。为了达成这个目标，我们需要把相应的像素的长度变为百分比长度。</p> + +<p>把固定宽度转为伸缩的基于百分比宽度的算式在下面：</p> + +<pre>target / context = result</pre> + +<p>在我们的列宽里，我们的<strong>目标列长度</strong>是60像素，我们的<strong>上下文</strong>是960像素的包装。我们可以这么计算百分比：</p> + +<pre>60 / 960 = 0.0625</pre> + +<p>然后我们挪动小数点两位，得到百分数6.25%。所以在CSS里面，我们可以用6.25%代替60像素。</p> + +<p>我们需要同样这么算间隔：</p> + +<pre>20 / 960 = 0.02083333333</pre> + +<p>所以我们需要用2.08333333%代替<code>.col</code>里{{cssxref("margin-left")}}的20像素，和<code>.wrapper</code>里{{cssxref("padding-right")}}的20像素。</p> + +<h4 id="更新我们的网格">更新我们的网格</h4> + +<p>创建一个之前例子网页的副本。然后开始这个章节，或者制作一个<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid-finished.html">simple-grid-finished.html</a>代码的本地副本，以将其作为入手点。</p> + +<p>更新第二个CSS规则（有着<code>.wrapper</code>选择器），像下面这样：</p> + +<pre class="brush: css">body { + width: 90%; + max-width: 980px; + margin: 0 auto; +} + +.wrapper { + padding-right: 2.08333333%; +}</pre> + +<p>我们不仅给它一个百分比的{{cssxref("width")}}，还添加了{{cssxref("max-width")}}属性，来确保布局不过于宽。</p> + +<p>下一步，更新第四条CSS规则（有<code>.col</code>选择器），像这样：</p> + +<pre class="brush: css">.col { + float: left; + margin-left: 2.08333333%; + width: 6.25%; + background: rgb(255, 150, 150); +}</pre> + +<p>现在做些稍微麻烦的事 — 我们需要更新所有 <code>.col.span</code> 规则来把像素变为百分比。这需要点时间计算；为节省你的功夫，我们在下面替你做了。</p> + +<p>像下面这样更新CSS规则的底部块：</p> + +<pre class="brush: css">/* Two column widths (12.5%) plus one gutter width (2.08333333%) */ +.col.span2 { width: 14.58333333%; } +/* Three column widths (18.75%) plus two gutter widths (4.1666666) */ +.col.span3 { width: 22.91666666%; } +/* And so on... */ +.col.span4 { width: 31.24999999%; } +.col.span5 { width: 39.58333332%; } +.col.span6 { width: 47.91666665%; } +.col.span7 { width: 56.24999998%; } +.col.span8 { width: 64.58333331%; } +.col.span9 { width: 72.91666664%; } +.col.span10 { width: 81.24999997%; } +.col.span11 { width: 89.5833333%; } +.col.span12 { width: 97.91666663%; }</pre> + +<p>现在保存你的代码，从浏览器里加载它，尝试改变视口长度——你应该可以看到网格完美地适配了。</p> + +<div class="note"> +<p><strong>备注：</strong>如果你在让上面的示例实现的时候正遇到困难，试着把它和我们<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid.html">GitHub上的完成版</a>比较（另<a href="http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid.html">见实时的示例</a>）。</p> +</div> + +<h3 id="使用calc函数的更简单计算">使用calc()函数的更简单计算</h3> + +<p>你可以用 {{cssxref("calc()")}} 函数来在CSS里面做数学方面的计算——这允许你在CSS里插入简单的算式，来计算那些值。这个会很有用，特别当你有个复杂计算的时候，甚至你还可以在算式里用不同的单位，比如“我想要这个元素一直比它父元素少50像素”。看下<a href="/en-US/docs/Web/API/MediaRecorder_API/Using_the_MediaRecorder_API#Keeping_the_interface_constrained_to_the_viewport_regardless_of_device_height_with_calc()">这个来自MediaRecorder API教程的示例</a>。</p> + +<p>言归正传, 来讲我们的网格！我们网格里跨越超过一列的列，它的总长是6.45%乘跨越的列数加 2.08333333%，乘间隔数（间隔数总等于行数减一）。<code>calc()</code> 函数允许我们就在宽度值里面这么计算，所以对跨越4列的列我们可以这么算：</p> + +<pre class="brush: css">.col.span4 { + width: calc((6.25%*4) + (2.08333333%*3)); +}</pre> + +<p>试着用下面的内容替换你底部的规则块，然后在浏览器中重载，看看你是否能得到相同的结果：</p> + +<pre class="brush: css">.col.span2 { width: calc((6.25%*2) + 2.08333333%); } +.col.span3 { width: calc((6.25%*3) + (2.08333333%*2)); } +.col.span4 { width: calc((6.25%*4) + (2.08333333%*3)); } +.col.span5 { width: calc((6.25%*5) + (2.08333333%*4)); } +.col.span6 { width: calc((6.25%*6) + (2.08333333%*5)); } +.col.span7 { width: calc((6.25%*7) + (2.08333333%*6)); } +.col.span8 { width: calc((6.25%*8) + (2.08333333%*7)); } +.col.span9 { width: calc((6.25%*9) + (2.08333333%*8)); } +.col.span10 { width: calc((6.25%*10) + (2.08333333%*9)); } +.col.span11 { width: calc((6.25%*11) + (2.08333333%*10)); } +.col.span12 { width: calc((6.25%*12) + (2.08333333%*11)); }</pre> + +<div class="note"> +<p><strong>备注：</strong>你能在<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-calc.html">fluid-grid-calc.html</a>里看到我们的完成版（另<a href="http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-calc.html">见实时版</a>）。</p> +</div> + +<div class="note"> +<p><strong>备注：</strong>如果你不能让这个正常工作，可能是你的浏览器不支持<code>calc()</code>函数，尽管各浏览器对它的支持相当好——远至IE9那样老。</p> +</div> + +<h3 id="语义vs.“无语义”网格系统">语义vs.“无语义”网格系统</h3> + +<p>在标记中添加类以定义布局，意味着您的内容和标记与您的可视化表示相关联。你将会偶尔听到，这种使用CSS类的方式，被描绘成“无语义”：描述了内容的外观，而不是描述内容的语义性的类的使用。这是我们的<code>span2</code>、<code>span3</code>等类所面临的情况。</p> + +<p>这些并不是唯一的方法，你或许会转头决定使用网格，然后向已有的语义类里面加入尺寸信息。例如，如果你有一个带有<code>content</code>类的{{htmlelement("div")}}，而且你想让它横跨8列，你可以从<code>span8</code>类里面复制整个关于宽度的规则，结果是像这样的一条规则：</p> + +<pre class="brush: css">.content { + width: calc((6.25%*8) + (2.08333333%*7)); +}</pre> + +<div class="note"> +<p><strong>备注：</strong> 如果你要用预处理工具，如<a href="http://sass-lang.com/">Sass</a>，你可以建立一个简单的类（mixin）以插入那个值。</p> +</div> + +<h3 id="在我们的网格里启用偏移容器">在我们的网格里启用偏移容器</h3> + +<p>我们创造的网格很有效。只要我们想把所有容器都从网格的左手边对齐。如果我们想在第一个容器前来个空列，或者容器之间来个空列，我们需要新建一个偏移类，为站点加上左外边距，来可见地推动网格。再来点数学计算！</p> + +<p>让我们实际试试吧。</p> + +<p>从你以前的代码开始，或者把我们的<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid.html">fluid-grid.html</a>文件用作起始点。</p> + +<p>我们在CSS上搞一个类，它会给一个容器元素来个一列宽度的偏移。将下面的内容加到你的CSS的底部：</p> + +<pre class="brush: css">.offset-by-one { + margin-left: calc(6.25% + (2.08333333%*2)); +}</pre> + +<p>或者假如你更愿意自己算百分比，用下面这个：</p> + +<pre class="brush: css">.offset-by-one { + margin-left: 10.41666666%; +}</pre> + +<p>想要给一个容器的左边加个有一列宽的空白的话，你可以在容器上添加这个类。例如，如果你在HTML中有这个内容的时候：</p> + +<pre class="brush: html"><div class="col span6">14</div></pre> + +<p>试着用下面的替换：</p> + +<pre class="brush: html"><div class="col span5 offset-by-one">14</div></pre> + +<div class="note"> +<p><strong>备注：</strong> 注意你需要别让横跨多列的列太多，给偏移留点空间！</p> +</div> + +<p>试着载入，刷新来查看区别，或者查看我们的<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-offset.html">fluid-grid-offset.html</a>示例（另见<a href="http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-offset.html">实时</a>示例）。完成的示例应该看起来像这样：</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13903/offset-grid-finished.png" style="display: block; height: 47px; margin: 0px auto; width: 944px;"></p> + +<div class="note"> +<p><strong>备注：</strong>作为额外练习，你能实现一个<code>offset-by-two</code>类吗？</p> +</div> + +<h3 id="浮动网格的限制">浮动网格的限制</h3> + +<p>当你想用这个网格系统时，你得仔细看看你的总长是否正确，并且每行中的元素所横跨的列数不超过这一行可容纳的列数。由于浮动布局实现的方式，如果网格列的数目对与网格来说太大，在最后边的元素会跑到下一行去，搞坏了布局 。</p> + +<p>还要记住，如果元素内容比行宽，它会溢出，看起来一团糟。</p> + +<p>这个系统的最大限制是，它本质上是一维的。我们在处理列、让元素跨越列，但是处理不了行。如果不设置一个确定的高度，用老方法很难控制元素高。这个方法很不灵活 —它只有在你确定你的内容有个明确的高的情况下有用。</p> + +<h2 id="弹性盒网格？">弹性盒网格？</h2> + +<p>如果你读了之前关于<a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">flexbox</a>的文章，你大概会想，弹性布局是个写网格布局的好办法。现在有很多基于弹性布局的网格布局，并且弹性布局可以解决很多上面讲的问题。</p> + +<p>但是，弹性布局不是为网格布局而设的，把它当网格布局来用也有新的挑战。举个简单的例子，我们可以使用我们在上面使用过的同样的示例标记，用下面的CSS样式化<code>wrapper</code>、<code>row</code>和<code>col</code>类：</p> + +<pre class="brush: css">body { + width: 90%; + max-width: 980px; + margin: 0 auto; +} + +.wrapper { + padding-right: 2.08333333%; +} + + +.row { + display: flex; +} + +.col { + margin-left: 2.08333333%; + margin-bottom: 1em; + width: 6.25%; + flex: 1 1 auto; + background: rgb(255,150,150); +}</pre> + +<p>你可以试着在你自己的示例里做这些替换，或者看下我们的<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/flexbox-grid.html">flexbox-grid.html</a>示例代码（另见<a href="http://mdn.github.io/learning-area/css/css-layout/grids/flexbox-grid.html">实时版</a>）。</p> + +<p>这里，我们会把每行变成一个弹性容器。有了弹性盒为基础的网格，我们仍然需要行，以让我们的元素加起来能不超过100%。我们将容器设为<code>display: flex</code>。</p> + +<p>在<code>.col</code>上。我们设定{{cssxref("flex")}}属性的第一个值（{{cssxref("flex-grow")}}）为1，这样我们的物件可以变大；第二个值（{{cssxref("flex-shrink")}}）为1，这样我们的物件可以缩小；第三个值（{{cssxref("flex-basis")}}）为<code>auto</code>。因为我们的元素的{{cssxref("width")}}被设定了， <code>auto</code>将会使用和<code>flex-basis</code> 值一样的宽度。</p> + +<p>在顶行，我们有十二个整齐的盒子，它们在视口宽度改变时同等地放大缩小。可是在下一行，我们只有四个物件，它们也从六十像素的基础上变大变小。因为它们只有四个，它们可以长得比上一行的物件更快，结果是它们都占据了第二行的相同宽度。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13905/flexbox-grid-incomplete.png" style="display: block; height: 71px; margin: 0px auto; width: 944px;"></p> + +<p>为了解决这个问题，我们仍然需要包含<code>span</code>类，以提供一个用于那个元素的，可以替换掉为 <code>flex-basis</code>所使用的值的宽度。</p> + +<p>它们也不遵从上面的物件使用的网格，因为它们对它一无所知。</p> + +<p>弹性盒设计上是<strong>一维</strong>。它处理单个维度，行的或者列的。我们不能创建一个对行列严格要求的网格，意即如果我们要在我们的网格上使用弹性盒的话，我们仍然需要计算浮动布局的百分比。</p> + +<p>在你的工程中，由于弹性盒相比浮动能提供附加的对齐和空间分布能力，你可能仍然选择使用弹性盒“网格”。但是你应该清楚，你仍然是在使用一个被设计用来做其他事情的工具。所以你可能觉得，这就像是在你抵达你想要的结果之前，让你跳过额外的坑。</p> + +<h2 id="第三方网格系统">第三方网格系统</h2> + +<p>既然我们理解了我们的网格计算背后的数学了，我们现在该看看一些常用的第三方网格系统了。如果你在互联网上搜索“CSS网格框架”的话，你会发现一个包含了可选项的庞大列表。流行的框架，例如<a href="http://getbootstrap.com/">Bootstrap</a>和<a href="http://foundation.zurb.com/">Foundation</a>，就包含了网格系统。此外还有独立的网格系统，不是用CSS开发的就是用预处理器开发的。</p> + +<p>让我们看下这些独立系统其中的一个，它阐释了利用网格框架工作的常见技术。我们将要使用的网格是Skeleton的一部分，它是一种简单的CSS框架。</p> + +<p>访问<a href="http://getskeleton.com/">Skeleton网站</a>以开始，选择“Download”下载ZIP文件。解压文件，把skeleton.css和normalize.css复制到一个新路径下。</p> + +<p>制作一个<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/html-skeleton.html">html-skeleton.html</a>文件的副本，在同skeleton和normalize CSS相同的路径下保存副本。</p> + +<p>在HTML页面包含skeleton和normalize CSS，通过把以下内容加到文件头部的方式：</p> + +<pre class="brush: html"><link href="normalize.css" rel="stylesheet"> +<link href="skeleton.css" rel="stylesheet"></pre> + +<p>Skeleton不仅包含了网格系统，它还包含了用于排版和其他能作为起始点的页面元素上的CSS。我们现在把这些部分留作默认值，我们在这里真正感兴趣的是网格。</p> + +<div class="note"> +<p><strong>备注：</strong><a href="/en-US/docs/">Normalize</a>是由Nicolas Gallagher编写的一个很有用的小CSS库，它自动做了一些有用的基础布局修正，让元素默认的样式化在不同浏览器中更加协调。</p> +</div> + +<p>我们将会使用和在前面的示例中相似的HTML。将下面的内容加到你的HTML body中：</p> + +<pre class="brush: html"><div class="container"> + <div class="row"> + <div class="col">1</div> + <div class="col">2</div> + <div class="col">3</div> + <div class="col">4</div> + <div class="col">5</div> + <div class="col">6</div> + <div class="col">7</div> + <div class="col">8</div> + <div class="col">9</div> + <div class="col">10</div> + <div class="col">11</div> + <div class="col">12</div> + </div> + <div class="row"> + <div class="col">13</div> + <div class="col">14</div> + <div class="col">15</div> + <div class="col">16</div> + </div> +</div></pre> + +<p><br> + 要开始使用Skeleton，我们需要给包装的{{htmlelement("div")}}一个<code>container</code>类——这已经包含在了我们的HTML里面。这让最大宽度为960像素的内容居中了。你可以看看盒子现在是怎么不会宽于960像素的。</p> + +<p>你可以看看skeleton.css文件里，CSS在我们应用这个类的时候是如何使用的。<code><div></code>用值为<code>auto</code>的左右外边距居中，左边和右边还应用了20像素的内边距。同我们前面做过的那样，Skeleton同时把Skeleton{{cssxref("box-sizing")}}属性设为<code>border-box</code>值，所以这个元素的内边距和边框将会被包含在整个width里面。</p> + +<pre class="brush: css">.container { + position: relative; + width: 100%; + max-width: 960px; + margin: 0 auto; + padding: 0 20px; + box-sizing: border-box; +}</pre> + +<p>如果它们在行里面的话，元素只会是网格的一部分，所以对于前面的示例，我们需要一个额外的<code><div></code>或者其他带有<code>row</code>类的、内嵌到<code>content</code> <code><div></code>和我们实际的内容容器的<code><div></code>之间的元素。我们也已经做了这件事。</p> + +<p>现在让我们铺开容器盒子。Skeleton基于一个12列的网格。顶端一行的盒子都需要加上<code>one column</code>的类，以让它们横跨一列。</p> + +<p>现在加上这些，像是在下面的节录里面显示的那样：</p> + +<pre class="brush: html"><div class="container"> + <div class="row"> + <div class="one column">1</div> + <div class="one column">2</div> + <div class="one column">3</div> + /* and so on */ + </div> +</div></pre> + +<p>然后，给第二行的容器加上解释它们应该横跨几个列的类，像这样：</p> + +<pre class="brush: html"><div class="row"> + <div class="one column">13</div> + <div class="six columns">14</div> + <div class="three columns">15</div> + <div class="two columns">16</div> +</div></pre> + +<p>试着保存你的HTML，在你的浏览器里面载入，看下效果。</p> + +<div class="note"> +<p><strong>备注：</strong>如果你在实现这个示例的时候遇到麻烦，试着拿它和我们的<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/html-skeleton-finished.html">html-skeleton-finished.html</a>文件进行比较（另见<a href="http://mdn.github.io/learning-area/css/css-layout/grids/html-skeleton-finished.html">实时运行版</a>）。</p> +</div> + +<p>如果你看下skeleton.css文件的内容，你能理解这是如何实现的。例如，Skeleton有下面的定义内容，用于样式化加入了“three colomns”类的元素。</p> + +<pre class="brush: css">.three.columns { width: 22%; }</pre> + +<p>Skeleton（或者其他任何网格框架）正在做的所有事情是，设定一个预定义的类，你可以通过把它们加到你的标记文件里面的方式使用这些框架，和你自己做计算这些百分数的工作完全是一样的。</p> + +<p>正如你所看到的这样，我们使用Skeleton的时候，几乎不需要写多少CSS。它在我们向标记文本里面加类的时候，替我们处理了所有的浮动。正是把布局的责任甩给其他人的可能性，使得使用用于网格系统的框架成为了一个强制性的选择！但是现在来看，有了CSS网格布局，许多开发者正在停止使用这些框架，转而使用CSS提供的内建的原生网格。</p> + +<h2 id="小结">小结</h2> + +<p>你现在理解了多种网格系统是如何建立的。这将会在处理老网站的时候，以及理解CSS网格布局的原生网格和那些老系统的不同的时候帮到你。</p> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-Column_Layout", "Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="模块目录">模块目录</h2> + +<ul> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">CSS布局介绍</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">正常布局流</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">弹性盒</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">网格</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">浮动</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">定位</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">多列布局</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">传统布局模式</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">支持旧浏览器</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">基础布局掌握测验</a></li> +</ul> diff --git a/files/zh-cn/learn/css/css_layout/定位/index.html b/files/zh-cn/learn/css/css_layout/定位/index.html new file mode 100644 index 0000000000..cbfa094300 --- /dev/null +++ b/files/zh-cn/learn/css/css_layout/定位/index.html @@ -0,0 +1,615 @@ +--- +title: 定位 +slug: Learn/CSS/CSS_layout/定位 +tags: + - CSS + - 初学者 + - 定位 + - 布局 + - 指南 + - 相对定位 + - 绝对定位 +translation_of: Learn/CSS/CSS_layout/Positioning +--- +<div> +<p>{{LearnSidebar}}</p> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout")}}</p> +</div> + +<p class="summary">定位允许您从正常的文档流布局中取出元素，并使它们具有不同的行为，例如放在另一个元素的上面，或者始终保持在浏览器视窗内的同一位置。 本文解释的是定位({{cssxref("position")}})的各种不同值，以及如何使用它们。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">预备知识:</th> + <td>HTML 基础 (学习 <a href="/zh-CN/docs/learn/HTML/Introduction_to_HTML">HTML导学</a>)和CSS怎样工作的 (学习<a href="/zh-CN/docs/Learn/CSS/Introduction_to_CSS"> CSS导学</a>)</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>了解CSS定位的工作原理</td> + </tr> + </tbody> +</table> + +<h2 id="文档流">文档流</h2> + +<p>定位是一个相当复杂的话题，所以我们深入了解代码之前，让我们审视一下布局理论，并让我们了解它的工作原理。</p> + +<p>首先，围绕元素内容添加任何内边距、边界和外边距来布置单个元素盒子——这就是 <a href="/zh-CN/docs/Learn/CSS/Introduction_to_CSS/Box_model">盒模型</a> ，我们前面看过。 默认情况下，块级元素的内容宽度是其父元素的宽度的100％，并且与其内容一样高。内联元素高宽与他们的内容高宽一样。您不能对内联元素设置宽度或高度——它们只是位于块级元素的内容中。 如果要以这种方式控制内联元素的大小，则需要将其设置为类似块级元素 <code>display: block;</code>。</p> + +<p>这只是解释了单个元素，但是元素相互之间如何交互呢？ <strong>正常的布局流</strong>（在布局介绍文章中提到）是将元素放置在浏览器视口内的系统。默认情况下，块级元素在视口中垂直布局——每个都将显示在上一个元素下面的新行上，并且它们的外边距将分隔开它们。</p> + +<p>内联元素表现不一样——它们不会出现在新行上；相反，它们互相之间以及任何相邻（或被包裹）的文本内容位于同一行上，只要在父块级元素的宽度内有空间可以这样做。如果没有空间，那么溢流的文本或元素将向下移动到新行。</p> + +<p>如果两个相邻元素都在其上设置外边距，并且两个外边距接触，则两个外边距中的较大者保留，较小的一个消失——这叫<a href="/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">外边距折叠</a>, 我们之前也遇到过。</p> + +<p>让我们来看一个简单的例子来解析这一切：</p> + +<pre class="brush: html notranslate"><h1>Basic document flow</h1> + +<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> + +<p>By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p> + +<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p> + +<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements will <span>wrap onto a new line if possible (like this one containing text)</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> + +<pre class="brush: css notranslate">body { + width: 500px; + margin: 0 auto; +} + +p { + background: aqua; + border: 3px solid blue; + padding: 10px; + margin: 10px; +} + +span { + background: red; + border: 1px solid black; +}</pre> + +<p>{{ EmbedLiveSample('文档流', '100%', 500) }}</p> + +<p>在我们阅读本文时，我们将多次重复这个例子，因为我们要展示不同定位选项的效果。</p> + +<p>如果可能，我们希望您在本地计算机上跟随练习 — 从GitHub仓库下载一个<code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/0_basic-flow.html">0_basic-flow.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/1_static-positioning.html">源代码</a>) 然后用它作为我们的起步点。</p> + +<h2 id="介绍定位">介绍定位</h2> + +<p>定位的整个想法是允许我们覆盖上面描述的基本文档流行为，以产生有趣的效果。如果你想稍微改变布局中一些盒子的位置，使它们的默认布局流程位置稍微有点古怪，不舒服的感觉呢？定位是你的工具。或者，如果您想要创建一个浮动在页面其他部分顶部的UI元素，并且/或者始终停留在浏览器窗口内的相同位置，无论页面滚动多少？定位使这种布局工作成为可能。</p> + +<p>有许多不同类型的定位，您可以对HTML元素生效。要使某个元素上的特定类型的定位，我们使用{{cssxref("position")}}属性。</p> + +<h3 id="静态定位">静态定位</h3> + +<p>静态定位是每个元素获取的默认值——它只是意味着“将元素放入它在文档布局流中的正常位置 ——这里没有什么特别的。</p> + +<p>为了演示这一点，并为以后的部分设置示例，首先在HTML中添加一个<code>positioned</code> 的 <code>class</code> 到第二个{{htmlelement("p")}}：</p> + +<pre class="brush: html notranslate"><p class="positioned"> ... </p></pre> + +<p>现在，将以下规则添加到CSS的底部：</p> + +<pre class="brush: css notranslate">.positioned { + position: static; + background: yellow; +}</pre> + +<p>如果现在保存和刷新，除了第2段的更新的背景颜色，根本没有差别。这很好——正如我们之前所说，静态定位是默认行为！</p> + +<div class="note"> +<p><strong>注意：</strong>你可以在 <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/1_static-positioning.html">1_static-positioning.html</a></code> 查看这个例子 (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/1_static-positioning.html">see source code</a>)。</p> +</div> + +<h3 id="相对定位">相对定位</h3> + +<p>相对定位是我们将要看的第一个位置类型。 它与静态定位非常相似，占据在正常的文档流中，除了你仍然可以修改它的最终位置，包括让它与页面上的其他元素重叠。 让我们继续并更新代码中的 <code>position</code> 属性：</p> + +<pre class="brush: css notranslate">position: relative;</pre> + +<p>如果您在此阶段保存并刷新，则结果根本不会发生变化。那么如何修改元素的位置呢？ 您需要使用{{cssxref("top")}}，{{cssxref("bottom")}}，{{cssxref("left")}}和{{cssxref("right")}}属性 ，我们将在下一节中解释。</p> + +<h3 id="介绍_top_bottom_left_right">介绍 top, bottom, left, right</h3> + +<p>{{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, 和 {{cssxref("right")}} 来精确指定要将定位元素移动到的位置。 要尝试这样做，请在CSS中的 <code>.positioned</code> 规则中添加以下声明：</p> + +<pre class="notranslate">top: 30px; +left: 30px;</pre> + +<div class="note"> +<p><strong>注意：</strong>这些属性的值可以采用逻辑上期望的任何单位 ——px，mm，rems，％等。</p> +</div> + +<p>如果你现在保存和刷新，你会得到一个这样的结果：</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><h1>Relative positioning</h1> + +<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> + +<p class="positioned">By default we span 100% of the width of our parent element, and our are as tall as our child content. Our total width and height is our content + padding + border width/height.</p> + +<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p> + +<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> + +<pre class="brush: css notranslate">body { + width: 500px; + margin: 0 auto; +} + +p { + background: aqua; + border: 3px solid blue; + padding: 10px; + margin: 10px; +} + +span { + background: red; + border: 1px solid black; +} + +.positioned { + position: relative; + background: yellow; + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('介绍_top_bottom_left_right', '100%', 500) }}</p> + +<p>酷，是吗？ 好吧，所以这个结果这可能不是你期待的——为什么它移动到底部和右边，但我们指定顶部和左边？ 听起来不合逻辑，但这只是相对定位工作的方式——你需要考虑一个看不见的力，推动定位的盒子的一侧，移动它的相反方向。 所以例如，如果你指定 <code>top: 30px;</code>一个力推动框的顶部，使它向下移动30px。</p> + +<div class="note"> +<p><strong>注意：</strong> 你可以在 <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/2_relative-positioning.html">2_relative-positioning.html</a></code> 查看这个例子 (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/2_relative-positioning.html">see source code</a>)。</p> +</div> + +<h3 id="绝对定位">绝对定位</h3> + +<p>绝对定位带来了非常不同的结果。让我们尝试改变代码中的位置声明如下：</p> + +<pre class="notranslate">position: absolute;</pre> + +<p>如果你现在保存和刷新，你应该看到这样：</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><h1>Absolute positioning</h1> + +<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> + +<p class="positioned">By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p> + +<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p> + +<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> + +<pre class="brush: css notranslate">body { + width: 500px; + margin: 0 auto; +} + +p { + background: aqua; + border: 3px solid blue; + padding: 10px; + margin: 10px; +} + +span { + background: red; + border: 1px solid black; +} + +.positioned { + position: absolute; + background: yellow; + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('绝对定位', '100%', 420) }}</p> + +<p>首先，请注意，定位的元素应该在文档流中的间隙不再存在——第一和第三元素已经靠在一起，就像第二个元素不再存在！好吧，在某种程度上，这是真的。绝对定位的元素不再存在于正常文档布局流中。相反，它坐在它自己的层独立于一切。这是非常有用的：这意味着我们可以创建不干扰页面上其他元素的位置的隔离的UI功能 。例如，弹出信息框和控制菜单；翻转面板；可以在页面上的任何地方拖放的UI功能……</p> + +<p>第二，注意元素的位置已经改变——这是因为{{cssxref("top")}}，{{cssxref("bottom")}}，{{cssxref("left")}}和{{cssxref("right")}}以不同的方式在绝对定位。 它们指定元素应距离每个包含元素的边的距离，而不是指定元素应该移入的方向。 所以在这种情况下，我们说的绝对定位元素应该位于从“包含元素”的顶部30px，从左边30px。</p> + +<div class="note"> +<p><strong>注意：</strong>如果需要，您可以使用{{cssxref("top")}}，{{cssxref("bottom")}}，{{cssxref("left")}}和{{cssxref("right")}} 调整元素大小。 尝试设置 <code>top: 0; bottom: 0; left: 0; right: 0;</code> 和 <code>margin: 0;</code> 对你定位的元素，看看会发生什么！ 之后再回来</p> +</div> + +<div class="note"> +<p><strong>注意：</strong>是的，margins 仍会影响定位的元素。 然而margin collapsing不会。</p> +</div> + +<div class="note"> +<p><strong>注意：</strong>你可以在<code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/3_absolute-positioning.html">3_absolute-positioning.html</a></code> 查看这个例子(<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/3_absolute-positioning.html">see source code</a>)。</p> +</div> + +<h3 id="定位上下文">定位上下文</h3> + +<p>哪个元素是绝对定位元素的“包含元素“？这取决于绝对定位元素的父元素的position属性。(参见 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#Identifying_the_containing_block">Identifying the containing block</a>).</p> + +<p>如果所有的父元素都没有显式地定义position属性，那么所有的父元素默认情况下position属性都是static。结果，绝对定位元素会被包含在<strong>初始块容器</strong>中。这个初始块容器有着和浏览器视口一样的尺寸，并且<html>元素也被包含在这个容器里面。简单来说，绝对定位元素会被放在<html>元素的外面，并且根据浏览器视口来定位。</p> + +<p>绝对定位元素在HTML源代码中，是被放在<body>中的，但是在最终的布局里面，它离页面(而不是<body>)的左边界、上边界有30px的距离。我们可以改变<strong>定位上下文</strong> —— 绝对定位的元素的相对位置元素。通过设置其中一个父元素的定位属性 —— 也就是包含绝对定位元素的那个元素（如果要设置绝对定位元素的相对元素，那么这个元素一定要包含绝对定位元素）。 为了演示这一点，将以下声明添加到您的body规则中：</p> + +<pre class="notranslate">position: relative;</pre> + +<p>应该得到以下结果：</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><h1>Positioning context</h1> + +<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> + +<p class="positioned">Now I'm absolutely positioned relative to the <code>&lt;body&gt;</code> element, not the <code>&lt;html&gt;</code> element!</p> + +<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p> + +<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> + +<pre class="brush: css notranslate">body { + width: 500px; + margin: 0 auto; + position: relative; +} + +p { + background: aqua; + border: 3px solid blue; + padding: 10px; + margin: 10px; +} + +span { + background: red; + border: 1px solid black; +} + +.positioned { + position: absolute; + background: yellow; + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('定位上下文', '100%', 420) }}</p> + +<p>定位的元素现在相对于{{htmlelement("body")}}元素。</p> + +<div class="note"> +<p>注意：你可以在这里看到这个例子 <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/4_positioning-context.html">4_positioning-context.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/4_positioning-context.html">see source code</a>).</p> +</div> + +<h3 id="介绍_z-index">介绍 z-index</h3> + +<p>所有这些绝对定位很有趣，但还有另一件事我们还没有考虑到 ——当元素开始重叠，什么决定哪些元素出现在其他元素的顶部？ 在我们已经看到的示例中，我们在定位上下文中只有一个定位的元素，它出现在顶部，因为定位的元素胜过未定位的元素。 当我们有不止一个的时候呢？</p> + +<p>尝试添加以下到您的CSS，使第一段也是绝对定位：</p> + +<pre class="notranslate">p:nth-of-type(1) { + position: absolute; + background: lime; + top: 10px; + right: 30px; +}</pre> + +<p>此时，您将看到第一段的颜色为绿色，移出文档流程，并位于原始位置上方一点。它也堆叠在原始的 <code>.positioned</code> 段落下，其中两个重叠。这是因为 <code>.positioned</code> 段落是源顺序(HTML标记)中的第二个段落，并且源顺序中后定位的元素将赢得先定位的元素。</p> + +<p>您可以更改堆叠顺序吗？是的，您可以使用{{cssxref("z-index")}}属性。 “z-index”是对z轴的参考。你可以从源代码中的上一点回想一下，我们使用水平（x轴）和垂直（y轴）坐标来讨论网页，以确定像背景图像和阴影偏移之类的东西的位置。 （0,0）位于页面（或元素）的左上角，x和y轴跨页面向右和向下（适合从左到右的语言，无论如何）。</p> + +<p>网页也有一个z轴：一条从屏幕表面到你的脸（或者在屏幕前面你喜欢的任何其他东西）的虚线。{{cssxref("z-index")}} 值影响定位元素位于该轴上的位置；正值将它们移动到堆栈上方，负值将它们向下移动到堆栈中。默认情况下，定位的元素都具有z-index为auto，实际上为0。</p> + +<p>要更改堆叠顺序，请尝试将以下声明添加到 <code>p:nth-of-type(1)</code> 规则中：</p> + +<pre class="notranslate">z-index: 1;</pre> + +<p>你现在应该可以看到完成的例子：</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><h1>z-index</h1> + +<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> + +<p class="positioned">Now I'm absolutely positioned relative to the <code>&lt;body&gt;</code> element, not the <code>&lt;html&gt;</code> element!</p> + +<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p> + +<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> + +<pre class="brush: css notranslate">body { + width: 500px; + margin: 0 auto; + position: relative; +} + +p { + background: aqua; + border: 3px solid blue; + padding: 10px; + margin: 10px; +} + +span { + background: red; + border: 1px solid black; +} + +.positioned { + position: absolute; + background: yellow; + top: 30px; + left: 30px; +} + +p:nth-of-type(1) { + position: absolute; + background: lime; + top: 10px; + right: 30px; + z-index: 1; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('介绍_z-index', '100%', 400) }}</p> + +<p>请注意，z-index只接受无单位索引值；你不能指定你想要一个元素是Z轴上23像素—— 它不这样工作。 较高的值将高于较低的值，这取决于您使用的值。 使用2和3将产生与300和40000相同的效果。</p> + +<div class="note"> +<p><strong>注意：</strong>你可以在这里看到这个例子 <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/5_z-index.html">5_z-index.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/5_z-index.html">see source code</a>).</p> +</div> + +<h3 id="固定定位">固定定位</h3> + +<p>还有一种类型的定位覆盖——fixed。 这与绝对定位的工作方式完全相同，只有一个主要区别：绝对定位固定元素是相对于 {{htmlelement("html")}} 元素或其最近的定位祖先，而固定定位固定元素则是相对于浏览器视口本身。 这意味着您可以创建固定的有用的UI项目，如持久导航菜单。</p> + +<p>让我们举一个简单的例子来说明我们的意思。首先，从CSS中删除现有的 <code>p:nth-of-type(1)</code> 和<code>.positioned</code> 规则。</p> + +<p>现在，更新 <code>body</code> 规则以删除<code>position: relative;</code> 声明并添加固定高度，如此：</p> + +<pre class="notranslate">body { + width: 500px; + height: 1400px; + margin: 0 auto; +}</pre> + +<p>现在我们要给{{htmlelement("h1")}}元素 <code>position: fixed;</code>，并让它坐在视口的顶部中心。将以下规则添加到CSS：</p> + +<pre class="notranslate">h1 { + position: fixed; + top: 0; + width: 500px; + margin: 0 auto; + background: white; + padding: 10px; +}</pre> + +<p> <code>top: 0;</code>是要使它贴在屏幕的顶部；我们然后给出标题与内容列相同的宽度，并使用可靠的老技巧 <code>margin: 0 auto;</code> 使它居中。 然后我们给它一个白色背景和一些内边距，所以内容将不会在它下面可见。</p> + +<p>如果您现在保存并刷新，您会看到一个有趣的小效果，标题保持固定，内容显示向上滚动并消失在其下。 但是我们可以改进这一点——目前标题下面挡住一些内容的开头。这是因为定位的标题不再出现在文档流中，所以其他内容向上移动到顶部。 我们要把它向下移动一点；我们可以通过在第一段设置一些顶部边距来做到这一点。添加：</p> + +<pre class="notranslate">p:nth-of-type(1) { + margin-top: 60px; +}</pre> + +<p>你现在应该看到完成的例子：</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><h1>Fixed positioning</h1> + +<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> + +<p class="positioned">I'm not positioned any more...</p> + +<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p> + +<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> + +<pre class="brush: css notranslate">body { + width: 500px; + height: 1400px; + margin: 0 auto; +} + +p { + background: aqua; + border: 3px solid blue; + padding: 10px; + margin: 10px; +} + +span { + background: red; + border: 1px solid black; +} + +h1 { + position: fixed; + top: 0px; + width: 500px; + margin: 0 auto; + background: white; + padding: 10px; +} + +p:nth-of-type(1) { + margin-top: 60px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('固定定位', '100%', 400) }}</p> + +<div class="note"> +<p><strong>注意：</strong>你可以在这里看到这个例子<code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/6_fixed-positioning.html">6_fixed-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/6_fixed-positioning.html">see source code</a>).</p> +</div> + +<h3 id="position_sticky">position: sticky</h3> + +<p>还有一个可用的位置值称为 position: sticky，比起其他位置值要新一些。它基本上是相对位置和固定位置的混合体，它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点（例如，从视口顶部起10像素）为止，此后它就变得固定了。例如，它可用于使导航栏随页面滚动直到特定点，然后粘贴在页面顶部。</p> + +<div class="hidden"> +<h6 id="Sticky_positioning_example">Sticky positioning example</h6> + +<pre class="brush: html notranslate"><h1>Sticky positioning</h1> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<div class="positioned">Sticky</div> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> +</pre> + +<pre class="brush: css notranslate">body { + width: 500px; + margin: 0 auto; +} + +.positioned { + background: rgba(255,84,104,.3); + border: 2px solid rgb(255,84,104); + padding: 10px; + margin: 10px; + border-radius: 5px; +}</pre> +</div> + +<pre class="notranslate">.positioned { + position: sticky; + top: 30px; + left: 30px; +}</pre> + +<p>{{ EmbedLiveSample('Sticky_1', '100%', 200) }}</p> + +<p><code>position: sticky</code> 的另一种有趣且常用的用法，是创建一个滚动索引页面。在此页面上，不同的标题会停留在页面顶部。这样的示例的标记可能如下所示：</p> + +<pre class="notranslate"><h1>Sticky positioning</h1> + +<dl> + <dt>A</dt> + <dd>Apple</dd> + <dd>Ant</dd> + <dd>Altimeter</dd> + <dd>Airplane</dd> + <dt>B</dt> + <dd>Bird</dd> + <dd>Buzzard</dd> + <dd>Bee</dd> + <dd>Banana</dd> + <dd>Beanstalk</dd> + <dt>C</dt> + <dd>Calculator</dd> + <dd>Cane</dd> + <dd>Camera</dd> + <dd>Camel</dd> + <dt>D</dt> + <dd>Duck</dd> + <dd>Dime</dd> + <dd>Dipstick</dd> + <dd>Drone</dd> + <dt>E</dt> + <dd>Egg</dd> + <dd>Elephant</dd> + <dd>Egret</dd> +</dl></pre> + +<p>CSS可能如下所示。在正常布局流中，{{htmlelement("dt")}}元素将随内容滚动。当我们在{{htmlelement("dt")}}元素上添加<code>position: sticky</code>，并将{{cssxref("top")}}的值设置为0，当标题滚动到视口的顶部时，支持此属性的浏览器会将标题粘贴到那个位置。随后，每个后续标题将替换前一个标题，直到它向上滚动到该位置。</p> + +<pre class="notranslate">dt { + background-color: black; + color: white; + padding: 10px; + position: sticky; + top: 0; + left: 0; + margin: 1em 0; +} +</pre> + +<div class="hidden"> +<pre class="notranslate">body { + width: 500px; + height: 1400px; + margin: 0 auto; +} + +dt { + background-color: black; + color: white; + padding: 10px; + position: sticky; + top: 0; + left: 0; + margin: 1em 0; +} +</pre> + +<pre class="notranslate"><h1>Sticky positioning</h1> + +<dl> + <dt>A</dt> + <dd>Apple</dd> + <dd>Ant</dd> + <dd>Altimeter</dd> + <dd>Airplane</dd> + <dt>B</dt> + <dd>Bird</dd> + <dd>Buzzard</dd> + <dd>Bee</dd> + <dd>Banana</dd> + <dd>Beanstalk</dd> + <dt>C</dt> + <dd>Calculator</dd> + <dd>Cane</dd> + <dd>Camera</dd> + <dd>Camel</dd> + <dt>D</dt> + <dd>Duck</dd> + <dd>Dime</dd> + <dd>Dipstick</dd> + <dd>Drone</dd> + <dt>E</dt> + <dd>Egg</dd> + <dd>Elephant</dd> + <dd>Egret</dd> +</dl></pre> +</div> + +<p>{{ EmbedLiveSample('Sticky_2', '100%', 200) }}</p> + +<div class="blockIndicator note"> +<p><strong>注意：</strong>你可以在 <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/7_sticky-positioning.html">7_sticky-positioning.html</a></code> 查看这个例子(<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/7_sticky-positioning.html">see source code</a>)。</p> +</div> + +<h2 id="试试你的技术!">试试你的技术!</h2> + +<p>这篇文章到此为止了，但你们能记住最重要的信息吗？在继续之前，您可以找到一些进一步的测试来验证是否完全掌握了这个知识：<a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Position_skills">试试你的技术</a>。</p> + +<h2 id="总结">总结</h2> + +<p>我相信你用基本定位愉快地玩耍；它是创建复杂的CSS布局和UI功能背后的基本工具之一。 考虑到这一点，在下一篇文章中，我们将更有趣的定位——我们将进一步，开始建立一些真实世界有用的东西。</p> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="在本单元中">在本单元中</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Introduction">布局介绍</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats">浮动</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning">定位</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">定位练习案例</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox">弹性盒子</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids">Grids</a></li> +</ul> diff --git a/files/zh-cn/learn/css/first_steps/css如何运行/index.html b/files/zh-cn/learn/css/first_steps/css如何运行/index.html new file mode 100644 index 0000000000..7aafcf481f --- /dev/null +++ b/files/zh-cn/learn/css/first_steps/css如何运行/index.html @@ -0,0 +1,162 @@ +--- +title: CSS如何运行 +slug: Learn/CSS/First_steps/CSS如何运行 +tags: + - CSS + - DOM + - 入门 + - 无效的CSS代码 + - 解析 +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +<p>{{LearnSidebar}}<br> + {{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}</p> + +<p class="summary">我们已经知道了CSS是做什么的以及怎么写简单的样式这样基础的CSS，接下来我将了解到浏览器如何获取CSS、HTML和将他们加载成网页。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前置知识:</th> + <td>基础计算机知识、基本软件安装、简单文件知识、HTML基础</td> + </tr> + <tr> + <th scope="row">目标:</th> + <td>理解浏览器如何加载CSS和HTML、浏览器遇到无法解析的CSS会发生什么</td> + </tr> + </tbody> +</table> + +<h2 id="CSS究竟是怎么工作的？">CSS究竟是怎么工作的？</h2> + +<p>当浏览器展示一个文件的时候，它必须兼顾文件的内容和文件的样式信息，下面我们会了解到它处理文件的标准的流程。需要知道的是，下面的步骤是浏览加载网页的简化版本，而且不同的浏览器在处理文件的时候会有不同的方式，但是下面的步骤基本都会出现。</p> + +<ol> + <li>浏览器载入HTML文件（比如从网络上获取）。</li> + <li>将HTML文件转化成一个DOM（Document Object Model），DOM是文件在计算机内存中的表现形式，下一节将更加详细的解释DOM。</li> + <li>接下来，浏览器会拉取该HTML相关的大部分资源，比如嵌入到页面的图片、视频和CSS样式。JavaScript则会稍后进行处理，简单起见，同时此节主讲CSS，所以这里对如何加载JavaScript不会展开叙述。</li> + <li>浏览器拉取到CSS之后会进行解析，根据选择器的不同类型（比如element、class、id等等）把他们分到不同的“桶”中。浏览器基于它找到的不同的选择器，将不同的规则（基于选择器的规则，如元素选择器、类选择器、id选择器等）应用在对应的DOM的节点中，并添加节点依赖的样式（这个中间步骤称为渲染树）。</li> + <li>上述的规则应用于渲染树之后，渲染树会依照应该出现的结构进行布局。</li> + <li>网页展示在屏幕上（这一步被称为着色）。</li> +</ol> + +<p>结合下面的图示更形象：</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11781/rendering.svg" style="height: auto; max-width: 635px; width: 100%;"></p> + +<h2 id="关于DOM">关于DOM</h2> + +<p>一个DOM有一个树形结构，标记语言中的每一个元素、属性以及每一段文字都对应着结构树中的一个节点（Node/DOM或DOM node）。节点由节点本身和其他DOM节点的关系定义，有些节点有父节点，有些节点有兄弟节点（同级节点）。</p> + +<p>对于DOM的理解会很大程度上帮助你设计、调试和维护你的CSS，因为DOM是你的CSS样式和文件内容的结合。当你使用浏览器F12调试的时候你需要操作DOM以查看使用了哪些规则。</p> + +<h2 id="一个真实的DOM案例">一个真实的DOM案例</h2> + +<p>不同于很长且枯燥的案例，这里我们通过一个HTML片段来了解HTML怎么转化成DOM</p> + +<p>以下列HTML代码为例：</p> + +<pre class="brush: html"><p> + Let's use: + <span>Cascading</span> + <span>Style</span> + <span>Sheets</span> +</p> +</pre> + +<p>在这个DOM中，<code><p></code>元素对应了父节点，它的子节点是一个text节点和三个对应了<code><span></code>元素的节点，<code>SPAN</code>节点同时也是他们中的Text节点的父节点。</p> + +<pre>P +├─ "Let's use:" +├─ SPAN +| └─ "Cascading" +├─ SPAN +| └─ "Style" +└─ SPAN + └─ "Sheets" +</pre> + +<p>上图就是浏览器怎么解析之前那个HTML片段——它生成上图的DOM树形结构并将它按照如下输出到浏览器：</p> + +<p>{{EmbedLiveSample('一个真实的DOM案例', '100%', 55)}}</p> + +<div class="hidden"> +<pre class="brush: css">p {margin:0;}</pre> +</div> + +<h2 id="应用CSS到DOM">应用CSS到DOM</h2> + +<p>接下来让我们看看添加一些CSS到文件里加以渲染，同样的HTML代码：</p> + +<pre class="brush: html"><p> + Let's use: + <span>Cascading</span> + <span>Style</span> + <span>Sheets</span> +</p></pre> + +<p>以下为CSS代码：</p> + +<pre class="brush: css">span { + border: 1px solid black; + background-color: lime; +}</pre> + +<p>浏览器会解析HTML并创造一个DOM，然后解析CSS。可以看到唯一的选择器就是<code>span</code>元素选择器，浏览器处理规则会非常快！把同样的规则直接使用在三个<code><span></code>标签上，然后渲染出图像到屏幕。</p> + +<p>现在的显示如下：</p> + +<p>{{EmbedLiveSample('应用CSS到DOM', '100%', 55)}}</p> + +<p>在我们下一个模块的 <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a> 文章中我们将会使用F12调试CSS的问题并且更进一步的了解浏览器如何解析CSS。</p> + +<h2 id="当浏览器遇到无法解析的CSS代码会发生什么">当浏览器遇到无法解析的CSS代码会发生什么</h2> + +<p>在<a href="/zh-CN/docs/Learn/CSS/First_steps/What_is_CSS#浏览器支持">之前的文章中</a>我们提到了浏览器并不会同时实现所有的新CSS，此外很多人也不会使用最新版本的浏览器。鉴于CSS一直不断的开发，因此领先于浏览器可以识别的范围，那么你也许会好奇当浏览器遇到无法解析的CSS选择器或声明的时候会发生什么呢？</p> + +<p>答案就是浏览器什么也不会做，继续解析下一个CSS样式！</p> + +<p>如果一个浏览器在解析你所书写的CSS规则的过程中遇到了无法理解的属性或者值，它会忽略这些并继续解析下面的CSS声明。在你书写了错误的CSS代码（或者误拼写），又或者当浏览器遇到对于它来说很新的还没有支持的CSS代码的时候上述的情况同样会发生（直接忽略）。</p> + +<p>相似的，当浏览器遇到无法解析的选择器的时候，他会直接忽略整个选择器规则，然后解析下一个CSS选择器。</p> + +<p>在下面的案例中，我使用会导致属性错误的英式拼写来书写"color"，所以我的段落没有被渲染成蓝色，而其他的CSS代码会正常执行，只有错误的部分会被忽略。</p> + +<div id="Skipping_example"> +<pre class="brush: html"><p> I want this text to be large, bold and blue.</p></pre> + +<pre class="brush: css">p { + font-weight: bold; + colour: blue; /* incorrect spelling of the color property */ + font-size: 200%; +}</pre> +</div> + +<p>{{EmbedLiveSample('Skipping_example', '100%', 200)}}</p> + +<p>这样做好处多多，代表着你使用最新的CSS优化的过程中浏览器遇到无法解析的规则也不会报错。当你为一个元素指定多个CSS样式的时候，浏览器会加载样式表中的最后的CSS代码进行渲染（样式表，优先级等请读者自行了解），也正因为如此，你可以为同一个元素指定多个CSS样式来解决有些浏览器不兼容新特性的问题（比如指定两个<code>width</code>）。</p> + +<p>这一特点在你想使用一个很新的CSS特性但是不是所有浏览器都支持的时候（浏览器兼容）非常有用，举例来说，一些老的浏览器不接收<code>calc()</code>(calculate的缩写，CSS3新增，为元素指定动态宽度、长度等，注意此处的动态是计算之后得一个值)作为一个值。我可能使用它结合像素为一个元素设置了动态宽度（如下），老式的浏览器由于无法解析忽略这一行；新式的浏览器则会把这一行解析成像素值，并且覆盖第一行指定的宽度。</p> + +<pre class="brush: css">.box { + width: 500px; + width: calc(100% - 50px); +}</pre> + +<p>后面的课程我们会讨论更多关于浏览器兼容的问题。</p> + +<h2 id="最后">最后</h2> + +<p>恭喜你完成本模块，下面的文章你将会<a href="/zh-CN/docs/Learn/CSS/First_steps/Using_your_new_knowledge">使用你的新知识</a>来完成覆盖样式的案例，在这个过程中测试一些CSS样式。</p> + +<p>{{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}</p> + +<h2 id="模块目标">模块目标</h2> + +<ol> + <li><a href="/zh-CN/docs/Learn/CSS/First_steps/What_is_CSS">什么是CSS</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/First_steps/开始">入门CSS</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS的结构</a></li> + <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">CSS如何运行</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/First_steps/Using_your_new_knowledge">使用新知识</a></li> +</ol> diff --git a/files/zh-cn/learn/css/first_steps/how_css_is_structured/index.html b/files/zh-cn/learn/css/first_steps/how_css_is_structured/index.html new file mode 100644 index 0000000000..aec4a3a61d --- /dev/null +++ b/files/zh-cn/learn/css/first_steps/how_css_is_structured/index.html @@ -0,0 +1,515 @@ +--- +title: 如何构建CSS +slug: Learn/CSS/First_steps/How_CSS_is_structured +tags: + - CSS + - HTML + - 初学者 + - 注释 + - 结构 + - 选择器 +translation_of: Learn/CSS/First_steps/How_CSS_is_structured +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/First_steps/开始", "Learn/CSS/First_steps/CSS如何运行", "Learn/CSS/First_steps")}}</div> + +<p class="summary">既然你已经了解了什么是CSS，以及使用CSS的基础知识，是时候更深入的了解该语言本身的结构了。我们已经见过了本页讨论的很多概念；如果在之后对某些概念感到困惑的话，可以返回至此进行回顾。</p> + +<h4 id="前置知识">前置知识</h4> + +<p><font><font>在开始本单元之前，您应该：</font></font></p> + +<ul> + <li><font><font>基本熟悉计算机操作。</font></font></li> + <li><font><font>基本工作环境的设置（详见</font></font><font><font><a href="https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software">安装基本软件</a>）</font></font><font><font>，基本的文件操作，详见</font></font><font><font><a href="https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/Dealing_with_files">处理文件</a></font></font><font><font>。</font></font></li> + <li>熟悉 <a href="https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML">HTML概述</a> 章节中提到的基本HTML知识.</li> +</ul> + +<h4 id="目标">目标</h4> + +<ul> + <li>理解 HTML文档链接CSS文档的几个基本套路，</li> + <li>并能运用所学的CSS，做些文字上的格式化操作。</li> +</ul> + +<h2 id="在你的HTML里面应用CSS">在你的HTML里面应用CSS</h2> + +<p>我们需要了解的第一件事情就是在文档中应用CSS的三种方法</p> + +<h3 id="外部样式表">外部样式表</h3> + +<p>在<a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">Getting started with CSS</a> 中我们将外部样式表链接到页面。这是将css附加到文档中的最常见和最有用的方法，因为您可以将css链接到多个页面，从而允许您使用相同的样式表设置所有页面的样式。在大多数情况下，一个站点的不同页面看起来几乎都是一样的，因此您可以使用相同的规则集来获得基本的外观。</p> + +<p>外部样式表是指将CSS编写在扩展名为<code>.css</code> 的单独文件中，并从HTML<code><link></code> 元素引用它的情况：</p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>My CSS experiment</title> + <link rel="stylesheet" href="styles.css"> + </head> + <body> + <h1>Hello World!</h1> + <p>This is my first CSS example</p> + </body> +</html></pre> + +<p>CSS文件可能如下所示：</p> + +<pre class="brush: css notranslate">h1 { + color: blue; + background-color: yellow; + border: 1px solid black; +} + +p { + color: red; +}</pre> + +<p>{{htmlelement("link")}} 元素的 <code>href</code> 属性需要引用你的文件系统中的一个文件。</p> + +<p>在上面的例子中，CSS文件和HTML文档在同一个文件夹中，但是你可以把CSS文件放在其他地方，并调整指定的路径以匹配，例如：</p> + +<pre class="brush: html notranslate"><!-- Inside a subdirectory called styles inside the current directory --> +<link rel="stylesheet" href="styles/style.css"> + +<!-- Inside a subdirectory called general, which is in a subdirectory called styles, inside the current directory --> +<link rel="stylesheet" href="styles/general/style.css"> + +<!-- Go up one directory level, then inside a subdirectory called styles --> +<link rel="stylesheet" href="../styles/style.css"></pre> + +<h3 id="内部样式表">内部样式表</h3> + +<p>内部样式表是指不使用外部CSS文件，而是将CSS放在HTML文件{{htmlelement("head")}}标签里的{{htmlelement("style")}}标签之中。</p> + +<p>于是HTML看起来就像下面这个样子：</p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>My CSS experiment</title> + <style> + h1 { + color: blue; + background-color: yellow; + border: 1px solid black; + } + + p { + color: red; + } + </style> + </head> + <body> + <h1>Hello World!</h1> + <p>This is my first CSS example</p> + </body> +</html></pre> + +<p>有的时候，这种方法会比较有用（比如你使用的内容管理系统不能直接编辑CSS文件)，但该方法和外部样式表比起来更加低效 。在一个站点里，你不得不在每个页面里重复添加相同的CSS，并且在需要更改CSS时修改每个页面文件。</p> + +<h3 id="内联样式">内联样式</h3> + +<p>内联样式表存在于HTML元素的style属性之中。其特点是每个CSS表只影响一个元素：</p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>My CSS experiment</title> + </head> + <body> + <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1> + <p style="color:red;">This is my first CSS example</p> + </body> +</html></pre> + +<p><strong>除非你有充足的理由，否则不要这样做！</strong>它难以维护（在需要更新时，你必须在修改同一个文档的多处地方），并且这种写法将文档结构和文档表现混合起来了，这使得代码变得难以阅读和理解。将不同类型的代码分开存放在不同的文档中，会让我们的工作更加清晰。</p> + +<p>在某些地方，内联样式更常见，甚至更可取。 如果您的工作环境确实很严格（也许网站管理系统(CMS)仅允许您编辑HTML正文），则可能不得不使用它们。 您也会发现它们很长时间被应用在HTML电子邮件中，以便与尽可能多的电子邮件客户端兼容。</p> + +<h2 id="在文本中使用CSS">在文本中使用CSS</h2> + +<p>有的时候我们会在文本中使用大量的CSS。为了做到这些,我们推荐你在你的计算机上创建一个新的文件夹,然后在文件夹中创建下面两个文件的副本。</p> + +<p>index.html:</p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8"> + <title>My CSS experiments</title> + <link rel="stylesheet" href="styles.css"> + </head> + <body> + + <p>Create your test HTML here</p> + + </body> +</html></pre> + +<p>styles.css:</p> + +<pre class="brush: css notranslate">/* Create your test CSS here */ + +p { + color: red; +}</pre> + +<p>然后，当您遇到一些您想要试验的CSS时，替换HTML<code><body></code>内容与一些HTML样式，并开始添加CSS样式在您的CSS文件。</p> + +<p>如果你没有可以轻松创建文件的系统，则可以使用下面交互式编译器进行实验。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/experiment-sandbox.html", '100%', 800)}} </p> + +<p>继续读下去，希望你能享受其中!</p> + +<h2 id="选择器">选择器</h2> + +<p>讲到CSS就不得不说到选择器, 并且在之前的辅导教程中我们已经列举了一些不同的选择器。为了样式化某些元素，我们会通过选择器来选中HTML文档中的这些元素。如果你的样式没有生效，那很可能是你的选择器没有像你想象的那样选中你想要的元素。</p> + +<p>每个CSS规则都以一个选择器或一组选择器为开始，去告诉浏览器这些规则应该应用到哪些元素上。以下都是有效的选择器或组合选择器的示例。</p> + +<pre class="brush: css notranslate">h1 +a:link +.manythings +#onething +* +.box p +.box p:first-child +h1, h2, .intro</pre> + +<p>尝试创建一些使用上述选择器的CSS规则，并创建一些HTML样式。如果您不知道上面的一些语法意味着什么，请尝试在MDN上搜索它！</p> + +<div class="blockIndicator note"> +<p>注意：在下一个模块中，您将在我们的<strong>CSS选择器</strong>教程中了解更多关于选择器的内容。</p> +</div> + +<h3 id="专一性">专一性</h3> + +<p>通常情况下，两个选择器可以选择相同的HTML元素。考虑下面的样式表，其中我有一个规则，其中有一个将段落设置为蓝色的p选择器，还有一个将选定元素设置为红色的类。</p> + +<pre class="brush: css notranslate">.special { + color: red; +} + +p { + color: blue; +}</pre> + +<p>比方说，在我们的HTML文档中，我们有一个带有特殊类的段落。这两条规则都适用，那么谁赢了？你认为我们的段落会变成什么颜色？</p> + +<pre class="brush: html notranslate"><p class="special">What color am I?</p></pre> + +<p>CSS语言有规则来控制在发生碰撞时哪条规则将获胜--这些规则称为级联规则和专用规则。在下面的代码块中，我们为p选择器定义了两个规则，但是段落最后是蓝色的。这是因为将其设置为蓝色的声明将出现在样式表的后面，而稍后的样式将覆盖以前的样式。这就是起作用的级联。</p> + +<pre class="brush: css notranslate">p { + color: red; +} + +p { + color: blue; +}</pre> + +<p>但是，在我们使用类选择器和元素选择器的早期块中，类将获胜，使得段落变红--即使它出现在样式表的前面。一个类被描述为比元素选择器更具体，或者具有更多的特异性，所以它获胜了。</p> + +<p><strong>自己试试上面的实验--将HTML添加到您的实验中，然后将两个p{.}规则添加到样式表中。接下来，将第一个p选择器更改为.Special，以查看它如何更改样式。</strong></p> + +<p>一开始，具体性和层叠的规则看起来有点复杂，一旦你积累了更多的CSS知识，就更容易理解了。在我们的级联和继承文章(将在下一个模块中讨论)中，我将详细解释这一点，包括如何计算专用性。现在，请记住这是存在的，有时CSS可能不会像您预期的那样应用，因为样式表中的其他内容具有更高的特异性。确定一个元素可以适用不止一个规则是解决这些问题的第一步</p> + +<h2 id="属性和值">属性和值</h2> + +<p>在最基本的层面上，CSS由两个组成部分组成：</p> + +<ul> + <li><strong>属性：</strong>人类可读的标识符，指示您想要更改的样式特征(例如<code><a href="/en-US/docs/Web/CSS/font-size">font-size</a></code>, <code><a href="/en-US/docs/Web/CSS/width">width</a></code>, <code><a href="/en-US/docs/Web/CSS/background-color">background-color</a></code>) 你想改变。</li> + <li><strong>值：</strong>每个指定的属性都有一个值，该值指示您希望如何更改这些样式特性(例如，要将字体、宽度或背景色更改为。)</li> +</ul> + +<p>下面的图像突出显示单个属性和值。 属性名为 <code>color</code>, 值为 <code>blue</code>.</p> + +<p><img alt="A declaration highlighted in the CSS" src="https://mdn.mozillademos.org/files/16498/declaration.png" style="border: 1px solid #cccccc; display: block; height: 218px; margin: 0px auto; width: 471px;"></p> + +<p>与值配对的属性称为CSS声明。CSS声明放在CSS声明块中。下一张图片显示了我们的CSS，并突出显示了声明块。</p> + +<p><img alt="A highlighted declaration block" src="https://mdn.mozillademos.org/files/16499/declaration-block.png" style="border: 1px solid #cccccc; display: block; height: 218px; margin: 0px auto; width: 471px;"></p> + +<p>最后，CSS声明块与选择器配对，以生成CSS规则集(或CSS规则)。我们的图像包含两个规则，一个用于H1选择器，另一个用于p选择器。h1的规则被突出显示。</p> + +<p><img alt="The rule for h1 highlighted" src="https://mdn.mozillademos.org/files/16500/rules.png" style="border: 1px solid #cccccc; display: block; height: 218px; margin: 0px auto; width: 471px;"></p> + +<p>将CSS属性设置为特定值是CSS语言的核心功能。CSS引擎计算哪些声明应用于页面的每个元素，以便适当地布局和样式它。重要的是要记住，在css中，属性和值都是区分大小写的。每对中的属性和值由冒号(：)分隔。</p> + +<p><strong>尝试查找以下属性的不同值，并编写将它们应用于不同HTML元素的CSS规则：</strong><strong> </strong></p> + +<ul> + <li><strong>{{cssxref("font-size")}}</strong></li> + <li><strong>{{cssxref("width")}}</strong></li> + <li><strong>{{cssxref("background-color")}}</strong></li> + <li><strong>{{cssxref("color")}}</strong></li> + <li><strong>{{cssxref("border")}}</strong></li> +</ul> + +<div class="warning"> +<p><strong>重要事项：</strong>如果属性未知或某个值对给定属性无效，则声明被视为无效，并被浏览器的CSS引擎完全忽略。</p> +</div> + +<div class="warning"> +<p><strong>重要：</strong>在CSS(和其他网络标准)中，当语言表达存在不确定性时，美国的拼写被视作公认的标准。例如，颜色应该始终拼写为color。colour是不起作用的。</p> +</div> + +<h3 id="函数">函数</h3> + +<p>虽然大多数值是相对简单的关键字或数值，但也有一些可能的值以函数的形式出现。一个例子是calc()函数。这个函数允许您在CSS中进行简单的计算，例如：</p> + +<div id="calc_example"> +<pre class="brush: html notranslate"><div class="outer"><div class="box">The inner box is 90% - 30px.</div></div></pre> + +<pre class="brush: css notranslate">.outer { + border: 5px solid black; +} + +.box { + padding: 10px; + width: calc(90% - 30px); + background-color: rebeccapurple; + color: white; +}</pre> +</div> + +<p>如下所示：</p> + +<p>{{EmbedLiveSample('calc_example', '100%', 200)}}</p> + +<p>一个函数由函数名和一些括号组成，其中放置了该函数的允许值。在上面的calc()示例中，我要求此框的宽度为包含块宽度的90%，减去30像素。这不是我可以提前计算的东西，只是在CSS中输入值，因为我不知道90%会是什么。与所有值一样，MDN上的相关页面将有使用示例，这样您就可以看到函数是如何工作的。</p> + +<p>另一个例子是{{cssxref("<transform>")}}, 例如 <code>rotate()</code>.</p> + +<div id="transform_example"> +<pre class="brush: html notranslate"><div class="box"></div></pre> + +<pre class="brush: css notranslate">.box { + margin: 30px; + width: 100px; + height: 100px; + background-color: rebeccapurple; + transform: rotate(0.8turn) +}</pre> +</div> + +<p>以上代码的输出如下所示：</p> + +<p>{{EmbedLiveSample('transform_example', '100%', 200)}}</p> + +<p><strong>尝试查找一下属性的不同值，并编写将他们应用于不同HTML元素的CSS规则：</strong></p> + +<ul> + <li><strong>{{cssxref("transform")}}</strong></li> + <li><strong>{{cssxref("background-image")}}, in particular gradient values</strong></li> + <li><strong>{{cssxref("color")}}, in particular rgb/rgba/hsl/hsla values</strong></li> +</ul> + +<h2 id="规则">@规则</h2> + +<p>到目前为止，我们还没有遇到 <code><a href="/en-US/docs/Web/CSS/At-rule">@rules</a></code> (pronounced "at-rules"). 这是一些特殊的规则，为 CSS提供了一些关于如何表现的指导。 有些<code>@rules</code> 规则很简单，有规则名和值。例如，要将额外的样式表导入主CSS样式表，可以使用<code>@import</code>:</p> + +<pre class="brush: css notranslate">@import 'styles2.css';</pre> + +<p>您将遇到的最常见的 <code>@rules</code> 之一是@media，它允许您使用 <a href="/en-US/docs/Web/CSS/Media_Queries">媒体查询 </a>来应用CSS，仅当某些条件成立(例如，当屏幕分辨率高于某一数量，或屏幕宽度大于某一宽度时)。</p> + +<p>在下面的 CSS中，我们将给 <code><body></code> 元素一个粉红色的背景色。但是，我们随后使用@media创建样式表的一个部分，该部分仅适用于视口大于30em的浏览器。如果浏览器的宽度大于30em，则背景色将为蓝色。</p> + +<pre class="brush: css notranslate">body { + background-color: pink; +} + +@media (min-width: 30em) { + body { + background-color: blue; + } +}</pre> + +<p>在这些教程中，你将遇到一些其他的规则 <code>@rules</code> </p> + +<p><strong>查看是否可以将媒体查询添加到CSS中，该查询将根据视口宽度更改样式。更改浏览器窗口的宽度以查看结果。</strong></p> + +<h2 id="速记属性">速记属性</h2> + +<p>一些属性，如 {{cssxref("font")}}, {{cssxref("background")}}, {{cssxref("padding")}}, {{cssxref("border")}}, and {{cssxref("margin")}} 等属性称为速记属性--这是因为它们允许您在一行中设置多个属性值，从而节省时间并使代码更整洁。</p> + +<p>例如，这一行代码：</p> + +<pre class="brush: css notranslate">/* In 4-value shorthands like padding and margin, the values are applied + in the order top, right, bottom, left (clockwise from the top). There are also other + shorthand types, for example 2-value shorthands, which set padding/margin + for top/bottom, then left/right */ +padding: 10px 15px 15px 5px;</pre> + +<p>与这四行代码是等价的：</p> + +<pre class="brush: css notranslate">padding-top: 10px; +padding-right: 15px; +padding-bottom: 15px; +padding-left: 5px;</pre> + +<p>这一行：</p> + +<pre class="brush: css notranslate">background: red url(bg-graphic.png) 10px 10px repeat-x fixed;</pre> + +<p>与这五行代码是等价的：</p> + +<pre class="brush: css notranslate">background-color: red; +background-image: url(bg-graphic.png); +background-position: 10px 10px; +background-repeat: repeat-x; +background-attachment: fixed;</pre> + +<p>我们现在不打算详尽地教授这些内容--在后面的课程中，您将看到许多例子，我们建议您查找CSS参考中的速记属性名称，以查找更多内容。</p> + +<p>尝试将上述声明添加到CSS中，看看它如何影响HTML的样式。试着尝试一些不同的属性值。</p> + +<div class="blockIndicator warning"> +<p><strong>警告</strong>：虽然速记经常允许您忽略值，但它们会将不包含的任何值重置为它们的初始值。这确保使用了一组合理的值。但是，如果您期望速记只更改传入的值，这可能会使您感到困惑。</p> +</div> + +<h2 id="注释">注释</h2> + +<p>与任何的代码工作一样，在编写CSS过程中，最好的练习方式就是添加注释。这样做可以帮助您在过了几个月后回来修改或优化代码时了解它们是如何工作的，同时也便于其他人理解您的代码。</p> + +<p>CSS中的注释以/*开头，以*/结尾。在下面的代码块中，注释标记了不同代码节的开始。当代码库变得更大时，这对于帮助您导航代码库非常有用--在代码编辑器中搜索注释可以高效地定位代码节。</p> + +<pre class="brush: css notranslate">/* Handle basic element styling */ +/* -------------------------------------------------------------------------------------------- */ +body { + font: 1em/150% Helvetica, Arial, sans-serif; + padding: 1em; + margin: 0 auto; + max-width: 33em; +} + +@media (min-width: 70em) { + /* Let's special case the global font size. On large screen or window, + we increase the font size for better readability */ + body { + font-size: 130%; + } +} + +h1 {font-size: 1.5em;} + +/* Handle specific elements nested in the DOM */ +/* -------------------------------------------------------------------------------------------- */ +div p, #id:first-line { + background-color: red; + border-radius: 3px; +} + +div p{ + margin: 0; + padding: 1em; +} + +div p + p { + padding-top: 0; +}</pre> + +<p>“注释掉”代码这一操作常用于在测试中临时禁用一段代码。例如，如果您试图找出代码的哪一部分会导致错误。在下例中，<code>.special</code> selector规则被“注释”掉了，也就是被禁用了。</p> + +<pre class="brush: css notranslate">/*.special { + color: red; +}*/ + +p { + color: blue; +}</pre> + +<p>添加一些注释到您的CSS，以适应使用他们。</p> + +<h2 id="空白">空白</h2> + +<p>空白是指实际空格、制表符和新行。以与HTML相同的方式，浏览器往往忽略CSS中的大部分空白；许多空白只是为了提高可读性。</p> + +<p>在下面的第一个示例中，我们将每个声明(以及规则开始/结束)都放在自己的行中--这可以说是编写CSS的好方法，因为它使维护和理解变得更加容易：</p> + +<pre class="brush: css notranslate">body { + font: 1em/150% Helvetica, Arial, sans-serif; + padding: 1em; + margin: 0 auto; + max-width: 33em; +} + +@media (min-width: 70em) { + body { + font-size: 130%; + } +} + +h1 { + font-size: 1.5em; +} + +div p, +#id:first-line { + background-color: red; + border-radius: 3px; +} + +div p { + margin: 0; + padding: 1em; +} + +div p + p { + padding-top: 0; +} +</pre> + +<p id="Very_compact">您可以编写完全相同的CSS，删除大部分空格--这在功能上与第一个示例相同，但我相信您肯定也觉得阅读起来有点困难：</p> + +<pre class="brush: css notranslate">body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;} +@media (min-width: 70em) { body {font-size: 130%;} } + +h1 {font-size: 1.5em;} + +div p, #id:first-line {background-color: red; border-radius: 3px;} +div p {margin: 0; padding: 1em;} +div p + p {padding-top: 0;} +</pre> + +<p>您选择的代码布局通常是个人偏好，尽管当您开始在团队中工作时，您可能会发现现有团队有自己的样式指南，指定要遵循的约定。 </p> + +<p>在CSS中，属性和它们的值之间的空格需要小心。</p> + +<p>例如，以下声明是有效的CSS：</p> + +<pre class="brush: css notranslate">margin: 0 auto; +padding-left: 10px;</pre> + +<p>以下内容无效：</p> + +<pre class="brush: css notranslate">margin: 0auto; +padding- left: 10px;</pre> + +<p>“0auto”不被识别为边距属性的有效值(“0”和“AUTO”是两个独立的值)，而浏览器会将“padding- ”识别为有效属性。因此，您应该始终确保通过至少一个空格将不同的值分隔开来，但将属性名称和属性值作为单个未中断的字符串放在一起。</p> + +<p>试着在CSS中使用空格，看看什么情况下破坏了东西，什么时候没有破坏<strong>。</strong></p> + +<h2 id="接下来是什么？">接下来是什么？</h2> + +<p>了解一下浏览器如何将HTML和CSS转换成网页是很有用的, 所以在下一篇文章 — <a href="/zh-CN/docs/Learn/CSS/First_steps/CSS如何运行">CSS是如何工作的</a> — 我们将看看这个过程。</p> + +<p>{{PreviousMenuNext("Learn/CSS/First_steps/开始", "Learn/CSS/First_steps/CSS如何运行", "Learn/CSS/First_steps")}}</p> + +<h2 id="在这个模块中">在这个模块中</h2> + +<ol> + <li><a href="/zh-CN/docs/Learn/CSS/First_steps/What_is_CSS">什么是CSS?</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/First_steps/开始">开始使用CSS </a></li> + <li><a href="/zh-CN/docs/Learn/CSS/First_steps/How_CSS_is_structured">如何构建CSS </a><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured"> </a></li> + <li><a href="/zh-CN/docs/Learn/CSS/First_steps/CSS如何运行">CSS是如何工作的</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/First_steps/Using_your_new_knowledge">使用你的新知识</a></li> +</ol> diff --git a/files/zh-cn/learn/css/first_steps/index.html b/files/zh-cn/learn/css/first_steps/index.html new file mode 100644 index 0000000000..8518b2b14c --- /dev/null +++ b/files/zh-cn/learn/css/first_steps/index.html @@ -0,0 +1,51 @@ +--- +title: 学习CSS 第一步 +slug: Learn/CSS/First_steps +tags: + - 初学者 + - 学习 + - 模型 + - 第一步 +translation_of: Learn/CSS/First_steps +--- +<div><font><font>{{LearnSidebar}}</font></font></div> + +<p class="summary"><font><font>CSS（层叠样式表）用于设置和布置网页 - 例如，更改内容的字体，颜色，大小和间距，将其拆分为多个列，或添加动画和其他装饰功能。</font><font>这个模块为你掌握CSS的过程提供了一个温和的开端，包括它如何工作的基础知识，语法是什么样的，以及如何开始使用它来为HTML添加样式。</font></font></p> + +<h2 id="先决条件"><font><font>先决条件</font></font></h2> + +<p><font><font>在开始本单元之前，您应该：</font></font></p> + +<ol> + <li><font><font>基本熟悉使用计算机，并被动地使用Web（即查看它，消费内容）。</font></font></li> + <li><font><font>基本工作环境的设置详见</font></font><a href="/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software"><font><font>安装基本软件</font></font></a><font><font>，并了解如何创建和管理文件，详见</font></font><a href="/zh-CN/docs/Learn/Getting_started_with_the_web/Dealing_with_files"><font><font>处理文件</font></font></a><font><font>。</font></font></li> + <li>熟悉 <a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML">HTML概述</a> 章节中提到的基本HTML知识.</li> +</ol> + +<div class="note"> +<p><strong>注意</strong>： 如果你工作在一个无权创建自己文件的电脑/平板/其他设备上，你需要在一个在线编程工具上试验 （大多数）代码示例，如 <a href="http://jsbin.com/">JSBin</a> 或者 <a href="https://thimble.mozilla.org/">Thimble</a> 等。</p> +</div> + +<h2 id="指南">指南</h2> + +<p><span class="tlid-translation translation" lang="zh-CN"><span title="">该模块包含以下文章</span></span> , 这些文章将带您了解CSS的所有基本理论，并提供测试一些技能的机会。</p> + +<dl> + <dt><a href="/zh-CN/docs/Learn/CSS/First_steps/What_is_CSS">什么是 CSS?</a></dt> + <dd><strong>{{Glossary("CSS")}}</strong> (Cascading Style Sheets) 使你创建外观漂亮的网页，但它如何起作用的呢？这篇文章用一个简单的语法示例解释CSS是什么，还包括有关该语言的一些关键术语。</dd> + <dt><a href="/zh-CN/docs/Learn/CSS/First_steps/开始">CSS 入门</a></dt> + <dd>在本文中，我们将采用一个简单的HTML文档并将CSS应用于该文档，并在此过程中学习一些关于语言的实用内容。</dd> + <dt><a href="/zh-CN/docs/Learn/CSS/First_steps/How_CSS_is_structured">如何构建CSS？ </a></dt> + <dd>现在您已经了解了CSS是什么以及使用它的基础知识，现在是时候更深入地了解语言本身的结构。在这里，我们已经遇到了讨论过的许多概念; 如果你发现任何令人困惑的概念，你可以回到这个回顾。</dd> + <dt><a href="/zh-CN/docs/Learn/CSS/First_steps/CSS如何运行">CSS 如何工作</a></dt> + <dd>我们已经学习了CSS基础理论：CSS是什么以及如何编写简单的样式表。在这个课程中，我们将看看浏览器如何使用CSS和HTML并将其转换为网页。</dd> + <dt><a href="/zh-CN/docs/Learn/CSS/First_steps/Using_your_new_knowledge">用用你刚学到的知识</a></dt> + <dd><font><font>根据您在最后几课中学到的内容，您应该发现可以使用CSS格式化简单的文本文档，以便为它们添加自己的样式。</font><font>本文为您提供了实现这一目标的机会。</font></font></dd> +</dl> + +<h2 id="相关链接">相关链接</h2> + +<dl> + <dt><a href="https://teach.mozilla.org/activities/intermediate-web-lit/"><font><font>中级网络识字1：CSS简介</font></font></a></dt> + <dd><font><font>一个优秀的Mozilla基础课程，探索和测试</font></font><em><font><font>CSS</font></font></em><font><font>模块</font><em><font>简介中</font></em><font>谈到的许多技能</font><font>。</font><font>了解在网页上设置HTML元素的样式，CSS选择器，属性和值。</font></font></dd> +</dl> diff --git a/files/zh-cn/learn/css/first_steps/using_your_new_knowledge/index.html b/files/zh-cn/learn/css/first_steps/using_your_new_knowledge/index.html new file mode 100644 index 0000000000..49b2fb8e88 --- /dev/null +++ b/files/zh-cn/learn/css/first_steps/using_your_new_knowledge/index.html @@ -0,0 +1,104 @@ +--- +title: 运用你的新知识 +slug: Learn/CSS/First_steps/Using_your_new_knowledge +tags: + - CSS + - 新手 +translation_of: Learn/CSS/First_steps/Using_your_new_knowledge +--- +<p>{{LearnSidebar}}{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</p> + +<p class="summary">通过在前几节课程中学到的知识，你应该学会了用CSS组织一个简单的文本文件，并且在其中添加自己的CSS样式。本节中你将实现这一功能。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">先决条件：</th> + <td> + <p>基本熟悉使用计算机，<a href="/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software">基本工作环境的设置</a>，基本的<a href="/zh-CN/Learn/Getting_started_with_the_web/Dealing_with_files">文件处理知识</a>，基本的HTML知识（在<a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML">HTML概述</a>中学习）和CSS基础（查看本模块其他内容）</p> + </td> + </tr> + <tr> + <th scope="row">目标：</th> + <td> + <p>尝试使用一些CSS的新玩法并检验新的知识</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="先决条件">先决条件</h2> + +<p>你可以使用下面的实时编辑器，或者下载这个<a href="https://github.com/mdn/css-examples/blob/master/learn/getting-started/biog-download.html/">download the starting point</a>在自己的编辑器中进行编辑。这是一个独立的HTML文件，在head中包含了初始CSS样式。你可以将这些CSS样式从HTML文件中移出，保存为另一个独立文件。你可以选择CodePen、jsFiddle或Glitch中的任意一个完成这些工作。</p> + +<div class="blockIndicator note"> +<p><strong>注意：</strong>如果遇到困难，你可以向我求助——参见本页下面的<a href="/zh-CN/docs/Learn/CSS/First_steps/Using_your_new_knowledge#测评或请求帮助">测评或请求帮助</a>页面。</p> +</div> + +<p><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 37.33327865600586px;"><strong>让我们来学一些CSS样式</strong></span></font></p> + +<p>接下来的实例是一个个人主页，我们用CSS设定它的样式。以下是我用到的一些CSS属性，通过这些链接，你可以打开相应的MDN页面了解更多。</p> + +<ul> + <li>{{cssxref("font-family")}}</li> + <li>{{cssxref("color")}}</li> + <li>{{cssxref("border-bottom")}}</li> + <li>{{cssxref("font-weight")}}</li> + <li>{{cssxref("font-size")}}</li> + <li>{{cssxref("text-decoration")}}</li> +</ul> + +<p>我使用了许多不同的选择器（样式元素），如h1和h2，也为工作职务建立了一个类别。</p> + +<p>尝试使用CSS更改这一页面的显示，试着修改已有属性的取值，删除一些规则，或添加新的样式。然后通过<a href="/zh-CN/docs/Web/CSS/Reference">CSS 参考</a>找到本文未提及的一些属性，尽管大胆尝试！</p> + +<p>举例来说，你可以:</p> + +<ul> + <li>使用CSS的颜色关键词hotpink，将一级标题设定为粉红色。</li> + <li>使用CSS颜色关键词purple，为标题添加10像素宽的点线边距。</li> + <li>将二级标题设为斜体。</li> + <li>用#eeeeee为联系人列表中的超链接添加背景颜色和一个5像素宽的紫色加粗边框。使用一些内边距属性，拉开正文与外边距的距离。</li> + <li>当鼠标在某些HTML元素上悬停时增加动画 (推荐改变颜色和字体)。</li> + <li>设置链接在鼠标悬停时变为绿色。</li> +</ul> + +<p>最终，你得到的页面将如下图所示：</p> + +<p><img alt="Screenshot of how the example should look after completing the assessment." src="https://mdn.mozillademos.org/files/17035/learn-css-basics-assessment.png"></p> + +<p>记住这里没有错误的答案——在这个阶段你可以在学习中娱乐一下。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}} </p> + +<h2 id="测评或请求帮助">测评或请求帮助</h2> + +<p>如果你希望测试你的页面，或者你遇到困难想要求助，你可以：</p> + +<ol> + <li>将你的文件提交到可网络共享的编辑器，如CodePen、jsFiddle或Glitch。</li> + <li>在MDN论坛（<a href="https://discourse.mozilla.org/c/mdn" rel="noopener">MDN Discourse forum</a>）发帖请求测评或帮助。发帖时添加“学习”的标签，这样我们能够更容易找到它。你的帖子应包括以下内容：</li> +</ol> + +<ul> + <li>一个描述性标题，例如“CSS的初步尝试需要测试”。</li> + <li>详细描述你希望我们做些什么——比如，你已经尝试过了，但是卡住了，需要帮助。</li> + <li>你希望测试的例子的在网络编辑器上的链接。这是很好的做法，因为如果不让帮助你的看到你的程序，他们就很难帮助你解决程序的问题。</li> + <li>你的网页的测评页面链接，这样我们就可以找到你所求助的问题。</li> +</ul> + +<p><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 37.33327865600586px;"><strong>接下来是什么？</strong></span></font></p> + +<p>恭喜你完成了第一个模块的学习。现在你应该对CSS有了一个大致的了解 并且能够了解在样式表中发生的大多数事情。在下一个模块<a href="/zh-CN/docs/Learn/CSS/Building_blocks">CSS构建</a>中，我们将对一些关键区域进行深入的学习。</p> + +<p>{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</p> + +<p><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 37.33327865600586px;"><strong>本章目录</strong></span></font></p> + +<ol> + <li><a href="/zh-CN/docs/Learn/CSS/First_steps/What_is_CSS">什么是CSS？</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/First_steps/开始">CSS入门</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS是如何构成的</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/First_steps/CSS如何运行">CSS是如何工作的</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/First_steps/Using_your_new_knowledge">运用你所学的知识</a></li> +</ol> diff --git a/files/zh-cn/learn/css/first_steps/what_is_css/index.html b/files/zh-cn/learn/css/first_steps/what_is_css/index.html new file mode 100644 index 0000000000..e324f5f1bd --- /dev/null +++ b/files/zh-cn/learn/css/first_steps/what_is_css/index.html @@ -0,0 +1,119 @@ +--- +title: 什么是CSS? +slug: Learn/CSS/First_steps/What_is_CSS +translation_of: Learn/CSS/First_steps/What_is_CSS +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}</div> + +<p class="summary"><strong>{{Glossary("CSS")}}</strong> (层叠样式表) 让你可以创建好看的网页，但是它具体是怎么工作的呢? 这篇文章通过一些很简单的例子，告诉我们什么是 CSS，同时还会涉及一些和 CSS 相关的专业术语。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">预备知识:</th> + <td>基本的计算机知识，<a href="/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software">安装基础软件</a>, <a href="/zh-CN/docs/Learn/Getting_started_with_the_web/Dealing_with_files">文件处理</a> 的基础知识, 还有HTML基础 (学习 <a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML">HTML概述</a>。)</td> + </tr> + <tr> + <th scope="row">目标:</th> + <td>了解什么是CSS。</td> + </tr> + </tbody> +</table> + +<p>在 <a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML">HTML概述</a> 模块我们学习了HTML是什么，以及如何使用它来组成页面。 浏览器能够解析这些页面。标题部分看起来会比正常文本更大，段落则会另起一行，并且相互之间会有一定间隔。链接通过下划线和不同的颜色与其他文本区分开来。这些都是浏览器的默认样式——当开发者没有指定样式时，浏览器通过这些最简单的样式使页面具有基本可读性。</p> + +<p><img alt="这是浏览器默认样式" src="https://mdn.mozillademos.org/files/17150/example_dlnb526_zh.png" style="height: 463px; width: 1220px;"></p> + +<p>如果所有网站都像上图那样，互联网就会非常枯燥。但是使用 CSS 就可以完全控制浏览器如何显示 HTML 元素，从而充分展示你喜欢的设计样式。</p> + +<h2 id="CSS用来干什么">CSS用来干什么?</h2> + +<p>前文提到过, CSS 是用来指定文档如何展示给用户的一门语言——如网页的样式、布局、等等。</p> + +<p>一份<strong>文档</strong>是由标记语言组织起来的文本文件 —— {{Glossary("HTML")}} 是最常见的标记语言, 但你可能也听说过其他可标记语言，如 {{Glossary("SVG")}} 或 {{Glossary("XML")}}。</p> + +<p><strong>展示</strong>一份文档给用户实际上是将文档变成用户可用的文件。{{Glossary("browser","Browsers")}}：如 {{Glossary("Mozilla Firefox","Firefox")}}，{{Glossary("Google Chrome","Chrome")}}, 或 {{Glossary("Microsoft Edge","Edge")}}，都可以将文档在电脑屏幕、投影仪或打印机等设备上进行可视化。</p> + +<div class="blockIndicator note"> +<p><strong>注意</strong>: 浏览器有时候也被称为 {{Glossary("User agent","user agent")}}，大致可以当这个程序是一个存在于计算机系统中的人。 当我们讨论CSS时，浏览器是 User agent 的主要形式， 然而它并不是唯一的一个。还有其他可用的user agents — 像是那些可以把HTML和CSS文档转换为可以打印的PDF文档的软件。</p> +</div> + +<p>CSS 可以用于给文档添加样式 —— 比如改变标题和链接的<a href="/zh-CN/docs/Web/CSS/color_value">颜色</a>及<a href="/zh-CN/docs/Web/CSS/font-size">大小</a>。它也可用于创建布局 —— 比如将一个单列文本变成包含主要内容区域和存放相关信息的侧边栏区域的<a href="/zh-CN/docs/Web/CSS/Layout_cookbook/Column_layouts">布局</a>。它甚至还可以用来做一些特效，比如<a href="/zh-CN/docs/Web/CSS/CSS_Animations">动画</a>。查看本段内容中所给出的特定案例。</p> + +<h2 id="CSS_语法">CSS 语法</h2> + +<p>CSS是一门基于规则的语言 —— 你能定义用于你的网页中特定元素样式的一组规则. 比如“我希望页面中的主标题是红色的大字”</p> + +<p>下面这段代码使用非常简单的 CSS 规则实现了之前提到的效果:</p> + +<pre class="brush: css">h1 { + color: red; + font-size: 5em; +}</pre> + +<p>语法由一个 {{Glossary("CSS Selector", "选择器(selector)")}}起头。 它 <em>选择(selects)</em> 了我们将要用来添加样式的 HTML 元素。 在这个例子中我们为一级标题（主标题{{htmlelement("h1")}}）添加样式。</p> + +<p>接着输入一对大括号<code>{ }</code>。 在大括号内部定义一个或多个形式为 <strong>属性(property):值(value);</strong> 的 <strong>声明(declarations)</strong>。每个声明都指定了我们所选择元素的一个属性，之后跟一个我们想赋给这个属性的值。</p> + +<p>冒号之前是属性，冒号之后是值。不同的 CSS {{Glossary("property/CSS","属性(properties)")}} 对应不同的合法值。在这个例子中，我们指定了 <code>color</code> 属性，它可以接受许多<a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#Color">颜色值</a>；还有 <code>font-size</code> 属性，它可以接收许多 <a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#Numbers_lengths_and_percentages">size units</a> 值。</p> + +<p>一个 CSS 样式表可以包含很多个规则。</p> + +<pre class="brush: css">h1 { + color: red; + font-size: 5em; +} + +p { + color: black; +}</pre> + +<p>你会发现你已经很快掌握了一些属性的值，但是属性可以接受的值远不止这些。在MDN上每个属性都有单独的页面，不论你是忘记了某个属性，还是想要知道一个属性还能接受什么其它的值，这些页面都可以帮助你。</p> + +<div class="blockIndicator note"> +<p><strong>注意</strong>：在MDN上的 <a href="/zh-CN/docs/Web/CSS/Reference">CSS reference</a> 页面列举了所有的 CSS属性页面（同时也包括其它的CSS特性）。 另外，当你想要寻找一个CSS特性的更多内容时，多使用你的搜索引擎来搜索 "mdn <em>css-feature-name</em>" 。例如，搜索 "mdn color" 和 "mdn font-size"！</p> +</div> + +<h2 id="CSS_模块">CSS 模块</h2> + +<p>你可以通过 CSS 为许多东西添加样式，CSS 由许多<em>模块(modules)</em> 构成。你可以在 MDN 上浏览这些模块的参考内容(MDN reference)，许多模块都被组织在自己单独的文档页面。例如，我想查找一下 MDN reference 的 <a href="/zh-CN/docs/Web/CSS/CSS_Backgrounds_and_Borders">Backgrounds and Borders</a> 模块的相关内容，来了解它是用来做什么的、它还包括什么属性、它还有什么其它特性等。你也可以在 <em>CSS Specification</em> 查找（见下文），它定义了CSS规范 。</p> + +<p>在这个阶段你不必过于担心 CSS 是如何组织的(how CSS is structured)，但是它能帮助你更好的掌握 CSS。例如，你注意到某个属性和另外一些属性的相似点，并且它们可能确实是相同的格式。</p> + +<p>举个具体点的例子：如上文中的 Backgrounds and Borders 模块 — 你会发现 <code><a href="/en-US/docs/Web/CSS/background-color">background-color</a></code> 和 <code><a href="/en-US/docs/Web/CSS/border-color">border-color</a></code> 这两个属性在逻辑上相通。并且它也确实如此。</p> + +<h3 id="CSS_规范">CSS 规范</h3> + +<p>所有的标准Web技术(HTML, CSS, JavaScript等) 都被定义在一个巨大的文档中，称作 规范specifications (或者简称为 "specs")，它是由 (像是 {{glossary("W3C")}}, {{glossary("WHATWG")}}, {{glossary("ECMA")}} 或 {{glossary("Khronos")}}) 这些规范化组织所发布的，其中还定义了各种技术是如何工作的。</p> + +<p>CSS 也不例外 — 它是由W3C(万维网联盟)中的一个名叫 <a href="https://www.w3.org/Style/CSS/">CSS Working Group</a> 团体发展起来的。这个团体是由浏览器厂商和其他公司中对 CSS 感兴趣的人作为代表组成的。也有其他的人员，比如<em>受邀专家(invited experts)</em>，他们作为不从属于任何组织的独立声音加入团体。</p> + +<p>新的 CSS 特性被开发出来，或是因为某个浏览器热衷于开发新功能，或是因为Web设计人员与开发者要求增加一个新特性，又或是 CSS Working Group 内部的讨论决定。CSS 始终在发展，并伴随着新的特性。然而，有一件事情从始至终都未改变，那就是不让新的改变破坏旧的网站，即使是2000年建立的网站，如今也能正常访问！</p> + +<p>作为一个 CSS 新手，你会发现阅读 CSS 规范 中的内容非常吃力 — 它旨在为工程师在用户代理(user agents)中实现对 CSS 各种特性的支持，而不是作为一本为Web开发者理解 CSS 内容的教程。即使是有经验的开发者，也更倾向于使用 MDN 文档或者其它教程。但是，知晓它的存在，理解 CSS、规范 和 浏览器支持（见下文） 之间的关系是很有价值的。</p> + +<h2 id="浏览器支持">浏览器支持</h2> + +<p>当一个浏览器支持 CSS 后，我们就可以用它来进行Web开发了。这意味着我们写在 CSS 文件中的代码可以被指令执行，展示到荧幕中。在 <a href="/zh-CN/docs/Learn/CSS/First_steps/How_CSS_works">CSS 如何工作</a> 一节中我们会学习到更多的相关知识。但是让所有的浏览器都同时支持一个 CSS 新特性是不现实的，通常都会一个空档期 — 一些浏览器已经支持而另一些仍未支持。因此，查看特性的实现状态(implementation status)是非常有用的。在 MDN 上的每个属性的页面中都标有它们对应的状态，你可以通过这种方法来查看你是否可以去使用它。</p> + +<p>以下是 CSS <code><a href="/en-US/docs/Web/CSS/font-family">font-family</a></code> 属性的兼容数据表。</p> + +<p>{{Compat("css.properties.font-family")}}</p> + +<h2 id="下一步">下一步</h2> + +<p>现在你对 CSS 已经有了一定的理解，接下来，通过 <a href="/zh-CN/docs/Learn/CSS/First_steps/Getting_started">CSS 入门 </a><a href="/zh-CN/docs/Learn/CSS/First_steps/开始"> </a>的学习，你将可以自己写一些 CSS 代码了。</p> + +<p>{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}</p> + +<h2 id="本章目录">本章目录</h2> + +<ol> + <li><a href="/zh-CN/docs/Learn/CSS/First_steps/What_is_CSS">什么是 CSS?</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/First_steps/开始">CSS 入门</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/First_steps/How_CSS_is_structured">如何构建CSS</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/First_steps/CSS如何运行">CSS 如何工作</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/First_steps/Using_your_new_knowledge">用用你刚学到的知识</a></li> +</ol> diff --git a/files/zh-cn/learn/css/first_steps/开始/index.html b/files/zh-cn/learn/css/first_steps/开始/index.html new file mode 100644 index 0000000000..0a6087ee12 --- /dev/null +++ b/files/zh-cn/learn/css/first_steps/开始/index.html @@ -0,0 +1,267 @@ +--- +title: 让我们开始CSS的学习之旅 +slug: Learn/CSS/First_steps/开始 +tags: + - CSS + - 元素 + - 初学者 + - 学习 + - 类 + - 选择器 +translation_of: Learn/CSS/First_steps/Getting_started +--- +<div> +<p>{{LearnSidebar}}</p> + +<p>{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}</p> +</div> + +<p class="summary">在这篇文章中，我们将会拿一个简单的HTML文档做例子，并且在上边使用CSS样式，期待你能在此过程中学会更多有关CSS的实战性知识。</p> + +<h4 id="前置知识">前置知识</h4> + +<p><font><font>在开始本单元之前，您应该：</font></font></p> + +<ul> + <li><font><font>基本熟悉计算机操作。</font></font></li> + <li><font><font>基本工作环境的设置（详见</font></font><font><font><a href="https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software">安装基本软件</a>）</font></font><font><font>，基本的文件操作，详见</font></font><font><font><a href="https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/Dealing_with_files">处理文件</a></font></font><font><font>。</font></font></li> + <li>熟悉 <a href="https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML">HTML概述</a> 章节中提到的基本HTML知识.</li> +</ul> + +<h4 id="目标">目标</h4> + +<ul> + <li>理解 HTML文档链接CSS文档的几个基本套路，</li> + <li>并能运用所学的CSS，做些文字上的格式化操作。</li> +</ul> + +<h2 id="先从HTML开始吧">先从HTML开始吧</h2> + +<p>我们先以HTML文档展开叙述。如果想在自己电脑试一试，可以copy下面的代码。在你的电脑上，将代码以文件名： <code>index.html</code> 的形式保存下来。</p> + +<pre class="brush: html"><!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>开始学习CSS</title> +</head> + +<body> + + <h1>我是一级标题</h1> + + <p>这是一个段落文本. 在文本中有一个 <span>span element</span> +并且还有一个 <a href="http://example.com">链接</a>.</p> + + <p>这是第二段. 包含了一个 <em>强调</em> 元素.</p> + + <ul> + <li>项目1</li> + <li>项目2</li> + <li>项目 <em>三</em></li> + </ul> + +</body> + +</html> +</pre> + +<div class="blockIndicator note"> +<p><strong>温馨提示：假设你电脑操作环境不方便创建文件运行代码，别担心，可以用我们下方给出的在线实时代码编辑器。</strong></p> +</div> + +<h2 id="添加CSS试试看？">添加CSS试试看？</h2> + +<p>我们最想做的就是让HTML文档能够遵守我们给它的CSS规则。 其实有三种方式可以实现，而目前我们更倾向于利用最普遍且有用的方式——在文档的开头链接CSS。</p> + +<p>在与之前所说的HTML文档的相同目录创建一个文件，保存并命名为 <code>styles.css</code> 。（看后缀知道此文件就是CSS文件）</p> + +<p>为了把 <code>styles.css</code> 和 <code>index.html</code> 联结起来，可以在HTML文档中，{{htmlelement("head")}}语句模块里面加上下面的代码：</p> + +<pre class="brush: html"><link rel="stylesheet" href="styles.css"></pre> + +<p> {{htmlelement("link")}} 语句块里面，我们用属性<code>rel</code>，让浏览器知道有CSS文档存在（所以需要遵守CSS样式的规定），并利用属性 <code>href</code> 指定，寻找CSS文件的位置。 你可以做测试来验证CSS是否有效：在 <code>styles.css</code> 里面加上CSS样式并观察显示的结果。下面，用你的编辑器打出下面的代码。</p> + +<pre class="brush: css">h1 { + color: red; +}</pre> + +<p>保存HTML和CSS文档，刷新浏览器网页，不出意外你将看到网页顶层的大标题变成红色了。如果看到这个现象，我得恭喜你：你已经成功将某些CSS样式运用到HTML上了。当然假设没有达到预想结果，可以仔细检查每句代码是否正确，加油：）</p> + +<p>你可以一直在本地编辑器练习 <code>styles.css</code> ，或者采用我们教程下面的交互式智能编辑器。这个编辑器会默认把第一个面板里面的CSS代码联结到旁边的HTML文档，就好像我们上面得两个文档一样互相联结。</p> + +<h2 id="样式化_HTML_元素">样式化 HTML 元素</h2> + +<p>通过上一节将大标题变成红色的例子，我们已经展示了我们可以选中并且样式化 HTML 元素。我们通过触发元素选择器实现这一点——元素选择器，即直接匹配 HTML 元素的选择器。例如，若要样式化一个文档中所有的段落，只需使用选择器 <code>p</code>。若要将所有段落变成绿色，你可以利用如下方式：</p> + +<pre class="brush: css">p { + color: green; +}</pre> + +<p>用逗号将不同选择器隔开，即可一次使用多个选择器。譬如，若要将所有段落与列表变成绿色，只需：</p> + +<pre class="brush: css">p, li { + color: green; +}</pre> + +<p>您可以在下面的互动式文本编辑器上试试看，当然您也可以在本地的 CSS 文档上尝试。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started1.html", '100%', 900)}} </p> + +<h2 id="改变元素的默认行为">改变元素的默认行为</h2> + +<p>只要一个 HTML 文档标记正确，即使像我们的例子那么简单，浏览器都会尽全力将其渲染至可读状态。标题默认使用大号粗体；列表旁总有项目符号。这是因为浏览器自带一个包含默认样式的样式表，默认对任何页面有效。没有了它们，所有文本会夹杂在一起变得一团糟，我们只得从头开始规定，好糟糕。话说回来，所有现代浏览器的默认样式都没什么差距。</p> + +<p>不过你可能对浏览器的默认样式不太满意。没关系，只需选定那个元素，加一条 CSS 规则即可。就拿我们的无序列表 <code><ul></code>举个例子吧，它自带项目符号，不过要是你跟它有仇，你就可以这样移除它们：</p> + +<pre class="brush: css">li { + list-style-type: none; +}</pre> + +<p>把上述代码加到你的 CSS 里面试一试！</p> + +<p>欢迎参阅 MDN 上的 <code>list-style-type</code> 属性，看看到底有哪些值被支持。 <code><a href="/en-US/docs/Web/CSS/list-style-type">list-style-type</a></code> 页首提供互动性示例，您可以输入不同的值来瞅一瞅它们到底有什么用。关于每个值的详细描述都规规整整地列在下面。</p> + +<p>通过参阅上述页面，你会发现你不仅能移除项目符号——你甚至能改变它们。赶快试试 <code>square</code>，它能把默认的小黑球变成方框框。</p> + +<h2 id="使用类名">使用类名</h2> + +<p>目前为止，我们通过 HTML 元素名规定样式。如果你愿意所有元素都一个样，也不是不可以，但大多数情况下，我估计你都不愿意。我知道你想干啥，你想用这种方式样式化这一片元素，又想用那种方式样式化那一片元素，真贪心。不过没关系，你可以给 HTML 元素加个类名（class），再选中那个类名，这样就可以了，大家基本上都这么用。</p> + +<p>举个例子吧，咱们把 <a href="/en-US/docs/Web/HTML/Global_attributes/class">class 属性</a>加到表里面第二个对象。你的列表看起来应该是这样的：</p> + +<pre class="brush: html"><ul> + <li>项目一</li> + <li <strong>class="special"</strong>>项目二</li> + <li>项目 <em>三</em></li> +</ul></pre> + +<p>在 CSS 中，要选中这个 <code>special</code> 类，只需在选择器的开头加个西文句点（.）。在你的 CSS 文档里加上如下代码：</p> + +<pre class="brush: css">.special { + color: orange; + font-weight: bold; +}</pre> + +<p>保存再刷新，就可以看到变化。</p> + +<p>这个 <code>special</code> 类型可不局限于列表，它可以应用到各种元素上。举个例子，你可能也想让段落里边的 <code><span></code> 一起又橙又粗起来。试试把<code>special</code> 类属性加上去，保存，刷新，哇，生活就是这么美好。</p> + +<p>有时你会发现选择器中，HTML 元素选择器跟类一起出现：</p> + +<pre>li.special { + color: orange; + font-weight: bold; +}</pre> + +<p class="brush: html">这个意思是说，“选中每个 <code>special</code> 类的 <code>li</code> 元素”。 你真要这样，好了，它对 <code><span></code> 还有其它元素不起作用了。你可以把这个元素再添上去就是了：</p> + +<pre class="brush: css">li.special, +span.special { + color: orange; + font-weight: bold; +}</pre> + +<p>你们都是懒人，肯定不想每加一个 special 类的元素就改一遍 CSS 表，你肯定想把一个类的属性应用到多个元素上。所以说，有时还是别管元素，光看类就完事了，除非你意志坚定，坚持对这个类的某一种元素创造规则，还不让其它元素用。</p> + +<h2 id="根据元素在文档中的位置确定样式">根据元素在文档中的位置确定样式</h2> + +<p>有时候，您希望某些内容根据它在文档中的位置而有所不同。这里有很多选择器可以为您提供帮助，但现在我们只介绍几个选择器。在我们的文档中有两个 <code><em></code>元素 ——一个在段落内，另一个在列表项内。仅选择嵌套在<code><li></code> 元素内的<code><em></code>我们可以使用一个称为<strong>包含选择符</strong>的选择器，它只是单纯地在两个选择器之间加上一个空格。</p> + +<p>将以下规则添加到样式表。</p> + +<pre class="brush: css">li em { + color: rebeccapurple; +}</pre> + +<p>该选择器将选择<code><li></code>内部的任何<code><em></code>元素（<code><li></code>的后代）。因此在示例文档中，您应该发现第三个列表项内的<code><em></code>现在是紫色，但是在段落内的那个没发生变化。</p> + +<p>另一些可能想尝试的事情是在HTML文档中设置直接出现在标题后面并且与标题具有相同层级的段落样式，为此需在两个选择器之间添加一个 <code>+</code> 号 (成为 <strong>相邻选择符</strong>) </p> + +<p>也将这个规则添加到样式表中：</p> + +<pre class="brush: css">h1 + p { + font-size: 200%; +}</pre> + +<p>下面的示例包含了上面的两个规则。 尝试添加规则使位于段落中的span变为红色。如果正确您将看到在第一段中的span会变为红色，但是第一个列表项中的span不会改变颜色。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}}</p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: 如你所见，CSS 给我们提供了几种定位元素的方法。到目前为止，我们只触及了皮毛！我们将对这些选择器进行适当的研究，更多的内容将在我们后面的<a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">Selectors</a>章节中介绍。</p> +</div> + +<h2 id="根据状态确定样式">根据状态确定样式</h2> + +<p>在这篇教程中我们最后要看的一种修改样式的方法就是根据标签的状态确定样式。一个直观的例子就是当我们修改链接的样式时。 当我们修改一个链接的样式时我们需要定位（针对） <code><a href="/en-US/docs/Web/HTML/Element/a"><a></a></code> （锚）标签。取决于是否是未访问的、访问过的、被鼠标悬停的、被键盘定位的，亦或是正在被点击当中的状态，这个标签有着不同的状态。你可以使用CSS去定位或者说针对这些不同的状态进行修饰——下面的CSS代码使得没有被访问的链接颜色变为粉色、访问过的链接变为绿色。</p> + +<pre class="brush: css">a:link { + color: pink; +} + +a:visited { + color: green; +}</pre> + +<p>你可以改变链接被鼠标悬停的时候的样式，例如移除下划线，下面的代码就实现了这个功能。</p> + +<pre class="brush: css">a:hover { + text-decoration: none; +}</pre> + +<p>在下面的例子中，你可以对超链接的不同状态尝试各种各样的值。我已经编写了一些规则，然而你肯定已经发现粉色看上去太浅以至于不好辨认。— 换个更好的颜色吧。你能将链接变为黑体吗?</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started3.html", '100%', 900)}} </p> + +<p>我们对鼠标悬停于链接上的情况删除了下划线。你当然可以让超链接在任何情况下都没有下划线.。但需要注意的是，对一个实际的站点，需要让浏览者知道“链接是链接”。为了让浏览者注意到一段文字中的某些部分是可点击的，最好保留link状态下的下划线。— 这是下划线的本来作用。不管你用CSS来做什么，都应当使得变化后的文档看上去更加清晰明了。— 在后面，当我们遇到类似的情况时，我们将适时指出。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: 在本教程以及整个MDN站点中，你会经常看到“无障碍”这个词。“无障碍”一词的意思是，我们的网页应当每一个访客都能够理解、使用。</p> + +<p>你的访客可能在一台使用鼠标和键盘操作的计算机前，也可能正在使用带有触摸屏的手机，或者正在使用屏幕阅读软件读出文档内容，或者他们需要使用更大的字体，或者仅仅使用键盘浏览站点。</p> + +<p>一个朴素的HTML文档一般来说对任何人都是可以无障碍访问的 ，当你开始为它添加样式，记得不要破坏这种可访问性。</p> +</div> + +<h2 id="将选择子和关系选择器组合起来">将选择子和关系选择器组合起来</h2> + +<p>你可以将多个选择子和关系选择器组合起来。来看一些例子：</p> + +<pre class="brush: css">/* selects any <span> that is inside a <p>, which is inside an <article> */ +article p span { ... } + +/* selects any <p> that comes directly after a <ul>, which comes directly after an <h1> */ +h1 + ul + p { ... }</pre> + +<p>你可以将多种类型组合在一起。试试将下面的代码添加到你的代码里：</p> + +<pre class="brush: css">body h1 + p .special { + color: yellow; + background-color: black; + padding: 5px; +}</pre> + +<p>上面的代码为以下元素建立样式：在<body>之内，紧接在<h1>后面的<p>元素的内部，类名为special。</p> + +<p>在我们提供的原始HTML文档中，与之符合的元素只有<code><span class="special"></code>.</p> + +<p>如果你现在觉得这份代码太复杂了，别担心，— 一旦你开始编写更多的CSS代码，你很快就能找到窍门。</p> + +<h2 id="总结">总结</h2> + +<p>在本教程中，我们学习了使用CSS为文档添加样式的几种方法。在教程的剩下部分，我们将继续这个话题。不过，你现在已经有了足够的知识为文本建立样式；根据目标元素的不同用不同的方式应用样式；在MDN文档中查找属性和值。</p> + +<p>在下一节中，我们将看到样式表的结构是什么样的。</p> + +<p>{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}</p> + +<h2 id="在此模块">在此模块</h2> + +<ol> + <li><a href="/zh-CN/docs/Learn/CSS/First_steps/What_is_CSS">什么是CSS?</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/First_steps/开始">开始学习CSS</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS代码是如何组织的</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/First_steps/CSS如何运行">CSS是如何工作的</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/First_steps/Using_your_new_knowledge">开始使用你的新知识</a></li> +</ol> diff --git a/files/zh-cn/learn/css/howto/index.html b/files/zh-cn/learn/css/howto/index.html new file mode 100644 index 0000000000..ecf4c7891b --- /dev/null +++ b/files/zh-cn/learn/css/howto/index.html @@ -0,0 +1,80 @@ +--- +title: 解决常见的css问题 +slug: Learn/CSS/Howto +translation_of: Learn/CSS/Howto +--- +<p class="summary">以下链接提供了一些你在使用CSS时可能遇到的常见问题的解决方案。</p> + +<h2 id="主要使用事项">主要使用事项</h2> + +<div class="column-container"> +<div class="column-half"> +<h3 id="基础">基础</h3> + +<ul> + <li><a href="/zh-CN/docs/Learn/CSS/First_steps/CSS%E5%A6%82%E4%BD%95%E8%BF%90%E8%A1%8C#应用CSS到DOM">如何应用CSS到DOM中？</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/First_steps/How_CSS_is_structured#空白">CSS如何留白？</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/First_steps/How_CSS_is_structured#注释">CSS如何添加注释？</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors#类型、类和ID选择器">CSS如何通过元素名、类名以及ID筛选元素？</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors#标签属性选择器">CSS如何通过属性名和属性内容筛选元素？</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors#伪类与伪元素">如何使用伪类？</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors#伪类与伪元素">如何使用伪元素？</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors#选择器列表">如何将多个选择器应用于同一个规则？</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units#颜色">如何在CSS中指定颜色？</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Debugging_CSS#审查_CSS">如何在浏览器中调试CSS？</a></li> +</ul> + +<h3 id="样式和内容">样式和内容</h3> + +<ul> + <li><a href="/zh-CN/docs/Learn/CSS/%E4%B8%BA%E6%96%87%E6%9C%AC%E6%B7%BB%E5%8A%A0%E6%A0%B7%E5%BC%8F/Fundamentals">如何给文字添加样式？</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/%E4%B8%BA%E6%96%87%E6%9C%AC%E6%B7%BB%E5%8A%A0%E6%A0%B7%E5%BC%8F/Styling_lists">如何定制元素列表？</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/%E4%B8%BA%E6%96%87%E6%9C%AC%E6%B7%BB%E5%8A%A0%E6%A0%B7%E5%BC%8F/Styling_links">如何给链接添加样式？</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/%E4%B8%BA%E6%96%87%E6%9C%AC%E6%B7%BB%E5%8A%A0%E6%A0%B7%E5%BC%8F/Fundamentals#文字阴影">如何给文本添加阴影？</a></li> +</ul> +</div> + +<div class="column-half"> +<h3 id="盒子和布局">盒子和布局</h3> + +<ul> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model">如何调整CSS盒模型大小？</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Overflowing_content">如何控制盒模型溢出？</a></li> + <li><a href="/zh-CN/docs/Web/CSS/background-clip">如何控制CSS盒模型中背景绘制部分？</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model">如何理解 inline、block 以及 inline-block？</a></li> + <li><a href="/en-US/docs/Learn/CSS/Howto/create_fancy_boxes">How to create fancy boxes</a> (also see the <a href="/en-US/docs/Learn/CSS/Styling_boxes">Styling boxes</a> module, generally).</li> + <li><a href="/zh-CN/docs/Web/CSS/background-clip">如何使用 background-clip 控制背景图覆盖？</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model#替代（IE）盒模型">如何使用box-sizing完全改变盒模型？</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders#背景颜色">如何改变背景色？</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders#玩转背景和边框">如何修改边框？</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables">如何给HTML表格添样式？</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Advanced_styling_effects#盒子阴影">如何添加盒子阴影？</a></li> +</ul> +</div> +</div> + +<h2 id="罕见问题与进阶技巧">罕见问题与进阶技巧</h2> + +<p>CSS允许一些高级的设计技巧。这些文章可以帮助您解决一些更复杂的使用案例。</p> + +<h3 id="通用">通用</h3> + +<ul> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#优先级">如何计算CSS选择器的优先级？</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#控制继承">如何控制CSS中的继承？</a></li> +</ul> + +<h3 id="进阶效果">进阶效果</h3> + +<ul> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Advanced_styling_effects#Filters%EF%BC%88%E6%BB%A4%E9%95%9C%EF%BC%89">如何使用CSS滤镜？</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Advanced_styling_effects#Blend_modes（混合模式）">如何在CSS中使用混合模式？</a></li> +</ul> + +<h3 id="布局">布局</h3> + +<ul> + <li><a href="/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">使用CSS flex布局</a></li> + <li><a href="/zh-CN/docs/Web/Guide/CSS/Using_multi-column_layouts">使用CSS多列布局</a></li> + <li><a href="/zh-CN/docs/Web/Guide/CSS/Getting_started/Content">使用CSS生成内容</a></li> +</ul> diff --git a/files/zh-cn/learn/css/index.html b/files/zh-cn/learn/css/index.html new file mode 100644 index 0000000000..fd8bb042cb --- /dev/null +++ b/files/zh-cn/learn/css/index.html @@ -0,0 +1,64 @@ +--- +title: CSS +slug: Learn/CSS +tags: + - Beginner + - CSS + - CodingScripting + - Debugging + - Landing + - NeedsContent + - Topic + - length + - specificity + - 入门 +translation_of: Learn/CSS +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">层叠样式表 — 也就是{{glossary("CSS")}} — 是你在{{glossary("HTML")}}之后应该学习的第二门技术。HTML用于定义内容的结构和语义，CSS用于设计风格和布局。比如，您可以使用CSS来更改内容的字体、颜色、大小、间距，将内容分为多列，或者添加动画及其他的装饰效果。</p> + +<h2 id="学习路径">学习路径</h2> + +<p>在尝试学习 CSS 之前，您应该了解 HTML 的基础知识。建议你先学习 <a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML">HTML 简介</a>模块 — 这一模块主要介绍了以下内容:</p> + +<ul> + <li>CSS，从 CSS 模块简介开始</li> + <li>更高级的<a href="/zh-CN/Learn/HTML#Modules">HTML模块</a></li> + <li><a href="/en-US/docs/Learn/JavaScript">JavaScript</a>，如何使用 Javascript 给网页加上动态功能</li> +</ul> + +<p>我们建议你同时学习 HTML 和 CSS，在这两个主题之间来回切换。因为有着 CSS 的 HTML 更加有趣，并且不了解 HTML 就不能真正掌握CSS。</p> + +<p>在学习本章节之前，你应该会使用计算机，熟练的使用网页操作（哪怕只是盯着屏幕看）。你应该配置好一个基本的操作环境（见<a href="/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software">安装基本软件</a>），知道如何创建和管理文件（见<a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">处理文件</a>）—这两个都是 <a href="/zh-CN/docs/Learn/Getting_started_with_the_web">Web入门</a> 的初学者模块的一部分。</p> + +<p>我们建议你在学习本章内容前，先完成 <a href="/zh-CN/docs/Learn/Getting_started_with_the_web">Web入门</a>，尽管这不是必须的；CSS 基础文章中涵盖的大部分内容在 CSS 模块简介中也有，而且 CSS 模块涵盖了更多的细节。</p> + +<h2 id="模块">模块</h2> + +<p>本主题包含以下模块，建议按顺序阅读这些模块。你应该从第一个模块开始。</p> + +<dl> + <dt><a href="/zh-CN/docs/Learn/CSS/First_steps">CSS 初步</a></dt> + <dd>这个模块介绍了使用 CSS 的基础知识，包括选择器和属性，编写 CSS 的规则，将CSS 应用于 HTML 的方法，如何在 CSS 中指定长度、颜色和其他单位，层叠与继承，盒模型基础以及 CSS 的调试。</dd> + <dt><a href="/zh-CN/docs/Learn/CSS/Building_Blocks">构建 CSS 块</a></dt> + <dd>本模块承接<a href="/zh-CN/docs/Learn/CSS/First_steps">CSS 初步</a>，进行进一步的学习——既然你已经熟悉了CSS的语言和语法，有了一些使用CSS的基本经验，是时候再深入一些了。本模块涉及了层叠与继承、可用的所有种类的选择器、单位、尺寸、样式化背景和边框、调试，还有更多。</dd> + <dd>这样做的目的是，在继续深入到更加具体的规则，例如<a href="/zh-CN/docs/Learn/CSS/%E4%B8%BA%E6%96%87%E6%9C%AC%E6%B7%BB%E5%8A%A0%E6%A0%B7%E5%BC%8F">样式化文本</a>和<a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout">CSS布局</a>前，为你提供一个用于编写堪用的CSS的工具箱，帮你理解所有必要的理论。</dd> + <dt><a href="/zh-CN/docs/Learn/CSS/Styling_text">样式化文本</a></dt> + <dd>这个模块介绍基础的文本样式，包括字体属性的设置，粗体和斜体，行和字母间距，阴影和其他文本功能。我们通过在网页上设置特定的字体，指定列表和链接的样式来完成这一模块。</dd> + <dt><a href="/zh-CN/docs/Learn/CSS/CSS_layout">CSS 布局</a></dt> + <dd>到目前为止，我们已经学习了 CSS 基础知识、如何设置文本样式、如何设计并操作内容所在的框。现在应该考虑如何把你的框以合适的位置放置在视口内和其他框旁边了。我们已经学习了在深入 CSS 布局之前需要学会的必要知识，下一步我们通过学习设置 display 属性、使用新的布局工具如弹性盒（flexbox），CSS网格和定位、以及你仍想知道的一些传统技术，来深入学习 CSS 布局。</dd> +</dl> + +<h2 id="解决常见的CSS问题">解决常见的CSS问题</h2> + +<p><a href="/en-US/docs/Learn/CSS/Howto">使用CSS解决常见问题</a>解释了怎样使用CSS解决创建一个网页时常遇到的问题。</p> + +<p>从这里开始，你大致就能在HTML元素和它们的背景上应用颜色、改变形状尺寸和元素的位置、向元素上添加并定义边框。不过一旦你牢固掌握了即便是CSS最基础的部分，也没有很多做不到的事情。学习CSS最棒的一件事情就是，一旦你知道了基本的原理，即使你实际上不知道怎么做，你通常还是会很清楚什么能做到而什么不能做到！</p> + +<h2 id="参阅">参阅</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS">CSS on MDN</a></dt> + <dd>MDN 上css文档的主要入口，包括详细的参考到高级的教程一系列内容。</dd> +</dl> diff --git a/files/zh-cn/learn/css/introduction_to_css/fundamental_css_comprehension/index.html b/files/zh-cn/learn/css/introduction_to_css/fundamental_css_comprehension/index.html new file mode 100644 index 0000000000..b246af87fe --- /dev/null +++ b/files/zh-cn/learn/css/introduction_to_css/fundamental_css_comprehension/index.html @@ -0,0 +1,127 @@ +--- +title: 基本的CSS理解 +slug: Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension +tags: + - 初学者 + - 盒模型 + - 评估 + - 选择器 +translation_of: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}</div> + +<p class="summary">你已经在这个模块中了解到了很多内容, 所以当你达到这个模块的最后一篇文章的时候，感觉一定非常不错吧！在你继续之前的最后一步，就是完成对于这个模块的测验。本次测验涉及到几个相关的练习，你必须按顺序完成，这样你才能设计出最终的成品：一张名片/游戏玩家卡片/社交媒体的简介。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">学习本章的前提条件:</th> + <td>在尝试这个测验之前，你应该已经完成了这个模块中所有文章的学习。</td> + </tr> + <tr> + <th scope="row">目标：</th> + <td>来测试对 CSS 理论、语法、功能性的基本理解。</td> + </tr> + </tbody> +</table> + +<h2 id="起点">起点</h2> + +<p>在开始测验之前，你应该:</p> + +<ul> + <li>将 <a href="https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/index.html">HTML file for the exercise</a>, 和 <a href="https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/chris.jpg">associated image file</a>,拷贝到你的本地环境中。如果你想使用自己的图片文件以及把你的名字写进资料里面的话，也没有问题，不过需要保证你提供的图像是正方形的。</li> + <li>下载 <a href="https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/style-resources.txt">CSS resources text file</a> 到你的本地环境，这个文件包含了一组原始选择器和规则集。你需要学习并将他们组合，这是测验的一部分。</li> +</ul> + +<div class="note"> +<p><strong>注意</strong>: 另外, 你可以使用一个网站比如 <a class="external external-icon" href="http://jsbin.com/">JSBin</a> 或 <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> 来做你的测验。你可以复制 HTML 和 CSS 到其中一个在线编辑器中，以及使用这个 <a href="http://mdn.github.io/learning-area/css/introduction-to-css/fundamental-css-comprehension/chris.jpg">this URL</a> 来让 <code><img></code> 显示图片。如果你使用的在线编辑器无法让你链接 CSS 文件 (没有单独的 CSS 面板)，你也可以将 CSS 直接放入<code><style></code> 元素中。</p> +</div> + +<h2 id="项目概要">项目概要</h2> + +<p>我们已经为你提供了一些原始的 HTML 和一张图片，然后需要编写必要的 CSS 来让其成为一个漂亮的网上小名片，可能大小是游戏玩家卡片或社交媒体简介的两倍。下面的段落描述了你需要做的事情。</p> + +<p>基本设置:</p> + +<ul> + <li>首先，在你放 HTML 文件和图像文件的目录下，创建一个新的文件，把它命名为类似<code>style.css</code>。</li> + <li>通过 <code><link></code> 元素来将你的 CSS 链接到 HTML 文件中。</li> + <li>我们为你提供的 CSS 资源文本文件中，前两项规则集是我们设置好的，你可以直接使用，所以将他们复制粘贴到你的新 CSS 文件的顶部。同时也可以将这个作为测验，用来确认你是否正确链接了你的 CSS 文件到 HTML 中。</li> + <li>在以上的两条规则中添加一条 CSS 注释，注释中要包含一些文本来表明这是整体页面的一般样式。你可以在 CSS 文件底部添加 3 个或以上的注释，来明确地表明该样式是应用到卡片的容器，应用到标题和页脚的样式，和名片主要内容的样式。从现在开始，随后在样式表添加的样式都应该有组织地放置在合适的地方。</li> +</ul> + +<p>关注我们为你提供的选择器和规则集：</p> + +<ul> + <li>接下来, 我们希望你观察四个选择器，并计算每一个的专用性。将它们写在稍后可以找到的地方，例如在 CSS 顶部的注释中。</li> + <li>现在是时候把正确的选择器放在正确的规则集上了！你的 CSS 资源中有四对选择器和规则集需要匹配，现在就开始匹配，并将它们添加到你的 CSS 文件。你需要： + <ul> + <li>为整体卡片的容器提供一个固定的宽/高，背景颜色，边框，以及边框圆角等等。</li> + <li>为header提供一个渐变的背景颜色，从更暗到更亮，加上圆角，配合在卡片容器上设置的圆角。</li> + <li>为footer提供一个渐变的背景颜色，从更亮到更暗，加上圆角，配合在卡片容器上设置的圆角。</li> + <li>将图像向右浮动，使其粘贴在名片主要内容的右边，然后把它的 max-height 设置为 100% (一个聪明的技巧，来确保它将放大/缩小，与父容器保持同样的高度，不管它变成什么高度。)</li> + </ul> + </li> + <li>注意！提供的规则集中有两个错误。使用你知道的任何技术找到这些错误并修复，然后再继续。</li> +</ul> + +<p>你需要写的新规则：</p> + +<ul> + <li>编写一个同时面向 card head 和 card footer 的规则集,使它们计算的总高度为 50px（包括 30px 的内容高度和 10px 的 padding ）但用 <code>em</code> 来表示。</li> + <li>浏览器会为<code><h2></code> 和 <code><p></code>元素应用默认的 margin，这会影响我们的设计，所以编写一个规则集： margin 设置为 0。</li> + <li>为了阻止图像溢出名片的主要内容 ( <code><article></code> 元素)，我们需要给它设置一个明确的高度。设置 <code><article></code>的高度为 120px，但是使用 <code>em</code>来表示。还要给它一个半透明黑色的背景颜色，产生一个稍暗一点的阴影，能让红色的背景稍微透过。</li> + <li>编写一个规则集，使 <code><h2></code> 有效的字体大小为 20px (使用 <code>em</code>表达) 以及一个适当的行高将其放置在标题的内容框的中央。回想起来，内容框高度应该是 30px，你所有需要的数字都已经给你了，所以可以计算出行高。</li> + <li>为页脚中的 <code><p></code> 编写一个规则集，使它的有效字体大小为 15px (使用 <code>em</code>表达) 以及一个适当的行高将其放置在页面的内容框的中央。回想起来，内容框高度应该是30px，你所有需要的数字都已经给你了，所以可以计算出行高。</li> + <li>最为最后一步, 为 <code><article></code> 中的段落设置一个合适的 padding 值，让它和 <code><h2></code> 以及页脚的段落左边缘对齐，并将其颜色设置得便于阅读。</li> +</ul> + +<div class="note"> +<p><strong>注意</strong>: 记住第二条规则集会将 <code>font-size: 10px;</code> 设置在 <code><html></code> 元素上 — 这意味着 <code><html></code> 的任何后代中，一个em将会等于10px而不是默认的 16px 。(这是当然的，如果在层次结构中，有不同的 <code>font-size</code> 设置于其上，问题中的后代没有任何的祖先位于 em元素和 <code><html></code> 之间。这可能会影响您所需要的值，尽管在这个简单的示例中，这不是问题。)</p> +</div> + +<p>其他事情要考虑：</p> + +<ul> + <li>如果你编写的 CSS 有比较好的可读性，并在每行上单独声明，你将得到奖励。</li> + <li>你应该在所有规则的选择器中都用 <code>.card</code> 作为开头，这样的好处是：如果将名片放在带有其他内容的页面的情况下，这些规则不会干扰其他元素的样式。</li> +</ul> + +<h2 id="注意和提示">注意和提示</h2> + +<ul> + <li>你不需要以任何方式编辑 HTML，除了将 CSS 应用于你的 HTML 。</li> + <li>当使用 <code>em</code> 值代表一些你需要的像素长度的时候，想想 (<code><html></code>) 元素的基本字体大小，以及需要乘以什么才能获得所需的值。这将给你 em 的值，至少在这样一个简单的情况下。</li> +</ul> + +<h2 id="示例">示例</h2> + +<p>完成的设计应如下图所示：</p> + +<p><img alt="A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image." src="https://mdn.mozillademos.org/files/12616/business-card.png" style="display: block; margin: 0 auto;"></p> + +<h2 id="评估">评估</h2> + +<p>如果您将此评估作为有组织的课程的一部分，您应该能够将您的工作交给您的老师/导师进行打分。 如果您是自学的，那么您可以通过询问 <a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">Learning Area Discourse thread</a>, 或在 <a href="irc://irc.mozilla.org/mdn">#mdn</a>的IRC频道 <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a> 中轻松获得打分指南. 首先尝试练习 - 作弊学不到什么！</p> + +<p>{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}</p> + +<h2 id="在本单元中">在本单元中</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works">How CSS works</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Syntax">CSS syntax</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors">Selectors</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors/Simple_selectors">Simple selectors</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors/Attribute_selectors">Attribute selectors</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors/Combinators_and_multiple_selectors">Combinators and multiple selectors</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">CSS values and units</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance">Cascade and inheritance</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model">The box model</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS">Debugging CSS</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension">Fundamental CSS comprehension</a></li> +</ul> diff --git a/files/zh-cn/learn/css/styling_boxes/a_cool_looking_box/index.html b/files/zh-cn/learn/css/styling_boxes/a_cool_looking_box/index.html new file mode 100644 index 0000000000..6ddd1d114b --- /dev/null +++ b/files/zh-cn/learn/css/styling_boxes/a_cool_looking_box/index.html @@ -0,0 +1,88 @@ +--- +title: 一个漂亮的盒子 +slug: Learn/CSS/Styling_boxes/A_cool_looking_box +translation_of: Learn/CSS/Building_blocks/A_cool_looking_box +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}</div> + +<p class="summary">在这个评估里，通过尝试创造一个引人瞩目的盒子，你将得到更多关于如何创造酷炫盒子的练习。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件：</th> + <td>在开始这个评估之前你应该已经学习过这个模块里的所有其他文章。</td> + </tr> + <tr> + <th scope="row">目的：</th> + <td>测试对CSS盒模型和其他盒相关特性的掌握程度，比如背景和边框。</td> + </tr> + </tbody> +</table> + +<h2 id="起点">起点</h2> + +<p>在开始评估之前，你需要：</p> + +<ul> + <li>复制一份<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/cool-information-box-start/index.html">HTML</a>和<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/cool-information-box-start/style.css">CSS</a>代码，并在一个新的目录下把它们保存为<code>index.html</code> 和 <code>style.css</code>。</li> +</ul> + +<div class="note"> +<p><strong>提醒</strong>：或者你也可以用<a href="http://jsbin.com/" rel="noopener">JSBin</a>或<a href="https://thimble.mozilla.org/" rel="noopener">Thimble</a>这样的网站来做这个评估，把链接里的HTML和CSS代码贴到这些在线编辑器里就行。如果你在用的在线编辑器没有独立的CSS面板的话，把CSS代码放到HTML文档头部的<code><style></code>元素里就好。</p> +</div> + +<h2 id="项目简介">项目简介</h2> + +<p>你的任务是创建一个酷炫的盒子，并探索CSS的乐趣。</p> + +<h3 id="一般任务">一般任务</h3> + +<ul> + <li>把CSS链接到HTML里。</li> +</ul> + +<h3 id="样式化盒子">样式化盒子</h3> + +<p>给{{htmlelement("p")}}添加样式：</p> + +<ul> + <li>一个对于大按钮来说合理的宽度，200像素左右。</li> + <li>一个对于大按钮来说合理的高度，并使文本纵向居中。</li> + <li>居中文本。</li> + <li>用<code>rem</code>使字体稍大一点，大约17-18像素，在注释里说说你的值是怎么算出来的。</li> + <li>给你的设计定一个基础颜色，把它作为盒子的背景颜色。</li> + <li>把字体颜色设为同一个颜色，使用黑色的文字阴影增加可读性。</li> + <li>一个精巧的圆角边框。</li> + <li>一个跟基础颜色相近、1像素宽的实线边框，颜色要稍深一点。</li> + <li>一个指向右下角的黑色半透明线性渐变，让它在开始的时候完全透明，在30%的处渐变到0.2的不透明度，然后保持相同颜色到最后。</li> + <li>多个盒阴影：一个标准的盒阴影，使它看起来稍微从页面上浮起来；另外两个是内嵌（inset）的盒阴影，一个是左上角附近的白色半透明阴影和另一个是右下角附近的黑色半透明阴影，让盒子有一个漂亮的3D外观。</li> +</ul> + +<h2 id="范例">范例</h2> + +<p>完成之后的盒子可能会像下面的截图这样：</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13148/fancy-box.png" style="display: block; height: 76px; margin: 0px auto; width: 228px;"></p> + +<h2 id="评估">评估</h2> + +<p>如果这个评估是一系列课程的一部分，你应该可以让你的老师或导师为你批改。 如果你是自学，可以很容易地在<a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294" rel="noopener">Learning Area Discourse thread</a>或<a href="https://wiki.mozilla.org/IRC" rel="noopener">Mozilla IRC</a>的<a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC频道回复得到批改指南。请先自己试着做——作弊学不到任何东西！</p> + +<p>{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}</p> + +<h2 id="在这个模块里">在这个模块里</h2> + +<ul> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Styling_boxes/Box_model_recap">盒模型概要</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Styling_boxes/Backgrounds" rel="nofollow">背景</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Styling_boxes/Borders">边框</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Styling_boxes/Styling_tables">样式化表格</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Styling_boxes/Advanced_box_effects">高级盒效果</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper" rel="nofollow">创建精美的信纸</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Styling_boxes/A_cool_looking_box" rel="nofollow">一个漂亮的盒子</a></li> +</ul> + +<p> </p> diff --git a/files/zh-cn/learn/css/styling_boxes/creating_fancy_letterheaded_paper/index.html b/files/zh-cn/learn/css/styling_boxes/creating_fancy_letterheaded_paper/index.html new file mode 100644 index 0000000000..692071dfde --- /dev/null +++ b/files/zh-cn/learn/css/styling_boxes/creating_fancy_letterheaded_paper/index.html @@ -0,0 +1,101 @@ +--- +title: 创建精美的信纸 +slug: Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper +translation_of: Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Learn/CSS/Styling_boxes")}}</div> + +<p class="summary">如果你想给人留下好印象，把信写在一张精美的信纸上会是个不错的开始，在这个评估里我们希望你能创建一个在线模版来达到这样的效果。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件：</th> + <td>在开始这个评估之前你应该已经学习过这个模块里的所有其他文章。</td> + </tr> + <tr> + <th scope="row">目的：</th> + <td>测试对CSS盒模型和其他盒相关特性的掌握程度，比如实现背景等。</td> + </tr> + </tbody> +</table> + +<h2 id="起点">起点</h2> + +<p>在开始评估之前，你需要：</p> + +<ul> + <li>复制一份<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/letterheaded-paper-start/index.html">HTML</a>和<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/letterheaded-paper-start/style.css">CSS</a>代码，并在一个新的目录下把它们保存为<code>index.html</code> 和 <code>style.css</code>。</li> + <li>在同一个目录下下载这几张图片：<a href="https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/top-image.png">顶部</a>、<a href="https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/bottom-image.png">底部</a>和<a href="https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/logo.png">标志</a>。</li> +</ul> + +<div class="note"> +<p><strong>提醒</strong>：或者你也可以用<a href="http://jsbin.com/">JSBin</a>或<a href="https://thimble.mozilla.org/">Thimble</a>这样的网站来做这个评估，把链接里的HTML和CSS代码贴到这些在线编辑器里就行。如果你在用的在线编辑器没有独立的CSS面板的话，把CSS代码放到HTML文档头部的<code><style></code>元素里就好。</p> +</div> + +<h2 id="项目简介">项目简介</h2> + +<p>你已经有了创建一个信纸模版所需的所有文件，只需把它们放到一起就好。为了达到目标，你需要：</p> + +<h3 id="信纸主体">信纸主体</h3> + +<ul> + <li>把CSS链接到HTML文档里。</li> + <li>给信纸添加这样一个背景： + <ul> + <li>把之前下载的顶部图片固定到信纸顶部。</li> + <li>把之前下载的底部图片固定到信纸底部。</li> + <li>为了给信纸一点纹理，在前面背景的基础上添加一个半透明的渐变，使其在顶部和底部附近稍微变暗，但中间的大部分完全透明。</li> + </ul> + </li> + <li>多添加一个<code>background</code>声明，仅添加顶部图片到信纸顶部，以此作为不支持之前那种声明方式的浏览器的后备方案。</li> + <li>给信纸添加一个白色的背景颜色。</li> + <li>给信纸添加一个1mm的上下实线边框，选一个符合信纸的颜色主题的边框颜色。</li> +</ul> + +<h3 id="标志">标志</h3> + +<ul> + <li>把之前下载的标志图片添加为{{htmlelement("h1")}}的背景图片。</li> + <li>给标志添加一个过滤器，使它有一个隐隐约约的阴影。</li> + <li>现在把添加的过滤器注释掉，尝试用其他（更跨浏览器兼容）的方式实现一个相同的阴影，阴影需要同样符合圆形图片的形状。</li> +</ul> + +<h2 id="提示和技巧">提示和技巧</h2> + +<ul> + <li>记住，你可以这样为较旧的浏览器创建一个后备方案：先写一个较旧的浏览器支持的后备声明，然后再接着写只有较新的浏览器才支持的声明。这样比较旧的浏览器会应用第一个声明而忽略掉第二个不支持的声明，与此同时比较新的浏览器会先应用第一个声明，然后用第二个声明把它覆盖掉。</li> + <li>如果想的话你可以随意地用自己的图片来做这个评估。</li> +</ul> + +<h2 id="范例">范例</h2> + +<p>完成之后的信纸可能会像下面的截图这样：</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13144/letterhead.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<p> </p> + +<h2 id="评估">评估</h2> + +<p>如果这个评估是一系列课程的一部分，你应该可以让你的老师或导师为你批改。 如果你是自学，可以很容易地在 <a href="https://discourse.mozilla.org/t/creating-fancy-letterheaded-paper-assessment/24684/1">discussion thread for this exercise</a> 或<a href="https://wiki.mozilla.org/IRC" rel="noopener">Mozilla IRC</a>的<a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC频道回复得到批改指南。请先自己试着做——作弊学不到任何东西！</p> + +<p>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Learn/CSS/Styling_boxes")}}</p> + +<p> </p> + +<h2 id="在这个模块里">在这个模块里</h2> + +<ul> + <li><a href="/zh-CN/docs/Learn/CSS/Styling_boxes/Box_model_recap">盒模型概要</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Styling_boxes/Backgrounds">背景</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Styling_boxes/Borders">边框</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Styling_boxes/Styling_tables">样式化表格</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Styling_boxes/Advanced_box_effects">高级盒效果</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">创建精美的信纸</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Styling_boxes/A_cool_looking_box">一个漂亮的盒子</a></li> +</ul> + +<p> </p> diff --git a/files/zh-cn/learn/css/为文本添加样式/fundamentals/index.html b/files/zh-cn/learn/css/为文本添加样式/fundamentals/index.html new file mode 100644 index 0000000000..45660a9532 --- /dev/null +++ b/files/zh-cn/learn/css/为文本添加样式/fundamentals/index.html @@ -0,0 +1,727 @@ +--- +title: 基本文本和字体样式 +slug: Learn/CSS/为文本添加样式/Fundamentals +tags: + - 初学者 + - 对齐 + - 文本 + - 样式 + - 间距 +translation_of: Learn/CSS/Styling_text/Fundamentals +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}</div> + +<p class="summary"><span class="seoSummary">在这篇文章中，我们将带你开始掌握 {{glossary("CSS")}} 的文字样式的旅程。</span>这里我们将详细介绍文本/字体样式的所有基本原理，包括设置文字的粗细，字体和样式，文字的属性简写，文字的对齐，和其他效果，以及行和字母间距。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">先决条件：</th> + <td>基本的电脑操作，HTML 基础 (学习 <a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>)，CSS 基础 (学习 <a href="/zh-CN/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>).</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>了解在网页上设计文本所需的基本属性和技术。</td> + </tr> + </tbody> +</table> + +<h2 id="CSS中的文字样式涉及什么？">CSS中的文字样式涉及什么？</h2> + +<p>正如你已经在你使用 HTML 和 CSS 完成工作时所经历的一样，元素中的文本是布置在元素的内容框中。以内容区域的左上角作为起点 (或者是右上角，是在 RTL 语言的情况下)，一直延续到行的结束部分。一旦达到行的尽头，它就会进到下一行，然后继续，再接着下一行，直到所有内容都放入了盒子中。文本内容表现地像一些内联元素，被布置到相邻的行上，除非到达了行的尽头，否则不会换行，或者你想强制地，手动地造成换行的话，你可以使用 {{htmlelement("br")}} 元素。</p> + +<div class="note"> +<p><strong>注意</strong>: 如果上面的段落让你感到困惑，没关系，在继续之前，可以重新看看我们的 <a href="/zh-CN/docs/Learn/CSS/Introduction_to_CSS/Box_model">Box model</a> 文件，复习框模型的理论。</p> +</div> + +<p>用于样式文本的 CSS 属性通常可以分为两类，我们将在本文中分别观察。</p> + +<ul> + <li><strong>字体样式</strong>: 作用于字体的属性，会直接应用到文本中，比如使用哪种字体，字体的大小是怎样的，字体是粗体还是斜体，等等。</li> + <li><strong>文本布局风格</strong>: 作用于文本的间距以及其他布局功能的属性，比如，允许操纵行与字之间的空间，以及在内容框中，文本如何对齐。</li> +</ul> + +<div class="note"> +<p><strong>注意</strong>: 请记住，包含在元素中的文本是作为一个单一的实体。你不能将文字其中一部分选中或添加样式，如果你要这么做，那么你必须要用适合的元素来包装它们，比如 ( {{htmlelement("span")}} 或者 {{htmlelement("strong")}}), 或者使用伪元素，像<a href="/zh-CN/docs/Web/CSS/::first-letter">::first-letter</a> (选中元素文本的第一个字母), <a href="/zh-CN/docs/Web/CSS/::first-line">::first-line</a> (选中元素文本的第一行), 或者 <a href="/zh-CN/docs/Web/CSS/::selection">::selection</a> (当前光标双击选中的文本)</p> +</div> + +<h2 id="字体">字体</h2> + +<p>我们直接来看看样式字体的属性。在这个例子中，我们会在一个相同的 HTML 示例中应用一些不同的 CSS 属性，就像这样：</p> + +<pre class="brush: html"><h1>Tommy the cat</h1> + +<p>I remember as if it were a meal ago...</p> + +<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter + may have nestled its way into his mighty throat. Many a fat alley rat +had met its demise while staring point blank down the cavernous barrel of + this awesome prowling machine. Truly a wonder of nature this urban +predator — Tommy the cat had many a story to tell. But it was a rare +occasion such as this that he did.</p></pre> + +<p>你可以在这找到完成版本 <a href="http://mdn.github.io/learning-area/css/styling-text/fundamentals/">finished example on Github</a> (也可以看源码 <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/fundamentals/index.html">the source code</a>.)</p> + +<h3 id="颜色">颜色</h3> + +<p>{{cssxref("color")}} 属性设置选中元素的前景内容的颜色 (通常指文本，不过也包含一些其他东西，或者是使用 {{cssxref("text-decoration")}} 属性放置在文本下方或上方的线 (underline overline)。</p> + +<p><code>color</code> 也可以接受任何合法的 <a href="/zh-CN/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors">CSS 颜色单位</a>, 比如:</p> + +<pre class="brush: css">p { + color: red; +}</pre> + +<p>这将导致段落变为红色，而不是标准的浏览器默认的黑色，如下所示：</p> + +<div class="hidden"> +<pre class="brush: html"><h1>Tommy the cat</h1> + +<p>I remember as if it were a meal ago...</p> + +<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter + may have nestled its way into his mighty throat. Many a fat alley rat +had met its demise while staring point blank down the cavernous barrel of + this awesome prowling machine. Truly a wonder of nature this urban +predator — Tommy the cat had many a story to tell. But it was a rare +occasion such as this that he did.</p></pre> +</div> + +<p>{{ EmbedLiveSample('颜色', '100%', 220) }}</p> + +<h3 id="字体种类">字体种类</h3> + +<p>要在你的文本上设置一个不同的字体，你可以使用 {{cssxref("font-family")}} 属性，这个允许你为浏览器指定一个字体 (或者一个字体的列表)，然后浏览器可以将这种字体应用到选中的元素上。浏览器只会把在当前机器上可用的字体应用到当前正在访问的网站上；如果字体不可用，那么就会用浏览器默认的字体代替 {{anch("Default fonts", "default font")}}. 下面是一个简单的例子:</p> + +<pre class="brush: css">p { + font-family: arial; +}</pre> + +<p>这段语句使所有在页面上的段落都采用 arial 字体，这个字体可在任何电脑上找到。</p> + +<h4 id="网页安全字体">网页安全字体</h4> + +<p>说到字体可用性，只有某几个字体通常可以应用到所有系统，因此可以毫无顾忌地使用。这些都是所谓的 <strong>网页安全字体</strong>。</p> + +<p>大多数时候，作为网页开发者，我们希望对用于显示我们的文本内容的字体有更具体的控制。问题在于，需要一个方法来知道当前正在浏览我们的网站网页的电脑，它有哪些可用字体。我们并不是总能在每种情况下都知道这一点，但是网络安全字体在几乎所有最常用的操作系统（Windows，Mac，最常见的Linux发行版，Android和iOS版本）中都可用。</p> + +<p>实际的Web安全字体列表将随着操作系统的发展而改变，但是可以认为下面的字体是网页安全的，至少对于现在来说 (它们中的许多都非常流行，这要感谢微软在90年代末和21世纪初期的倡议<em><a href="https://en.wikipedia.org/wiki/Core_fonts_for_the_Web">Core fonts for the Web</a></em> )：</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">字体名称</th> + <th scope="col" style="white-space: nowrap;">泛型</th> + <th scope="col">注意</th> + </tr> + </thead> + <tbody> + <tr> + <td>Arial</td> + <td>sans-serif</td> + <td>通常认为最佳做法还是添加 Helvetica 作为 Arial 的首选替代品，尽管它们的字体面几乎相同，但 Helvetica 被认为具有更好的形状，即使Arial更广泛地可用。</td> + </tr> + <tr> + <td>Courier New</td> + <td>monospace</td> + <td>某些操作系统有一个 Courier New 字体的替代（可能较旧的）版本叫Courier。使用Courier New作为Courier的首选替代方案，被认为是最佳做法。</td> + </tr> + <tr> + <td style="white-space: nowrap;">Georgia</td> + <td>serif</td> + <td></td> + </tr> + <tr> + <td style="white-space: nowrap;">Times New Roman</td> + <td>serif</td> + <td>某些操作系统有一个 Times New Roman 字体的替代（可能较旧的）版本叫 Times。使用Times作为Times New Roman的首选替代方案，被认为是最佳做法。</td> + </tr> + <tr> + <td>Trebuchet MS</td> + <td>sans-serif</td> + <td>您应该小心使用这种字体——它在移动操作系统上并不广泛。</td> + </tr> + <tr> + <td>Verdana</td> + <td>sans-serif</td> + <td></td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>注意</strong>: 在各种资源中，<a href="http://www.cssfontstack.com/">cssfontstack.com</a> 网站维护了一个可用在 Windows 和 Mac 操作系统上使用的网页安全字体的列表，这可以帮助决策网站的安全性。</p> +</div> + +<div class="note"> +<p><strong>注意</strong>: 有一个可以下载来自一个网页的自定义字体的方法，允许你通过任何你想要的方法来定制你使用的字体：<strong>网页字体</strong>。这个有一点复杂，我们将在这个模块中的另一篇文章中讨论这一点。</p> +</div> + +<h4 id="默认字体">默认字体</h4> + +<p>CSS 定义了 5 个常用的字体名称: <code>serif<font face="Open Sans, Arial, sans-serif">, </font></code><code>sans-serif,<font face="Open Sans, Arial, sans-serif"> </font></code><code>monospace</code>, <code>cursive,</code>和 <code>fantasy. </code>这些都是非常通用的，当使用这些通用名称时，使用的字体完全取决于每个浏览器，而且它们所运行的每个操作系统也会有所不同。这是一种糟糕的情况，浏览器会尽力提供一个看上去合适的字体。 <code>serif</code>, <code>sans-serif</code> 和 <code>monospace</code> 是比较好预测的，默认的情况应该比较合理，另一方面，<code>cursive</code> 和 <code>fantasy</code> 是不太好预测的，我们建议使用它们的时候应该稍微注意一些，多多测试。</p> + +<p>五个名称定义如下：</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">名称</th> + <th scope="col">定义</th> + <th scope="col">示例</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>serif</code></td> + <td>有衬线的字体 （衬线一词是指字体笔画尾端的小装饰，存在于某些印刷体字体中）</td> + <td><span style="font-family: serif;">My big red elephant</span></td> + </tr> + <tr> + <td><code>sans-serif</code></td> + <td>没有衬线的字体。</td> + <td><span style="font-family: sans-serif;">My big red elephant</span></td> + </tr> + <tr> + <td><code>monospace</code></td> + <td>每个字符具有相同宽度的字体，通常用于代码列表。</td> + <td><span style="font-family: monospace;">My big red elephant</span></td> + </tr> + <tr> + <td><code>cursive</code></td> + <td>用于模拟笔迹的字体，具有流动的连接笔画。</td> + <td><span style="font-family: cursive;">My big red elephant</span></td> + </tr> + <tr> + <td><code>fantasy</code></td> + <td>用来装饰的字体</td> + <td><span style="font-family: fantasy;">My big red elephant</span></td> + </tr> + </tbody> +</table> + +<h4 id="字体栈">字体栈</h4> + +<p>由于你无法保证你想在你的网页上使用的字体的可用性 (甚至一个网络字体可能由于某些原因而出错), 你可以提供一个<strong>字体栈</strong> (<strong>font stack</strong>)，这样的话，浏览器就有多种字体可以选择了。只需包含一个<code>font-family属性</code>，其值由几个用逗号分离的字体名称组成。比如</p> + +<pre class="brush: css">p { + font-family: "Trebuchet MS", Verdana, sans-serif; +}</pre> + +<p>在这种情况下，浏览器从列表的第一个开始，然后查看在当前机器中，这个字体是否可用。如果可用，就把这个字体应用到选中的元素中。如果不可用，它就移到列表中的下一个字体，然后再检查。</p> + +<p>在字体栈的最后提供一个合适的通用的字体名称是个不错的办法，这样的话，即使列出的字体都无法使用，浏览器至少可以提供一个还算合适的选择。为了强调这一点，如果没有其他选项可用，那么段落将被赋予浏览器的默认衬线字体 - 通常是Time New Roman - 这对于 sans-serif 字体是不利的！</p> + +<div class="note"> +<p><strong>注意</strong>: 有一些字体名称不止一个单词，比如<code>Trebuchet MS</code> ，那么就需要用引号包裹。</p> +</div> + +<h4 id="一个使用_font-family_的例子">一个使用 font-family 的例子</h4> + +<p>让我们把它添加到之前的例子上，给段落一个 sans-serif 的字体。</p> + +<pre class="brush: css">p { + color: red; + font-family: Helvetica, Arial, sans-serif; +}</pre> + +<p>这给我们以下结果：</p> + +<div class="hidden"> +<pre class="brush: html"><h1>Tommy the cat</h1> + +<p>I remember as if it were a meal ago...</p> + +<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter + may have nestled its way into his mighty throat. Many a fat alley rat +had met its demise while staring point blank down the cavernous barrel of + this awesome prowling machine. Truly a wonder of nature this urban +predator — Tommy the cat had many a story to tell. But it was a rare +occasion such as this that he did.</p></pre> +</div> + +<p>{{ EmbedLiveSample('一个使用_font-family_的例子', '100%', 220) }}</p> + +<h3 id="字体大小">字体大小</h3> + +<p>在我们之前的模块中的<a href="/zh-CN/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">CSS values and units</a> 文章，我们回顾了<a href="/zh-CN/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">length and size units</a>. 字体大小 (通过 {{cssxref("font-size")}} 属性设置) 可以取大多数这些单位的值 (以及其他，比如百分比 <a href="/zh-CN/Learn/CSS/Introduction_to_CSS/Values_and_units#Percentages">percentages</a>)，然而你在调整字体大小时，最常用的单位是：</p> + +<ul> + <li><code>px</code> (像素): 将像素的值赋予给你的文本。这是一个绝对单位， 它导致了在任何情况下，页面上的文本所计算出来的像素值都是一样的。</li> + <li><code>em</code>: 1em 等于我们设计的当前元素的父元素上设置的字体大小 (更加具体的话，比如包含在父元素中的大写字母 M 的宽度) 如果你有大量设置了不同字体大小的嵌套元素，这可能会变得棘手, 但它是可行的，如下图所示。为什么要使用这个麻烦的单位呢? 当你习惯这样做时，那么就会变得很自然，你可以使用<code>em</code>调整任何东西的大小，不只是文本。你可以有一个单位全部都使用 em 的网站，这样维护起来会很简单。</li> + <li><code>rem</code>: 这个单位的效果和 <code>em</code> 差不多，除了 1<code>rem</code> 等于 HTML 中的根元素的字体大小， (i.e. {{htmlelement("html")}}) ，而不是父元素。这可以让你更容易计算字体大小，但是遗憾的是， <code>rem</code> 不支持 Internet Explorer 8 和以下的版本。如果你的项目需要支持较老的浏览器，你可以坚持使用<code>em</code> 或 <code>px</code>, 或者是 {{glossary("polyfill")}} 就像 <a href="https://github.com/chuckcarpenter/REM-unit-polyfill">REM-unit-polyfill</a>. （这个单位在“CSS的值和单位”一节也有讲解）</li> +</ul> + +<p>元素的 <code>font-size</code> 属性是从该元素的父元素继承的。所以这一切都是从整个文档的根元素——{{htmlelement("html")}}开始，浏览器的 <code>font-size</code> 标准设置的值为 16px。在根元素中的任何段落 (或者那些浏览器没有设置默认大小的元素)，会有一个最终的大小值：16px。其他元素也许有默认的大小，比如 {{htmlelement("h1")}} 元素有一个 2em 的默认值，所以它的最终大小值为 32px。当你开始更改嵌套元素的字体大小时，事情会变得棘手。比如，如果你有一个 {{htmlelement("article")}} 元素在你的页面上，然后设置它的 font-size 为 <code>1.5em</code> (通过计算，可以得到大小为 24px)，然后想让 <code><article></code> 元素中的段落获得一个计算值为 20px 的大小，那么你应该使用多少 em。</p> + +<pre class="brush: html"><!-- document base font-size is 16px --> +<article> <!-- If my font-size is 1.5em --> + <p>My paragraph</p> <!-- How do I compute to 20px font-size? --> +</article></pre> + +<p>你需要将 em 的值设置为 20/24, 或者 <code>0.83333333em</code>. 这个计算可能比较复杂，所以当你设置的时候，你需要仔细一些。如果可以使用 rem 的话，那实现起来就变得简单不少，避免在可能的情况下设置容器元素的字体大小。</p> + +<h4 id="一个简单的_size_示例">一个简单的 size 示例</h4> + +<p>当调整你的文本大小时，将文档(document)的基础 <code>font-size</code> 设置为10px往往是个不错的主意，这样之后的计算会变得简单，所需要的 (r)em 值就是想得到的像素的值除以 10，而不是 16。做完这个之后，你可以简单地调整在你的 HTML 中你想调整的不同类型文本的字体大小。在样式表的指定区域列出所有<code>font-size</code>的规则集是一个好主意，这样它们就可以很容易被找到。</p> + +<p>我们的新结果是这样的:</p> + +<div class="hidden"> +<pre class="brush: html"><h1>Tommy the cat</h1> + +<p>I remember as if it were a meal ago...</p> + +<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter + may have nestled its way into his mighty throat. Many a fat alley rat +had met its demise while staring point blank down the cavernous barrel of + this awesome prowling machine. Truly a wonder of nature this urban +predator — Tommy the cat had many a story to tell. But it was a rare +occasion such as this that he did.</p> +</pre> +</div> + +<pre class="brush: css">html { + font-size: 10px; +} + +h1 { + font-size: 2.6rem; +} + +p { + font-size: 1.4rem; + color: red; + font-family: Helvetica, Arial, sans-serif; +}</pre> + +<p>{{ EmbedLiveSample('字体大小', '100%', 220) }}</p> + +<h3 id="字体样式，字体粗细，文本转换和文本装饰">字体样式，字体粗细，文本转换和文本装饰</h3> + +<p>CSS 提供了 4 种常用的属性来改变文本的样子：</p> + +<ul> + <li>{{cssxref("font-style")}}: 用来打开和关闭文本 italic (斜体)。 可能的值如下 (你很少会用到这个属性，除非你因为一些理由想将斜体文字关闭斜体状态)： + <ul> + <li><code>normal</code>: 将文本设置为普通字体 (将存在的斜体关闭)</li> + <li><code>italic</code>: 如果当前字体的斜体版本可用，那么文本设置为斜体版本；如果不可用，那么会利用 oblique 状态来模拟 italics。</li> + <li><code>oblique</code>: 将文本设置为斜体字体的模拟版本，也就是将普通文本倾斜的样式应用到文本中。</li> + </ul> + </li> + <li>{{cssxref("font-weight")}}: 设置文字的粗体大小。这里有很多值可选 (比如 <em>-light</em>, <em>-normal</em>, <em>-bold</em>, <em>-extrabold</em>, <em>-black</em>, 等等), 不过事实上你很少会用到 <code>normal</code> 和 <code>bold</code>以外的值： + <ul> + <li><code>normal</code>, <code>bold</code>: 普通或者<strong style="font-weight: bold;">加粗</strong>的字体粗细</li> + <li><code>lighter</code>, <code>bolder</code>: 将当前元素的粗体设置为比其父元素粗体更细或更粗一步。<code>100</code>–<code>900</code>: 数值粗体值，如果需要，可提供比上述关键字更精细的粒度控制。</li> + </ul> + </li> + <li>{{cssxref("text-transform")}}: 允许你设置要转换的字体。值包括： + <ul> + <li><code>none</code>: 防止任何转型。</li> + <li><code>uppercase</code>: 将所有文本转为大写。</li> + <li><code>lowercase</code>: 将所有文本转为小写。</li> + <li><code>capitalize</code>: 转换所有单词让其首字母大写。</li> + <li><code>full-width</code>: 将所有字形转换成全角，即固定宽度的正方形，类似于等宽字体，允许拉丁字符和亚洲语言字形（如中文，日文，韩文）对齐。</li> + </ul> + </li> + <li>{{cssxref("text-decoration")}}: 设置/取消字体上的文本装饰 (你将主要使用此方法在设置链接时取消设置链接上的默认下划线。) 可用值为： + <ul> + <li><code>none</code>: 取消已经存在的任何文本装饰。</li> + <li><code>underline</code>: <u>文本下划线</u>.</li> + <li><code>overline</code>: <span style="text-decoration: overline;">文本上划线</span></li> + <li><code>line-through</code>: 穿过文本的线 <s style="text-decoration: line-through;">strikethrough over the text</s>.</li> + </ul> + 你应该注意到 {{cssxref("text-decoration")}} 可以一次接受多个值，如果你想要同时添加多个装饰值， 比如 <span style="text-decoration: underline overline;"><code>text-decoration: underline overline</code></span>.。同时注意 {{cssxref("text-decoration")}} 是一个缩写形式，它由 {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}} 和 {{cssxref("text-decoration-color")}} 构成。你可以使用这些属性值的组合来创建有趣的效果，比如 <span style="text-decoration: line-through red wavy;"><code>text-decoration: line-through red wavy</code>.</span></li> +</ul> + +<p>我们来看一下这几个属性添加到我们的例子中：</p> + +<p>我们的新结果是这样的：</p> + +<div class="hidden"> +<pre class="brush: html"><h1>Tommy the cat</h1> + +<p>I remember as if it were a meal ago...</p> + +<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter + may have nestled its way into his mighty throat. Many a fat alley rat +had met its demise while staring point blank down the cavernous barrel of + this awesome prowling machine. Truly a wonder of nature this urban +predator — Tommy the cat had many a story to tell. But it was a rare +occasion such as this that he did.</p> +</pre> +</div> + +<pre class="brush: css">html { + font-size: 10px; +} + +h1 { + font-size: 2.6rem; + text-transform: capitalize; +} + +h1 + p { + font-weight: bold; +} + +p { + font-size: 1.4rem; + color: red; + font-family: Helvetica, Arial, sans-serif; +}</pre> + +<p>{{ EmbedLiveSample('字体样式，字体粗细，文本转换和文本装饰', '100%', 220) }}</p> + +<h3 id="文字阴影">文字阴影</h3> + +<p>你可以为你的文本应用阴影，使用 {{cssxref("text-shadow")}} 属性。这最多需要 4 个值，如下例所示：</p> + +<pre class="brush: css">text-shadow: 4px 4px 5px red;</pre> + +<p>4 个属性如下:</p> + +<ol> + <li>阴影与原始文本的水平偏移，可以使用大多数的 CSS 单位 <a href="/zh-CN/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">length and size units</a>, 但是 px 是比较合适的。这个值必须指定。</li> + <li>阴影与原始文本的垂直偏移;效果基本上就像水平偏移，除了它向上/向下移动阴影，而不是左/右。这个值必须指定。</li> + <li>模糊半径 - 更高的值意味着阴影分散得更广泛。如果不包含此值，则默认为0，这意味着没有模糊。可以使用大多数的 CSS 单位 <a href="/zh-CN/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">length and size units</a>.</li> + <li>阴影的基础颜色，可以使用大多数的 CSS 颜色单位 <a href="/zh-CN/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors">CSS color unit</a>. 如果没有指定，默认为 <code>black</code>.</li> +</ol> + +<div class="note"> +<p><strong>注意</strong>: 正偏移值可以向右移动阴影，但也可以使用负偏移值来左右移动阴影，例如 <code>-1px -1px</code>.</p> +</div> + +<h4 id="多种阴影">多种阴影</h4> + +<p>您可以通过包含以逗号分隔的多个阴影值，将多个阴影应用于同一文本，例如：</p> + +<pre class="brush: css"><code class="language-css"><span class="property token">text-shadow</span><span class="punctuation token">:</span> -<span class="number token">1</span>px -<span class="number token">1</span>px <span class="number token">1</span>px <span class="hexcode token">#aaa</span>, + <span class="number token">0</span>px <span class="number token">4</span>px <span class="number token">1</span>px <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0.5</span><span class="punctuation token">)</span>, + <span class="number token">4</span>px <span class="number token">4</span>px <span class="number token">5</span>px <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0.7</span><span class="punctuation token">)</span>, + <span class="number token">0</span>px <span class="number token">0</span>px <span class="number token">7</span>px <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0.4</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>如果我们把这个样式应用到我们 "Tommy the cat" 示例中的 {{htmlelement("h1")}} 元素，就像这样：</p> + +<div class="hidden"> +<pre class="brush: html"><h1>Tommy the cat</h1> + +<p>I remember as if it were a meal ago...</p> + +<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter + may have nestled its way into his mighty throat. Many a fat alley rat +had met its demise while staring point blank down the cavernous barrel of + this awesome prowling machine. Truly a wonder of nature this urban +predator — Tommy the cat had many a story to tell. But it was a rare +occasion such as this that he did.</p> +</pre> + +<pre class="brush: css">html { + font-size: 10px; +} + +h1 { + font-size: 26px; + text-transform: capitalize; + text-shadow: -1px -1px 1px #aaa, + 0px 2px 1px rgba(0,0,0,0.5), + 2px 2px 2px rgba(0,0,0,0.7), + 0px 0px 3px rgba(0,0,0,0.4); +} + +h1 + p { + font-weight: bold; +} + +p { + font-size: 14px; + color: red; + font-family: Helvetica, Arial, sans-serif; +}</pre> +</div> + +<p>{{ EmbedLiveSample('多种阴影', '100%', 220) }}</p> + +<div class="note"> +<p><strong>注意</strong>: 你可以看到更多有趣的关于 <code>text-shadow</code> 使用的示例在 <a href="http://www.sitepoint.com/moonlighting-css-text-shadow/">Moonlighting with CSS text-shadow</a>.</p> +</div> + +<h2 id="文本布局">文本布局</h2> + +<p>有了基本的字体属性，我们来看看我们可以用来影响文本布局的属性。</p> + +<h3 id="文本对齐">文本对齐</h3> + +<p> {{cssxref("text-align")}} 属性用来控制文本如何和它所在的内容盒子对齐。可用值如下，并且在与常规文字处理器应用程序中的工作方式几乎相同：</p> + +<ul> + <li><code>left</code>: 左对齐文本。</li> + <li><code>right</code>: 右对齐文本。</li> + <li><code>center</code>: 居中文字</li> + <li><code>justify</code>: 使文本展开，改变单词之间的差距，使所有文本行的宽度相同。你需要仔细使用，它可以看起来很可怕。特别是当应用于其中有很多长单词的段落时。如果你要使用这个，你也应该考虑一起使用别的东西，比如 {{cssxref("hyphens")}}，打破一些更长的词语。</li> +</ul> + +<p>如果我们应用 <code>text-align: center;</code> 到我们例子中的 {{htmlelement("h1")}} 元素中，结果如下：</p> + +<div class="hidden"> +<pre class="brush: html"><h1>Tommy the cat</h1> + +<p>I remember as if it were a meal ago...</p> + +<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter + may have nestled its way into his mighty throat. Many a fat alley rat +had met its demise while staring point blank down the cavernous barrel of + this awesome prowling machine. Truly a wonder of nature this urban +predator — Tommy the cat had many a story to tell. But it was a rare +occasion such as this that he did.</p> +</pre> + +<pre class="brush: css">html { + font-size: 10px; +} + +h1 { + font-size: 2.6rem; + text-transform: capitalize; + text-shadow: -1px -1px 1px #aaa, + 0px 2px 1px rgba(0,0,0,0.5), + 2px 2px 2px rgba(0,0,0,0.7), + 0px 0px 3px rgba(0,0,0,0.4); + text-align: center; +} + +h1 + p { + font-weight: bold; +} + +p { + font-size: 1.4rem; + color: red; + font-family: Helvetica, Arial, sans-serif; +}</pre> +</div> + +<p>{{ EmbedLiveSample('文本对齐', '100%', 220) }}</p> + +<h3 id="行高">行高</h3> + +<p> {{cssxref("line-height")}} 属性设置文本每行之间的高，可以接受大多数单位 <a href="/zh-CN/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">length and size units</a>，不过也可以设置一个无单位的值，作为乘数，通常这种是比较好的做法。无单位的值乘以 {{cssxref("font-size")}} 来获得 <code>line-height</code>。当行与行之间拉开空间，正文文本通常看起来更好更容易阅读。推荐的行高大约是 1.5–2 (双倍间距。) 所以要把我们的文本行高设置为字体高度的1.5倍，你可以使用这个:</p> + +<pre class="brush: css">line-height: 1.5;</pre> + +<p>把这个样式应用到我们示例中的 {{htmlelement("p")}} 元素，结果如下：</p> + +<div class="hidden"> +<pre class="brush: html"><h1>Tommy the cat</h1> + +<p>I remember as if it were a meal ago...</p> + +<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter + may have nestled its way into his mighty throat. Many a fat alley rat +had met its demise while staring point blank down the cavernous barrel of + this awesome prowling machine. Truly a wonder of nature this urban +predator — Tommy the cat had many a story to tell. But it was a rare +occasion such as this that he did.</p> +</pre> + +<pre class="brush: css">html { + font-size: 10px; +} + +h1 { + font-size: 2.6rem; + text-transform: capitalize; + text-shadow: -1px -1px 1px #aaa, + 0px 2px 1px rgba(0,0,0,0.5), + 2px 2px 2px rgba(0,0,0,0.7), + 0px 0px 3px rgba(0,0,0,0.4); + text-align: center; +} + +h1 + p { + font-weight: bold; +} + +p { + font-size: 1.4rem; + color: red; + font-family: Helvetica, Arial, sans-serif; + line-height: 1.5; +}</pre> +</div> + +<p>{{ EmbedLiveSample('行高', '100%', 250) }}</p> + +<h3 id="字母和单词间距">字母和单词间距</h3> + +<p>{{cssxref("letter-spacing")}} 和 {{cssxref("word-spacing")}} 属性允许你设置你的文本中的字母与字母之间的间距、或是单词与单词之间的间距。你不会经常使用它们，但是可能可以通过它们，来获得一个特定的外观，或者让较为密集的文字更加可读。它们可以接受大多数单位 <a href="/zh-CN/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">length and size units</a>.</p> + +<p>所以作为例子，如果我们把这个样式应用到我们的示例中的 {{htmlelement("p")}} 段落的第一行：</p> + +<pre class="brush: css">p::first-line { + letter-spacing: 2px; + word-spacing: 4px; +}</pre> + +<p>我们会得到下面的结果：</p> + +<div class="hidden"> +<pre class="brush: html"><h1>Tommy the cat</h1> + +<p>I remember as if it were a meal ago...</p> + +<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter + may have nestled its way into his mighty throat. Many a fat alley rat +had met its demise while staring point blank down the cavernous barrel of + this awesome prowling machine. Truly a wonder of nature this urban +predator — Tommy the cat had many a story to tell. But it was a rare +occasion such as this that he did.</p> +</pre> + +<pre class="brush: css">html { + font-size: 10px; +} + +h1 { + font-size: 2.6rem; + text-transform: capitalize; + text-shadow: -1px -1px 1px #aaa, + 0px 2px 1px rgba(0,0,0,0.5), + 2px 2px 2px rgba(0,0,0,0.7), + 0px 0px 3px rgba(0,0,0,0.4); + text-align: center; +} + +h1 + p { + font-weight: bold; +} + +p::first-line { + letter-spacing: 2px; + word-spacing: 4px; +} + +p { + font-size: 1.4rem; + color: red; + font-family: Helvetica, Arial, sans-serif; + line-height: 1.5; +}</pre> +</div> + +<p>{{ EmbedLiveSample('字母和字间距', '100%', 250) }}</p> + +<h3 id="其他一些值得看一下的属性">其他一些值得看一下的属性</h3> + +<p>以上属性让你了解如何开始在网页上设置文本， 但是你可以使用更多的属性。我们只是想介绍最重要的。一旦你习惯使用上面的内容，你还应该探索以下几点：</p> + +<p>Font 样式:</p> + +<ul> + <li>{{cssxref("font-variant")}}: 在小型大写字母和普通文本选项之间切换。</li> + <li>{{cssxref("font-kerning")}}: 开启或关闭字体间距选项。</li> + <li>{{cssxref("font-feature-settings")}}: 开启或关闭不同的 <a href="https://en.wikipedia.org/wiki/OpenType">OpenType</a> 字体特性。</li> + <li>{{cssxref("font-variant-alternates")}}: 控制给定的自定义字体的替代字形的使用。</li> + <li>{{cssxref("font-variant-caps")}}: 控制大写字母替代字形的使用。</li> + <li>{{cssxref("font-variant-east-asian")}}: 控制东亚文字替代字形的使用, 像日语和汉语。</li> + <li>{{cssxref("font-variant-ligatures")}}: 控制文本中使用的连写和上下文形式。</li> + <li>{{cssxref("font-variant-numeric")}}: 控制数字，分式和序标的替代字形的使用。</li> + <li>{{cssxref("font-variant-position")}}: 控制位于上标或下标处，字号更小的替代字形的使用。</li> + <li>{{cssxref("font-size-adjust")}}: 独立于字体的实际大小尺寸，调整其可视大小尺寸。</li> + <li>{{cssxref("font-stretch")}}: 在给定字体的可选拉伸版本中切换。</li> + <li>{{cssxref("text-underline-position")}}: 指定下划线的排版位置，通过使用 <code>text-decoration-line</code> 属性的<code>underline</code> 值。</li> + <li>{{cssxref("text-rendering")}}: 尝试执行一些文本渲染优化。</li> +</ul> + +<p>文本布局样式：</p> + +<ul> + <li>{{cssxref("text-indent")}}: 指定文本内容的第一行前面应该留出多少的水平空间。</li> + <li>{{cssxref("text-overflow")}}: 定义如何向用户表示存在被隐藏的溢出内容。</li> + <li>{{cssxref("white-space")}}: 定义如何处理元素内部的空白和换行。</li> + <li>{{cssxref("word-break")}}: 指定是否能在单词内部换行。</li> + <li>{{cssxref("direction")}}: 定义文本的方向 (这取决于语言，并且通常最好让HTML来处理这部分，因为它是和文本内容相关联的。)</li> + <li>{{cssxref("hyphens")}}: 为支持的语言开启或关闭连字符。</li> + <li>{{cssxref("line-break")}}: 对东亚语言采用更强或更弱的换行规则。</li> + <li>{{cssxref("text-align-last")}}: 定义一个块或行的最后一行，恰好位于一个强制换行前时，如何对齐。</li> + <li>{{cssxref("text-orientation")}}: 定义行内文本的方向。</li> + <li>{{cssxref("word-wrap")}}: 指定浏览器是否可以在单词内换行以避免超出范围。</li> + <li>{{cssxref("writing-mode")}}: 定义文本行布局为水平还是垂直，以及后继文本流的方向。</li> +</ul> + +<h2 id="Font_简写">Font 简写</h2> + +<p>许多字体的属性也可以通过 {{cssxref("font")}} 的简写方式来设置 . 这些是按照以下顺序来写的： {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}}, {{cssxref("font-stretch")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}}, and {{cssxref("font-family")}}.</p> + +<p>如果你想要使用 <code>font</code> 的简写形式，在所有这些属性中，只有 <code>font-size</code> 和 <code>font-family</code> 是一定要指定的。</p> + +<p>{{cssxref("font-size")}} 和 {{cssxref("line-height")}} 属性之间必须放一个正斜杠。</p> + +<p>一个完整的例子如下所示：</p> + +<pre class="brush: css">font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;</pre> + +<h2 id="动手练习_使用样式文本">动手练习: 使用样式文本</h2> + +<p>在这个动手练习中，我们没有任何具体的练习来做：我们只是希望你和一些字体/文本布局属性相处地愉快，看看你可以制作什么！你可以使用离线HTML / CSS文件进行此操作，也可以将代码输入到下面的实时可编辑示例中。</p> + +<p>如果你犯了错误，你可以使用 Reset 按钮来复原。</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> + <h2>HTML Input</h2> + <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"> + <p>Some sample text for your delight</p></textarea> + + <h2>CSS Input</h2> + <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">p { + + }</textarea> + + <h2>Output</h2> + <div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div> + <div class="controls"> + <input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;"> + </div> +</div> +</pre> + +<pre class="brush: js">var htmlInput = document.querySelector(".html-input"); +var cssInput = document.querySelector(".css-input"); +var reset = document.getElementById("reset"); +var htmlCode = htmlInput.value; +var cssCode = cssInput.value; +var output = document.querySelector(".output"); + +var styleElem = document.createElement('style'); +var headElem = document.querySelector('head'); +headElem.appendChild(styleElem); + +function drawOutput() { + output.innerHTML = htmlInput.value; + styleElem.textContent = cssInput.value; +} + +reset.addEventListener("click", function() { + htmlInput.value = htmlCode; + cssInput.value = cssCode; + drawOutput(); +}); + +htmlInput.addEventListener("input", drawOutput); +cssInput.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p> + +<h2 id="小结">小结</h2> + +<p>我们希望你在本篇文章中享受与文本在一起的时光！下篇文章会介绍所有你需要知道的关于 HTML 列表的样式。</p> + +<p>{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}</p> diff --git a/files/zh-cn/learn/css/为文本添加样式/index.html b/files/zh-cn/learn/css/为文本添加样式/index.html new file mode 100644 index 0000000000..ec4822b9ad --- /dev/null +++ b/files/zh-cn/learn/css/为文本添加样式/index.html @@ -0,0 +1,54 @@ +--- +title: 为文本添加样式（样式化文本） +slug: Learn/CSS/为文本添加样式 +tags: + - CSS + - 代码脚步 + - 列表lists + - 初学者 + - 字体Fonts + - 字母letter + - 文字font + - 文本Text + - 模块化Module + - 网络字体 web fonts + - 行line + - 链接Links + - 阴影shadow +translation_of: Learn/CSS/Styling_text +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">掌握了 CSS 语言的基础之后，对于您来说，下一个需要关心的 CSS 主题就是为文本添加样式——一个您将会最经常使用 CSS 做的事情。在这里，我们专注于为文本样式的基础，包括设置字体、粗细、斜体、行还有字符间距、阴影以及文本的其他特征。我们将会通过在您的网页中应用自定义字体、样式化列表以及链接来圆满地结束本模块。</p> + +<h2 id="前提">前提</h2> + +<p>在开始这一模块之前，您应当像 <a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML">HTML 介绍</a> 模块中所探讨的，已经熟悉了基本的HTML，以及像 <a href="/zh-CN/docs/Learn/CSS/Introduction_to_CSS">CSS 介绍</a> 中所详述的，对自己的 CSS 基础感觉还满意。</p> + +<div class="note"> +<p><strong>注意</strong>: 如果您所使用的是不能创建自己的文件的电脑、平板电脑或其他设备的话，您可以在一个在线编码程序 <a href="http://jsbin.com/">JSBin</a> 或 <a href="https://thimble.mozilla.org/">Thimble</a> 中尝试（大部分的）代码例子。</p> +</div> + +<h2 id="导引">导引</h2> + +<p>这个模块包括了以下文章，这些文章将教会您所有的基本功以支持您为 HTML 文本内容添加样式。</p> + +<dl> + <dt><a href="/zh-CN/docs/Learn/CSS/Styling_text/Fundamentals">基本的文本以及字体样式</a></dt> + <dd>在本文章中，我们将通篇了解文本、字体样式的所有基础，包括设置字体粗细（ font weight ）、字体系列及样式（ family and style ）、字体缩写（ font shorthand ）、文本排列（ text alignment ）和其他的效果，还有行（ line ）以及字符间距（ letter spacing ）。</dd> + <dt><a href="/zh-CN/docs/Learn/CSS/Styling_text/Styling_lists">样式化列表</a></dt> + <dd>对于大部分内容来说，列表的行为表现跟其他任何文本其实差不多，但您也需要了解还有一些专门用于列表的 CSS 样式以及考虑一些最好的实践方式。本文章将阐释这一切。</dd> + <dt><a href="/zh-CN/docs/Learn/CSS/Styling_text/Styling_links">样式化链接</a></dt> + <dd>当您为链接添加样式时，很重要的一点是要去理解怎样有效地使用伪类去修饰链接的状态，以及怎么去修饰不同的接口功能例如导航菜单和面板中所使用的链接。我们将会在这篇文章中讨论这些话题。</dd> + <dt><a href="/zh-CN/docs/Learn/CSS/Styling_text/Web_fonts">网络字体</a></dt> + <dd>在这里我们将会详细地探索网络字体——这会允许您与您的网页一同下载自定义字体，来实现更为不同的个性化字体样式。</dd> +</dl> + +<h2 id="评估">评估</h2> + +<p>以下的评估将会评测您对以上导引所涵盖的为文本添加样式的技术的理解。</p> + +<dl> + <dt><a href="/zh-CN/Learn/CSS/Styling_text/Typesetting_a_homepage">对一个社区学校的主页进行排版</a></dt> + <dd>在这个评估中，我们通过让您为一个社区学校的主页添加文本样式来测试您对文本样式的理解程度。</dd> +</dl> diff --git a/files/zh-cn/learn/css/为文本添加样式/styling_links/index.html b/files/zh-cn/learn/css/为文本添加样式/styling_links/index.html new file mode 100644 index 0000000000..df2e7c6093 --- /dev/null +++ b/files/zh-cn/learn/css/为文本添加样式/styling_links/index.html @@ -0,0 +1,431 @@ +--- +title: 样式化链接 +slug: Learn/CSS/为文本添加样式/Styling_links +tags: + - 伪类 + - 悬浮 + - 标签 + - 聚焦 + - 菜单 + - 超链接 + - 链接 +translation_of: Learn/CSS/Styling_text/Styling_links +--- +<div> +<p>{{LearnSidebar}}</p> + +<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</p> +</div> + +<p class="summary">当为 <a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">links</a> 添加样式时, 理解利用伪类有效地建立链接状态是很重要的，以及如何为链接添加样式来实现常用的功能，比如说导航栏、选项卡。我们将在本文中关注所有这些主题。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">学习本章节的前提:</th> + <td>基本的计算机使用能力，HTML 基础 (学习 <a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), CSS 基础 (学习 <a href="/zh-CN/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>), <a href="/zh-CN/docs/Learn/CSS/Styling_text/Fundamentals">CSS text and font fundamentals</a>.</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>学习如何将样式应用到链接状态，以及如何使用链接实现常见的 UI 功能，比如导航菜单。</td> + </tr> + </tbody> +</table> + +<h2 id="让我们来看一些链接">让我们来看一些链接</h2> + +<p>根据最佳实践 <a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">创建超链接</a> 中的练习，我们看到了如何在你的 HTML 中实现链接。在本篇文章中，我们会以这个知识为基础，向你展示将样式应用到链接的最佳实践。</p> + +<h3 id="链接状态">链接状态</h3> + +<p>第一件需要理解的事情是链接状态的概念，链接存在时处于不同的状态，每一个状态都可以用对应的 <a href="/zh-CN/Learn/CSS/Introduction_to_CSS/Selectors#Pseudo-classes">伪类</a> 来应用样式:</p> + +<ul> + <li><strong>Link (没有访问过的)</strong>: 这是链接的默认状态，当它没有处在其他状态的时候，它可以使用{{cssxref(":link")}} 伪类来应用样式。</li> + <li><strong>Visited</strong>: 这个链接已经被访问过了(存在于浏览器的历史纪录), 它可以使用 {{cssxref(":visited")}} 伪类来应用样式。</li> + <li><strong>Hover</strong>: 当用户的鼠标光标刚好停留在这个链接，它可以使用 {{cssxref(":hover")}} 伪类来应用样式。</li> + <li><strong>Focus</strong>: 一个链接当它被选中的时候 (比如通过键盘的 <kbd>Tab</kbd> 移动到这个链接的时候，或者使用编程的方法来选中这个链接 {{domxref("HTMLElement.focus()")}}) 它可以使用 {{cssxref(":focus")}} 伪类来应用样式。</li> + <li><strong>Active</strong>: 一个链接当它被激活的时候 (比如被点击的时候)，它可以使用 {{cssxref(":active")}} 伪类来应用样式。</li> +</ul> + +<h3 id="默认的样式">默认的样式</h3> + +<p>下面的例子说明了一个链接的默认行为表现 (这里的 CSS 仅仅是为了放大和居中文本，使内容更加突出)</p> + +<pre class="brush: html"><p><a href="https://mozilla.org">A link to the Mozilla homepage</a></p> +</pre> + +<pre class="brush: css">p { + font-size: 2rem; + text-align: center; +}</pre> + +<p>{{ EmbedLiveSample('默认的样式', '100%', 120) }}</p> + +<p>当你观察默认样式的时候，你也许会注意到一些东西:</p> + +<ul> + <li>链接具有下划线。</li> + <li>未访问过的 (Unvisited) 的链接是蓝色的。</li> + <li>访问过的 (Visited) 的链接是紫色的.</li> + <li>悬停 (Hover) 在一个链接的时候鼠标的光标会变成一个小手的图标。</li> + <li>选中 (Focus) 链接的时候，链接周围会有一个轮廓，你应该可以按 tab 来选中这个页面的链接 (在 Mac 上, 你可能需要使用<em>Full Keyboard Access: All controls</em> 选项，然后再按下 <kbd>Ctrl</kbd> + <kbd>F7</kbd> ，这样就可以起作用)</li> + <li>激活 (Active) 链接的时候会变成红色 (当你点击链接时，请尝试按住鼠标按钮。)</li> +</ul> + +<p>有趣的是，这些默认的样式与20世纪90年代中期浏览器早期的风格几乎相同。这是因为用户知道以及期待链接就是这样变化的，如果链接的样式不同，就会让一些人感到奇怪。不过这不意味着你不应该为链接添加任何样式，只是你的样式不应该与用户预期的相差太大，你应该至少：</p> + +<ul> + <li>为链接使用下划线，但是不要在其他内容上也用下划线，以作区分。如果你不想要带有下划线的链接，那你至少要用其他方法来高亮突出链接。</li> + <li>当用户悬停或选择 (hover 或者 focused) 的时候，使链接有相应的变化，并且在链接被激活(active) 的时候，变化会有一些不同。可以使用以下CSS属性关闭/更改默认样式：</li> + <li>{{cssxref("color")}} 文字的颜色</li> + <li>{{cssxref("cursor")}} 鼠标光标的样式，你不应该把这个关掉，除非你有非常好的理由。</li> + <li>{{cssxref("outline")}} 文字的轮廓 (轮廓有点像边框，唯一的区别是边框占用了盒模型的空间，而轮廓没有； 它只是设置在背景图片的顶部)。outline 是一个有用的辅助功能，所以在把它关掉之前考虑清楚；你至少应该将悬停 (hover) 状态的样式同时应用到选中 (focus) 状态上。</li> +</ul> + +<div class="note"> +<p><strong>注意</strong>: 你不仅仅只限于上述属性来把样式应用到你的链接上，你可以用任何你喜欢的属性，就是不要搞得太疯狂！</p> +</div> + +<h3 id="将样式应用到一些链接">将样式应用到一些链接</h3> + +<p>现在我们已经详细地看了默认的状态，让我们看一下典型的链接样式的设置。</p> + +<p>开始之前，我们先写出我们的空规则集：</p> + +<pre class="brush: css">a { + +} + + +a:link { + +} + +a:visited { + +} + +a:focus { + +} + +a:hover { + +} + +a:active { + +}</pre> + +<p>这几个规则的顺序是有意义的，因为链接的样式是建立在另一个样式之上的，比如，第一个规则的样式也会在后面的规则中生效，一个链接被激活 (activated) 的时候，它也是处于悬停 (hover) 状态的。如果你搞错了顺序，那么就可能不会产生正确的效果。要记住这个顺序，你可以尝试这样帮助记忆：<strong>L</strong>o<strong>V</strong>e <strong>F</strong>ears <strong>HA</strong>te.</p> + +<p>现在让我们再添加一些信息，得到正确的样式：</p> + +<pre class="brush: css">body { + width: 300px; + margin: 0 auto; + font-size: 1.2rem; + font-family: sans-serif; +} + +p { + line-height: 1.4; +} + +a { + outline: none; + text-decoration: none; + padding: 2px 1px 0; +} + +a:link { + color: #265301; +} + +a:visited { + color: #437A16; +} + +a:focus { + border-bottom: 1px solid; + background: #BAE498; +} + +a:hover { + border-bottom: 1px solid; + background: #CDFEAA; +} + +a:active { + background: #265301; + color: #CDFEAA; +}</pre> + +<p>这里还提供了一些示例HTML，供你应用CSS：</p> + +<pre class="brush: html"><p>There are several browsers available, such as <a href="https://www.mozilla.org/zh-CN/firefox/">Mozilla +Firefox</a>, <a href="https://www.google.com/chrome/index.html">Google Chrome</a>, and +<a href="https://www.microsoft.com/zh-CN/windows/microsoft-edge">Microsoft Edge</a>.</p></pre> + +<p>把这两个放在一起，我们得到这样的结果：</p> + +<p>{{ EmbedLiveSample('将样式应用到一些链接', '100%', 150) }}</p> + +<p>那么我们在这里做了什么? 这个看起来肯定和默认的样式不同，但仍然提供了一个熟悉的体验，好让用户知道发生了什么：</p> + +<ul> + <li>第一和第二条规则和本次讨论关系不大。</li> + <li>第三个规则使用了 <code>a</code> 选择器，取消了默认的文本下划线和链接被选中（focus）时的轮廓 （outline）（不同浏览器的默认行为可能不同），并为每个链接添加了少量的内边距（padding），所有这一切将在之后变得明确。</li> + <li>接着，我们使用<code>a:link</code>和<code>a:visited</code>选择器来设置未访问（unvisited）链接和访问过（visited）的链接的一点颜色上的变化，然后就能分辨开来了。</li> + <li>下面两条规则使用 <code>a:focus</code> 和 <code>a:hover</code> 来设置选中（focus）和悬停（hover）的链接为不同的背景颜色，再加上一个下划线，使链接更加突出。这里有两点需要注意： + <ul> + <li>下划线是使用 {{cssxref("border-bottom")}} 创造的, 而不是 {{cssxref("text-decoration")}}，有一些人喜欢这样，因为前者比后者有更好的样式选项， 并且绘制的位置会稍微低一点，所以不会穿过字母 (比如 字母 g 和 y 底部).</li> + <li>{{cssxref("border-bottom")}}的值被设置为<code>1px solid</code>，没有指定颜色。这样做可以使边框采用和元素文本一样的颜色，这在这样的情况下是很有用的，因为链接的每种状态下，文本是不同的颜色。</li> + </ul> + </li> + <li>最后, <code>a:active</code> 用来给链接一个不同的配色方案，当链接被激活 (activated) 时，让链接被激活的时候更加明显。</li> +</ul> + +<h3 id="动手练习_为你的链接添加样式">动手练习: 为你的链接添加样式</h3> + +<p>在这个动手练习部分，我们希望你使用我们的空规则集，然后添加你自定义的规则，从而使链接看上去比较酷。发挥你的想象力，大胆地做吧。我们相信你可以想出一些更酷的东西，就像我们上面的例子一样。</p> + +<p>如果你犯了错误，你都可以使用 <em>Reset 按钮来重置。 </em>如果你遇到了困难，可以按 <em>Show solution</em> 按钮来显示我们上文中的例子。</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> + <h2>HTML Input</h2> + <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><p>There are several browsers available, such as <a href="https://www.mozilla.org/zh-CN/firefox/">Mozilla + Firefox</a>, <a href="https://www.google.com/chrome/index.html">Google Chrome</a>, and +<a href="https://www.microsoft.com/zh-CN/windows/microsoft-edge">Microsoft Edge</a>.</p></textarea> + + <h2>CSS Input</h2> + <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">a { + +} + +a:link { + +} + +a:visited { + +} + +a:focus { + +} + +a:hover { + +} + +a:active { + +}</textarea> + + <h2>Output</h2> + <div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div> + <div class="controls"> + <input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;"> + <input id="solution" type="button" value="Show solution" style="margin: 10px 0 0 10px;"> + </div> +</div> +</pre> + +<pre class="brush: js">var htmlInput = document.querySelector(".html-input"); +var cssInput = document.querySelector(".css-input"); +var reset = document.getElementById("reset"); +var htmlCode = htmlInput.value; +var cssCode = cssInput.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +var styleElem = document.createElement('style'); +var headElem = document.querySelector('head'); +headElem.appendChild(styleElem); + +function drawOutput() { + output.innerHTML = htmlInput.value; + styleElem.textContent = cssInput.value; +} + +reset.addEventListener("click", function() { + htmlInput.value = htmlCode; + cssInput.value = cssCode; + drawOutput(); +}); + +solution.addEventListener("click", function() { + htmlInput.value = htmlCode; + cssInput.value = 'p {\n font-size: 1.2rem;\n font-family: sans-serif;\n line-height: 1.4;\n}\n\na {\n outline: none;\n text-decoration: none;\n padding: 2px 1px 0;\n}\n\na:link {\n color: #265301;\n}\n\na:visited {\n color: #437A16;\n}\n\na:focus {\n border-bottom: 1px solid;\n background: #BAE498;\n}\n\na:hover {\n border-bottom: 1px solid;\n background: #CDFEAA;\n}\n\na:active {\n background: #265301;\n color: #CDFEAA;\n}'; + drawOutput(); +}); + +htmlInput.addEventListener("input", drawOutput); +cssInput.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p> + +<h2 id="在链接中包含图标">在链接中包含图标</h2> + +<p>常见的做法是在链接中包含图标，使链接提供更多关于链接指向的内容的信息。让我们来看一个简单的例子，例子中为一个外部链接 (链接指向的不是本站，而是外部站点)。这样的图标通常看起来像一个指向盒子的小箭头，比如, 我们会使用<a href="https://icons8.com/web-app/741/external-link">icons8.com上的这个优秀的范例</a>。</p> + +<p>让我们来看一些能给我们这个效果的 HTML 和 CSS。先是一些简单的等待你样式化的 HTML ：</p> + +<pre class="brush: html"><p>For more information on the weather, visit our <a href="weather.html">weather page</a>, +look at <a href="https://en.wikipedia.org/wiki/Weather">weather on Wikipedia</a>, or check +out <a href="http://www.extremescience.com/weather.htm">weather on Extreme Science</a>.</p></pre> + +<p>接着是 CSS:</p> + +<pre class="brush: css">body { + width: 300px; + margin: 0 auto; + font-family: sans-serif; +} + +p { + line-height: 1.4; +} + +a { + outline: none; + text-decoration: none; + padding: 2px 1px 0; +} + +a:link { + color: blue; +} + +a:visited { + color: purple; +} + +a:focus, a:hover { + border-bottom: 1px solid; +} + +a:active { + color: red; +} + +a[href*="http"] { + background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0; + background-size: 16px 16px; + padding-right: 19px; +}</pre> + +<p>{{ EmbedLiveSample('在链接中包含图标', '100%', 150) }}</p> + +<p>那么这里发生了什么? 我们将跳过大部分的 CSS，因为那些只是你之前看过的相同的信息。最后一条规则很有趣，这里，我们在外部链接上插入了一个自定义背景图片，这和上篇<a href="/zh-CN/Learn/CSS/Styling_text/Styling_lists#Using_a_custom_bullet_image">自定义列表项目符号</a>文章的做法很像。这次，我们使用了 {{cssxref("background")}} 简写，而不是分别使用多个属性。我们设置了我们想要插入的图片的路径，指定了 <code>no-repeat</code> ，这样我们只插入了一次图片，然后指定位置为100%，使其出现在内容的右边，距离上方是0px。</p> + +<p>我们也使用 {{cssxref("background-size")}} 来指定要显示的背景图像的大小，为了满足响应式网站设计的需要，在图标更大，需要再重新调整它的大小的时候，这样做是很有帮助的。但是，这仅适用于IE 9及更高版本。所以你如果需要支持那些老的浏览器，只能调整图像的原始大小，然后插入。</p> + +<p>最后，我们在链接上设置 {{cssxref("padding-right")}} ，为背景图片留出空间，这样就不会让它和文本重叠了。</p> + +<p>最后的问题，我们是如何只选中了外部链接的？如果你正确编写你的<a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">HTML链接</a> ，你应该只会在外部链接上使用绝对 URL，如果链接是链接你的站点的其他部分，那么使用相对链接是更加高效的。因此“http”文本应该只出现在外部链接上，为此我们可以使用一个<a href="/zh-CN/Learn/CSS/Introduction_to_CSS/Selectors#Attribute_selectors">属性选择器</a>——<code>a[href*="http"]</code> ——选中 {{htmlelement("a")}} 元素，但是这样只会选中那些拥有 {{htmlattrxref("href","a")}} 属性，且属性的值包含 "http" 的 {{htmlelement("a")}}的元素。</p> + +<p>就这样啦，尝试重新审视上面的动手练习部分，尝试这种新技术！</p> + +<div class="note"> +<p><strong>注意</strong>: 不要担心，如果你目前不熟悉 <a href="/zh-CN/docs/Learn/CSS/Styling_boxes">backgrounds</a> 和 <a href="/zh-CN/docs/Web/Apps/Progressive/Responsive/responsive_design_building_blocks">responsive web design</a> ; 这些会在其他地方解释。</p> +</div> + +<h2 id="样式化链接为按钮">样式化链接为按钮</h2> + +<p>目前在本文中探索的用法也可以用在其他方面。比如，悬停 (hover) 的状态可以为不同的元素应用样式，不只是链接，你也许会想添加悬停状态的样式到段落、列表项、或者是其他东西。</p> + +<p>此外，在某些情况下，链接通常会应用样式，使它看上去的效果和按钮差不多，一个网站导航菜单通常是标记为一个列表，列表中包含链接，这可以很容易地被设计为看起来像一组控制按钮或是选项卡，主要是用于让用户可以访问站点的其他部分，现在让我们来看一看。</p> + +<p>首先，一些 HTML:</p> + +<pre class="brush: html"><ul> + <li><a href="#">Home</a></li><li><a href="#">Pizza</a></li><li><a href="#">Music</a></li><li><a href="#">Wombats</a></li><li><a href="#">Finland</a></li> +</ul></pre> + +<p>接着，是我们的 CSS:</p> + +<pre class="brush: css">body,html { + margin: 0; + font-family: sans-serif; +} + +ul { + padding: 0; + width: 100%; +} + +li { + display: inline; +} + +a { + outline: none; + text-decoration: none; + display: inline-block; + width: 19.5%; + margin-right: 0.625%; + text-align: center; + line-height: 3; + color: black; +} + +li:last-child a { + margin-right: 0; +} + +a:link, a:visited, a:focus { + background: yellow; +} + +a:hover { + background: orange; +} + +a:active { + background: red; + color: white; +}</pre> + +<p>这给我们以下结果：</p> + +<p>{{ EmbedLiveSample('样式化链接为按钮', '100%', 100) }}</p> + +<p>让我们来解释一下这里发生了什么，主要是几个有趣的部分:</p> + +<ul> + <li>我们的第二条规则删除了 {{htmlelement("ul")}} 元素的默认的 {{cssxref("padding")}}，然后设置了它的宽度是外部容器 {{htmlelement("body")}} (在这次条件下) 的 100% 。</li> + <li>{{htmlelement("li")}} 元素通常默认是块元素 (可见 <a href="/zh-CN/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">types of CSS boxes</a> 回顾)，意味着它们各自会占用一行。在这个例子中，我们创建了一组水平列表的链接，所以在第三条规则中，我们设置了 {{cssxref("display")}} 属性为 inline，这会导致列表中的每项内容都会一起出现在同一行，它们现在表现得就像内联元素。</li> + <li>第四条规则，主要是 {{htmlelement("a")}} 元素的样式，这里比较复杂; 让我们一步一步来看： + <ul> + <li>和前面的例子一样，我们首先关掉了 {{cssxref("text-decoration")}} 和 {{cssxref("outline")}}，我们不希望这些破坏我们链接的样子。</li> + <li>接着，我们设置 {{cssxref("display")}} 为 <code>inline-block</code> ，{{htmlelement("a")}} 元素默认为内联元素，而且我们不希望它们像值为 <code>block</code> 时一样，线条超出自己的内容，我们确实想要控制它们的大小<code>inline-block</code> 允许我们这样做。</li> + <li>接着是尺寸的设置! 我们要填满整个 {{htmlelement("ul")}} 的宽度，为按钮之间留一些间距 (margin) (但不是右边边缘的间距)，我们有 5 个按钮需要容纳，所以它们的大小应该一样。为了做到这一点，我们设置 {{cssxref("width")}} 为 19.5%，然后 {{cssxref("margin-right")}} 为 0.625%. 你会注意到所有宽度加起来是 100.625%, 这样会让最后一个按钮溢出 <code><ul></code> ，然后显示到下一行中。但是，我们使用了下一条规则让它恢复到了 100%，这条规则选中了列表中的最后一个 <code><a></code>元素，然后删除了它的间距 (margin)。完成!</li> + <li>最后三条声明就比较简单了，主要是为链接各个状态添加了颜色。我们居中了每个链接中的文本，设置 {{cssxref("line-height")}} 为 3， 让按钮有一些高度 (这也具有垂直居中文本的优点)，并设置文本的颜色为黑色。</li> + </ul> + </li> +</ul> + +<div class="note"> +<p><strong>注意</strong>: 你也许会注意到 HTML 中的列表的每项内容都在同一行上，这是因为 inline-block 元素在页面上创建的空格换行符，就像几个字之间的空格，这样的空隙也许会破坏我们的水平导航菜单布局。所以我们删除了空格。你可以在 <a href="https://css-tricks.com/fighting-the-space-between-inline-block-elements/">Fighting the space between inline block elements</a> 找到有关此问题的更多信息（和解决方案）。</p> +</div> + +<h2 id="测试你的技巧！">测试你的技巧！</h2> + +<p>你已经到了本文结尾，并且在我们的交互学习部分已经做了一些技巧测试。但是你在继续之前记住了最重要的信息了吗？你可以在模块末尾找到一个用于验证你已掌握知识的评估——见<a href="/zh-CN/docs/Learn/CSS/%E4%B8%BA%E6%96%87%E6%9C%AC%E6%B7%BB%E5%8A%A0%E6%A0%B7%E5%BC%8F/Typesetting_a_homepage">给一个社区大学的主页排版</a>。</p> + +<p>这个评估测试了这个模块讨论到的所有知识，这样你可能在读下一篇文章之前想看一下它。</p> + +<h2 id="小结">小结</h2> + +<p>我们希望本文为你提供有关链接的所有知识——目前！我们的样式文本模块中的最后一篇文章详细介绍了如何在你的网站上使用自定义字体，或者更熟悉网络字体。</p> + +<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</p> diff --git a/files/zh-cn/learn/css/为文本添加样式/styling_lists/index.html b/files/zh-cn/learn/css/为文本添加样式/styling_lists/index.html new file mode 100644 index 0000000000..075b457836 --- /dev/null +++ b/files/zh-cn/learn/css/为文本添加样式/styling_lists/index.html @@ -0,0 +1,374 @@ +--- +title: 样式列表 +slug: Learn/CSS/为文本添加样式/Styling_lists +translation_of: Learn/CSS/Styling_text/Styling_lists +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}</div> + +<p class="summary"><a href="/zh-CN/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists">List列表</a> 大体上和其他文本一样，但是仍有一些你需要知道的特殊CSS属性，和一些可供参考的最佳实践，这篇文章将阐述这一切。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前置知识:</th> + <td>Basic computer literacy, HTML basics (study <a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), CSS basics (study <a href="/zh-CN/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>), <a href="/zh-CN/docs/Learn/CSS/Styling_text/Fundamentals">基本文本和字体样式</a>.</td> + </tr> + <tr> + <th scope="row">目标:</th> + <td>熟悉与列表相关的样式和最佳实践</td> + </tr> + </tbody> +</table> + +<h2 id="一个简单的例子">一个简单的例子</h2> + +<p>首先，让我们看一个简单的例子。文章中我们将看到无序，有序和描述列表——它们都具有相似的样式特性，而某些特性却又各不相同。<a href="http://mdn.github.io/learning-area/css/styling-text/styling-lists/unstyled-list.html">Github</a>上有未加载样式的例子（也可以查看<a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/unstyled-list.html">源码</a>。）</p> + +<p>例子中列表的HTML代码如下：</p> + +<pre class="brush: html"><h2>Shopping (unordered) list</h2> + +<p>Paragraph for reference, paragraph for reference, paragraph for reference, +paragraph for reference, paragraph for reference, paragraph for reference.</p> + +<ul> + <li>Humous</li> + <li>Pitta</li> + <li>Green salad</li> + <li>Halloumi</li> +</ul> + +<h2>Recipe (ordered) list</h2> + +<p>Paragraph for reference, paragraph for reference, paragraph for reference, +paragraph for reference, paragraph for reference, paragraph for reference.</p> + +<ol> + <li>Toast pitta, leave to cool, then slice down the edge.</li> + <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li> + <li>Wash and chop the salad.</li> + <li>Fill pitta with salad, humous, and fried halloumi.</li> +</ol> + +<h2>Ingredient description list</h2> + +<p>Paragraph for reference, paragraph for reference, paragraph for reference, +paragraph for reference, paragraph for reference, paragraph for reference.</p> + +<dl> + <dt>Humous</dt> + <dd>A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.</dd> + <dt>Pitta</dt> + <dd>A soft, slightly leavened flatbread.</dd> + <dt>Halloumi</dt> + <dd>A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.</dd> + <dt>Green salad</dt> + <dd>That green healthy stuff that many of us just use to garnish kebabs.</dd> +</dl></pre> + +<p>现在，如果你去到例子的展示页面，并使用<a href="/zh-CN/docs/Learn/Common_questions/What_are_browser_developer_tools">浏览器开发者工具</a>查看那些列表元素，你会注意到若干个默认的样式预设值：</p> + +<ul> + <li> {{htmlelement("ul")}} 和 {{htmlelement("ol")}} 元素设置{{cssxref("margin")}}的顶部和底部: 16px(1em) 0;和 padding-left: 40px(2.5em); （在这里注意的是浏览器默认字体大小为16px）。</li> + <li>{{htmlelement("li")}} 默认是没有设置间距的。</li> + <li>{{htmlelement("dl")}} 元素设置 margin的顶部和底部: 16px(1em) ，无内边距设定。</li> + <li>{{htmlelement("dd")}} 元素设置为： {{cssxref("margin-left")}} <code>40px</code> (<code>2.5em</code>)。</li> + <li>在参考中提到的 {{htmlelement("p")}} 元素设置 margin的顶部和底部: 16px(1em)，和其他的列表类型相同。</li> +</ul> + +<h2 id="处理列表间距">处理列表间距</h2> + +<p>当您创建样式列表时，您需要调整样式，使其保持与周围元素相同的垂直间距（例如段落和图片，有时称为垂直节奏））和相互间的水平间距（您可以在 Github 上参考<a href="http://mdn.github.io/learning-area/css/styling-text/styling-lists/">完成的样式示例</a> ，也可以找到<a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/index.html">源代码</a>。）</p> + +<p>用于文本样式和间距的CSS如下所示：</p> + +<pre class="brush: css">/* General styles */ + +html { + font-family: Helvetica, Arial, sans-serif; + font-size: 10px; +} + +h2 { + font-size: 2rem; +} + +ul,ol,dl,p { + font-size: 1.5rem; +} + +li, p { + line-height: 1.5; +} + +/* Description list styles */ + + +dd, dt { + line-height: 1.5; +} + +dt { + font-weight: bold; +} + +dd { + margin-bottom: 1.5rem; +} +</pre> + +<ul> + <li>第一条规则集设置一个网站字体，基准字体大小为10px。 页面上的所有内容都将继承该规则集。</li> + <li>规则集2和3为标题、不同的列表类型和段落以及设置了相对字体大小（这些列表的子元素将会继承该规则集），这就意味着每个段落和列表都将拥有相同的字体大小和上下间距,有助于保持垂直间距一致。</li> + <li>规则集4在段落和列表项目上设置相同的 {{cssxref("line-height")}} ，因此段落和每个单独的列表项目将在行之间具有相同的间距。 这也将有助于保持垂直间距一致。</li> + <li>规则集5-7适用于描述列表 - 我们在描述列表的术语和其描述上设置与段落和列表项相同的行高，以及 {{cssxref("margin-bottom")}} 为1.5 rem（与段落（p）和列表项目（li））相同。 再次强调一遍，这里很好地实现了一致性！ 我们还使描述术语具有粗体字体，因此它们在视觉上脱颖而出。<span id="cke_bm_126E" style="display: none;"> </span></li> +</ul> + +<h2 id="列表特定样式">列表特定样式</h2> + +<p>现在我们来看一下列表的一般间距，我们来研究一些列表具有的特定属性。 我们从三个属性开始了解，这三个属性可以在 {{htmlelement("ul")}} 或 {{htmlelement("ol")}} 元素上设置：</p> + +<ul> + <li>{{cssxref("list-style-type")}} ：设置用于列表的项目符号的类型，例如无序列表的方形或圆形项目符号，或有序列表的数字，字母或罗马数字。</li> + <li>{{cssxref("list-style-position")}} ：设置在每个项目开始之前，项目符号是出现在列表项内，还是出现在其外。</li> + <li>{{cssxref("list-style-image")}} ：允许您为项目符号使用自定义图片，而不是简单的方形或圆形。</li> +</ul> + +<h3 id="符号样式">符号样式</h3> + +<p>像上面所提及的， {{cssxref("list-style-type")}} 属性允许你设置项目符号点的类型，在我们的例子中，我们在有序列表上设置了大写罗马数字：</p> + +<pre class="brush: css">ol { + list-style-type: upper-roman; +}</pre> + +<p>效果显示如下：</p> + +<p><img alt="an ordered list with the bullet points set to appear outside the list item text." src="https://mdn.mozillademos.org/files/12962/outer-bullets.png" style="border-style: solid; border-width: 1px; display: block; height: 119px; margin: 0px auto; width: 376px;"></p> + +<p>您可以通过 {{cssxref("list-style-type")}} 参考页面查找到更多选项。</p> + +<h3 id="项目符号位置">项目符号位置</h3> + +<p>{{cssxref("list-style-position")}} 设置在每个项目开始之前，项目符号是出现在列表项内，还是出现在其外。 如上所示，默认值为 outside，这使项目符号位于列表项之外。</p> + +<p>如果值设置为 inside，项目条目则位于行内。</p> + +<pre class="brush: css">ol { + list-style-type: upper-roman; + list-style-position: inside; +}</pre> + +<p><img alt="an ordered list with the bullet points set to appear inside the list item text." src="https://mdn.mozillademos.org/files/12958/inner-bullets.png" style="border-style: solid; border-width: 1px; display: block; height: 123px; margin: 0px auto; width: 370px;"></p> + +<h3 id="使用自定义的项目符号图片">使用自定义的项目符号图片</h3> + +<p>{{cssxref("list-style-image")}} 属性允许对于项目符号使用自定义图片。其语法相当简单：</p> + +<pre class="brush: css">ul { + list-style-image: url(star.svg); +}</pre> + +<p>然而，这个属性在控制项目符号的位置，大小等方面是有限的。 您最好使用{{cssxref("background")}} 系列属性，您将在 <a href="/zh-CN/docs/Learn/CSS/Styling_boxes">Styling boxes</a> 模块中了解更多信息。在这里我们仅做一点尝试！</p> + +<p>结束我们的例子，我们样式化无序列表像这样（放到您之前所见的顶部）：</p> + +<pre class="brush: css">ul { + padding-left: 2rem; + list-style-type: none; +} + +ul li { + padding-left: 2rem; + background-image: url(star.svg); + background-position: 0 0; + background-size: 1.6rem 1.6rem; + background-repeat: no-repeat; +}</pre> + +<p>我们的所做如下：</p> + +<ul> + <li>将 {{htmlelement("ul")}} 的 {{cssxref("padding-left")}} 从默认的 <code>40px</code>设置为 <code>20px</code>，然后在列表项上设置相同的数值。 这就是说，整个列表项仍然排列在列表中，但是列表项产生了一些用于背景图像的填充。 如果我们没有设置填充，背景图像将与列表项文本重叠，这看起来会很乱。</li> + <li>将 {{cssxref("list-style-type")}} 设置为none，以便默认情况下不会显示项目符号。 我们将使用 {{cssxref("background")}} 属性来代替项目符号。</li> + <li>为每个无序列表项插入项目符号，其相应的属性如下： + <ul> + <li>{{cssxref("background-image")}}: 充当项目符号的图片文件的参考路径</li> + <li>{{cssxref("background-position")}}: 这定义了所选元素背景中的图像将出现在哪里 - 在我们的示例中设置 <code>0 0</code>，这意味着项目符号将出现在每个列表项的最左上侧。</li> + <li>{{cssxref("background-size")}}: 设置背景图片的大小。 理想条件下，我们想要项目符号与列表项的大小相同（比列表项稍大或稍小亦可）。 我们使用的尺寸为1.6rem（16px），它非常吻合我们为项目符号设置的 20px 的填充， 16px 加上 4px 的空格间距，可以使项目符号和列表项文本效果更好。</li> + <li>{{cssxref("background-repeat")}}：默认条件下，背景图片不断复制直到填满整个背景空间，在我们的例子中，背景图片只需复制一次，所以我们设置值为 <code>no-repeat</code>。</li> + </ul> + </li> +</ul> + +<p>效果显示如下：</p> + +<p><img alt="an unordered list with the bullet points set as little star images" src="https://mdn.mozillademos.org/files/12956/image-bullets.png" style="border-style: solid; border-width: 1px; display: block; height: 106px; margin: 0px auto; width: 124px;"></p> + +<h3 id="list-style_速记">list-style 速记</h3> + +<p>上述提到的三种属性可以用一个单独的速记属性 {{cssxref("list-style")}} 来设置。例如：</p> + +<pre class="brush: css">ul { + list-style-type: square; + list-style-image: url(example.png); + list-style-position: inside; +}</pre> + +<p>可以被如下方式代替：</p> + +<pre>ul { + list-style: square url(example.png) inside; +}</pre> + +<p>属性值可以任意顺序排列，你可以设置一个，两个或者三个值（该属性的默认值为 disc, none, outside），如果指定了 type 和 image，如果由于某种原因导致图像无法加载，则 type 将用作回退。</p> + +<h2 id="管理列表计数">管理列表计数</h2> + +<p>有时，您可能想在有序列表上进行不同的计数方式。例如： 从1以外的数字开始，或向后倒数，或者按步或多于1计数。HTML和CSS有一些工具可以帮助您</p> + +<h3 id="start">start</h3> + +<p>{{htmlattrxref("start","ol")}} 属性允许你从1 以外的数字开始计数。示例如下：</p> + +<pre class="brush: html"><ol start="4"> + <li>Toast pitta, leave to cool, then slice down the edge.</li> + <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li> + <li>Wash and chop the salad.</li> + <li>Fill pitta with salad, humous, and fried halloumi.</li> +</ol></pre> + +<p>输出的结果如下：</p> + +<p>{{ EmbedLiveSample('start', '100%', 150) }}</p> + +<h3 id="reversed">reversed</h3> + +<p>{{htmlattrxref("reversed","ol")}} 属性将启动列表倒计数。示例如下：</p> + +<pre class="brush: html"><ol start="4" reversed> + <li>Toast pitta, leave to cool, then slice down the edge.</li> + <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li> + <li>Wash and chop the salad.</li> + <li>Fill pitta with salad, humous, and fried halloumi.</li> +</ol></pre> + +<p>输出的结果如下：</p> + +<p>{{ EmbedLiveSample('reversed', '100%', 150) }}</p> + +<h3 id="value">value</h3> + +<p>{{htmlattrxref("value","ol")}} 属性允许设置列表项指定数值，示例如下:</p> + +<pre class="brush: html"><ol> + <li value="2">Toast pitta, leave to cool, then slice down the edge.</li> + <li value="4">Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li> + <li value="6">Wash and chop the salad.</li> + <li value="8">Fill pitta with salad, humous, and fried halloumi.</li> +</ol></pre> + +<p>输出的结果如下：</p> + +<p>{{ EmbedLiveSample('value', '100%', 150) }}</p> + +<div class="note"> +<p><strong>注意</strong>: 纵然你使用非数字的 {{cssxref("list-style-type")}}, 你仍需要使用与数值同等意义的值作为 value 的属性。</p> +</div> + +<h2 id="主动学习_为嵌套式列表添加样式">主动学习: 为嵌套式列表添加样式</h2> + +<p>在该学习环节，我们希望你使用如上所学尝试为一个嵌套式列表添加样式。我们已经提供了 HTML , 在此之上请完成如下：</p> + +<ol> + <li>为该无序列表提供方形项目符号。</li> + <li>为该无序列表项和有序列表项提供基于其字体大小 1.5 的行高。</li> + <li>为有序列表提供小写字母的项目符号。</li> + <li>对列表进行自由发挥，尝试不同的项目符号类型，间距，以及其他的各种属性。</li> +</ol> + +<p>如果犯了错误，可以随时点击 Reset（重置） 按钮进行重新设置。如果你真的遇到困难无法继续下去，点击 Show solution（显示解决方案）按钮查看可行的解决方案。</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> + <h2>HTML Input</h2> + <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><ul> + <li>First, light the candle.</li> + <li>Next, open the box.</li> + <li>Finally, place the three magic items in the box, in this exact order, to complete the spell: + <ol> + <li>The book of spells</li> + <li>The shiny rod</li> + <li>The goblin statue</li> + </ol> + </li> +</ul></textarea> + + <h2>CSS Input</h2> + <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></textarea> + + <h2>Output</h2> + <div class="output" style="width: 90%;height: 12em;padding: 10px;border: 1px solid #0095dd;overflow: auto;"></div> + <div class="controls"> + <input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;"> + <input id="solution" type="button" value="Show solution" style="margin: 10px 0 0 10px;"> + </div> +</div> +</pre> + +<pre class="brush: js">var htmlInput = document.querySelector(".html-input"); +var cssInput = document.querySelector(".css-input"); +var reset = document.getElementById("reset"); +var htmlCode = htmlInput.value; +var cssCode = cssInput.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +var styleElem = document.createElement('style'); +var headElem = document.querySelector('head'); +headElem.appendChild(styleElem); + +function drawOutput() { + output.innerHTML = htmlInput.value; + styleElem.textContent = cssInput.value; +} + +reset.addEventListener("click", function() { + htmlInput.value = htmlCode; + cssInput.value = cssCode; + drawOutput(); +}); + +solution.addEventListener("click", function() { + htmlInput.value = htmlCode; + cssInput.value = 'ul {\n list-style-type: square;\n}\n\nul li, ol li {\n line-height: 1.5;\n}\n\nol {\n list-style-type: lower-alpha\n}'; + drawOutput(); +}); + +htmlInput.addEventListener("input", drawOutput); +cssInput.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p> + +<h2 id="另请参阅">另请参阅</h2> + +<p>CSS计数器提供用于自定义列表计数和样式的高级工具，但它们相当复杂。 如果你想更深入了解，请查看如下资源：</p> + +<ul> + <li>{{cssxref("@counter-style")}}</li> + <li>{{cssxref("counter-increment")}}</li> + <li>{{cssxref("counter-reset")}}</li> +</ul> + +<h2 id="总结">总结</h2> + +<p>一旦你掌握一些相关的基础原则和特定属性，列表的样式还是相对容易理解的。在下篇文章中我们将转到另一话题——为链接提供样式的各种技巧。</p> + +<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}</p> diff --git a/files/zh-cn/learn/css/为文本添加样式/typesetting_a_homepage/index.html b/files/zh-cn/learn/css/为文本添加样式/typesetting_a_homepage/index.html new file mode 100644 index 0000000000..98f86f125f --- /dev/null +++ b/files/zh-cn/learn/css/为文本添加样式/typesetting_a_homepage/index.html @@ -0,0 +1,119 @@ +--- +title: 作业：排版社区大学首页 +slug: Learn/CSS/为文本添加样式/Typesetting_a_homepage +tags: + - CSS + - 初学者 + - 字体 + - 样式化文本 + - 网络字体 + - 链接 +translation_of: Learn/CSS/Styling_text/Typesetting_a_homepage +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</div> + +<p class="summary">在本测评中，通过对社区学校主页的文本样式化，我们会测试你对所有本模块涉及到的文本样式化技术的理解。你或许也会从中获得乐趣。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">预备条件:</th> + <td>在本次测评前，你应该完成了本模块所有章节。</td> + </tr> + <tr> + <th scope="row">目标:</th> + <td>测试对CSS文本样式化技术的理解。</td> + </tr> + </tbody> +</table> + +<h2 id="开始">开始</h2> + +<p>在本测评开始前，你应该:</p> + +<ul> + <li>获取本次练习的 <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/index.html">HTML</a> 和 <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/style.css">CSS</a> 文件以及提供的 <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/external-link-52.png">external link icon</a>。</li> + <li>在本地计算机中拷贝一份上述文件。</li> +</ul> + +<div class="note"> +<p><strong>注意</strong>: 或者，你可以使用像 <a class="external external-icon" href="http://jsbin.com/">JSBin</a> 或 <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> 的网站完成你的测评。你可以把HTML和CSS粘贴到在线编辑器中，并使用<a href="http://mdn.github.io/learning-area/css/styling-text/typesetting-a-homepage-start/external-link-52.png">this URL</a>指定背景图像。如果你使用的在线编辑器没有单独的CSS面板，你可以将其放在HTML文件的<style>元素中。</p> +</div> + +<h2 id="项目简介">项目简介</h2> + +<p>你有一个虚构的社区大学主页的未处理HTML文件和一些CSS文件。这些CSS文件把网页分成两栏布局，提供了一些简单的样式化。你将在CSS文件底部的comment下写你的CSS，这样可以方便地标出你的工作。不要担心选择器一直重复；我们会帮你跳过这个问题。</p> + +<p>字体：</p> + +<ul> + <li>首先，下载一些免费的字体。因为这是一所大学，字体应该严肃，正式，给人信任的感觉 —— 主体使用serif字体，对标题结合使用sans-serif 或者 slab serif会是不错的选择。</li> + <li>使用合适的服务对着两种字体生成无死角的<code>@font-face</code>代码。</li> + <li>将你的body字体应用到body，heading字体应用到heading。</li> +</ul> + +<p>文本样式化基础：</p> + +<ul> + <li>设置全站网页 <code>font-size</code> 为 <code>10px</code>。</li> + <li>使用相对单位（relative unit）为标题和其他元素的font-sizes设置合适的值。</li> + <li>为body文本设置合适的<code>line-height</code>。</li> + <li>居中页面顶级标题。</li> + <li>为标题设置 <code>letter-spacing</code> 避免字间太过拥挤。</li> + <li>为body文本设置合适的 <code>letter-spacing</code> 和 <code>word-spacing</code>。</li> + <li>在<code><section></code>元素中，每个标题后的第一段文字设置20px的文本缩进。</li> +</ul> + +<p>链接：</p> + +<ul> + <li>设置 link, visited, focus, 和 hover 状态设置颜色，与页面顶部和底部的水平线颜色相匹配。</li> + <li>设置链接默认带下划线，但hover和focus时下划线消失。</li> + <li>取消页面中所有链接focus时默认的外边线。</li> + <li>设置active时有显著不同的样式，使其又突出又与整体页面设计和谐。</li> + <li>在外部链接右侧插入外部链接图标。</li> +</ul> + +<p>列表：</p> + +<ul> + <li>确保列表和列表项与页面整体样式和谐。每个列表项应该有同样的与段落行相同的<code>line-height</code> 。每个列表上下间距应该与段落间距相同。</li> + <li>使用与页面设计匹配的bullet列表项符号。你可以选择自定义的bullet图像或者其他的喜欢的bullet符号。</li> +</ul> + +<p>导航栏菜单:</p> + +<ul> + <li>样式化你的导航栏菜单，使它拥有与页面整体相匹配的外观。</li> +</ul> + +<h2 id="提示与技巧">提示与技巧</h2> + +<ul> + <li>本练习中你不需要编辑HTML文件。</li> + <li>你不需要使导航栏菜单看起来像按钮，但它需要有一定的高度才不至于在页面侧边看起来很别扭；同时记得，你需要的是一个垂直导航栏菜单。</li> +</ul> + +<h2 id="实例">实例</h2> + +<p>下图展示了其中一种设计完成后的例子。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12994/example2.png" style="display: block; height: 1106px; margin: 0px auto; width: 1533px;"></p> + +<h2 id="测评">测评</h2> + +<p>如果你将本测评作为课程的一部分，你应该能够将你的作品交给你的老师/指导员打分。如果你是自学的，你可以很轻松地在<a href="https://discourse.mozilla.org/t/typesetting-a-community-school-home-page-assessment/24683">discussion thread for this exercise</a>，或者<a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>的<a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC 频道上获得打分。先尝试完成本次练习——作弊是学不到任何东西的！</p> + +<p>{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</p> + +<h2 id="在本单元中">在本单元中</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Fundamental text and font styling</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Styling lists</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Styling_links">Styling links</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Web fonts</a></li> + <li><a href="https://developer.mozilla.org/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Typesetting a community school homepage</a></li> +</ul> diff --git a/files/zh-cn/learn/css/为文本添加样式/web_字体/index.html b/files/zh-cn/learn/css/为文本添加样式/web_字体/index.html new file mode 100644 index 0000000000..ad9691cb00 --- /dev/null +++ b/files/zh-cn/learn/css/为文本添加样式/web_字体/index.html @@ -0,0 +1,186 @@ +--- +title: Web 字体 +slug: Learn/CSS/为文本添加样式/Web_字体 +translation_of: Learn/CSS/Styling_text/Web_fonts +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}</div> + +<p class="summary">在模块的第一篇文章中，我们探讨了用于样式化字体和文本的基本CSS特性。在这篇文章中，我们将更进一步，详细地探索web字体——它们允许您下载自定义字体和您的web页面，以允许更多不同的、自定义的文本样式。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">预备知识:</th> + <td>基本计算机素养，HTML 基础 (学习 <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), CSS 基础 (学习<a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>), <a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">CSS文本和字体基础 </a>。</td> + </tr> + <tr> + <th scope="row">目标:</th> + <td>学习如何将web字体应用到web页面，使用第三方服务，或者编写自己的代码。</td> + </tr> + </tbody> +</table> + +<h2 id="字体种类回顾">字体种类回顾</h2> + +<p>正如我们在<a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">基本文本和字体样式</a>中所看到的那样，应用到您的HTML的字体可以使用 {{cssxref("font-family")}}属性来控制。您需要提供一个或多个字体种类名称，浏览器会在列表中搜寻，直到找到它所运行的系统上可用的字体。</p> + +<pre class="brush: css">p { + font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif; +}</pre> + +<p>这个系统运行良好，但是对于传统的web开发人员来说，字体选择是有限的。只有少数几种字体可以保证兼容所有流行的操作系统——这就是所谓的 <a href="/en-US/Learn/CSS/Styling_text/Fundamentals#Web_safe_fonts">Web-safe 字体</a>。您可以使用字体堆栈来指定可选择的字体，后面是Web-safe的替代选项，然后是默认的系统字体，但是为了确保您的设计在每种字体中都显示正常，这样增加了测试的开销。</p> + +<h2 id="Web_字体">Web 字体</h2> + +<p>但是还有一种选择，它非常有效，回到IE版本6。Web字体是一种CSS特性，允许您指定在访问时随您的网站一起下载的字体文件，这意味着任何支持Web字体的浏览器都可以使用您指定的字体。太酷啦！所需的语法如下所示：</p> + +<p>首先，在CSS的开始处有一个{{cssxref("@font-face")}}块，它指定要下载的字体文件：</p> + +<pre class="brush: css">@font-face { + font-family: "myFont"; + src: url("myFont.ttf"); +} +</pre> + +<p>在这个下面，你可以使用@font-face中指定的字体种类名称来将你的定制字体应用到你喜欢的任何东西上，比如说：</p> + +<pre class="brush: css">html { + font-family: "myFont", "Bitstream Vera Serif", serif; +}</pre> + +<p>语法确实比这更复杂，下面我们将详细介绍。</p> + +<p>关于网页字体有两件重要的事情要记住：</p> + +<ol> + <li>浏览器支持不同的字体格式，因此您需要多种字体格式以获得良好的跨浏览器支持。例如,大多数现代浏览器都支持WOFF / WOFF2(Web Open Font Format versions 1 and 2，Web开放字体格式版本1和2)，它是最有效的格式，但是旧版本IE只支持EOT (Embedded Open Type，嵌入式开放类型)的字体,你可能需要包括一个SVG版本的字体支持旧版本的iPhone和Android浏览器。我们将向您展示如何生成所需的代码。</li> + <li>字体一般都不能自由使用。您必须为他们付费，或者遵循其他许可条件，比如在代码中(或者在您的站点上)提供字体创建者。你不应该在没有适当的授权的情况下偷窃字体。</li> +</ol> + +<div class="note"> +<p><strong>注意：</strong> Web字体作为一种技术从 Internet Explorer 4 开始就得到了的支持！</p> +</div> + +<h2 id="自主学习web字体示例">自主学习:web字体示例</h2> + +<p>记住这一点，让我们从最初的原则构建一个基本的web字体示例。使用嵌入的live示例很难演示这一点，因此，我们希望您按照下面几节中详细介绍的步骤来了解这个过程。</p> + +<p>你应该使用 <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.html">web-font-start.html</a> 和 <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.css">web-font-start.css</a> 文件作为开始添加到你的代码中（又见<a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-start.html">预览版</a>。）现在，在你的电脑上的一个新目录中复制这些文件。在 <code>web-font-start.css</code>文件中，您将找到一些最小的CSS来处理这个示例的基本布局和排版。</p> + +<h3 id="查找字体">查找字体</h3> + +<p>对于本例，我们将使用两种web字体，一种用于标题，另一种用于正文文本。首先，我们需要找到包含字体的字体文件。字体是由字体铸造厂创建的，并且存储在不同的文件格式中。<br> + 通常有三种类型的网站可以获得字体：</p> + +<ul> + <li>免费的字体经销商：这是一个可以下载免费字体的网站(可能还有一些许可条件，比如对字体创建者的信赖)。比如： <a href="https://www.fontsquirrel.com/">Font Squirre</a>，<a href="http://www.dafont.com/">dafont</a> 和 <a href="https://everythingfonts.com/">Everything Fonts</a>。</li> + <li>收费的字体经销商：这是一个收费则字体可用的网站，例如<a href="http://www.fonts.com/">fonts.com</a>或<a href="http://www.myfonts.com/">myfonts.com</a>。您也可以直接从字体铸造厂中购买字体，例如<a href="https://www.linotype.com/">Linotype</a>，<a href="http://www.monotype.com">Monotype</a> 或 <a href="http://www.exljbris.com/">Exljbris</a>。</li> + <li>在线字体服务：这是一个存储和为你提供字体的网站，它使整个过程更容易。更多细节见{{anch("Using an online font service")}}。</li> +</ul> + +<p>让我们找到一些字体！前往<a href="https://www.fontsquirrel.com/">Font Squirrel</a> 并选择两种字体——一种用于标题的有趣的字体(可能是一种不错的显示字体或无衬线字体)，和一种用于段落，稍微不那么华丽，更易于阅读的字体。当您找到每种字体时，按下下载按钮，并将该文件保存在与您先前保存的HTML和CSS文件相同的目录中。无论它们是TTF(True Type Fonts))还是OTF(Open Type字体)都不重要。</p> + +<p>在每种情况下，都要解压字体包(Web字体通常分布在包含字体文件和许可信息的ZIP文件中。)您可能会在包中发现多个字体文件，一些字体是作为一个具有不同变体的家庭分布的，例如，瘦、中、粗体、斜体、斜体等等。对于这个例子，我们只是想让您自己考虑一个单一的字体文件。</p> + +<div class="note"> +<p><strong>注意：</strong> 在右边栏的“查找字体”部分中，您可以单击不同的标记和分类来筛选显示的选项。</p> +</div> + +<h3 id="生成所需代码">生成所需代码</h3> + +<p>现在您需要生成所需的代码(以及字体格式)。对于每种字体，遵循以下步骤：</p> + +<ol> + <li>确保您已经满足了任何许可证的要求，如果您打算在一个商业和/或Web项目中使用它。</li> + <li>前往 Fontsquirrel <a href="https://www.fontsquirrel.com/tools/webfont-generator">Webfont Generator</a>.</li> + <li>使用上传字体按钮上传你的两个字体文件。</li> + <li>勾选复选框，“是的，我上传的字体符合网络嵌入的合法条件。</li> + <li>点击下载你的套件（kit）。</li> +</ol> + +<p>在生成器完成处理之后，您应该得到一个ZIP文件，将它保存在与HTML和CSS相同的目录中。</p> + +<h3 id="在演示中实现代码">在演示中实现代码</h3> + +<p>在这一点上解压您刚刚生成的webfont套件。在解压的目录中，您将看到三个有用的条目：</p> + +<ul> + <li>每个字体的多个版本：（比如 <code>.ttf</code>, <code>.woff</code>, <code>.woff2</code>…… 随着浏览器支持需求的改变，提供的字体将随着时间的推移而不断更新。） 正如上面提到的，跨浏览器支持需要使用多种字体——这是Fontsquirrel的方法，确保你得到了你需要的一切。</li> + <li>每个字体的一个演示HTML文件在你的浏览器中加载，看看在不同的使用环境下字体会是什么样子。</li> + <li>一个 <code>stylesheet.css</code> 文件，它包含了你需要的生成好的 @font-face 代码。</li> +</ul> + +<p>要在演示中实现这些字体，请遵循以下步骤：</p> + +<ol> + <li>将解压缩的目录重命名为简易的目录，比如<code>fonts</code></li> + <li>打开 <code>stylesheet.css</code> 文件，把包含在你的网页中的 <code>@font-face</code>块复制到你的 <code>web-font-start.css</code> 文件—— 你需要把它们放在最上面，在你的CSS之前，因为字体需要导入才能在你的网站上使用。</li> + <li>每个<code>url()</code>函数指向一个我们想要导入到我们的CSS中的字体文件——我们需要确保文件的路径是正确的，因此，在每个路径的开头添加<code>fonts/</code> （必要时进行调整）。</li> + <li>现在，您可以在字体栈中使用这些字体，就像任何web安全或默认的系统字体一样。<br> + 例如： + <pre class="brush: css">font-family: 'zantrokeregular', serif;</pre> + </li> +</ol> + +<p>你应该得到一个演示页面，上面有一些漂亮的字体。因为不同字体的字体大小不同，你可能需要调整大小、间距等，以区分外观和感觉。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12984/web-font-example.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<div class="note"> +<p><strong>注意：</strong>如果对于要让它正常工作您有任何问题，可以自由地将您的版本与我们完成的文件进行比较——见 <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.html">web-font-finished.html</a> 和 <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.css">web-font-finished.css</a> (<a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-finished.html">运行完成的示例</a>)。</p> +</div> + +<h2 id="使用在线字体服务">使用在线字体服务</h2> + +<p>在线字体服务通常会为你存储和服务字体，这样你就不用担心写<code>@font-face</code>代码了，通常只需要在你的网站上插入一两行代码就可以让一切都运行。例子包括<a href="https://typekit.com/">Typekit</a> 和<a href="http://www.typography.com/cloud/welcome/">Cloud.typography</a>。大多数这些服务都是基于订阅的，除了<a href="https://www.google.com/fonts">Google Fonts</a>，这是一个有用的免费服务，特别是对于快速的测试工作和编写演示。</p> + +<p>大多数这些服务都很容易使用，所以我们不会详细地介绍它们。让我们快速浏览一下Google Fonts，这样你就能明白它的意思了。再次的，使用<code>web-font-start.html</code> 和 <code>web-font-start.css</code> a的副本作为你的开始。</p> + +<ol> + <li>前往 <a href="https://www.google.com/fonts">Google Fonts</a>.</li> + <li>使用左边的过滤器来显示你想要选择的字体类型，并选择一些你喜欢的字体。</li> + <li>要选择字体种类，按下按钮旁边的 ⊕ 按钮。</li> + <li>当您选择好字体种类时，按下页面底部的<em>[Number] </em>种类选择。</li> + <li>在生成的屏幕中，首先需要复制所显示的HTML代码行，并将其粘贴到HTML文件的头部。将其置于现有的{{htmlelement("link")}}元素之上，使得字体是导入的，然后在你的CSS中使用它。</li> + <li>然后，您需要将CSS声明复制到您的CSS中，以便将自定义字体应用到您的HTML。</li> +</ol> + +<div class="note"> +<p><strong>注意：</strong>如果你需要对比我们的，你可以在 <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.html">google-font.html</a>和<a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.css">google-font.css</a>找到完整版本的。（<a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/google-font.html">见预览版</a>）</p> +</div> + +<h2 id="关于font-face的更多细节">关于@font-face的更多细节</h2> + +<p>让我们来探索由fontsquirrel为您生成的<code>@font-face</code>语法。这是其中一个块的样子：</p> + +<pre class="brush: css">@font-face { + font-family: 'ciclefina'; + src: url('fonts/cicle_fina-webfont.eot'); + src: url('fonts/cicle_fina-webfont.eot?#iefix') format('embedded-opentype'), + url('fonts/cicle_fina-webfont.woff2') format('woff2'), + url('fonts/cicle_fina-webfont.woff') format('woff'), + url('fonts/cicle_fina-webfont.ttf') format('truetype'), + url('fonts/cicle_fina-webfont.svg#ciclefina') format('svg'); + font-weight: normal; + font-style: normal; +}</pre> + +<p>这被称为"bulletproof @font-face syntax（刀枪不入的@font-face语法）", 这是 Paul Irish早期的一篇文章提及后@font-face开始流行起来 (<a href="http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/">Bulletproof @font-face Syntax</a>。让我们来看看它是怎么做的：</p> + +<ul> + <li><code>font-family</code>：这一行指定了您想要引用的字体的名称。你可以把它作为你喜欢的任何东西，只要你在你的CSS中始终如一地使用它。</li> + <li><code>src</code>：这些行指定要导入到您的CSS(<code>url</code>部分)的字体文件的路径，以及每种字体文件的格式(<code>format</code>部分)。后面的部分不是必要的，但是声明它是很有用的，因为它允许浏览器更快地找到可以使用的字体。可以列出多个声明，用逗号分隔——浏览器会搜索并使用它能找到的第一个——因此，最好是把新的、更好的格式比如WOFF2放在前面，把偏老的，不是那么好的格式像TTF这样的放在后面。唯一的例外是EOT字体——他们首先在旧版本的IE中修复了几个bug，这样它就会尝试使用它找到的第一件东西，即使它不能真正使用字体。</li> + <li>{{cssxref("font-weight")}}/{{cssxref("font-style")}}: 这些行指定字体的粗细，以及它是否斜体。如果您正在导入相同字体的多个粗细，您可以指定它们的粗细/样式，然后使用不同的{{cssxref("font-weight")}}/{{cssxref("font-style")}}来选择它们之间的不同值，而不必调用字体种类不同名称的所有不同成员。Roger Johansson写的 <a href="http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/">@font-face tip: define font-weight and font-style to keep your CSS simple</a> 更详细地说明了该做些什么。</li> +</ul> + +<div class="note"> +<p><strong>注意：</strong>您还可以为您的web字体指定特定的{{cssxref("font-variant")}} 和 {{cssxref("font-stretch")}} )值。在较新的浏览器中，您还可以指定一个{{cssxref("unicode-range")}}值，这是一个您需要使用什么web字体的特定范围的字符——在支持浏览器中，只有指定的字符才会被下载，省去了不必要的下载。Drew McLellan写的<a href="https://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/">Creating Custom Font Stacks with Unicode-Range</a>在如何利用这个问题上提供了一些有用的建议。</p> +</div> + +<h2 id="总结">总结</h2> + +<p>既然您已经完成了我们关于文本样式基础的文章，现在是时候用我们对模块的评估来测试您的理解了，为社区学校的主页进行排版。</p> + +<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}</p> |