<-[[index]] ===== Les déclarations ===== Les déclarations sont toujours de la forme nom: valeur; , et permettent de changer énormément d'aspects de la présentation d'un élément. Dans beaucoup de cas, la valeur peut être inherit, ce qui revient à ne pas spécifier de valeur et utiliser celle de l'élément parent (ainsi, un lien est de la même police que le paragraphe qui l'englobe). Cette valeur est souvent le défaut, et il n'est utile de la préciser que pour annuler une autre déclaration (ce qui peut se voir comme une mauvaise conception, mais vous êtes libres). ==== Police et couleur ==== La première chose qu'on veut apprendre à changer, c'est évidemment l'apparence des caractères : la police et la couleur, ainsi que la taille. L'utilisation de CSS fait complètement disparaître l'usage de l'antique élément . Voici l'essentiel des déclarations de police : * font-style: italic, oblique ou normal. * font-variant: small-caps pour les petites capitales, ou normal. * font-weight: bold pour le gras, ou normal. * font-family: famille pour choisir la famille (la police proprement dite) ; les noms comportant des espaces doivent être mis entre guillemets. Comme tout le monde n'a pas toutes les polices du monde, il est possible d'en indiquer plusieurs, séparées par des virgules. Le CSS définit des familles génériques, serif, sans-serif, monospace, cursive et fantasy, il est conseillé de toujours mettre une famille générique en dernier recours. Pour changer la taille de la police, c'est font-size qu'il faut utiliser. On peut lui donner une valeur descriptive (xx-small, x-small, small, medium, large, x-large, xx-large), une valeur relative à la taille actuelle (larger, smaller ou un pourcentage), ou une longueur fixée (voir plus bas pour les unités possibles). Ce dernier choix est à éviter car il prive l'utilisateur de sa liberté de choix sur la taille des polices (quelqu'un qui a de bons yeux peut préférer des polices petites pour tout avoir sur une page, quelqu'un qui a des problèmes de vue voudra de gros caractères). Il est possible de spécifier plusieurs propriétés d'un coup avec font:. Il faut alors mettre d'éventuels style, variante et graisse, puis une taille, puis une famille. La couleur se règle avec color:. Une couleur peut s'indiquer de plusieurs manières : * #rrggbb, où rr, gg et bb sont des nombres hexadécimaux à deux chiffres, de 00 à FF, pour le rouge, le vert et le bleu. * rgb(r,g,b), où r, g et b sont soit des pourcentages soit des valeurs entières de 0 à255, pour le rouge, le vert et le bleu. * par un nom en anglais, mais il serait fastidieux de recopier ici la liste des couleurs standard. ==== Cadres et marges ==== Les éléments sont généralement des blocs ou des in-line. Quand ils sont inline, c'est qu'ils se glissent dans le texte courant, sinon ils occasionnent des retours à la ligne. Bien entendu on peut changer le comportement de ces élements en utilisant display. display:block; /* un pavé */ display:inline; /* courant */ display:none; /* caché */ Un bloc (un paragraphe, un titre, une table) est entouré de trois zones : de l'intérieur vers l'extérieur, du remplissage (padding), une bordure (souvent fine ou absente) et une marge. Les marges d'objets voisins fusionnent, mais ça s'arrête à la bordure. Quand on définit une couleur de fond, celle-ci s'étend dans le remplissage jusqu'à la bordure. Dans le cas des marges, seule leur étendue peut être définie. On utilise pour ça margin-top, margin-right, margin-bottom et margin-left. On peut indiquer les quatre d'un coup avec margin, en les indiquant dans cet ordre (dans le sens des aiguilles d'une montre, en partant de midi). Si on ne met que deux longueurs elles définissent les marges haute et basse d'une part et gauche et droite d'autre part, et si on n'en met qu'une, les quatre marges sont égales. Les longueurs sont indiquées par des nombres avec des unités. Les unités possibles sont in (pouce), cm, mm, pt (point, 1/72 pouce), pc (pica, 12 points). On a également em et ex, qui dépendent de la police active, et surtout de sa taille ; l'em est plutôt à utiliser pour les longueurs horizontales, l'ex pour les longueurs verticales ; ce sont de bonnes unités pour les espaces entre les lignes de texte par exemple. On a pour finir px, qui désigne un pixel à l'écran. Les dimensions des marges et du remplissage peuvent être également un pourcentage, relatif au bloc qui emboîte celui dont on définit les caractéristiques (souvent la page elle-même, mais pas toujours). Enfin, on peut indiquer auto pour les marges, pour qu'elles s'ajustent au mieux. Le remplissage se règle exactement comme les marges, à ceci près qu'il faut mettre padding- à la place de margin-. Pour la bordure, on a trois caractéristiques qu'il est possible de régler, width (l'épaisseur), color et style (les styles possibles sont none, hidden, dotted, dashed, solid, double, groove, ridge, inset et outset, essayez-les pour voir ce qu'ils font), ce qui donne 12 propriétés, de la forme border-côté-caractéristique (par exemple border-left-color). On a également les raccourcis border-côté, qui permettent de définir tout ou partie des trois caractéristiques d'un coup, et border tout court qui définit une bordure identique pour les quatre côtés d'un coup. Il est d'ailleurs souvent préférable d'utiliser border tout court ; en particulier, pour un effet de relief, il vaut mieux utiliser les styles adaptés que changer manuellement les couleurs des différents côtés. Maintenant, le fond. Il est possible de choisir une couleur unie avec background-color. La valeur transparent est également possible, et parle d'elle-même. On peut également mettre une image de fond avec background-image: url(image.png); la valeur none permet d'enlever une image déjà présente. On peut contrôler la position de l'image, avec background-repeat, qui peut prendre les valeurs repeat, repeat-x, repeat-y ou no-repeat, pour choisir si l'image se répète ou pas, background-position, qui prend deux longueurs ou pourcentages, et enfin background-attachment, qui vaut scroll ou fixed (l'image défile avec la page ou pas). Le raccourci background permet de fixer tout ou partie de ces caractéristiques d'un coup. Exemple : body { background: rgb(95%,95%,70%) url(poissons.png) no-repeat; }