Fundamental CSS comprehension

先决条件:	在尝试此评估之前，您应该已经完成了本单元中的所有文章。
目的:	测试基本CSS理论，语法和力学的理解。

初始点

要开始评估，您应该:

• Go and grab the HTML file for the exercise, and the associated image file, and save them in a new directory on your local computer. If you want to use your own image file and fill your own name in, you are welcome to — just make sure the image is square.
• Grab the CSS resources text file — this contains a set of raw selectors and rulesets that you'll need to study and combine to answer part of this assessment.

工程概要

你已经被提供了一些原始的HTML和图像，并需要写必要的CSS，将这种风格成一个漂亮的小在线名片，这可能作为一个玩家卡或社交媒体资料。 以下部分描述了您需要做什么。

基本设置:

• First of all, create a new file in the same directory as your HTML and image files. Call it something really imaginative like style.css.
• Link your CSS to your HTML file via a <link> element.
• The first two rulesets in the CSS resource file are yours, for FREE! After you've finished rejoicing at your good fortune, copy and paste them into the top of your new CSS file. Use them as a test to make sure your CSS is properly applied to your HTML.
• Above the two rules, add a CSS comment with some text inside it to indicate that this is a set of general styles for the overall page. "General page styles" would do. Also add three more comments at the bottom of the CSS file to indicate styles specific to the setup of the card container, styles specific to the header and footer, and styles specific to the main business card contents. From now on, subsequent styles added to the stylesheet should be organized in an appropriate place.

处理所提供的选择器和规则集:

• Next up, we'd like you to look at the four selectors, and calculate the specificity for each one. Write these down somewhere where they can be found later on, such as in a comment at the top of your CSS.
• Now it's time to put the right selector on the right rule set! You've got four pairs of selector and ruleset to match in your CSS resources. Do this now, and add them to you CSS file. You need to:
  • Give the main card container a fixed width/height, solid background color, border, and border-radius (rounded corners!), amongst other things.
  • Give the header a background gradient that goes from darker to lighter, plus rounded corners that fit in with the rounded corners set on the main card container.
  • Give the footer a background gradient that goes from lighter to darker, plus rounded corners that fit in with the rounded corners set on the main card container.
  • Float the image to the right so that it sticks to the right hand side of the main business card contents, and give it a max-height of 100% (a clever trick that ensures that it will grow/shrink to stay the same height as its parent container, regardless of what height it becomes.)
• Beware! There are two errors in the provided rulesets. Using any technique that you know, track these down and fix them before moving on.

您需要编写的新规则集:

• Write a ruleset that targets both the card header, and card footer, giving them both a total height of 50px, which includes content height of 30px and padding of 10px on top and bottom. But express it in ems.
• The default margin applied to the <h2> and <p> elements by the browser will interfere with our design, so write a rule that targets all these elements and sets their margin to 0.
• To stop the image from spilling out of the main business card content (the <article> element), we need to give it a specific height. Set the <article>'s height to 120px, expressed in ems. Also give it a background color of semi-transparent black, resulting in a slightly darker shade that lets the background red color shine through a bit too.
• Write a ruleset that gives the <h2> an effective font size of 20px (but expressed in ems) and an appropriate line height to place it in the center of the header's content box. Recall from earlier that the content box height should be 30px — this gives you all the numbers you need to calculate the line height.
• Write a ruleset that gives the <p> inside the footer an effective font size of 15px (but expressed in ems) and an appropriate line height to place it in the center of the footer's content box. Recall from earlier that the content box height should be 30px — this gives you all the numbers you need to calculate the line height.
• As a last little touch, give the paragraph inside the <article> an appropriate padding value so that its left edge lines up with the <h2> and footer paragraph, and set its color to be fairly light so it is easy to read.

其他事情要考虑:

• You'll get bonus marks if you write your CSS for maximum readability, with a separate declaration on each line.
• You should include .card at the start of the selector chain in all your rules, so that these rules wouldn't interfere with the styling of any other elements if the business card were to be put on a page with a load of other content.

提示和提示

• You don't need to edit the HTML in any way, except to apply the CSS to your HTML.
• When trying to work out the em value you need to represent a certain pixel length, think about what base font size the root (<html>) element has, and what it needs to be multiplied by to get the desired value. That'll give you your em value, at least in a simple case like this.

例子

以下屏幕截图显示了完成的设计应该是什么样子的示例:

评定

如果您作为有组织课程的一部分参加此评估，您应该能够将您的工作交给您的老师/导师进行标记。 如果您是自学习的，那么您可以轻松地通过 dev-mdc 邮件列表，或者在 #mdn IRC频道中。 org / IRC"class ="external"> Mozilla IRC 。 尝试练习第一 - 没有什么可以通过作弊获得！