Mémento CSS
Loading...
Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.
Favorites, Groups & Events
Mémento CSS - Presentation Transcript
- 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). Structure d'une règle CSS 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 Déclarations les éléments. Styles internes dans l'entête HTML Sélecteurs composés <html lang="fr" xml:lang="fr"> div.ma_classe {...} La règle s'applique à tous les éléments <div> <head> de classe ma_classe : <div class="ma- <title>Exemple CSS</title> classe">...</div>. <style type="text/css"> div p strong {...} Sélecteur par ascendance. La règle s'applique <!-- aux seuls éléments <strong> ayant un ancêtre p { font-size : 14pt; } <p> qui lui-même à un ancêtre <div>. .alerte { color : #FF0000; } --> div, p, strong {...} Sélecteur collectif. La règle s'applique aux </style> éléments <div>, <p> et <strong>. </head> div > p {...} Sélecteurs d'enfants. La règle s'applique aux <body> seuls éléments <p> dont le parent direct est <p>Texte en taille 14pt</p> <div>. <p class="alerte">Texte rouge de 14pt</p> div + p {...} Sélecteur de frère. La règle s'applique aux seuls </body> <p> immédiatement précédés d'un <div>. </html> Pseudo-classes Styles externes dans des fichiers séparés span:first-child {...}La règle s'applique à chaque <span> lorsqu'il est Page HTML : le 1er enfant de son parent. <html lang="fr" xml:lang="fr"> <head> span:last-child {...} La règle s'applique à chaque <span> lorsqu'il est <title>Exemple CSS</title> le dernier enfant de son parent. <link type="text/css" rel="stylesheet" div:first-line {...} La règle s'applique à la première ligne de texte media="all" href="style.css" /> <link type="text/css" rel="stylesheet" de chaque élément <div> (élément de type bloc media="print" href="imprim.css" /> requis) </head> div:first-letter {...} La règle s'applique à la première lettre de <body> chaque élément <div> (élément de type bloc <p>Texte en taille 14pt</p> <p class="alerte">Texte rouge de 14pt</p> requis). </body> div[class] {...} La règle s'applique à tous les éléments <div> </html> ayant un attribut class. Contenu du fichier style.css : Contenu du fichier imprim.css : div[class="ma- La règle s'applique aux éléments <div> ayant p { p { classe"] {...} un attribut class de valeur ma-classe. font-size : 14pt; font-size : 12pt; div[class~="ma- La règle s'applique aux éléments <div> ayant } } classe"] {...} un attribut class contenant une liste de valeurs .alerte { .alerte { séparés par des espaces dont l'une est ma- color : #FF0000; color : black; classe. } } Pseudo-classes dynamiques (hyperliens seuls) Styles directs dans les balises HTML a:link {...} Lien qui n'a jamais été cliqué <p style="font-size:14pt">Texte en taille 14pt</p> <p style="font-size:14pt;color:#FF0000">Texte rouge a:visited {...} Lien qui a été visité de 14pt</p> Pseudo-classes dynamiques (tout élément) Médias et importations a:hover {...} Élément survolé par le pointeur de la souris a:focus {...} Élément ayant le focus (déplacement par Médias tabulation) all tout contexte aural synthèse vocale a:active {...} Élément lorsque le bouton de la souris est print impression braille braille (tactile) enfoncé durant un clic. screen écran informatique embossed braille (impression) Attention : Pour les hyperliens, les pseudo-classes doivent projection vidéoprojecteur tty terminal textuel être définies dans le bon ordre pour fonctionner correctement : handheld petits écrans tv téléviseur :link → :visited → :hover → :focus → :active @media screen { Importation Commentaires p { color: navy; } @import url(style.css) } Le texte encadré par /* et */ ne /* Commentaire d'une ligne */ @import url(ecran.css) screen sera pas pris en compte par le /* Commentaire s'étendant @media print { @import url(imprim.css) print navigateur. sur plusieurs p { color: black; } } Attention. Chargement lent des pages lignes */ avec @import, il vaut mieux utiliser les balises <link>. ➊
- Couleurs Tailles et unités de mesure Couleurs Rouge Vert Bleu pt point (1/72e de pouce) px pixel d'écran hexadécimales # 00 → FF 00 → FF 00 → FF cm centimètre mm millimètre color: #ff00ff; background-color: #bbbbbb; in pouce anglais (inch) % pourcentage Couleurs RGB Rouge Vert Bleu em (cadratin) hauteur de la police courante rgb( 0 → 255, 0 → 255, 0 → 255 ) ex hauteur d'un "x" de la police courante rgb( 0→ 100%, 0 → 100%, 0 → 100% ) color: rgb(100%,0,100%); Notation des chiffres. L'unité de mesure est toujours collée au background-color: rgb(187,187,187); chiffre qui la précède : 12px, 16pt, 25%. Le caractère séparateur Couleurs acqua, green, navy, silver, black, gray, olive, des décimales est un point : 0.5em, 2.5cm (… et pas une virgule !). nommées teal, blue, lime, purple, white, fuchsia, maroon, red, yellow Listes color: fuchsia; background-color: yellow; list-style-type Puce ou numérotation utilisée pour la liste : Pour d'autres couleurs nommées : Couleurs Web : http://en.wikipedia.org/wiki/Web-safe_color disc • decimal 1, 2, 3... circle ∘ decimal-leading-zero 01, 02, 03... Texte square ▪ lower-alpha a, b, c... none upper-alpha A, B, C... Mise en forme des caractères lower-roman i, ii, iii, iv, v upper-roman I, II, III, IV, V font-family Polices à utiliser pour le texte par ordre de priorité décroissant et séparées par des virgules. list-style-image Image utilisée comme puce : none | url(image) Familles génériques : serif | sans-serif | cursive | L'URL est absolue ou relative à la feuille de style. fantasy | monospace list-style-image: url(images/pucerouge.png); font-family: verdana,arial,helvetica,sans-serif; list-style-position Placement du marqueur de liste par rapport au font-family: georgia,'times new roman',times, serif; texte : inside | outside font-family: 'courier new',courier,monospace; • Le marqueur est à • Le marqueur est à font-size Taille de la police : [valeur de taille] | % | x-small | l'intérieur (inside) l'extérieur (outside) small | medium | large | x-large | smaller | larger • Le marqueur est à • Le marqueur est à Les valeurs relatives (em, %) sont calculées par l'intérieur (inside) l'extérieur (outside) rapport à la taille de la police parente. Écriture raccourcie font-style Style de la police : italic | normal | oblique list-style : list-style-type list-style-position list-style-image color Couleur de la police : [valeur de couleur] | black list-style: square outside none; font-weight Graisse de la police : bold | normal font-variant Déclinaisons de la police : normal | small-caps Tableaux Écriture raccourcie border-collapse Fusion des bordures de cellules : separate | collapse font: style variant weight size/line-height family collapse separate 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] border-spacing Espace entre les cellules du tableau (si border- Les valeur relatives (%, em) sont calculées en collapse:separate). référence à taille de la police courante. Si une seule valeur : espace vertical et horizontal Si deux valeurs : 1ère = horizontal et 2e = vertical text-align Alignement du texte : left | right |center | justify | inherit caption-side Côté où s'affiche la légende du tableau (définie dans la balise <caption>) : top | bottom | left | right text-decoration Soulignements du texte : none | underline (souligné) | overline (surligné) | line-through(barré) empty-cells Affiche ou non les cellules vides : show | hide text-indent Alinéa du texte : [valeur de taille] | % | 0 table-layout Mode de calcul de la largeur du tableau : auto | Le valeur en % se rapporte à la largeur du fixed | inherit. conteneur. fixed. Calcul rapide basé sur la seule 1ère ligne du 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 Espacement des mots ; souvent exprimées en vertical-align Alignement vertical du contenu (ne fonctionne que points : [valeur de taille] | normal (valeurs négatives pour <td>, <th> et les éléments ayant la propriété possibles) display:table-cell) : baseline | top | bottom | middle white-space Gestion des blancs : normal (espaces et les lignes vides fusionnés) | pre (espaces et lignes vides Priorités et cascades préservés) | nowrap (espaces préservés mais lignes vides fusionnées) 1) Styles du navigateur ; Mesures de spécifité direction Sens d'écriture du texte : ltr | rtl. 2) Styles de l'auteur de la page : * 0 a) sélection des styles applicables à l'élément (média) ; balise 1 Valeurs génériques b) sélection des propriétés en fonction de .classe, 10 la spécificité des sélecteurs ; :pseudo-classe inherit Une propriété à laquelle on affecte la valeur inherit c) pour des sélecteurs de même reçoit la valeur du parent pour la même propriété. spécificité, sélection du dernier défini. #identifiant 100 !important Une valeur à laquelle on ajoute le mot-clef !important 3) Styles !important du navigateur. !important 1000 devient prioritaire ; elle supplante même les styles ➋ Exemples de spécifité pour quelques sélecteurs : directs (placés directement dans la balise) span.alerte → 11 a.menu:hover span → 22 #header span → 101 p { color: black !important; }
- Mémento CSS 2.1 - Boites et positionnement Modèle de boite 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; 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. 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-bottom chaque direction: [valeur de taille] | auto | 0. Une 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-right et 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 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. Dimensions width - height 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 des line-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 : visible (l'élément dépasse) | hidden (l'él. est tronqué) | ➌ border: 1px solid red; Formes détaillées : border-top, border-right, border-bottom, border-left. scroll (barre de défilement) | auto (en général visible).
- Affichage display - visibility 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] | 0. La profondeur est Les éléments de mise en forme en-ligne sont juxtaposés 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 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). Interface utilisateur cursor Permet de choisir l'apparence du curseur : url(curseur) | auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help crosshair default pointer move text help Image sans flottement Image avec float:left Références e-resize n-resize ne-resize nw-resize wait w-resize s-resize sw-resize se-resize ‣ Spécification CSS 2.1 en français : 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 ‣ Compatibilité des navigateurs aux CSS (en anglais): outline-style Style du contour: solid | dotted | dashed | double | http://www.quirksmode.org/css/contents.html inset | outset | groove | ridge | none (même valeurs ‣ Tutoriels et exemples d'utilisation : http://openweb.eu.org/css que border-style moins hidden) outline-width Épaisseur du contour [valeur de taille]| thin | medium | thick. Remarque: quelque soit sa taille le contour Propriétés CSS absentes du mémento n'interfère pas sur la place occupée par la boite. Propriétés et sélecteurs éliminés de ce document car mal Écriture compacte implémentés par les navigateurs : @charset, @font-face, :before, outline: outline-style outline-width outline-color :after, clip, content, counter-increment, counter-reset, font-size-adjust, font-stretch, marker-offset, quotes, text-shadow, unicode-bidi. Mise à jour le 2009-04-25. Les propriétés destinées aux médias paginés (impression) ou Copyright © Éric Bellot, 2009. <http://www.eric-bellot.fr> ➍ Publié selon les termes de la licence Creative Commons CC-BY-SA : audios ne sont pas abordées dans ce mémento. http://creativecommons.org/licenses/by-sa/2.0/fr/
262 views, 0 favs, more stats
Fiche récapitulan rapidement la syntaxe des feuill more
More info about this document
Go to text version
- Total Views 262
- 245 on SlideShare
- Comments 0
- Favorites 0
- Downloads 12
Most viewed embeds
All embeds
- Upload Info
- Uploaded via SlideShare
- Uploaded as Adobe PDF
0 comments
Post a comment