This page was exported from GTUTO [ https://www.gtuto.com ] Export date:Fri Apr 19 2:29:25 2024 / +0000 GMT ___________________________________________________ Title: CSS aide mémoire --------------------------------------------------- SYNTAX Syntax selector {property: value;} External Style Sheet <link rel="stylesheet" type="text/css" href="style.css" /> Internal Style <style type="text/css"> selector {property: value;} </style> Inline Style <tag style="property: value"> GENERAL Class String preceded by a period ID String preceded by a hash mark div Formats structure or block of text span Inline formatting color Foreground color cursor Appearance of the cursor display block; inline; list-item; none overflow How content overflowing its box is handled visible, hidden, scroll, auto visibility visible, hidden FONT font-style Italic, normal font-variant normal, small-caps font-weight bold, normal, lighter, bolder, integer (100-900) font-size Size of the font font-family Specific font(s) to be used TEXT letter-spacing Space between letters line-height Vertical distance between baselines text-align Horizontal alignment text-decoration blink, line-through, none, overline, underline text-indent First line indentation text-transform capitalize, lowercase, uppercase vertical-align Vertical alignment word-spacing Spacing between words BOX MODEL height; width; margin-top; margin-right; margin-bottom; margin-left; padding-top; padding-right; padding-bottom; padding-left; BORDER border-width Width of the border border-style dashed; dotted; double; groove; inset; outset; ridge; solid; none border-color Color of the border POSITION clear Any floating elements around the element? both, left, right, none float Floats to a specified side left, right, none left The left position of an element auto, length values (pt, in, cm, px) top The top position of an element auto, length values (pt, in, cm, px) position static, relative, absolute z-index Element above or below overlapping elements? auto, integer (higher numbers on top) BACKGROUND background-color Background color background-image Background image background-repeat repeat, no-repeat, repeat-x, repeat-y background-attachment Background image scroll with the element? scroll, fixed background-position (x y), top, center, bottom, left, right LIST list-style-type Type of bullet or numbering in the list disc; circle; square; decimal; lower-roman; upper-roman; lower-alpha; upper-alpha; none list-style-position Position of the bullet or number in a list inside; outside list-style-image Image to be used as the bullet in a list Aide-Mémoire CSS Sélecteur Sélecteur simpleExemple de sélecteur simple. /* --- Base --- */ * { ... } /* Tous les tags */ p { ... } /* paragraphe */ h1, h2, h3 { ... } /* Titre 1 ou titre 2 ou titre 3 */ /* --- Classe ou identifiant --- */ h1.letitre { ... } /* Titre 1 dont la classe est "letitre" */ h1#letitre { ... } /* Titre 1 dont l'ID est "letitre" */ .letitre { ... } /* Tout Tag dont la classe est "letitre" */ #letitre { ... } /* Le Tag dont l'ID est "letitre" */ /* --- Lien --- */ a:link { ... } /* Lien non visité */ a:visited { ... } /* Lien visité */ a:hover, a:focus { ... } /* Lien survolé ou ayant le focus */ a:active { ... } /* Lien actif (état cliqué) */ /* --- autre Pseudo-classe --- */ p:first-letter { ... } /* Premier caractère de l'élément P */ div:first-line { ... } /* Première ligne de l'élément DIV */ div:first-child { ... } /* Premier élément d'un bloc DIV */ Sélecteur hiérarchiqueExemple de sélecteur hierachique. Attention, a part la base, les vieilles versions d'explorer auront du mal. /* --- Base --- */ div p { ... } /* Tous les tags p contenu dans un tag div */ div.cl p { ... } /* Tous les tags p contenu dans un tag div de classe "cl" */ div#id p { ... } /* Tous les tags p contenu dans un tag div d'ID "id" */ /* --- Hierachie évoluée --- */ div > p { ... } /* Tous les tags p directement contenu dans un tag div */ div + p { ... } /* Tous les tags p précédé par un tag div */ div:lang(fr) { ... } /* Tag div dont le contenu est déclaré français */ /* --- Sélecteur sur Attribut à partir de IE7 --- */ div[class] { ... } /* Tous les tags div contenant un attribut "class" */ div[width][height] { ... } /* Tous les tags div contenant un attribut "width" et "height" */ div[class="cl"] { ... } /* Tous les tags div contenant un attribut "class" égal à "cl" */ div[class^="cl"] { ... } /* Tous les tags div contenant un attribut "class" qui débute par "cl" */ div[class$="cl"] { ... } /* Tous les tags div contenant un attribut "class" qui se termine par "cl" */ div[class*="cl"] { ... } /* Tous les tags div contenant un attribut "class" qui contient "cl" */ div[class~="cl"] { ... } /* Tous les tags div contenant un attribut "class" dont l'une des valeurs est "cl" */ Typographie fontfont : Réglage global d'une police de caractères. font: bold 12px/14px Arial ; font-familyfont-family : Choix de la police de caractères. font-family: "Times New Roman", serif ; font-family: Georgia, serif ; font-family: Arial, sans-serif ; font-family: Helvetica, Verdana, sans-serif ; font-family: "Courier New", monospace ; font-sizefont-size : Taille de la police de caractères. préférer "em" et "%". font-size: 1em ; font-size: 12px ; font-size: 100% ; font-size: 12pt ; font-size: 12px ; colorcolor : Couleur de la police de caractères. color: white ; color: #FFFFFF ; color: rgb(255,255,255) ; color: transparent ; font-stylefont-style : Style de la police. font-style: normal ; font-style: italic ; font-style: oblique ; font-weightfont-weight : Epaisseur de la police. font-weight: normal ; font-weight: bold ; font-weight: bolder ; text-decorationtext-decoration : Soulignement ou surlignement. text-decoration: none ; text-decoration: underline ; text-decoration: line-through ; text-decoration: overline ; font-variantfont-variant : Affichage en petites majuscules. font-variant: normal ; font-variant: small-caps ; text-transformtext-transform : Mise en majuscules/minuscules. text-transform: none ; text-transform: capitalize ; text-transform: uppercase ; text-transform: lowercase ; text-aligntext-align : Alignement du texte. text-align: left ; text-align: center ; text-align: right ; text-align: justify ; text-indenttext-indent : Décalage de la première ligne du texte. text-indent: 5px ; text-indent: 5em ; text-indent: 100% ; line-heightline-height : Hauteur des caractères. line-height: normal ; line-height: 1em ; line-height: 12px ; line-height: 100% ; line-height: 12pt ; line-height: 12px ; letter-spacingletter-spacing : Espacement entre caractères. letter-spacing: normal ; letter-spacing: 12px ; letter-spacing: 100% ; letter-spacing: 12pt ; letter-spacing: 12px ; word-spacingword-spacing : Espacement entre mots. word-spacing: normal ; word-spacing: 12px ; word-spacing: 100% ; word-spacing: 12pt ; word-spacing: 12px ; Arrière-Plans backgroundbackground : Caractéristique globale d'un fond. background-color: red url(images/fond.png) no-repeat scroll center top ; background-colorbackground-color : Couleur de fond. background-color: red ; background-color: #FF0000 ; background-color: rgb(255,0,0) ; background-imagebackground-image : Image de fond. background-image: url(Images/LaBelleImage) ; background-repeatbackground-repeat : Répétition de l'image de fond. background-repeat: repeat ; background-repeat: repeat-x ; background-repeat: repeat-y ; background-repeat: no-repeat ; background-attachmentbackground-attachment : Fixation de l'image sur le navigateur (contre le défilement). background-attachment: scroll ; background-attachment: fixed ; background-positionbackground-position : Position de l'image sur le fond (x, y). background-position: left top ; background-position: center center ; background-position: right bottom ; background-position: 50% 50% ; background-position: 5px 10px ; Bloc et bordure marginmargin : Réglage des marges autour des blocs. margin: 1em ; /* 1em de chaque coté */ margin: 10px 20px ; /* Haut et bas : 10px, droite et gauche 20px */ margin: 10px auto ; /* Centré à droite et à gauche */ margin: 1px 2px 3px 4px ; /* Marge Haut, droite, bas, gauche */ margin-top: 10%; margin-bottom: 20px; margin-right: 30px; margin-left: 40px; paddingpadding : Réglage des marges à l'intérieur des blocs. padding: 1em ; /* 1em de chaque coté */ padding: 10px 20px ; /* Haut et bas : 10px, droite et gauche 20px */ padding: 1px 2px 3px 4px ; /* padding Haut, droite, bas, gauche */ padding-top: 10%; padding-bottom: 20px; padding-right: 30px; padding-left: 40px; borderborder : Affichage global d'une bordure. border: 5px dotted green ; border-widthborder-width : Largeur de la bordure. border-width: 5px ; border-width: 0.3em ; border-width: 1px 2px 3px 4px ; /* bordure Haut, droite, bas, gauche */ border-width-top: 1px ; border-colorborder-color : Couleur de la bordure. border-color: red ; border-color: #FF0000 ; border-color: rgb(255,0,0) ; border-styleborder-style : Type de la bordure. border-style: none ; border-style: solid ; border-style: dotted ; border-style: dashed ; border-style: inset ; border-style: outset ; border-style: double ; border-style: groove ; border-style: ridge ; cursorcursor : Type de pointeur affiché pour la souris. cursor: auto ; cursor: pointer ; cursor: defaut ; cursor: crosshair ; cursor: move ; cursor: help ; cursor: wait ; Tableaux border-collapseborder-collapse : Séparation ou collage des cellules du tableau (espace ou non entre les cellules). border-collapse: separate; border-collapse: collapse; border-spacingborder-spacing : Taille de l'espacement entre les cellules (si on est en "border-collapse: separate;"). border-spacing: 3px; border-spacing: 1em; empty-cellempty-cell : Gère l'affichage ou non d'une cellule si elle est vide. empty-cell: hide; empty-cell: show; caption-sidecaption-side : Placement de la légende du tableau. caption-side: top; caption-side: right; caption-side: bottom; caption-side: left; vertical-alignvertical-align : Alignement vertical dans la cellule d'un tableau. vertical-align: baseline; vertical-align: top; vertical-align: middle; vertical-align: bottom; table-layouttable-layout : Technique de calcul des la taille des cellules du tableau. table-layout: auto; table-layout: fixed; Positionnement displaydisplay : Mode d'affichage (ou non) d'un bloc ou d'un élément. display: none; display: block; display: inline; width et heightwidth : Largeur d'un block. height : Hauteur d'un block. width: 0; width: 400px; width: 50em; width: 60%; min-width: 100px; max-width: 100px; height: 0; height: 60%; min-height: 100px; max-height: 100px; positionposition : Position d'un block. position: static ; /* par défaut */ position: absolute ; position: fixed ; position: relative ; top, right, left, bottomTop, Right, Left, Bottom : Pour placer un bloc (hors static). par rapport à un ou deux bords. top: 5px ; right: 10em ; bottom: 0 ; left: 10% ; floatfloat : Pour laisser flotter un bloc à droite ou à gauche. float: none ; float: left ; float: right ; clearclear : Pour obliger un bloc à se placer derriere un flottant. clear: none ; clear: left ; clear: right ; clear: both ; overflow-x, overflow-yoverflow-x, overflow-y : Pour gérer le dépassement du contenu d'un objet en horizontal ou vertical. overflow-x: auto ; overflow-x: visible ; overflow-y: hidden ; overflow-y: scroll ; z-indexz-index : hors static, permet de gérer l'empilement des blocs. z-index: auto ; z-index: 10 ; z-index: 999 ; Liste liste-styleliste-style : Réglage globale d'une liste. liste-style: circle outside url(toto.jpg) ; liste-style-typeliste-style-type : Type de liste. liste-style-type: none ; liste-style-type: disc ; liste-style-type: circle ; liste-style-type: square ; liste-style-type: decimal ; liste-style-type: upper-roman ; liste-style-type: lower-alpha ; liste-style-type: upper-alpha ; liste-style-positionliste-style-position : Position du marqueur de liste dans la liste ou hors de la liste (outside est plus normal). liste-style-position: outside ; liste-style-position: inside ; liste-style-imageliste-style-image : Image pour remplacer le marqueur de la liste. liste-style-image: none ; liste-style-image: url(images/point.jpg) ; Page (balise @page) sizesize : Réglage de la page d'impression. size: auto ; size: portrait ; size: landscape ; orphansorphans : Evite les lignes seules en début de page en indiquant le nombre minimum sur une page. orphans: 3 ; widowswidows : Evite les lignes seules en fin de page en indiquant le nombre minimum de ligne. widows: 3 ; page-break-before, page-break-afterpage-break-before, page-break-after : Force un saut de ligne avant ou après un objet. page-break-after: auto ; page-break-before: always ; /* Saut de page à faire */ page-break-before: avoid ; /* Saut de page à éviter */ CSS3 Coins arrondisCoin arrondi sur tout un bloc. div.page { border-radius: 8px ; -webkit-border-radius: 8px ; -moz-border-radius: 8px ; -khtml-border-radius: 8px ; } Coin arrondi sur la partie haute d'un bloc. div.haut { border-radius: 8px 8px 0 0 ; -moz-border-radius: 8px 8px 0 0 ; -webkit-border-top-left-radius: 8px ; -webkit-border-top-right-radius: 8px ; -khtml-border-radius: 8px 8px 0 0 ; } OmbrageOmbrage décalé vers le bas et la droite, diffus de 6px d'une couleur grise. div { box-shadow: 3px 3px 6px #444 ; -moz-box-shadow: 3px 3px 6px #444 ; -webkit-box-shadow: 3px 3px 6px #444 ; -khtml-box-shadow: 3px 3px 6px #444 ; } Ombrage peu décalé sur un tableau. table { box-shadow: 1px 1px 7px #666 ; -moz-box-shadow: 1px 1px 7px #666 ; -webkit-box-shadow: 1px 1px 7px #666 ; -khtml-box-shadow: 1px 1px 7px #666 ; } CSS2 : Ombrage de texte décalé vers le bas et la droite, diffus de 3px d'une couleur grise. h2, h3 { text-shadow: 2px 2px 3px #999; } RotationRotation d'un bloc. a:hover img { transform-origin: 50% 50%; transform: scale(1.00) rotate(-5deg) ; -moz-transform-origin: 50% 50%; -moz-transform: scale(1.00) rotate(-5deg) ; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(1.00) rotate(-5deg) ; } iPhone, iPod, iPad et autres téléphones. Méta taille de pageNavigateur réglé sur la largeur de l'écran : <meta name="viewport" content="width=device-width"> Navigateur réglé sur la hauteur de l'écran : <meta name="viewport" content="width=device-height"> Navigateur réglé sur une largeur de 600 pixels : <meta name="viewport" content="width=640"> @média pour styleStyle pour une page inférieure à 1000 pixels de large : @media (max-width: 1000px) { p { ... } div { ... } } Style pour une page inférieure à 685 pixels (iPhone, iPod : paysage) : @media handheld, only screen and (max-width: 685px), only screen and (max-device-width: 685px) { p { ... } div { ... } } Style pour une page inférieure à 400 pixels (iPhone, iPod : portrait) : @media handheld, only screen and (max-width: 400px), only screen and (max-device-width: 400px) { p { ... } div { ... } } Style pour une impression : @media print { p { ... } div { ... } } --------------------------------------------------- Images: https://www.gtuto.com/box.gif --------------------------------------------------- --------------------------------------------------- Post date: 2016-01-22 22:43:15 Post date GMT: 2016-01-22 22:43:15 Post modified date: 2016-01-24 23:44:52 Post modified date GMT: 2016-01-24 23:44:52 ____________________________________________________________________________________________ Export of Post and Page as text file has been powered by [ Universal Post Manager ] plugin from www.gconverters.com