Learn how to use color in CSS in Web page making

Source: Internet
Author: User
css| Web page

Because of the color of the Web page is wonderful, then how do we use CSS to deal with color?

CSS has 1677216 colors for you to dispose of, you can use the name, RGB (red-green-blue) value or hexadecimal code (hex) value to represent.

Reddish red
Identical to
RGB (255,0,0)
Identical to
RGB (100%,0%,0%)
Identical to
#ff0000
Identical to
#f00
There are 16 valid predefined color names. They are: Aqua (Water-green), Black (dark), Blue (blue), fuchsia (purple), gray (Gray), green (green), lime (light light), maroon (brown), Navy (dark blue), olive (olive), purple (purple), Red, silver (silver), teal (dark Cyan), White (Bai) and yellow (yellow).

Transparent transparent is also a legitimate value.

Of the three values of RGB from 0 to 255, 0 is the lowest order (if there is no red), and 255 is the highest order (e.g. all red). These values can also be percentages.

The hexadecimal hexadecimal (known as "Sexadecimal" and the more correct usage) is a 16-bit system. A decimal system is commonly used in our daily life (based on 10, from 0 to 9), but hexadecimal has 16 digits, from 0 to F.
Hexadecimal in CSS is defined with a half-width English number #, followed by 3 or 6 digits. Basically, 3-bit is a 6-bit compressed version (#f00就是 #ff0000, #c96就是 #cc9966, etc.). The 3-bit version is easier to interpret (the first number, like the first value of RGB, is red, the second green, needless to say, the third is blue), but the 6-bit version gives you more precise control over the color.

foreground and background colors

Colors can be used with color and background-color (note that this must be used in American English rather than in colour).
The following shows a CSS with text with a blue background and a yellow foreground:

H1 {
Color:yellow;
Background-color:blue;
}
These colors are a bit rough, so you can further refine the CSS code to make the text look cool:

Body {
Font-size:0.8em;
Color:navy;
}
H1 {
Color: #ffc;
Background-color: #009;
}
Save the CSS document, and then refresh the browser. You can see that the first level title (h1 element) has become a process color between yellow and blue.

You can apply color and Background-color attributes to most HTML elements, including the body, which can change the color of everything on the entire page.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.