Les feuilles de style CSS pour la mise en forme d'un site Web

Résumé du document

Contrôle de la mise en page
Séparation du contenu et de la présentation : Homogénéité, maintenance + facile, pages - lourdes
Similaire aux feuilles de style des traitements de texte
Partie de Dynamic HTML (+ javascript : programmation)
(...)

Extraits

[...] Possibilités Redéfinition de l'aspect des balises HTML ou XHTML standards TD, etc . ) Création de nouveaux styles (classes CSS) Choix de la police, de la couleur, du fond, du style des tableaux, de l'alignement du texte Positionnement (CSS2) : places des images, des paragraphes, etc . Mise en page spécifique pour l'impression Adaptation au type de terminal utilisé (moniteur, télévision, portable, etc . ) Accessibilité (personnes handicapées) Où définir un style LocalAttribut style de certaines balises (body, div, etc )Coucou Global-localValable pour la page web dans son ensemble Global La feuille de style est stockée dans un fichier à part (.css) Les pages web font référence à ce fichier Ce fichier n'est chargé qu'une seule fois : optimisation Modification d'un seul fichier répercutée sur l'ensemble des pages du site Balisage sémantique en XHTML . [...]

[...] ) Accessibilité (personnes handicapées) Où définir un style LocalAttribut style de certaines balises (body, div, etc )Coucou Global-localValable pour la page web dans son ensemble Global La feuille de style est stockée dans un fichier à part (.css) Les pages web font référence à ce fichier Ce fichier n'est chargé qu'une seule fois : optimisation Modification d'un seul fichier répercutée sur l'ensemble des pages du site Balisage sémantique en XHTML . Niveaux de titrePremier paragraphe ListesPremier élémentsecond élément Attribut class Style personnalisé Division de page . [...]

[...] Plage de caractèresun mot . Attribut id Matricule unique fois dans une pageCeci est Modification d'un style standard balise1,balise2 { Propriété1:Valeur1,Valeur2; Propriété2:Valeur3; . } Héritage La plupart des propriétés se transmettent par héritage Les polices font-family La police doit être installée sur l'ordinateur de l'internaute Les polices "standards" : fonction des systèmes d'exploitation Exemple : Geneva sur des ordis mais des Macs ! 5 classes génériques de polices de caractères : sans-serif Arial ) serif Times) monospace Courrier ) cursive Comic) fantasy Impact) Notion de "famille" de policeExemple: font-family: "Times New Roman", Times, serif; Unités de taille font-size Hauteur de ligne line-height valeur Les couleurs color,background-color Nom de couleur (17 valeurs)Exemple : green Valeur hexadécimale #rrggbb (de 00 à ff)Exemple : #f1a645 Valeur hexadécimale abrégée #rgb (de 0 à f)Exemple : #fa6 est équivalent à #ffaa66 Triplet rgb(x,y,z) (de 0 à 255) Exemple : rgb(12,54,240) Triplet en %tage (de 0 à 100%) Exemple : rgb(25%,50%,100%) Les couleurs La graisse font-weight "100" à "900" en fonction de ce qui existe dans la police normalEquivaut à la valeur "400" boldEquivaut à la valeur "700" bolderSpécifie la graisse supérieure à celle assignée à une police lighterSpécifie la graisse inférieure à celle assignée à une police Le style font-style normal italic oblique (équivalent à italic la plupart du temps) Tout en un font Regroupe : font-style font-variant font-weight font-size line-height font-family Alignement horizontal du texte text-align left center right justify Alignement vertic. [...]

[...] ) Accessibilité (personnes handicapées) Où définir un style LocalAttribut style de certaines balises (body, div, etc )Coucou Global-localValable pour la page web dans son ensemble Global La feuille de style est stockée dans un fichier à part (.css) Les pages web font référence à ce fichier Ce fichier n'est chargé qu'une seule fois : optimisation Modification d'un seul fichier répercutée sur l'ensemble des pages du site Balisage sémantique en XHTML . Niveaux de titrePremier paragraphe ListesPremier élémentsecond élément Attribut class Style personnalisé Division de page . Plage de caractèresun mot . Attribut id Matricule unique fois dans une pageCeci est Modification d'un style standard balise1,balise2 { Propriété1:Valeur1,Valeur2; Propriété2:Valeur3; . [...]

[...] } Héritage La plupart des propriétés se transmettent par héritage Les polices font-family La police doit être installée sur l'ordinateur de l'internaute Les polices "standards" : fonction des systèmes d'exploitation Exemple : Geneva sur des ordis mais des Macs ! 5 classes génériques de polices de caractères : sans-serif Arial ) serif Times) monospace Courrier ) cursive Comic) fantasy Impact) Notion de "famille" de policeExemple: font-family: "Times New Roman", Times, serif; Unités de taille font-size Hauteur de ligne line-height valeur Les couleurs color,background-color Nom de couleur (17 valeurs)Exemple : green Valeur hexadécimale #rrggbb (de 00 à ff)Exemple : #f1a645 Valeur hexadécimale abrégée #rgb (de 0 à f)Exemple : #fa6 est équivalent à #ffaa66 Triplet rgb(x,y,z) (de 0 à 255) Exemple : rgb(12,54,240) Triplet en %tage (de 0 à 100%) Exemple : rgb(25%,50%,100%) Les couleurs La graisse font-weight "100" à "900" en fonction de ce qui existe dans la police normalEquivaut à la valeur "400" boldEquivaut à la valeur "700" bolderSpécifie la graisse supérieure à celle assignée à une police lighterSpécifie la graisse inférieure à celle assignée à une police Le style font-style normal italic oblique (équivalent à italic la plupart du temps) Tout en un font Regroupe : font-style font-variant font-weight font-size line-height font-family Alignement horizontal du texte text-align left center right justify Alignement vertic. [...]