Colour

CSS has several options for determining the color of text and background areas on a web page. These options for working with color not only replace similar in plain HTML, but and provide many new opportunities. For example, a traditional way to create a color area is to use the table. Styles allow you to abandon this use of tables offering a simpler and more convenient options for color management.

Table. 1 lists the properties of the elements intended to set the color.

Table. 1. Management background and text color
Property Value Description Example
color

Colour

Set the text color P {color: # 330000}
background-color Colour
transparent
Background color BODY {background-color: # 6699FF}
background-image
URL
none
wallpaper BODY {background-image: url (bg.gif)}
background-repeat repeat
repeat-x
repeat-y
no-repeat
Repeatability wallpaper BODY {background-image: url (bg.gif) background-repeat: repeat-y}
background-attachment scroll
fixed
Prokruchivaemost background with the document BODY {background-image: url (bg.gif) background-attachment: fixed}
background-position interest
Pixels
top
center
bottom
left
right
The initial position of the background image BODY {background-position: left top}

Set the color

Color Using CSS, you can specify three different ways.

1. As its name

Browsers support some color in their name (Example 1).

Example 1: Setting the color of the item by its name

valid HTML
valid CSS
<DOCTYPE HTML PUBLIC! "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Title> Color </ title>
<Style type = "text / css">
P {
color: navy; /* Text color */
background-color: yellow; /* Background color */
}
</ Style>
</ Head>
<Body>
<P> Lorem ipsum dolor sit amet ... </ p>
</ Body>
</ Html>

2. In hexadecimal value

The color can be set in its hexadecimal value, as in the ordinary HTML (example 2).

Example 2: To set the color for the hexadecimal value of the element

valid HTML
valid CSS
<DOCTYPE HTML PUBLIC! "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Title> Color </ title>
<Style type = "text / css">
H1 {color: # fc0; }
P {
color: # F9E71A;
background-color: # 98560F;
}
</ Style>
</ Head>
<Body>
<H1> Lorem ipsum </ h1>
<P> Lorem ipsum dolor sit amet ... </ p>
</ Body>
</ Html>

It is also permissible to use shorthand, like # fc0. It means that each character is duplicated in the end we get # ffcc00.

3. Use RGB

You can define the color values ​​using the red, green and blue component in decimal notation. The value of each of the three colors can take values ​​from 0 to 255. Also, the color can be specified as a percentage (Example 3).

Example 3. Set the color for the hexadecimal value of the element

valid HTML
valid CSS
<DOCTYPE HTML PUBLIC! "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Title> Color </ title>
<Style type = "text / css">
P {
color: RGB (249, 231, 16);
background-color: RGB (85%, 24%, 5%);
}
</ Style>
</ Head>
<Body>
<P> Lorem ipsum dolor sit amet ... </ p>
</ Body>
</ Html>

Setting the background color and background image

The background color is determined by the setting of background-color, and the image that is used as a background, is specified by background-image. The default value for the background color is transparent, which establishes a transparent background. To set the background image using an absolute or relative URL of the file. It is recommended to set both a background image and a background color that will be used in case of unavailability of the image file.

Example 4: The background color and background image

valid HTML
valid CSS
<DOCTYPE HTML PUBLIC! "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Title> Background Color </ title>
<Style type = "text / css">
BODY {
background-color: # 98560F; /* Background color */
background-image: url ( '/ images / bg.gif'); / * The path to the background image * /
}
</ Style>
</ Head>
<Body>
<P> Lorem ipsum dolor sit amet ... </ p>
</ Body>
</ Html>

If you set the background image, the background-repeat property determines the frequency and method of how to do it. Valid values are repeat (repeatable vertically and horizontally), repeat-x (horizontal), repeat-y (vertical) and the no-repeat (one pattern only, without repetition) as shown in Example 5.

Example 5: Reproducibility wallpaper

valid HTML
valid CSS
<DOCTYPE HTML PUBLIC! "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Title> Background </ title>
<Style type = "text / css">
BODY {
background-image: url ( '/ images / bg.gif'); / * The path to the background image * /
background-repeat: repeat-y; / * Repeating background Vertical * /
}
</ Style>
</ Head>
<Body>
<P> Lorem ipsum dolor sit amet ... </ p>
</ Body>
</ Html>

In this example, a background image is repeated vertically.

The position is determined by the background setting background-position. It has two meanings, the horizontal position (can be - right, left, center) and vertical (maybe - top, bottom, center). The position can also be specified in percentages or other absolute pixel units (Example 6).

Example 6 Situation Background

valid HTML
valid CSS
<DOCTYPE HTML PUBLIC! "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Title> Background </ title>
<Style type = "text / css">
BODY {
background-attachment: fixed; / * Fix a background * /
background-image: url ( 'mybg.gif'); / * The path to the background image * /
background-repeat: no-repeat; / * Discard repeating background * /
background-position: right bottom; / * * The position of the background /
}
</ Style>
</ Head>
<Body>
<P> Lorem ipsum dolor sit amet ... </ p>
</ Body>
</ Html>

In this example, the background will be placed in the lower right corner of the page. If you want to determine the picture in the upper left corner, it is necessary to set as follows: background-position: left top.

Setting background-attachment: fixed fixes the background, so that it remains stationary when scrolling the contents of the browser window.

© Policy Copyright www.htmlbook.ru