Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Mémento CSS 2.1 - Bases et mise en forme Ce mémento ne présente que les proprié

Mémento CSS 2.1 - Bases et mise en forme Ce mémento ne présente que les propriétés CSS destinées à l'affichage sur écran (médias visuels non-paginés). Codes de couleurs utilisés : sélecteur CSS - propriété CSS - valeur CSS - valeur CSS par défaut - @at-rules CSS - code HTML 1 - Structure d'une règle CSS 2 - Déclarations Styles directs dans les balises HTML <p style="font-size:14px">Texte en taille 14px</p> <p style="line-height:2;color:#FF0000">Texte rouge avec un interligne double</p> Styles internes dans l'entête HTML <html lang="fr" xml:lang="fr"> <head> <title>Exemple CSS</title> <style type="text/css">  </style> </head> <body> <p>Texte en taille 14px</p> <p class="alerte">Texte rouge de 14px</p> </body> </html> Styles externes dans des fichiers séparés <html lang="fr" xml:lang="fr"> <head> <title>Exemple CSS</title> <link type="text/css" rel="stylesheet" media="all" href="style.css" /> <link type="text/css" rel="stylesheet" media="print" href="print.css" /> </head> <body> <p>Texte en taille 14px</p> <p class="alerte">Texte rouge de 14px</p> </body> </html> Contenu du fichier style.css : @charset 'UTF-8' p { font-size : 14px; } .alerte { color : #FF0000; } Contenu du fichier print.css : @charset 'ISO-8859-1' p { font-size : 12pt; } .alerte { color : black; } 3 - Médias et importations Médias all tout contexte aural synthèse vocale print impression braille braille (tactile) screen écran informatique embossed braille (impression) projection vidéoprojecteur tty terminal textuel handheld petits écrans tv téléviseur @media screen { p { color: navy; } } @media print { p { color: black; } } Importation @import url(style.css) @import url(ecran.css) screen @import url(imprim.css) print Attention. Chargement lent des pages avec @import, préférez les <link>. 4 - Les sélecteurs Sélecteurs de base p {...} Sélecteur de balise. La règle s'applique à tous les éléments <p>...</p> .ma_classe {...} Sélecteur de classe. Il s'applique à toutes les éléments ayant l'attribut class="ma_classe". #mon_id {...} Sélecteur d'identifiant. Il s'applique à l'élément unique ayant l'attribut id="mon_id". * {...} Sélecteur universel. La règle s'applique à tous les éléments. Sélecteurs composés p.ma_classe {...} La règle s'applique à tous les éléments <div> de classe ma_classe : <p class="ma_classe">...</p>. div p strong {...} Sélecteur par ascendance. S'applique aux seuls éléments <strong> ayant un ancêtre <p> qui lui- même à un ancêtre <div>. div, p, strong {...} Sélecteur collectif. S'applique aux éléments <div>, <p> et <strong>. div > p {...} Sélecteurs d'enfants. S'applique aux seuls éléments <p> dont le parent direct est <div>. div + p {...} Sélecteur de frère. La règle s'applique aux seuls <p> immédiatement précédés d'un <div>. Pseudo-éléments span:first-child {...}La règle s'applique à chaque <span> lorsqu'il est le 1er enfant de son parent. span:last-child {...} La règle s'applique à chaque <span> lorsqu'il est le dernier enfant de son parent. p:first-line {...} La règle s'applique à la première ligne de texte de chaque élément <p> (él. de type bloc requis) p:first-letter {...} La règle s'applique à la première lettre de chaque élément <p> (él. de type bloc requis). Pseudo-classes span:lang(fr) {…} La règle s'applique à tous les <span> dont la langue est le français (<span lang="fr">). Liste des codes de langue : http://fr.wikipedia.org/wiki/Liste_des_codes_ISO_639-1 p[class] {...} La règle s'applique à tous les éléments <p> ayant un attribut class. p[class="ma_class e"] {...} La règle s'applique aux éléments <p> ayant un attribut class de valeur ma_classe. p[class~="ma_clas se"] {...} La règle s'applique aux éléments <div> ayant un attribut class contenant une liste de valeurs séparés par des espaces dont l'une est ma_classe. Pseudo-classes dynamiques (hyperliens seuls) a:link {...} S'applique aux liens jamais cliqués. a:visited {...} S'applique aux liens déjà visités. Pseudo-classes dynamiques (tout élément) p:hover {...} Élément survolé par le pointeur de la souris span:focus {...} S'applique à l'élément ayant reçu le focus (déplacement par tabulation) span:active {...} S'applique à l'élément lorsque le bouton de la souris est enfoncé durant un clic. Attention : Pour les hyperliens, les pseudo-classes doivent être définies dans le bon ordre pour fonctionner correctement : :link → :visited → :hover → :focus → :active 5 - Commentaires Le texte encadré par /* et */ ne sera pas pris en compte par le navigateur. /* Commentaire d'une ligne */ /* Commentaire s'étendant sur plusieurs lignes */ ➊ ➋ 6 - Couleurs Couleurs hexadécimales Rouge Vert Bleu # 00 → FF 00 → FF 00 → FF color: #ff00ff; background-color: #bbbbbb; Couleurs RGB Rouge Vert Bleu rgb( 0 → 255, 0 → 255, 0 → 255 ) rgb( 0→ 100%, 0 → 100%, 0 → 100% ) color: rgb(100%,0,100%); background-color: rgb(187,187,187); Couleurs nommées acqua, green, navy, silver, black, gray, olive, teal, blue, lime, purple, white, fuchsia, maroon, red, yellow color: fuchsia; background-color: yellow; Pour d'autres couleurs nommées : Couleurs Web : http://en.wikipedia.org/wiki/Web-safe_color 7 - Texte Mise en forme des caractères font-family Polices à utiliser pour le texte par ordre de priorité décroissant et séparées par des virgules. Familles génériques : serif | sans-serif | cursive | fantasy | monospace font-family: Verdana, Geneva, sans-serif; font-family: arial,helvetica,sans-serif; font-family: 'times new roman',times, serif; font-family: 'courier new',courier,monospace; font-size T aille de la police : [valeur de taille] | % | x-small | small | medium | large | x-large | smaller | larger Les valeurs relatives (em, %) sont calculées par rapport à la taille de la police parente. font-style Style de la police : italic | normal | oblique color Couleur de la police : [valeur de couleur] | black font-weight Graisse de la police : bold | normal font-variant Déclinaisons de la police : normal | small-caps Écriture raccourcie font: style variant weight size/line-height family font: italic normal bold 12pt/18pt 'times new roman',serif; font: 1em/2em sans-serif; Mise en forme des paragraphes line-height Hauteur de ligne : normal | [valeur de taille] Les valeur relatives (%, em) sont calculées en référence à taille de la police courante. text-align Alignement du texte : left | right |center | justify. text-decoration Soulignements du texte : none | underline (souligné) | overline (surligné) | line-through(barré). text-indent Alinéa du texte : [valeur de taille] | % | 0. La valeur en % se rapporte à la largeur du conteneur. text-transform Casse du texte : none | capitalize | uppercase | lowercase. letter-spacing Espacement des lettres ; souvent exprimées en points (valeurs négatives possibles) : [valeur de taille] | normal. word-spacing Valeur ajoutée ou retirée à l'espacement normal entre les mots (0.25em à 0.35em par défaut) ; souvent exprimées en em : [valeur de taille] | normal (valeurs négatives possibles). white-space Gestion des blancs : normal (espaces et les lignes vides fusionnés) | pre (espaces et lignes vides préservés) | nowrap (espaces préservés mais lignes vides fusionnées) | pre-wrap | pre-line. direction Sens d'écriture du texte : ltr | rtl. 8 - Valeurs génériques inherit Une propriété à laquelle on affecte la valeur inherit reçoit la valeur du parent pour la même propriété. !important Une valeur à laquelle on ajoute le mot-clef !important devient prioritaire ; elle supplante même les styles directs (placés directement dans la balise). p { color: black !important; } 9 - Tailles et unités de mesure pt point (1/72e de pouce) px pixel d'écran cm centimètre mm millimètre in pouce anglais (inch) % pourcentage em (cadratin) hauteur de la police courante ex hauteur d'un "x" de la police courante Notation des chiffres. L'unité de mesure est toujours collée au chiffre qui la précède : 12px, 16pt, 25%. Le caractère séparateur des décimales est un point : 0.5em, 2.5cm (… et pas une virgule !). 10 - Listes list-style-type Puce ou numérotation utilisée pour la liste : disc • decimal 1, 2, 3... circle ∘ decimal-leading-zero 01, 02, 03... square▪ lower-alpha a, b, c... none upper-alpha A, B, C... lower-roman i, ii, iii, iv, v upper-roman I, II, III, IV, V list-style-image Image utilisée comme puce : none | url(image) L'URL est absolue ou relative à la feuille de style. list-style-image: url(images/pucerouge.png); list-style-position Placement du marqueur de liste par rapport au texte : inside | outside • Le marqueur est à l'intérieur (inside) • Le marqueur est à l'intérieur (inside) • Le marqueur est à l'extérieur (outside) • Le marqueur est à l'extérieur (outside) Écriture raccourcie list-style : list-style-type list-style-position list-style-image list-style: square outside none; 11 - Tableaux border-collapse Fusion des bordures de cellules : separate | collapse. collapse separate border-spacing Espace entre les cellules du tableau (si border- collapse:separate). Si une seule valeur : espace vertical et horizontal Si deux valeurs : 1ère = horizontal et 2e = vertical caption-side Côté où s'affiche la légende du tableau (définie dans la balise <caption>) : top | bottom | left | right empty-cells Affiche ou non les cellules vides : show | hide table-layout Mode de calcul de la largeur du tableau : auto | fixed | inherit. fixed. Calcul rapide basé sur la seule 1ère ligne du tableau : compare la largeur du tableau à la somme des largeurs de cellules (width + border + border-spacing) et garde la valeur la plus grande. auto. Calcul lent : prend en compte toutes les cellules et tente de trouver un compromis entre la taille du contenu et les largeurs indiquées. vertical-align Alignement vertical du contenu (ne fonctionne que uploads/s3/ memento-css.pdf