Fundamental CSS comprehension

初始點(diǎn)

要開始評估，您應(yīng)該:

• 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.

工程概要

你已經(jīng)被提供了一些原始的HTML和圖像，并需要寫必要的CSS，將這種風(fēng)格成一個漂亮的小在線名片，這可能作為一個玩家卡或社交媒體資料。 以下部分描述了您需要做什么。

基本設(shè)置:

• 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.

處理所提供的選擇器和規(guī)則集:

• 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.

您需要編寫的新規(guī)則集:

• 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.

例子

以下屏幕截圖顯示了完成的設(shè)計應(yīng)該是什么樣子的示例:

評定

如果您作為有組織課程的一部分參加此評估，您應(yīng)該能夠?qū)⒛墓ぷ鹘唤o您的老師/導(dǎo)師進(jìn)行標(biāo)記。 如果您是自學(xué)習(xí)的，那么您可以輕松地通過 dev-mdc 郵件列表，或者在 #mdn IRC頻道中。 org / IRC"class ="external"> Mozilla IRC 。 嘗試練習(xí)第一 - 沒有什么可以通過作弊獲得！