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.
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
<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
<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
<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
<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
<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
<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
Comments
Commenting, keep in mind that the content and the tone of your messages can hurt the feelings of real people, show respect and tolerance to his interlocutors, even if you do not share their opinion, your behavior in terms of freedom of speech and anonymity offered by the Internet, is changing not only virtual, but real world. All comments are hidden from the index, spam control.