css 示例_CSS示例测验

css 示例

介绍 (Introduction)

There are six questions in this quiz, which you have 15 minutes to complete. It is worth 10% of your final mark. There are 17 total points achievable. Code written must be XHTML 1.0 Strict and valid CSS in order to gain marks. Code that would not work in the browser will not gain any marks, but partial marks are possible for some questions, and are indicated where applicable.

此测验中有六个问题，您需要15分钟才能完成。 这是您最终分数的10％。 总共有17分。 编写的代码必须是XHTML 1.0 Strict且有效CSS才能获得标记。 在浏览器中不起作用的代码不会获得任何标记 ，但是某些问题可能会出现部分标记，并在适用的情况下进行显示。

For full recreation of quiz conditions, it is suggested that you print out this page and write your answers on the page. The quiz key will print out separately.

为了完全恢复测验条件，建议您打印出此页面并在页面上写下答案。 测验键将单独打印出来。

问题1 (Question 1)

In CSS, what color is represented by the following hexadecimal code: #0f0 (2 marks)

在CSS中，以下十六进制代码表示什么颜色： #0f0 (2个标记)

---

---

问题2 (Question 2)

Name three different methods for creating a style on a web page. (1 mark each, for a possible total of 3 marks)

列举三种在网页上创建样式的不同方法。 (每个标记1个，可能总共3个标记)

---

---

---

---

---

---

问题3 (Question 3)

A paragraph is given a font size of 1.25em. Expressed as a percentage, how much larger will paragraph text in this style be, compared to paragraphs unaffected by this rule? (2 marks)

段落的字体大小为1.25em 。 用百分比表示，与不受此规则影响的段落相比，这种样式的段落文本要大多少？ (2分)

---

---

问题4 (Question 4)

You wish all the paragraphs in your website to appear italicized. While you could add <em> to the markup for each paragraph, doing so would be time-consuming, inefficient, and confuse presentation with data, Instead, you decide to create a stylesheet to control the appearance of the paragraphs. Write the style for the paragraphs below, including the appropriate selector (2 marks).

您希望网站中的所有段落都显示为斜体。 尽管您可以为每个段落的标记添加<em> ，但是这样做会很耗时，效率低下，并且会使显示与数据混淆，相反，您决定创建样式表来控制段落的外观。 在下面的段落中编写样式，包括适当的选择器(2个标记)。

---

---

问题5 (Question 5)

You wish to have an image named hog.gif placed in a paragraph on a page. The paragraph text needs to be wrapped around the left side of the image, which is 100 pixels high and 250 pixels wide. There should be a two pixel black border on the image.

您希望在页面的段落中放置一个名为hog.gif的图像。 段落文本需要环绕在图像的左侧，该图像的高度为100像素，宽度为250像素。 图像上应该有两个像素的黑色边框。

Write the code to achieve this below, including the paragraph element. (6 marks)

在下面编写代码以实现此目的，包括段落元素。 (6分)

---

---

---

---

问题6 (Question 6)

What is the CSS selector to adjust the appearance of links when the mouse is over them? (2 marks)

鼠标悬停在链接上时，用于调整链接外观CSS选择器是什么？ (2分)

---

---

答案： (Answers:)

Question 1 问题1

more info 更多信息

Question 2 问题2

more info 更多信息

Question 3 问题3

more info 更多信息

Question 4 问题4

p { font-style: italic; } more info

p { font-style: italic; } p { font-style: italic; } 更多信息

Question 5 问题5

<p><img src=”hog.gif” alt=”Hog” style=”width: 250px; height: 100px; float: right; border: 2px solid black;” />Paragraph content</p>. Marking: Starting from a base score of zero: add 1 mark for correct use of the <p> tag and appropriate content, 1 mark for correct use of the <img> tag with the correct filename and appropriate use of alt, 1 mark for correct width and height, 2 marks for correct use of float, 1 mark for correct use of border. (The style attribute must be written correctly in order to gain any marks for CSS used). more info

<p><img src=”hog.gif” alt=”Hog” style=”width: 250px; height: 100px; float: right; border: 2px solid black;” />Paragraph content</p> <p><img src=”hog.gif” alt=”Hog” style=”width: 250px; height: 100px; float: right; border: 2px solid black;” />Paragraph content</p> 。 标记：从零的基本分数开始：为正确使用 <p>标记和适当的内容添加1标记，为正确使用 <img>标记和正确的文件名并适当使用 alt标记1标记，正确的 width和 height ，2个标记用于正确使用 float ，1个标记用于正确使用 border 。 (必须正确编写style属性，才能获得所用CSS的任何标记)。 更多信息

Question 6 问题6

a:hover a:hover

翻译自: https://thenewcode.com/228/CSS-Example-Quiz

css 示例