Chapitre 5 XHTML et CSS. Votre titre …votre code xhtml … Gabarit xhtml sans feuilles de style.

Présentation au sujet: "Chapitre 5 XHTML et CSS. Votre titre …votre code xhtml … Gabarit xhtml sans feuilles de style."— Transcription de la présentation:

1 Chapitre 5 XHTML et CSS

2 Votre titre …votre code xhtml … Gabarit xhtml sans feuilles de style

3 Votre titre... votre code css... Gabarit xhtml avec feuilles de style interne

4 Votre titre …votre code xhtml … Gabarit xhtml avec feuilles de style externe

5 Votre titre... texte... Style local à un élément

6 Les unités de longueur en CSS ● 6 longueurs absolues : – Inch (pouce) : in (= 6 pc = 72 pt = 2,54 cm) – Métrique : cm et mm – Point : pt ( = 1/12 pc = 1/72 in = 0,351 mm) – Pica : pc ( = 12 pt = 1/6 in = 4,212 mm) ● Seul le point est reconnue de manière certaine par tous les navigateurs

7 Les unités de longueur en CSS ● 4 unités de longueurs relatives : – 1em = taille de la police courante – 1ex = hauteur d'un x minuscule – 1px = relatif au média visuel utilisé – % = pourcentage dépendant de l'élément utilisé ● Meilleure adaptation à différents types de média (passage à l'impression par exemple)

8 Taille de police avec font-size ● em relative à la taille de la police de l'élément parent ● Valeurs absolues supplémentaires : – xx-small, x-small, small, medium, large, x-large, xx-large ● Valeurs relatives supplémentaires : – Larger, smaller ● Montrer exemple

9 L'espace des couleurs ● On peut sélectionner une couleur de trois manières différentes : – De manière générale, par son code rvb (rgb) : ● En décimal ● En hexadécimal – Parfois, par son nom

10 Le code rvb (rgb) ● Mode décimal : – rgb(x,y,z) où x, y, et z sont des entiers entre 0 et 255 – rgb(x%,y%,z%) où x, y, et z sont compris entre 0.0% et 100.0% ● Mode hexadécimal : – #abcdef où a, b, c, d, e et f sont des symboles hexadécimaux (de 0 à 9 puis de A à F) – ab pour le rouge, cd pour le vert et ef pour le bleu

11 Noms de couleurs ● 16 couleurs reconnues par tous les navigateurs BlackGreenSilver Lime GrayOliveWhite Yellow MaroonNavyRed Blue PurpleTealFuchsia Aqua ● http://www.ficml.org/jemimap/style/color/couleur.html http://www.ficml.org/jemimap/style/color/couleur.html ● http://meyerweb.com/eric/tools/color-blend/ http://meyerweb.com/eric/tools/color-blend/ ● http://www.colorsontheweb.com/colorwizard.asp http://www.colorsontheweb.com/colorwizard.asp ● http://www.colorsontheweb.com/colorwheel.asp http://www.colorsontheweb.com/colorwheel.asp ● http://h41139.www4.hp.com/fr/fr/online_tools/colour_wheel.html http://h41139.www4.hp.com/fr/fr/online_tools/colour_wheel.html

12 Les principales propriétés CSS Les propriétés s'appliquent en cascade : défaut navigateur < CSS externe < CSS interne < local élément ● Pour l'arrière plan : background ● Pour le texte : text ● Pour la police : font ● Pour les bordure : border ● Pour les marges inter-élément : margin ● Pour les marges intra-élément : padding ● Pour les dimensions : width et height ● Pour le positionnement : vertical-align, position:relative, position:absolute, left, right, bottom, top

13 Mais aussi... la propriété float ● Définit le flottement d'une boîte à gauche, à droite ou pas du tout ● Applicable à tous les éléments générant des boîtes sauf si en position absolue ● Valeurs : – left : le contenu s'écoule sur le flanc droit de l'élément en commençant en haut (en fonction de la propriété clear) – right : idem en inversant droite et gauche ● Un élément peut empêcher avec l'attribut clear qu'un autre élément flotte à sa gauche (left), à sa droite(right) ou des deux côtés (both) ● Utilisation possible avec span (e.g. : lettrine) ou div (e.g. : mise en page sans table)

14 Et encore.... ● Alignement des images ● Style des listes ● Style des tables ● Style des liens (pseudo-classes) ● Style de la première lettre ou de la première ligne (pseudo-éléments)