基本的 CSS 理解

创作时间:

作者:

@小白创作中心

基本的 CSS 理解

引用

来源

https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Styling_basics/Fundamental_CSS_comprehension

在学习了CSS基础知识后，让我们通过一个实际项目来检验你的掌握程度。本测验将帮助你巩固对CSS理论、语法和功能性的理解。

前提条件

在尝试这个测验之前，你应该已经完成了这个模块中所有文章的学习。

目标

测试对CSS理论、语法、功能性的基本理解。

开始测验前的准备

你可以使用一个网站比如JSBin或Glitch来做你的测验。你可以复制HTML和CSS到其中一个在线编辑器中，以及使用这个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作为开头，这样的好处是：如果将名片放在带有其他内容的页面的情况下，这些规则不会干扰其他元素的样式。
你不需要以任何方式
当使用em值代表一些你需要的像素长度的时候，想想（<html>）元素的基本字体大小，以及需要乘以什么才能获得所需的值。这将给你em的值，至少在这样一个简单的情况下。