Mémento CSS

5 438 vues

Publié le

Fiche récapitulant la syntaxe des feuilles de styles CSS 2.1 : sélecteur, propriétés, valeurs, intégration au code HTML, etc.

Publié dans : Technologie, Formation
2 commentaires
2 j’aime
Statistiques
Remarques
Aucun téléchargement
Vues
Nombre de vues
5 438
Sur SlideShare
0
Issues des intégrations
0
Intégrations
90
Actions
Partages
0
Téléchargements
362
Commentaires
2
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Mémento CSS

  1. 1. 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 4 - Les sélecteurs Sélecteurs de base div {...} Sélecteur de balise. La règle s'applique à tous les éléments <div>...</div> .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 2 - Déclarations les éléments. Styles directs dans les balises HTML Sélecteurs composés <p style="font-size:14px">Texte en taille 14px</p> div.ma_classe {...}La règle s'applique à tous les éléments <div> <p style="line-height:2;color:#FF0000">Texte rouge avec de classe ma_classe : un interligne double</p> <div class="ma_classe">...</div>. div p strong {...} Sélecteur par ascendance. S'applique aux seuls Styles internes dans l'entête HTML éléments <strong> ayant un ancêtre <p> qui lui- <html lang="fr" xml:lang="fr"> même à un ancêtre <div>. <head> div, p, strong {...} Sélecteur collectif. S'applique aux éléments <title>Exemple CSS</title> <div>, <p> et <strong>. <style type="text/css"> <!-- div > p {...} Sélecteurs d'enfants. S'applique aux seuls p { font-size : 14px; } éléments <p> dont le parent direct est<div>. .alerte { color : #FF0000; } div + p {...} Sélecteur de frère. La règle s'applique aux seuls --> <p> immédiatement précédés d'un <div>. </style> </head> Pseudo-éléments <body> span:first-child {...} règle s'applique à chaque <span> lorsqu'il est La <p>Texte en taille 14px</p> le 1er enfant de son parent. <p class="alerte">Texte rouge de 14px</p> </body> span:last-child {...} règle s'applique à chaque <span> lorsqu'il est La </html> le dernier enfant de son parent. div:first-line {...} La règle s'applique à la première ligne de texte Styles externes dans des fichiers séparés de chaque élément <div> (él. de type bloc requis) <html lang="fr" xml:lang="fr"> div:first-letter {...} La règle s'applique à la première lettre de <head> chaque élément <div> (él. de type bloc requis). <title>Exemple CSS</title> <link type="text/css" rel="stylesheet" Pseudo-classes media="all" href="style.css" /> <link type="text/css" rel="stylesheet" span:lang(fr) {…} La règle s'applique à tous les <span> dont la media="print" href="print.css" /> langue est le français (<span lang="fr">). </head> Liste des codes de langue : <body> http://fr.wikipedia.org/wiki/Liste_des_codes_ISO_639-1 <p>Texte en taille 14px</p> <p class="alerte">Texte rouge de 14px</p> div[class] {...} La règle s'applique à tous les éléments <div> </body> ayant un attribut class. </html> div[class="ma_clas règle s'applique aux éléments <div> ayant La Contenu du fichier style.css : Contenu du fichier print.css : se"] {...} un attribut class de valeur ma_classe. @charset 'UTF-8' @charset 'ISO-8859-1' div[class~="ma_cl La règle s'applique aux éléments <div> ayant un p { p { asse"] {...} attribut class contenant une liste de valeurs font-size : 14px; font-size : 12pt; } } séparés par des espaces dont l'une est ma_classe . .alerte { .alerte { Pseudo-classes dynamiques (hyperliens seuls) color : #FF0000; color : black; } } a:link {...} S'applique aux liens jamais cliqués. a:visited {...} S'applique aux liens déjà visités. 3 - Médias et importations Pseudo-classes dynamiques (tout élément) div:hover {...} Élément survolé par le pointeur de la souris Médias span:focus {...} S'applique à l'élément ayant reçu le focus all tout contexte aural synthèse vocale (déplacement par tabulation) print impression braille braille (tactile) span:active {...} S'applique à l'élément lorsque le bouton de la screen écran informatique embossed braille (impression) souris est enfoncé durant un clic. projection vidéoprojecteur tty terminal textuel Attention : Pour les hyperliens, les pseudo-classes doivent handheld petits écrans tv téléviseur être définies dans le bon ordre pour fonctionner correctement : @media screen { Importation :link → :visited → :hover → :focus → :active p { color: navy; } @import url(style.css) } 5 - Commentaires @import url(ecran.css) screen @media print { @import url(imprim.css) print Le texte encadré par/* et */ /* Commentaire d'une ligne */ p { color: black; } ne sera pas pris en compte /* Commentaire s'étendant ➊ } Attention. Chargement lent des pages avec @import, préférez les <link>. par le navigateur. sur plusieurs lignes */
  2. 2. 6 - Couleurs 9 - Tailles et unités de mesure Couleurs Rouge Vert Bleu pt point (1/72e de pouce) px pixel d'écran hexadécimales cm centimètre mm millimètre # 00 → FF 00 → FF 00 → FF color: #ff00ff; background-color: #bbbbbb; in pouce anglais (inch) % pourcentage Couleurs RGB Rouge Vert Bleu em (cadratin) hauteur de la police courante ex hauteur d'un "x" de la police courante rgb( 0 → 255, 0 → 255, 0 → 255 ) rgb( 0→ 100%, 0 → 100%, 0 → 100% ) 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 color: rgb(100%,0,100%); background-color: rgb(187,187,187); des décimales est un point : 0.5em, 2.5cm (… et pas une virgule !). Couleurs acqua, green, navy, silver, black, gray, olive, 10 - Listes nommées teal, blue, lime, purple, white, fuchsia, maroon, red, yellow list-style-type Puce ou numérotation utilisée pour la liste : color: fuchsia; background-color: yellow; disc • decimal 1, 2, 3... Pour d'autres couleurs nommées : circle ∘ decimal-leading-zero 01, 02, 03... Couleurs Web : http://en.wikipedia.org/wiki/Web-safe_color square▪ lower-alpha a, b, c... none upper-alpha A, B, C... 7 - Texte lower-roman i, ii, iii, iv, v upper-roman I, II, III, IV, V Mise en forme des caractères list-style-image Image utilisée comme puce : none | url(image) font-family Polices à utiliser pour le texte par ordre de priorité L'URL est absolue ou relative à la feuille de style. décroissant et séparées par des virgules. list-style-image: url(images/pucerouge.png); Familles génériques : serif | sans-serif | cursive | fantasy | monospace list-style-position Placement du marqueur de liste par rapport au font-family: Verdana, Geneva, sans-serif; texte : inside | outside font-family: arial,helvetica,sans-serif; • Le marqueur est à • Le marqueur est à font-family: 'times new roman',times, serif; l'intérieur (inside) l'extérieur (outside) font-family: 'courier new',courier,monospace; • Le marqueur est à • Le marqueur est à l'intérieur (inside) l'extérieur (outside) font-size Taille de la police : [valeur de taille] | % | x-small | small | medium | large | x-large | smaller | larger Écriture raccourcie Les valeurs relatives (em, %) sont calculées par list-style : list-style-type list-style-position list-style-image rapport à la taille de la police parente. list-style: square outside none; font-style Style de la police : italic | normal | oblique color Couleur de la police : [valeur de couleur] |black 11 - Tableaux font-weight Graisse de la police : bold | normal border-collapse Fusion des bordures de cellules separate | collapse. : font-variant Déclinaisons de la police : normal | small-caps collapse separate É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; border-spacing Espace entre les cellules du tableau (si border- Mise en forme des paragraphes collapse:separate). Si une seule valeur : espace vertical et horizontal line-height Hauteur de ligne : normal | [valeur de taille] Si deux valeurs : 1ère = horizontal et 2e = vertical Les valeur relatives (%, em) sont calculées en caption-side Côté où s'affiche la légende du tableau (définie référence à taille de la police courante. dans la balise <caption>) : top | bottom | left | right text-align Alignement du texte : left | right |center | justify . empty-cells Affiche ou non les cellules vides : show | hide text-decoration Soulignements du texte : none | underline (souligné) table-layout Mode de calcul de la largeur du tableau : auto | | overline (surligné) | line-through(barré). fixed | inherit. text-indent Alinéa du texte : [valeur de taille] | % | La valeur 0. fixed. Calcul rapide basé sur la seule 1ère ligne du en % se rapporte à la largeur du conteneur. tableau : compare la largeur du tableau à la text-transform Casse du texte : none | capitalize | uppercase | somme des largeurs de cellules (width + border + lowercase. border-spacing et garde la valeur la plus grande. ) letter-spacing Espacement des lettres ; souvent exprimées en auto. Calcul lent : prend en compte toutes les points (valeurs négatives possibles) : cellules et tente de trouver un compromis entre la [valeur de taille] |normal. taille du contenu et les largeurs indiquées. word-spacing Valeur ajoutée ou retirée à l'espacement normal vertical-align Alignement vertical du contenu (ne fonctionne que entre les mots (0.25em à 0.35em par défaut) ; pour <td>, <th> et les éléments ayant la propriété souvent exprimées en em : [valeur de taille] | display:table-cell : baseline | top | bottom | middle ) normal (valeurs négatives possibles). white-space Gestion des blancs : normal (espaces et les lignes 12 - Priorités et cascades (simplifiées) vides fusionnés) | pre (espaces et lignes vides 1) Styles du navigateur 4) Styles !important du Poids de spécifité préservés) | nowrap (espaces préservés mais lignes (=styles par défaut) webmaster * 0 vides fusionnées) | pre-wrap | pre-line . 2) Styles de l'internaute 5) Styles !important de direction Sens d'écriture du texte : ltr | rtl. 3) Styles du webmaster l'internaute balise 1 a) si des directives visent l'élément (média, .classe, 10 :pseudo-classe 8 - Valeurs génériques sélecteur), elles sont appliquées à l'élément : [attribut] – priorité à la directive la plus spécifique (poids); #identifiant 100 inherit Une propriété à laquelle on affecte la valeur inherit – priorité à la dernière définie (si poids égaux). reçoit la valeur du parent pour la même propriété. b) si aucune directives ne vise l'élément : style="..." 1000 !important Une valeur à laquelle on ajoute le mot-clef !important – application des directives héritées, !important ∞ devient prioritaire ; elle supplante même les styles – sinon valeur par défaut pour l'élément ➋ directs (placés directement dans la balise). Calcul simplifié de la spécifité pour quelques sélecteurs : p { color: black !important; } span.alerte → 11 a.menu:hover span→ 22 #header span→ 101
  3. 3. Mémento CSS 2.1 - Boites et positionnement 13 - Modèle de boite 16 - Espacement intérieur padding padding-top Distance entre la boite et son contenu (marge padding-bottom intérieure) : [valeur de taille] |0. Une valeur en % padding-right se rapporte à la largeur du bloc conteneur (même padding-left les valeurs verticales). Écritures raccourcies ‣ 1 seule valeur : padding: all_sides ‣ 2 valeurs : padding: top&bottom right left & ‣ 3 valeurs : padding: top right&left bottom ‣ 4 valeurs : padding: top right bottom left padding: O.2em 0; 17 - Arrière-plan background background- Couleur de l'arrière-plan : transparent| [couleur].Si color une image d'arrière-plan est définie, elle apparaît au dessus de la couleur d'arrière-plan et la masque. 14 - Marges margin background- Hyperlien vers le fichier de l'image d'arrière-plan : margin-top Distance entre la boite et ses éléments frères dans image url(image) | none. Le lien est absolu ou relatif à la margin-bottomchaque direction: [valeur de taille] | auto | Une 0. feuille de styles. margin-right valeur en % se rapporte à la largeur du bloc background- Permet de définir le tuilage effectué avec l'image margin-left conteneur (même pour les valeurs verticales). repeat d'arrière-plan : repeat | repeat-x (horizontale) | repeat- Les marges verticales ne s'appliquent pas aux y (verticale) | no-repeat. éléments en-ligne standards. background- Positionne l'image initiale de l'arrière-plan avec deux On centre un bloc en donnant la valeur auto aux position valeurs : [pos. horizontale] [pos. verticale] . propriétés margin-rightet margin-left . ‣ Position horizontale : [valeur de taille] |left | right | Écritures raccourcies center | % (des largeurs de la boite et de l'image) ‣ 1 seule valeur : margin: all_sides ‣ Position verticale : [valeur de taille] |top | bottom | ‣ 2 valeurs : margin: top&bottom right left & center | % (de la hauteur de la boite et de l'image). ‣ 3 valeurs : margin: top right &left bottom background- Permet de définir si l'image est fixe dans la fenêtre ou ‣ 4 valeurs : margin: top right bottom left attachment si elle défile avec elle : scroll | fixed. Pratiquement, ne margin : 1em; /* même valeur pour les quatres marges */ s'applique qu'à margin : 0.5em 0 1em 1em; /* une valeur par face */ Background-position en % l'arrière-plan de Fusion des marges verticales <body>. Les blocs frères superposés ont Les marges verticales des Écriture compacte les marges adjacentes qui parents et des enfants background:color image fusionnent : fusionnent si le parent n'a ni repeat attachment position padding, ni border. On peut omettre des propriétés en commençant par la fin. Les propriétés fusion omises recevront leur valeur par défaut. background: #dddddd url(images/papier.jpg) pas de fusion à background: transparent url(grand_guillemet.png) no-repeat Attention : les marges latérales cause de la scroll 5px 10px; bordure ne fusionnent pas. 18 - Dimensions width - height 15 - Bordures border width Largeur d'un élément : [valeur de taille] | % | auto border-width Épaisseur de la bordure : [valeur de taille]| thin | Ne s'applique pas aux éléments en-ligne standards. Le medium | thick. Le % n'est pas autorisé pour les % est calculé à partir de la largeur de l'élément parent. épaisseurs de bordures. ‣ auto pour en-ligne standard : largeur du contenu Formes détaillées : border-top-width border-right- , dans les limites du conteneur width, border-bottom-width border-left-width , . ‣ auto pour en-ligne remplacés : largeur intrinsèque border-style Style de la bordure : solid | dotted | dashed | double | du contenu (ex. : largeur effective de l'image) inset | outset | groove | ridge | none | hidden . ‣ auto pour bloc : 100% de la largeur du parent Formes détaillées : border-top-style border-right-style , , height Hauteur d'un élément : [valeur de taille] | % | auto border-bottom-style border-left-style , . Ne s'applique pas aux éléments en-ligne standards. Le % est calculé à partir de la largeur de l'élément parent. ‣ en-ligne standard: auto = somme desline-height . ‣ en-ligne remplacés auto = hauteur intrinsèque du : contenu (ex. : hauteur effective de l'image) ‣ bloc : auto = hauteur du contenu, 0 si vide. min-width Largeur minimum et largeur maximum : border-color Couleur de la bordure: [valeur de couleur] | transparent max-width [valeur de taille] | % |none Formes détaillées : border-top-color border-right-color , , min-height Hauteur minimum et hauteur maximum : border-bottom-color border-left-color , . max-height [valeur de taille] | % | none Écriture compacte overflow Permet de définir le comportement du conteneur border : border-width border-style border-color lorsque le contenu dépasse la valeur maximale prévu : ➌ border: 1px solid red; visible (l'élément dépasse) | hidden (l'él. est tronqué) | Form es détailléesborder-top border-rightborder-bottomborder-left : , , , . scroll (barre de défilement) | auto (en général visible) .
  4. 4. 19 - Affichage display - visibility 23 - Positionnement position display Modifie l'affichage d'un élément : inline | block | list-item position Permet de gérer la façon dont l'élément est positionné | none (il existe d'autres valeurs mais très boguées sur dans la page : static | relatif | absolute | fixed la plupart des navigateurs). top Indique la distance en partant du haut (top), du bas none fait disparaître l'élément de l'affichage. bottom (bottom), de la gauche (left) et/ou de la droite (right) visibility Affiche ou cache un élément : visible | hidden | collapse . left pour les éléments positionnés (non statiques). Avec hidden l'élément est invisible mais conserve right Valeurs possibles : [valeur de taille] | % | auto. toujours l'espace qu'il aurait occupé visible (!= de auto indique la position normale. Les valeurs en % sont display:none). calculées à partir de la hauteur du conteneur pour top collapse ne s'applique qu'aux lignes et colonnes de et bottom et de sa largeur pour left et right. Les valeurs tableau, il permet de les replier pour les masquer. négatives sont autorisées. z-index Indique la profondeur à laquelle doit être affiché display:inline l'élément (axe des "z") : [entier] | auto. La profondeur Les éléments de mise en forme en-ligne sont juxtaposés est calculée à partir du conteneur de référence (le 1er horizontalement jusqu'à la limite latérale du conteneur, lorsque la parent positionné). Les valeurs négatives sont limite est atteinte la juxtaposition est reprise dans la ligne du autorisées. dessous. Éléments en-ligne par défaut : <a> <abbr> <acronym> <br /> <cite> <code> <dfn> <em> <kbd> <label> <q> <span> position:static (flux normal) <strong> <var> Positionnement normal des éléments (voir section Affichage). Les Eléments en-ligne remplacés propriétés top, bottom, left, right et z-index sont inopérantes. Éléments en-ligne remplacés par un contenu dont la source est externe (images, vidéos, etc). Ces éléments acceptent certaines position:relative propriétés CSS propres aux blocs (width, height, etc.) Éléments en- Le positionnement relatif permet ligne remplacés : <img> <input> <object> <select> <textarea> de décaler un élément de sa position normale. La place display:block normale de l'élément est conservée et l'élément en position Les éléments de mise en forme bloc sont superposés relative flotte à sa nouvelle position. Les coordonnées top, verticalement les uns à la suite des autres (ex. : les paragraphes bottom, left et right indiquent le point de départ du décalage. d'un texte). Éléments blocs par défaut : <adress> <blockquote> <dd> <div> <dl> <dt> <fieldset> <form> <h1> <h2> <h3> position:absolute <h4> <h5> <h6> <ol> <p> <pre> <table> <tbody> <td> <th> <tfoot> <thead> <tr> <ul> Le positionnement absolu permet de positionner un élément à partir des display:list-item limites de son conteneur. Le Les éléments s'affichent comme des blocs avec la possibilité de conteneur doit lui-même disposer gérer les propriétés de liste. Élément de liste par défaut : <li> d'une propriété absolute ou relative pour que le contenu puisse être 20 - Flottants float positionné. Sans cela, le contenu se positionne à partir du premier ancêtre dotés d'une de ces propriétés. En dernier recours, il se float Permet de faire flotter un élément vers la droite ou la positionne sur les limites de la page. gauche du conteneur : left | right |none. position:fixed L'élément flottant se place le plus loin possible dans la direction indiquée tout en restant à l'intérieur du Positionnement des éléments à partir conteneur. Les limites du conteneur peuvent être des bords de la fenêtre visible visible outrepassées en donnant une marge négative au flottant du navigateur. L'élément reste fixe dans la direction du flottement. L'élément flottant même lorsqu'on utilise la barre de repousse les autres enfants du conteneur dans la direction défilement. opposée au flottement. clear Force un élément à se positionner sous les éléments qui flottent dans la direction indiquée left | right | both(les deux). : 24 - Interface utilisateur cursor Permet de choisir l'apparence du curseur : auto | url(curseur) | crosshair | default | pointer | move | e- resize | ne-resize | nw-resize | n-resize | se-resize | sw- resize | s-resize | w-resize| text | wait | help | progress crosshair default pointer move text help Image sans flottement Image avec float:left 21 - Références e-resize n-resize ne-resize nw-resize wait progress w-resize s-resize sw-resize se-resize ‣ Spécification CSS 2 en français (un peu obsolète) : cursor: url("curs1.cur"), url("curs2.csr"), text; http://www.yoyodesign.org/doc/w3c/css2/cover.html#minitoc outline-color Couleur du contour: [couleur] | invert ‣ Spécification CSS 2.1 en anglais (la norme officielle) : outline-style Style du contour: solid | dotted | dashed | double | http://www.w3.org/TR/CSS21/ inset | outset | groove | ridge | none (même valeurs ‣ Compatibilité des navigateurs aux CSS (en anglais): que border-style moins hidden) http://www.quirksmode.org/css/contents.html outline-width Épaisseur du contour [valeur de taille]| thin | medium | ‣ Tutoriels et exemples d'utilisation : http://openweb.eu.org/css thick. Remarque: quelque soit sa taille le contour n'interfère pas sur la place occupée par la boite. 22 - Propriétés CSS absentes du mémento Écriture compacte Propriétés et sélecteurs définis dans la spécification mais éliminés outline: outline-style outline-width outline-color de ce document car mal implémentés par les navigateurs : @charset @font-face :before, :after, clip, content, counter- , , Mise à jour le 2010-01-24 (basé sur la spécification CSS-2.1 de 2009-04-23). increment counter-reset quotes, unicode-bidi , , . Copyright © Éric Bellot, 2009-2010. <http://www.eric-bellot.fr> ➍ Les propriétés destinées aux médias paginés (impression) ou Publié selon les termes de la licence Creative Commons CC-BY-SA : http://creativecommons.org/licenses/by-sa/2.0/fr/ audios ne sont pas abordées dans ce mémento.

×