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.
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
<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
<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
<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
<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é
<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
<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
Commentaires
Commentant, gardez à l' esprit que le contenu et le ton de vos messages peuvent blesser les sentiments des gens réels, montrer du respect et de la tolérance à ses interlocuteurs, même si vous ne partagez pas leur avis, votre comportement en termes de liberté d'expression et de l' anonymat offert par Internet, est en train de changer non seulement virtuel, mais dans le monde réel. Tous les commentaires sont cachés à l'index, le contrôle anti - spam.