aboutsummaryrefslogtreecommitdiff
path: root/files/zh-cn/learn/css/first_steps/using_your_new_knowledge
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:40:17 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:40:17 -0500
commit33058f2b292b3a581333bdfb21b8f671898c5060 (patch)
tree51c3e392513ec574331b2d3f85c394445ea803c6 /files/zh-cn/learn/css/first_steps/using_your_new_knowledge
parent8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff)
downloadtranslated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz
translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2
translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip
initial commit
Diffstat (limited to 'files/zh-cn/learn/css/first_steps/using_your_new_knowledge')
-rw-r--r--files/zh-cn/learn/css/first_steps/using_your_new_knowledge/index.html104
1 files changed, 104 insertions, 0 deletions
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>