Your SlideShare is downloading. ×
Memento css
Memento css
Memento css
Memento css
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Memento css

1,088

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,088
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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 à laffichage 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 HTML1 - Structure dune règle CSS 4 - Les sélecteurs Sélecteurs de base p {...} Sélecteur de balise. La règle sapplique à tous les éléments <p>...</p> .ma_classe {...} Sélecteur de classe. Il sapplique à toutes les éléments ayant lattribut class="ma_classe". #mon_id {...} Sélecteur didentifiant. Il sapplique à lélément unique ayant lattribut id="mon_id". * {...} Sélecteur universel. La règle sapplique à tous2 - 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> p.ma_classe {...} La règle sapplique à tous les éléments <div><p style="line-height:2;color:#FF0000">Texte rouge avec de classe ma_classe :un interligne double</p> <p class="ma_classe">...</p>. div p strong {...} Sélecteur par ascendance. Sapplique aux seulsStyles internes dans lentê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. Sapplique aux éléments <title>Exemple CSS</title> <div>, <p> et <strong>. <style type="text/css"> <!-- div > p {...} Sélecteurs denfants. Sapplique 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 sapplique aux seuls --> <p> immédiatement précédés dun <div>. </style> </head> Pseudo-éléments <body> span:first-child {...}La règle sapplique à chaque <span> lorsquil est <p>Texte en taille 14px</p> le 1er enfant de son parent. <p class="alerte">Texte rouge de 14px</p> </body> span:last-child {...} La règle sapplique à chaque <span> lorsquil est</html> le dernier enfant de son parent. p:first-line {...} La règle sapplique à la première ligne de texteStyles externes dans des fichiers séparés de chaque élément <p> (él. de type bloc requis)<html lang="fr" xml:lang="fr"> p:first-letter {...} La règle sapplique à la première lettre de <head> chaque élément <p> (é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 sapplique à 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> p[class] {...} La règle sapplique à tous les éléments <p> </body> ayant un attribut class.</html> p[class="ma_class La règle sapplique aux éléments <p> ayant unContenu du fichier style.css : Contenu du fichier print.css : e"] {...} attribut class de valeur ma_classe.@charset UTF-8 @charset ISO-8859-1 p[class~="ma_clas La règle sapplique aux éléments <div> ayant unp { p { se"] {...} attribut class contenant une liste de valeurs font-size : 14px; font-size : 12pt;} } séparés par des espaces dont lune est ma_classe..alerte { .alerte { Pseudo-classes dynamiques (hyperliens seuls) color : #FF0000; color : black;} } a:link {...} Sapplique aux liens jamais cliqués. a:visited {...} Sapplique aux liens déjà visités.3 - Médias et importations Pseudo-classes dynamiques (tout élément) p:hover {...} Élément survolé par le pointeur de la sourisMédias span:focus {...} Sapplique à lélément ayant reçu le focusall tout contexte aural synthèse vocale (déplacement par tabulation)print impression braille braille (tactile) span:active {...} Sapplique à lélément lorsque le bouton de lascreen écran informatique embossed braille (impression) souris est enfoncé durant un clic.projection vidéoprojecteur tty terminal textuel Attention : Pour les hyperliens, les pseudo-classes doiventhandheld 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 dune 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. 6 - Couleurs 9 - Tailles et unités de mesureCouleurs Rouge Vert Bleu pt point (1/72e de pouce) px pixel décranhexadécimales cm centimètre mm millimètre # 00 → FF 00 → FF 00 → FF color: #ff00ff; background-color: #bbbbbb; in pouce anglais (inch) % pourcentageCouleurs RGB Rouge Vert Bleu em (cadratin) hauteur de la police courante ex hauteur dun "x" de la police courante rgb( 0 → 255, 0 → 255, 0 → 255 ) rgb( 0→ 100%, 0 → 100%, 0 → 100% ) Notation des chiffres. Lunité 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 - Listesnommé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 dautres 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, VMise 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é LURL 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 | list-style-position Placement du marqueur de liste par rapport au fantasy | monospace texte : inside | outside font-family: Verdana, Geneva, sans-serif; font-family: arial,helvetica,sans-serif; • Le marqueur est à • Le marqueur est à font-family: times new roman,times, serif; lintérieur (inside) lextérieur (outside) font-family: courier new,courier,monospace; • Le marqueur est à • Le marqueur est à lintérieur (inside) lexté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 | obliquecolor Couleur de la police : [valeur de couleur] | black 11 - Tableauxfont-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 raccourciefont: style variant weight size/line-height familyfont: italic normal bold 12pt/18pt times new roman,serif;font: 1em/2em sans-serif; border-spacing Espace entre les cellules du tableau (si border- collapse:separate).Mise en forme des paragraphes Si une seule valeur : espace vertical et horizontalline-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ù saffiche la légende du tableau (définie référence à taille de la police courante. dans la balise <caption>) : top | bottom | left | righttext-align Alignement du texte : left | right |center | justify. empty-cells Affiche ou non les cellules vides : show | hidetext-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] | % | 0. La valeur fixed. Calcul rapide basé sur la seule 1ère ligne du en % se rapporte à la largeur du conteneur. tableau : compare la largeur du tableau à latext-transform Casse du texte : none | capitalize | uppercase | somme des largeurs de cellules (width + border + lowercase. border-spacing) et garde la valeur la plus grande. auto. Calcul lent : prend en compte toutes lesletter-spacing Espacement des lettres ; souvent exprimées en cellules et tente de trouver un compromis entre la points (valeurs négatives possibles) : taille du contenu et les largeurs indiquées. [valeur de taille] | normal. vertical-align Alignement vertical du contenu (ne fonctionne queword-spacing Valeur ajoutée ou retirée à lespacement normal pour <td>, <th> et les éléments ayant la propriété entre les mots (0.25em à 0.35em par défaut) ; display:table-cell) : baseline | top | bottom | middle souvent exprimées en em : [valeur de taille] | normal (valeurs négatives possibles). 12 - Priorités et cascades (simplifiées)white-space Gestion des blancs : normal (espaces et les lignes 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 linternaute 5) Styles !important de 3) Styles du webmaster linternaute balise 1direction Sens décriture du texte : ltr | rtl. .classe, a) si des directives visent lélément (média, 10 :pseudo-classe sélecteur), elles sont appliquées à lélément : [attribut]8 - Valeurs génériques – priorité à la directive la plus spécifique (poids); #identifiant 100inherit Une propriété à laquelle on affecte la valeur inherit – priorité à la dernière définie (si poids égaux). b) si aucune directives ne vise lélément : style="..." 1000 reçoit la valeur du parent pour la même propriété.!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. Mémento CSS 2.1 - Boites et positionnement13 - 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 larrière-plan : transparent | [couleur]. Si color une image darrière-plan est définie, elle apparaît au dessus de la couleur darrière-plan et la masque.14 - Marges margin background- Hyperlien vers le fichier de limage darriè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 à lamargin-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 limagemargin-left conteneur (même pour les valeurs verticales). repeat darrière-plan : repeat | repeat-x (horizontale) | repeat- Les marges verticales ne sappliquent pas aux y (verticale) | no-repeat. éléments en-ligne standards. background- Positionne limage initiale de larriè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 limage) ‣ 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 limage). ‣ 3 valeurs : margin: top right&left bottom background- Permet de définir si limage est fixe dans la fenêtre ou ‣ 4 valeurs : margin: top right bottom left attachment si elle défile avec elle : scroll | fixed. Pratiquement, nemargin : 1em; /* même valeur pour les quatres marges */ sapplique quàmargin : 0.5em 0 1em 1em; /* une valeur par face */ Background-position en % larrière-plan deFusion des marges verticales <body>.Les blocs frères superposés ont Les marges verticales des Écriture compacteles marges adjacentes qui parents et des enfants background: color imagefusionnent : fusionnent si le parent na 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-repeatAttention : les marges latérales cause de la scroll 5px 10px; bordurene fusionnent pas. 18 - Dimensions width - height15 - Bordures border width Largeur dun élément : [valeur de taille] | % | autoborder-width Épaisseur de la bordure : [valeur de taille]| thin | Ne sapplique pas aux éléments en-ligne standards. Le medium | thick. Le % nest 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èqueborder-style Style de la bordure : solid | dotted | dashed | double | du contenu (ex. : largeur effective de limage) 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 dun élément : [valeur de taille] | % | auto border-bottom-style, border-left-style. Ne sapplique 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 limage) ‣ 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 conteneurborder : 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é) |Formes détaillées : border-top, border-right, border-bottom, border-left. scroll (barre de défilement) | auto (en général visible).
  • 4. 19 - Affichage display - visibility 23 - Positionnement positiondisplay Modifie laffichage dun élément : inline | block | list-item position Permet de gérer la façon dont lélément est positionné | none (il existe dautres 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 laffichage. 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 lespace quil 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 sapplique quaux 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 profondeurLes éléments de mise en forme en-ligne sont juxtaposés est calculée à partir du conteneur de référence (le 1erhorizontalement jusquà la limite latérale du conteneur, lorsque la parent positionné). Les valeurs négatives sontlimite 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). LesElé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 estexterne (images, vidéos, etc). Ces éléments acceptent certaines position:relativepropriétés CSS propres aux blocs (width, height, etc.) Éléments en- Le positionnement relatif permetligne remplacés : <img> <input> <object> <select> <textarea> de décaler un élément de sa position normale. La placedisplay:block normale de lélément est conservée et lélément en positionLes é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.dun 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 desdisplay:list-item limites de son conteneur. LeLes éléments saffichent comme des blocs avec la possibilité de conteneur doit lui-même disposergérer les propriétés de liste. Élément de liste par défaut : <li> dune propriété absolute ou relative pour que le contenu puisse être20 - Flottants float positionné. Sans cela, le contenu se positionne à partir du premier ancêtre dotés dune de ces propriétés. En dernier recours, il sefloat 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 à linté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 lorsquon 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 lapparence 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:left21 - 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 dutilisation : http://openweb.eu.org/css thick. Remarque: quelque soit sa taille le contour ninterfère pas sur la place occupée par la boite.22 - Propriétés CSS absentes du mémento Écriture compactePropriétés et sélecteurs définis dans la spécification mais éliminés outline: outline-style outline-width outline-colorde ce document car mal implémentés par les navigateurs :@charset, @font-face, :before, :after, clip, content, counter- Mise à jour le 2011-02-07 (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.

×