retour au sommaire Memento XSL Memento ANT
Ajouter un commentaire, une note, faire une correction, référencer un lien, ...

Memento CSS


Table des matières :

Inclure un fichier CSS en HTML

<head> <link href="xxx.css" rel="stylesheet" type="text/css" /> </head>

Font / Texte

Propriétés de texte / font (CSS 1 / CSS 2):
  • font-family : Famille de police
  • font-style : Style de police
  • font-variant : Variante de police
  • font-size : Taille de police
  • font-weight : Graisse de police
  • font-stretch : Étirement de la police (CSS 2)
  • font : Police en général
  • word-spacing : Espace des mots
  • letter-spacing : Espace des signes
  • text-decoration : Décoration du texte
  • text-transform : Transformation du texte
  • color : Couleur du texte
  • text-shadow : Ombrage du texte (CSS 2)
Détails :
  • font-family
    • serif - sans-serif - monospace - cursive - fantasy
    • Verdana - Times - Helvetica - Arial - Arial Nerrow - ...
  • font-style
    • normal - italic - oblique
  • font-variant
    • normal - small-caps
  • font-weight
    • 100 - 200 - 300 - 400 - 500 - 600 - 700 - 800 - 900
    • Normal - bold - bolder - lighter
  • font-size
    • 30pt - 30px - 1cm - 200%
    • xx-large - x-large - large - medium - small - x-small - xx-small
    • larger - smaller
  • font: Cette propriété permet de définir en une seule fois toutes les propriétés de font.
    • font:15px/18px Times bold italique
    • font:Arial, Verdana 100%/120% italique
  • text-decoration
    • none, underline
  • text-transform
    • uppercase, lowercase, capitalize
  • text-align
    • left, right, center, justify, super
  • text-indent
    • 10%, 10pt
  • word-spacing
  • letter-spacing
  • line-height: contrôle de l'interligne
  • vertical-align: (mal supporté en général)
    • super, sub
  • font-stretch: (pas encore interprétée par les navigateurs répandus)
    • wider : plus large que normal.
    • narrower : plus serré que normal.
    • condensed : condensé.
    • semi-condensed : à moitié condensé.
    • extra-condensed : très condensé.
    • ultra-condensed : extrêmement condensé.
    • expanded : étendu.
    • semi-expanded : à moitié étendu.
    • extra-expanded : très étendu.
    • ultra-expanded : extrêmement étendu.
    • normal : étirement normal.
  • text-shadow: couleur ou none (pas encore interprétée par les navigateurs répandus)

Alignement

Propriétés d'alignement (CSS 1 / CSS 2):
  • text-indent : Retrait du texte (numérique / - pour un retrait de la 1ere ligne)
  • line-height : Interligne
  • vertical-align : Alignement vertical
  • text-align : Alignement horizontal
  • white-space : Césure (CSS 2)
Détails :
  • vertical-align
    • top : aligner en haut.
    • middle : aligner au milieu.
    • bottom : aligner en bas.
    • baseline : aligner sur la ligne de base (ou en bas s'il n'y a pas de ligne de base).
    • sub : mettre en indice (sans réduire la taille de la police).
    • super : mettre en exposant (sans réduire la taille de la police).
    • text-top : aligner sur le bord supérieur de l'écriture.
    • text-bottom : aligner sur le bord inférieur de l'écriture.
  • text-align
    • left : aligner à gauche (réglage par défaut).
    • center : centrer.
    • right : aligner à droite.
    • justify : justifier.
  • white-space: Fixe le passage à la ligne
    • normal : automatique (à l'exception de <pre> et de <nowrap>).
    • pre : idem que <pre>...<pre>.
    • nowrap : Pas de césure automatique.

Marge / Padding

Propriétés de marge padding :
  • margin-top / margin-right / margin-botton / margin-left
    • 20pt - 30px - 1cm - 10%
  • margin: Permet de définir la valeur des 4 marges (top - right - bottom - left)
    • margin: 1cm 2cm 1cm 2cm
  • padding-top / padding-bottom / padding-left / padding-right
  • padding: Permet de définir la valeur des 4 paddings (top - right - bottom - left)

Bordure

Propriétés pour les bordures :
  • border[-top, -left, -right, -bottom]-width : Épaisseur de la bordure
  • border[-top, -left, -right, -bottom]-color : Couleur de la bordure
  • border[-top, -left, -right, -bottom]-style : Type de la bordure
  • border[-top, -left, -right, -bottom] : Bordure en général
Détails :
  • border-style: (none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset)
    • none : pas de bordure (ou bien bordure transparente).
    • hidden : pas de bordure (ou bien bordure transparente).
    • dotted : en pointillés .
    • dashed : en tirets.
    • solid : pleine.
    • double : double et pleine.
    • groove : en relief.
    • ridge : effet 3D.
    • inset : rentrante.
    • outset : sortante.
  • border-width: (thin, medium, thick) ou numérique
    • thin : fine.
    • medium : moyenne.
    • thick : épaisse.
  • border-color: (black, transparent, #FFFFFF, ...)

Couleur et arrière plan

Propriétés pour les couleurs et arrière plan (CSS 1) :
  • background-color : Couleur d'arrière-plan
  • background-image : Image d'arrière-plan
  • background-repeat : Effet de répétition
  • background-attachment : Effet de filigrane
  • background-position : Position d'arrière plan
  • background : Arrière-plan en général
Détails :
  • background-color: Couleur de fond
    • rgb(120, 100, 214),
    • #005500,
    • blue.
  • background-image: Image de fond
    • exemple: background-image:url("bg.jpg");
  • background-repeat
    • repeat, repeat-x, repeat-y, no-repeat
  • background-attachment
    • scroll, fixed
  • background-position: Mise en page précise de l'image
    • exemple: background-position:20 20;
  • background: regroupe en une seule propriété les 5 précédentes
    • exemple: background: rgb(120, 100, 214), #005500, blue,

Positionnement

Propriétés de positionnement (CSS 2) :
  • position : Mode de positionnement
  • top : Position à partir du haut
  • left : Position à partir de la gauche
  • bottom : Position à partir du bas
  • right : Position à partir de la droite
  • width : Largeur
  • min-width : Largeur minimale
  • max-width : Largeur maximale
  • height : Hauteur
  • min-height : Hauteur minimale
  • max-height : Hauteur maximale
  • overflow : Passage d'élément au contenu trop important
  • direction : Direction
  • float : Cours du texte
  • clear : Suite pour le cours du texte
  • z-index : Position de la couche en cas de superposition
  • display : Mode d'affichage ou plutôt non affichage sans prendre de place
  • visibility : Affichage ou non affichage avec réservation de place
  • clip : Limiter le domaine d'affichage
Details:
  • position: vous pouvez déterminer le mode de positionnement. Les mentions suivantes sont permises:
    • absolute : Positionnement absolu, mesuré à partir du bord de l'élément parent; peut défiler.
    • fixed : Positionnement absolu, mesuré à partir du bord de l'élément parent; reste fixe lors du défilement. .
    • relative : Positionnement relatif mesuré à partir de la position de départ de l'élément proprement dit.
    • static : Pas de positionnement spécial, flux normal de l'élément (réglage par défaut).
  • overflow: vous pouvez définir comment des éléments intérieurs, au contenu trop important, doivent être traités. Les données suivantes sont possibles:
    • visible : L'élément sera agrandi de manière à ce que son contenu soit complètement visible dans tous les cas.
    • hidden : L'élément sera coupé s'il dépasse les limites.
    • scroll : L'élément sera coupé s'il dépasse les limites. Le navigateur WWW doit pourtant proposer des barres de défilement, un peu comme dans une fenêtre cadre incorporée.
    • auto : Le navigateur Web doit décider en cas de conflit, comment l'élément sera affiché. Proposer des barres de défilement est également permis.
  • direction: vous pouvez fixer le sens d'écriture. Les mentions suivantes sont possibles:
    • ltr : de gauche à droite.
    • rtl : de droite à gauche.
  • float: vous pouvez spécifier que les éléments suivants passent sur les côtés de l'élément/du passage actuel. Les données suivantes sont possibles:
    • left : L'élément se trouve à gauche et sera entouré par la droite des éléments qui le suivent.
    • right : L'élément se trouve à droite et sera entouré par la gauche des éléments qui le suivent.
    • none : L'élément ne sera pas entouré (réglage normal).
  • clear: vous pouvez interrompre le cours du texte pour en forcer la poursuite sous l'élément/le passage entouré. Les données suivantes sont possibles:
    • left : impose pour float:left la poursuite dessous.
    • right : impose pour float:right la poursuite dessous.
    • both : impose dans chaque cas la poursuite dessous.
    • none : n'impose pas de poursuite dessous. (réglage normal).
  • visibility: vous pouvez spécifier si un élément est affiché au début ou non. Les mentions suivantes sont possibles:
    • hidden : Le contenu de l'élément est d'abord caché (non affiché).
    • visible : Le contenu de l'élément est d'abord affiché (réglage normal).
  • clip
    • exemple :<div style="position:absolute; top:100px; left:100px; clip:rect(0px 130px 130px 0px);"><img src="img.gif" width="208" height="181" border="0" /></div>

Listes

  • list-style-type: Type de puce ou numérotation pour la liste.
    • disc: puce ronde noire pleine.
    • circle: puce ronde vide.
    • square: puce carrée vide
    • decimal: numérotation (1, 2, 3, etc).
    • decimal-leading-zero: numérotation avec zéros (001, 002, etc).
    • alpha
    • upper-alpha
  • list-style-image: Permet de définir une image comme puce de la liste.
    • url de l'image,
    • list-style-image:url("puce.gif")
  • list-style-position: Permet de définir un alignement sur la puce ou sur la marge du texte de la liste.
    • outside : toutes les lignes sont alignées sur la puce.
    • inside : à partir de la seconde ligne, le texte retourne à la marge.
    • exemple: list-style-position:inside
  • list-style: Permet de définir dans un seul format, les propriétés précédentes.
    • exemple: list-style:disc inside

Liens

  • Type de liens
    • a:
    • a:visited
    • a:hover
    • a:active
  • Exemple
    • a {text-decoration:none; color:#FF0000}
    • a:hover {text-decoration:underline; color:red}

Scrollbar (> ie 5.5)

  • scrollbar-face-color: defini la couleur du dessus des boutons et de la barre de défilement.
  • scrollbar-shadow-color: defini la couleur sombre du relief des boutons (noir conseillé).
  • scrollbar-highlight-color: defini la couleur claire du relief des boutons (blanc conseillé).
  • scrollbar-3dlight-color: defini la couleur claire du relief des boutons quand ceux-ci ne sont pas enfoncés (noir conseillé).
  • scrollbar-darkshadow-color: defini la couleur sombre du relief des boutons quand ceux-ci ne sont pas enfoncés (noir conseillé).
  • scrollbar-track-color: defini la couleur du fond de la barre.
  • scrollbar-arrow-color: defini la couleur des flèches.

Exemple: (Ecrire entre les balises <head> et </head>)
BODY { scrollbar-face-color: #7189AB; scrollbar-shadow-color: #000000; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #000000; scrollbar-darkshadow-color: #000000; scrollbar-track-color: #94A9CA; scrollbar-arrow-color: #FFCC00; }
Source : EditeurJavascript.com

Ressources & Liens

Loribel.com / Section CSS
Self HTML



Memento ANT
Exemples ANT
Memento Expression Régulière
Memento DTD
Memento JS
Memento Java
Memento XML
Memento XSL
Version imprimable...
Envoyer à un ami...

Sujets liés

HTML
CSS
tous les sujets...

Sites de référence

W3C / CSS
tous les liens...

Memento

Memento CSS
Memento HTML
tous les memento...

HTML

Liens [13] - Articles [1] -

CSS

Liens [6] - Articles [3] -

Choisir les meilleures vitamines...



Films Disney

Vidéos sur les OGM

Villes de France sur GoogleMap

Memento


Informatique


Java - XML - Web


Voir Aussi



Google