Réussir son site web avec XHTML et CSS

Transcription

1 Leçon 08 Réussir son site web avec XHTML et CSS Couleur et fond 1. La couleur du texte...1 Indiquer la couleur du texte avec un nom...1 Indiquer la couleur du texte en hexadécimal...2 Indiquer la couleur en RGB Le fond...3 La couleur de fond...3 L image de fond Les pseudo-formats...6 Nous allons dans cette leçon nous intéresser à la couleur et aux images de fond. 1. La couleur du texte Le langage CSS offre un large choix de couleurs. Les couleurs déterminent l ambiance de votre site et forment son identité visuelle. La propriété permettant de changer la couleur du texte est color. Il existe plusieurs façons d indiquer une couleur. Couleur du texte color un nom # rgb(r,g,b) Indiquer la couleur avec un nom de couleur Indiquer la couleur en hexadécimal Indiquer la couleur en RGB Indiquer la couleur du texte avec un nom C est la technique la plus facile mais le choix est limité à 16 couleurs. Couleur Traduction Couleur Traduction white blanc yellow jaune silver argent (gris léger) olive olive (jaune foncé) gray gris (gris foncé) aqua bleu clair black noir blue bleu red rouge navy marine (bleu foncé) maroon marron fuchsia fuchsia (rose) lime citron vert (vert clair) purple violet green vert teal bleu-vert Vous allez mettre en violet les titres de niveau 2. h2 color: purple; Frédéric PERRET Réussir son site web avec XHTML et CSS leçon 08 p.1/6

2 Indiquer la couleur du texte en hexadécimal Pour indiquer une couleur plus précise, il va falloir utiliser une autre technique. Une des possibilités consiste à écrire la valeur hexadécimale de la couleur. En informatique, on peut obtenir une couleur en mélangeant du rouge, du vert et du bleu en précisant les proportions de chacune de ces composantes. Un nombre écrit en hexadécimal est écrit à l aide de 16 symboles : 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F À retenir Une couleur écrite en hexadécimal se décompose en quatre parties : # (dièse) (quantité de rouge) (quantité de vert) (quantité de bleu) Exemple : #C0670F Vous allez changer la couleur des paragraphes en gris-vert. p color: #36563A; Indiquer la couleur en RGB RGB est l abréviation de "Red, Green, Blue", soit "Rouge, Vert, Bleu". Cette fois, la quantité de chaque composante est indiquée à l aide d un nombre variant de 0 (rien) à 255 (tout). À retenir Une propriété pour une couleur écrite en RGB s écrit de la façon suivante : color: rgb(,,); un nombre de 0 à 255. Vous allez changer la couleur des liens en violet. a color: rgb(168, 104, 155); Remarque Pour déterminer les composantes d une couleur, vous pouvez utiliser un logiciel de dessin comme Paint (RGB) ou Photoshop (RGB, hexadecimal,) en trouvant la couleur que vous souhaitez et en regardant son code dans la palette de couleurs. Frédéric PERRET Réussir son site web avec XHTML et CSS leçon 08 p.2/6

3 2. Le fond Nous allons voir comment modifier la couleur de fond ou comment mettre une image de fond. Le fond ne désigne pas forcément toujours le fond de toute la page, on peut aussi changer la couleur de fond des paragraphes ou des titres, ce qui revient à surligner. La couleur de fond La propriété backgroud-color vous permet de modifier la couleur de fond d un élément. Pour la valeur, cela fonctionne exactement comme avec la propriété color. Couleur du fond background-color un nom # rgb(r,g,b) Indiquer la couleur avec un nom de couleur Indiquer la couleur en hexadécimal Indiquer la couleur en RGB La couleur de fond de la page Pour appliquer une couleur de fond à la page, il suffit de modifier le style de la balise qui englobe tout le contenu de la page, c est-à-dire la balise <>. Modifiez dans Notepad++ la feuille de style style.css en modifiant le code suivant : background-color: #D8A459; Le surlignement Si on applique la propriété background-color à une autre balise que <>, seul le texte à l intérieur de cette balise prendra la couleur de fond. Vous allez surligner les titres de niveau 2. h2 background-color: #EDD7B8; L image de fond Insérer une image de fond La propriété permettant d insérer une image est background-image. La valeur comportera le chemin vers le fichier image. L image de fond peut être du type JPEG, GIF, PNG, Insérer une image de fond propriété background-image url("image") L adresse de l image de fond indiquée dans l url est relative à la position du fichier CSS. Frédéric PERRET Réussir son site web avec XHTML et CSS leçon 08 p.3/6

4 Vous allez modifier l arrière-plan de vos pages en y insérant une image. Créez dans le dossier Site-nice/images un sous dossier fonds et copiez toutes les images du dossier ressources 08. Modifiez dans Notepad++ la feuille de style style.css. Supprimer la propriété de couleur de l arrière-plan (background-color). Rajouter le code suivant : background-image: url("images/fonds/fond01.jpg"); Essayez ensuite avec les images suivantes : fond02.jpg ; default.jpg ; etoiles.gif puis briques.jpg Remarque Bien choisir son image de fond Le plus souvent, une image de fond est une image qui peut être répétée. Une bonne image est donc une image relativement petite qui sera répétée. En règle générale, n utilisez pas une image dont le poids excède 60 Ko. Fixer l image de fond La propriété permettant d insérer une image est background-image. La valeur comportera le chemin vers le fichier image. L image de fond peut être du type JPEG, GIF, PNG, Lorsque vous êtes sur page assez longue et que vous descendez dans celle-ci, le fond bouge en même temps que le texte. Il existe une technique permettant de fixer l image de fond. Il s agit de la propriété background-attachment. Fixer l image du fond background-attachment fixed scroll L image de fond sera fixée L image de fond défilera avec le texte (valeur par défaut) Vous allez fixer l image d arrière-plan de vos pages. background-attachment: fixed; Répétition de l image de fond Par défaut, l image de fond se répète à l infini en mosaïque. Il est possible de limiter la répétition de l image grâce à la propriété background-repeat. Répéter l image de fond background-repeat no-repeat repeat-x repeat-y repeat Le fond ne se répétera pas Le fond se répétera uniquement horizontalement, sur la première ligne Le fond se répétera uniquement verticalement, sur la première colonne Le fond se répétera verticalement et horizontalement à l infini (valeur par défaut) Frédéric PERRET Réussir son site web avec XHTML et CSS leçon 08 p.4/6

5 Vous allez changer l arrière-plan de vos pages en répétant certaines images. Modifiez dans Notepad++ la feuille de style style.css. Supprimer la propriété qui fixe l arrière-plan (background-attachment). Rajouter le code suivant : background-image: url("images/fonds/background1.gif"); background-repeat: repeat-y; Essayez ensuite avec l image background2.png en la répétant horizontalement. Positionner l image de fond Si vous souhaitez placer le fond à un endroit précis, il vous faudra recourir à la propriété backgroundposition. Il faut donner 2 valeurs successivement à cette propriété : la position par rapport à la gauche de l écran, et celle par rapport au haut de l écran. Ces valeurs peuvent être décrites soit en pixels, soit à l aide de mots. Positionner l image de fond background-position px px un mot Les valeurs en pixels Top ; middle ; bottom ; left ; center ; right En utilisant des pixels Vous souhaitez mettre placez votre fond 300 pixels plus à droite et 350 pixels plus bas par rapport au coin en haut à gauche de la page.. Modifiez dans Notepad++ la feuille de style style.css. Modifier le code suivant : background-image: url("images/fonds/galets.gif"); background-repeat: no-repeat; background-position: 300px 350px; En utilisant des mots Les valeurs en pixels permettent d être précis. Toutefois, si vous souhaitez centrer votre image ou autre, tout dépendra de la taille de l écran de vos visiteurs. On utilise alors des valeurs sous forme de mots en anglais. Les valeurs possibles : - top : en haut ; - middle : centré verticalement ; - bottom : en bas - left : à gauche ; - center : centré horizontalement ; - right : à droite Frédéric PERRET Réussir son site web avec XHTML et CSS leçon 08 p.5/6

6 Vous allez centrer dans la page l image de fond. Modifiez dans Notepad++ le code suivant de la feuille de style style.css. background-image: url("images/fonds/galets.gif"); background-repeat: no-repeat; background-position: top right; 3. Les pseudo-formats Jusqu ici, nous avons appliqué nos styles CSS à des balises précises. Pour dynamiser la page, on a la possibilité d utiliser des pseudo-formats ; Ceux-ci permettent d appliquer un style sur une balise dans certaines conditions, comme lors du survol avec la souris, lors d un clic, etc. Pseudo-format balise:pseudo-format Le pseudo-format :hover permet d appliquer un style lorsque la souris pointe sur un élément. Le pseudo-format :active permet d appliquer un style lorsque l on clique sur un lien. Le pseudo-format :visited permet d appliquer un style pour les liens déjà visités. Vous allez modifier l apparence des liens au survol, au clic et lorsqu ils ont déjà été visités. Modifiez dans Notepad++ le code de la feuille de style style.css. a color: green; a:hover color: red; background-color: #CFEFF5; a:active color: red; background-color: lime; a:visited color: blue; Frédéric PERRET Réussir son site web avec XHTML et CSS leçon 08 p.6/6