couleur

CSS a plusieurs options pour déterminer la couleur des zones de texte et de fond sur une page web. Ces options pour travailler avec la couleur non seulement remplacer similaire en HTML, mais et offrent de nombreuses possibilités nouvelles. Par exemple, une façon traditionnelle pour créer une zone de couleur est d'utiliser la table. Les styles vous permettent d'abandonner cette utilisation de tables offrant un plus simples et plus commodes options pour la gestion des couleurs.

Tableau. 1 répertorie les propriétés des éléments destinés à fixer la couleur.

Tableau. fond 1. Gestion et la couleur du texte
propriété sens description exemple
couleur

couleur

Définir la couleur du texte P {color: # 330000}
background-color couleur
transparent
Couleur de fond BODY {background-color: # 6699FF}
background-image
URL
aucun
papier peint BODY {background-image: url (bg.gif)}
background-repeat répétition
repeat-x
repeat-y
no-repeat
fond d'écran de répétabilité BODY {background-image: url (bg.gif) background-repeat: repeat-y}
background-attachment volute
fixé
fond Prokruchivaemost avec le document BODY {background-image: url (bg.gif) background-attachment: fixed}
background-position intérêt
Pixels
haut
centre
bas
gauche
droit
La position initiale de l'image d'arrière-plan BODY {background-position: en haut à gauche}

Définissez la couleur

Couleur L'utilisation de CSS, vous pouvez spécifier trois façons différentes.

1. Comme son nom

Browsers supportent un peu de couleur dans leur nom (exemple 1).

Exemple 1: Réglage de la couleur de l'élément par son nom

valide HTML
valide 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">
<Titre> Couleur </ title>
<Style type = "text / css">
P {
couleur: bleu marine; / * Couleur du texte * /
background-color: jaune; / * La couleur de fond * /
}
</ Style>
</ Head>
<Body>
<P> Lorem ipsum dolor sit amet ... </ p>
</ Body>
</ Html>

2. En valeur hexadécimale

La couleur peut être réglée dans sa valeur hexadécimale, comme dans le code HTML ordinaire (exemple 2).

Exemple 2: Pour définir la couleur de la valeur hexadécimale de l'élément

valide HTML
valide 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">
<Titre> Couleur </ 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>

Il est également permis d'utiliser un raccourci, comme # fc0. Cela signifie que chaque caractère est dupliqué à la fin nous obtenons # FFCC00.

3. Utilisez RGB

Vous pouvez définir les valeurs de couleur à l'aide de la composante rouge, verte et bleue en notation décimale. La valeur de chacune des trois couleurs peut prendre des valeurs de 0 à 255. En outre, la couleur peut être spécifiée en pourcentage (exemple 3).

Exemple 3. Réglez la couleur de la valeur hexadécimale de l'élément

valide HTML
valide 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">
<Titre> Couleur </ title>
<Style type = "text / css">
P {
couleur: RGB (249, 231, 16);
background-color: RGB (85%, 24%, 5%);
}
</ Style>
</ Head>
<Body>
<P> Lorem ipsum dolor sit amet ... </ p>
</ Body>
</ Html>

Réglage de la couleur d'arrière-plan et de l'image d'arrière-plan

La couleur de fond est déterminé par le réglage de la couleur d' arrière plan, et l'image qui est utilisé comme un arrière - plan, est spécifié background-image par. La valeur par défaut pour la couleur de fond est transparent, qui établit un fond transparent. Pour définir l'image d'arrière-plan en utilisant une URL absolue ou relative du fichier. Il est recommandé de définir à la fois une image de fond et une couleur de fond qui sera utilisé en cas d'indisponibilité du fichier image.

Exemple 4: La couleur de fond et de l'image d'arrière-plan

valide HTML
valide 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">
<Titre> Couleur de fond </ title>
<Style type = "text / css">
BODY {
background-color: # 98560F; / * La couleur de fond * /
background-image: url ( '/ images / bg.gif'); / * Le chemin vers l'image d'arrière - plan * /
}
</ Style>
</ Head>
<Body>
<P> Lorem ipsum dolor sit amet ... </ p>
</ Body>
</ Html>

Si vous réglez l'image d'arrière - plan, la propriété background-repeat détermine la fréquence et la méthode de la façon de le faire. Les valeurs valides sont répétition (répétable verticalement et horizontalement), répétez-x (horizontal), repeat-y (vertical) et le no-repeat (un motif uniquement, sans répétition) comme indiqué dans l' exemple 5.

Exemple 5: Fond d'écran Reproductibilité

valide HTML
valide 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">
<Titre> Contexte </ title>
<Style type = "text / css">
BODY {
background-image: url ( '/ images / bg.gif'); / * Le chemin vers l'image d'arrière - plan * /
background-repeat: repeat-y; / * Background Répétition Vertical * /
}
</ Style>
</ Head>
<Body>
<P> Lorem ipsum dolor sit amet ... </ p>
</ Body>
</ Html>

Dans cet exemple, une image d'arrière-plan est répété verticalement.

La position est déterminée par le paramètre background-position arrière. Il a deux significations, la position horizontale (peut être - droite, gauche, centre) et vertical (peut - être - en haut, en bas, au centre). La position peut également être spécifié en pourcentage ou d'autres unités de pixel absolues (exemple 6).

Exemple 6 Situation Contexte

valide HTML
valide 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">
<Titre> Contexte </ title>
<Style type = "text / css">
BODY {
background-attachment: fixed; / * Correction d' un arrière - plan * /
background-image: url ( 'mybg.gif'); / * Le chemin vers l'image d'arrière - plan * /
background-repeat: no-repeat; / * Supprimer répéter fond * /
background-position: en bas à droite; / * * La position de l'arrière - plan /
}
</ Style>
</ Head>
<Body>
<P> Lorem ipsum dolor sit amet ... </ p>
</ Body>
</ Html>

Dans cet exemple, l'arrière-plan sera placé dans le coin inférieur droit de la page. Si vous souhaitez déterminer l'image dans le coin supérieur gauche, il est nécessaire de définir comme suit: background-position: en haut à gauche.

Réglage background-attachment: corrections fixes l'arrière - plan, de sorte qu'il reste stationnaire lors du défilement du contenu de la fenêtre du navigateur.

© Copyright Politique www.htmlbook.ru