CSS 技能测试：基本的 CSS 理解

发表于
在 MDN 文档学习 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> 以及页脚的段落左边缘对齐，并将其颜色设置得便于阅读。

HTML代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Fundamental CSS comprehension</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>

  <section class="card">
    <header>
      <h2>Chris Mills</h2>
    </header>
    <article>
      <img src="chris.jpg" alt="A picture of Chris - a man with glasses, a beard, and a silly wooly hat">
      <p>50 My Street<br>
         The Town<br>
         Gray Peach<br>
         UK<br>
         ZO50 1MU<br>
        <strong>Tel</strong>: 01234 567 890<br>
        <strong>Mail</strong>: chris@nothere.com</p>
    </article>
    <footer>
      <p>Editing, writing, and web development services</p>
    </footer>
  </section>

  </body>
</html>

CSS 代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
/* General Styles */
body {
    margin: 0;
}
  
html {
    font-family: 'Helvetica neue', Arial, 'sans serif';
    font-size: 10px;
    background-color: #ccc;
}

/* Card Styles */
.card {
    width: 35em;
    height: 22em;
    margin: 5em auto;
    background-color: red;
    border: 0.2em solid black;
    border-radius: 1.5em;
}
/* Header and Footer */
.card header {
    background-image: linear-gradient(to bottom,rgba(0,0,0,0.1), rgba(0,0,0,0));
    border-radius: 1.5em 1.5em 0 0;
}
.card footer {
    background-image: linear-gradient(to bottom,rgba(0,0,0,0), rgba(0,0,0,0.1));
    border-radius: 0 0 1.5em 1.5em;
}
.card header,.card footer {
    height: 3em;
    padding: 1em;
}
/* Card Details */
.card article img {
    max-height: 100%;
    float: right;
}
.card h2, .card p {
    margin: 0;
}
.card article {
    height: 12em;
    background-color: rgb(0,0,0,0.3);
}
.card h2 {
    font-size: 2em;
    line-height: 1.5em;
}
.card footer p {
    font-size: 1.5em;
    line-height: 2em;
}
.card article p {
    padding: 1em;
    color: white;
    line-height: 1.4em;
}