CSS颜色相关总结

原文地址：CSS颜色相关总结

Introduction

总结CSS中颜色的使用方法，达到需要的效果。

Requirement

Copy your pex3.html file (from your previous practice exercise) into a file named pex4.html. Alternatively, your pex4.html file may be a revised /improved version of pex3.html, and/or also you could also add/eliminate content. You should keep in your file at least one image with figure caption and at least one table (with the contents as before).

1. You should style this file with CSS, by creating an external CSS file (name it stylePex4.css), and then linking the CSS file from the HTML file. (Place the style file in the same folder as the html file; the linking from the HTML file should be RELATIVE.) Include comments in both of your files, at the top of the file, indicating the name of the other file (thus indicating the connection between these two files), your name and date.

2. Include at least one CSS rule (and corresponding HTML elements and/or attributes as needed in the HTML file) , so that the styling effects are visible in:

   • Several or all instances of the same element in the whole document (for example, several paragraphs)
   • To make this styling visible you may use different colors for text or for background, you may style borders in different ways and/or style text in different sizes or other visible font variations.

3. Include at least one CSS rule (and corresponding HTML elements and/or attributes as needed in the HTML file) , so that you use a different kind of selector than the previous item, and the styling effects are visible in:

   • One unique element
4. Include at least one CSS rule (and corresponding HTML elements and/or attributes as needed in the HTML file) , so that you use a different kind of selector than the previous two items, the selector is some kind of descendant selector, and the styling effect is visible in one or more html elements
5. Subdivide your HTML contents in at least three different areas . The areas may coincide with sections but not necessarily. You may use the <div> element as well. Provide a different background to each area.

6. One of the three different backgrounds (as described in the previous item) should include an image. The image should be placed in the images subfolder and LINKED RELATIVELY from the css file. Take into account the various examples provided in the W3Schools Background property tutorials.

   • NOTE: Make sure that the looks of your page is minimally reasonable. For example, images that are in figures (which you should have in your html file as required at the top of this exercise) should not conflict/overlap with images in the background. The background should be such that the contents are easy to read. You may also incorporate margins, but margins are NOT required for this practice exercise.
7. Create a section (consider the element <section>) titled with a heading "Here we play with fonts" (or something to that avail). In that section, include at least three paragraphs. Each paragraph should have different font styling. Change several font properties. (Check W3 schools for fonts)

8. Create a section titled "Numeric systems and Color Codes". In this section include the following list (and the table (or list) described in the next item)

   • The first list will include the following two equalities:
   • 1010010110110 (2 = ? (16
   • 7CDAF5(16 = ?(2
   • NOTE: You need to do the conversion by calculating the mysterious numbers in the bases indicated, and display the correct value. Subscripts should be rendered in the webpage as such.

9. Next (in the same section "Numeric systems and Color Codes"), include a table/list with three (3) color names, with the corresponding code in hexadecimal, in binary, and as rgb. You should color each element in the list with that color. The following is an example, but you should use OTHER COLORS

   • Red FF 00 00 1111 1111 0000 0000 0000 0000 rgb(255,0,0)
   • Dark Green 00 64 00 0000 0000 0110 0100 0000 0000 rgb(0,100,0)
   • BlueViolet 8A 2B E2 1000 1010 0010 1011 1110 0010 rgb(138,43,226)

10. Choose one of the colors from the list in the previous item and define a new color by adding or reducing some amount of red. Include a new row/item in the table/list with this new color, and name it with the original color name and then +red (or -red depending on whether you added or reduced red). The following is an example, you should create another color:

    • Dark Green + red EE 64 00 1110 1110 0110 0100 0000 0000 rgb(238,100,0)
11. In a footer include your information, including your name with a copyright symbol, and the reference to the sources of all pictures you use in your page. NOTE: Incorporate pictures that are free to use or your own pictures; you do not have to pay to use pictures for this course.
12. Validate both your HTML and your CSS files. Clear both errors and warnings.

Upload to the Server AND Submit URL's in Canvas

You will need to upload several files into the server: the HTML, CSS and any pictures that you use. Upload images in the images subfolder.

Similarly to the previous practice exercises, you should provide, in Canvas, the URL to access, in this case, only one file: pex4.html. The other files are linked from the pex4.html file, therefore you should not include URL's to access them in Canvas.

(本文出自csprojectedu.com，转载请注明出处)