基本的 CSS 理解

你已经在这个模块中了解到了很多内容,所以当你达到这个模块的最后一篇文章的时候,感觉一定非常不错吧!在你继续之前的最后一步,就是完成对于这个模块的测验。本次测验涉及到几个相关的练习,你必须按顺序完成,这样你才能设计出最终的成品:一张名片/游戏玩家卡片/社交媒体的简介。

前提: 在尝试这个测验之前,你应该已经完成了这个模块中所有文章的学习。
目标: 来测试对 CSS 理论、语法、功能性的基本理解。

起点

在开始测验之前,你应该:

  • HTML file for the exercise, 和 associated image file,拷贝到你的本地环境中。如果你想使用自己的图片文件以及把你的名字写进资料里面的话,也没有问题,不过需要保证你提供的图像是正方形的。
  • 下载 CSS resources text file 到你的本地环境,这个文件包含了一组原始选择器和规则集。你需要学习并将他们组合,这是测验的一部分。

备注: 另外,你可以使用一个网站比如 JSBinGlitch 来做你的测验。你可以复制 HTML 和 CSS 到其中一个在线编辑器中,以及使用这个 this URL 来让 <img> 显示图片。如果你使用的在线编辑器无法让你链接 CSS 文件 (没有单独的 CSS 面板),你也可以将 CSS 直接放入<style> 元素中。

项目概要

我们已经为你提供了一些原始的 HTML 和一张图片,然后需要编写必要的 CSS 来让其成为一个漂亮的网上小名片,可能大小是游戏玩家卡片或社交媒体简介的两倍。下面的段落描述了你需要做的事情。

基本设置:

  • 首先,在你放 HTML 文件和图像文件的目录下,创建一个新的文件,把它命名为类似style.css
  • 通过 <link> 元素来将你的 CSS 链接到 HTML 文件中。
  • 我们为你提供的 CSS 资源文本文件中,前两项规则集是我们设置好的,你可以直接使用,所以将他们复制粘贴到你的新 CSS 文件的顶部。同时也可以将这个作为测验,用来确认你是否正确链接了你的 CSS 文件到 HTML 中。
  • 在以上的两条规则中添加一条 CSS 注释,注释中要包含一些文本来表明这是整体页面的一般样式。你可以在 CSS 文件底部添加 3 个或以上的注释,来明确地表明该样式是应用到卡片的容器,应用到标题和页脚的样式,和名片主要内容的样式。从现在开始,随后在样式表添加的样式都应该有组织地放置在合适的地方。

关注我们为你提供的选择器和规则集:

  • 接下来,我们希望你观察四个选择器,并计算每一个的专用性。将它们写在稍后可以找到的地方,例如在 CSS 顶部的注释中。
  • 现在是时候把正确的选择器放在正确的规则集上了!你的 CSS 资源中有四对选择器和规则集需要匹配,现在就开始匹配,并将它们添加到你的 CSS 文件。你需要:
    • 为整体卡片的容器提供一个固定的宽/高,背景颜色,边框,以及边框圆角等等。
    • 为 header 提供一个渐变的背景颜色,从更暗到更亮,加上圆角,配合在卡片容器上设置的圆角。
    • 为 footer 提供一个渐变的背景颜色,从更亮到更暗,加上圆角,配合在卡片容器上设置的圆角。
    • 将图像向右浮动,使其粘贴在名片主要内容的右边,然后把它的 max-height 设置为 100% (一个聪明的技巧,来确保它将放大/缩小,与父容器保持同样的高度,不管它变成什么高度。)
  • 注意!提供的规则集中有两个错误。使用你知道的任何技术找到这些错误并修复,然后再继续。

你需要写的新规则:

  • 编写一个同时面向 card head 和 card footer 的规则集,使它们计算的总高度为 50px(包括 30px 的内容高度和 10px 的 padding)但用 em 来表示。
  • 浏览器会为<h2><p>元素应用默认的 margin,这会影响我们的设计,所以编写一个规则集:margin 设置为 0。
  • 为了阻止图像溢出名片的主要内容 ( <article> 元素),我们需要给它设置一个明确的高度。设置 <article>的高度为 120px,但是使用 em来表示。还要给它一个半透明黑色的背景颜色,产生一个稍暗一点的阴影,能让红色的背景稍微透过。
  • 编写一个规则集,使 <h2> 有效的字体大小为 20px (使用 em表达) 以及一个适当的行高将其放置在标题的内容框的中央。回想起来,内容框高度应该是 30px,你所有需要的数字都已经给你了,所以可以计算出行高。
  • 为页脚中的 <p> 编写一个规则集,使它的有效字体大小为 15px (使用 em表达) 以及一个适当的行高将其放置在页面的内容框的中央。回想起来,内容框高度应该是 30px,你所有需要的数字都已经给你了,所以可以计算出行高。
  • 最为最后一步,为 <article> 中的段落设置一个合适的 padding 值,让它和 <h2> 以及页脚的段落左边缘对齐,并将其颜色设置得便于阅读。

备注: 记住第二条规则集会将 font-size: 10px; 设置在 <html> 元素上 — 这意味着 <html> 的任何后代中,一个 em 将会等于 10px 而不是默认的 16px。(这是当然的,如果在层次结构中,有不同的 font-size 设置于其上,问题中的后代没有任何的祖先位于 em 元素和 <html> 之间。这可能会影响你所需要的值,尽管在这个简单的示例中,这不是问题。)

其他事情要考虑:

  • 如果你编写的 CSS 有比较好的可读性,并在每行上单独声明,你将得到奖励。
  • 你应该在所有规则的选择器中都用 .card 作为开头,这样的好处是:如果将名片放在带有其他内容的页面的情况下,这些规则不会干扰其他元素的样式。

注意和提示

  • 你不需要以任何方式编辑 HTML,除了将 CSS 应用于你的 HTML。
  • 当使用 em 值代表一些你需要的像素长度的时候,想想 (<html>) 元素的基本字体大小,以及需要乘以什么才能获得所需的值。这将给你 em 的值,至少在这样一个简单的情况下。

示例

完成的设计应如下图所示:

A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image.

评估

如果你将此评估作为有组织的课程的一部分,你应该能够将你的工作交给你的老师/导师进行打分。如果你是自学的,那么你可以通过询问 Learning Area Discourse thread, 或在 #mdn的 IRC 频道 Mozilla IRC 中轻松获得打分指南。首先尝试练习 - 作弊学不到什么!