On a vu comment changer la couleur et mettre une image de fond en HTML, cependant ce n'est pas très "propre", nous allons donc déporter ceci dans le CSS.
Pour définir des propriétés à une balise précise, il suffit d'écrire :
nom_de_la_balise { attribut1: valeur1; attribut2: valeur2; ... }
Dans le cas d'un arrière plan (couleur ou image), nous devons définir des propriétés sur la balise <body>, et utiliser l'attribut background qui se définit comme suit :
background: background-color background-image background-repeat background-attachment background-position. Chacun des attribut n'est pas obligatoire.
Expliquons chacune des parties :
- background-color : définit la couleur d'arrière plan, elle s'écrit sous forme #RRVVBB, une palette non exaustive se trouve ICI
- background-image : définit l'adresse d'une image d'arrière plan, se définit sous la forme url(adresse_de_l'image)
- background-repeat : répétition ou non de l'image d'arrière plan, cet attribut prend les valeurs repeat, repeat-x, repeat-y, no-repeat.
- background-attachment : définit si l'arrière plan se déplace avec la page ou est fixe, cet attribut prend les valeurs fixed, scroll ou inherit
- background-position : définit à quel(s) bord(s) l'arrière plan est attaché, prend les valeurs top, bottom, left, right.
Ainsi le code pour modifier l'arrière plan s'écrit :
Bon c'est pas tout ça mais il en existe beaucoup des attributs en CSS, et je vais pas en faire la liste ! Cependant on va faire une liste des plus utiles, les autres balises "occasionnelles" vous irez sur MammouthLand !
- text-align : définit l'alignement du texte - center, right ou left (vous comprenez ce que ça veut dire je suppose? centré, droite ou gauche ;) )
- text-decoration : définit la décoration du texte : souligné (underline) et barré (line-through)
- color : modifie la couleur du texte, fonctionne sur le même principe que background-color
- margin : gère les marges autour de la "boite" définie par la balise, les variantes pour définir un à un sont margin-left, margin-right, margin-top, margin-bottom. Si l'on souhaite tout définir en une seule ligne, il faut taper les valeurs des margin dans l'ordre suivant : background : top right bottom left, ce qui donne margin: 0 10px 0 10px; par exemple.
- padding : même principe que la précédente, mais elle décale ce coup-ci le texte par rapport aux bords de la "boite" définie par la balise. Les variantes et la définition en une seule ligne fonctionnent se font de la même manière.
- font-style, font-size : font-style définit le style du texte (italic, bold, normal) et font-size définit la taille du texte. Il est recommandé de définir cette valeur en em (coefficient de multiplicaiton de la police du navigateur) pour des raisons d'accéssibilité aux malvoyants.
- list-style-type : modifie le type de la liste, qui peut être de type 1) 2) 3) ou I) II) III) ou d'autres encore. Ses valeurs sont decimal, lower-roman, upper-roman, lower-alpha, upper-alpha.
