Aide-mémoire CSS - Tutoriel HTML & CSS

Liaison de feuilles de styles aux pages HTML

Placer cette ligne de code dans la partie <head> de la page HTML :

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

Propriétés de la boîte

margin : Marge : all ; haut+bas gauche+droite ; haut droit bas gauche
Si deux ou trois valeurs données, elle est prise du bord opposé.

margin-top : Marge de haut
margin-right : Marge de droite
margin-bottom : Marge de bas
margin-left : Marge de gauche
- Longueur
- auto

padding : Espacement : all ; haut+bas gauche+droite ; haut droit bas gauche
Si deux ou trois valeurs données, elle est prise du bord opposé.

padding-top : Espacement de haut
padding-right : Espacement de droite
padding-bottom : Espacement de bas
padding-left : Espacement de gauche
- Longueur
- auto

border <border-width> || <border-style> || <color> : Bordure (les quatres)
Si deux ou trois valeurs données, elle est prise du bord opposé.

border-top : Bordure de haut
border-right : Bordure de droite
border-bottom : Bordure de bas
border-left : Bordure de gauche

border-width : Taille de bordure : all ; haut+bas gauche+droite ; haut droit bas gauche
Si deux ou trois valeurs données, elle est prise du bord opposé.

border-width-top : Taille de bordure de haut
border-width-right : Taille de bordure de droite
border-width-bottom : Taille de bordure de bas
border-width-left : Taille de bordure de gauche
- Longueur
- auto

border-color couleur : Couleur de la bordure
Vous pouvez donner entre un et quatre paramètres : les valeurs manquantes seront reprises du bord opposé.

border-style : Style de ligne de la bordure
Vous pouvez donner entre un et quatre paramètres : les valeurs manquantes seront reprises du bord opposé.
- none
- dotted
- dashed
- solid
- double
- groove
- ridge
- inset
- outset
width : Longueur
- Longueur (si pourcentage : par rapport à la longueur de l'élément parent)
- auto
height : Hauteur
- Longueur (sauf pourcentages)
- auto
float : Bloc flottant ou pas, permet de le 'sortir' du bloc actuel ; le texte (et contenu) environnant sera 'word-wrappé' autour.
- none
- left
- right
clear : Permettre des blocs flottants à côté : Si clear est défini sur un coé (ou les deux), aucun élément float ne sera autorisé de ce côté ; et s'il y en avait déjà, le blocest déplacé vers le bas jusqu'à satisfaire la demande.
- none
- left
- right
- both

Couleur et propriétés du fond de bloc

color couleur : Couleur de texte (et de soulignement et de bordure par défaut)

background : <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position> : Fond de bloc

background-color : Couleur de fond du bloc
- couleur
- transparent
background-image : Image de fond du bloc
- URL
- none
background-repeat : Répétition de l'image de fond
- repeat
- repeat-x
- repeat-y
- no-repeat
background-attachment : Scroller ou non l'image de fond avec le canevas
- scroll
- fixed
background-position : Position de départ de l'image de fond
- [<percentage> | <length>]{1,2} | [top | center | bottom] || [left | center | right]

Propriétés de la police de caractères

font : [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>

font-family : Police(s) de caractères
- serif (e.g., Times)
- sans-serif (e.g., Arial or Helvetica)
- cursive (e.g., Zapf-Chancery)
- fantasy (e.g., Western)
- monospace (e.g., Courier)
font-style : Style de police
- normal
- italic
- oblique
font-variant : Variation de la police
- normal
- small-caps
font-weight : Épaisseur de la police
- normal
- bold
- bolder
- lighter
- 100 à 900
font-size : Taille de la police
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
- Taille relative ou absolue

Propriétés du texte

word-spacing : Espacement entre les mots
- normal
- Longueur
letter-spacing : Espacement entre les lettres
- normal
- Longueur
text-decoration : Décoration du texte
- none
- underline
- overline
- line-through
- blink
vertical-align : Alignement vertical du texte
- baseline
- sub
- super
- top
- text-top
- middle
- bottom
- text-bottom
text-transform : Transformation du texte
- none
- capitalize : Majuscule du premier caractère de chaque mot
- uppercase : Majuscules
- lowercase : Minusculles
text-align : Alignement horizontal du texte
- left
- right
- center
- justify
text-indent : Indentation de la première ligne du texte (peut être négatif ?)
- Longueur
line-height : Hauteur de la ligne de base
- normal
- (nombre) Multiplie ce nombre par la taille de la police
- Longueur

Propriétés spécifiques

display : Mode d'affichage des blocs
- bloc : en tant que bloc (une ligne est passée avant et après le bloc)
- inline : en ligne
- list-item : en tant que ligne de liste
- none : Ne pas afficher le bloc et ses enfants
white-space : Rendu des espaces
- normal : les espaces, tabulations et retours à la ligne sont réunis et affichés comme un seul espaces
- pre : espacements affichés tels quels
- nowrap : ne passe jamais à la ligne même si le contenu est trop grand (dans ce cas une barre de défilement horizontale apparaître)

list-style : <list-style-type> || <list-style-position> || <url> : Type de puce
L'URL sert à définir la propriété list-style-image.

list-style-type : Type de puce ou de numérotation des listes (s'applique à ul, ol et li, et éléments avec display: list-item)
- disc : un disque plein
- circle un cercle (creu)
- square : un carré plein
- decimal : 1 2 3 4 ...
- lower-roman : i ii iii iv ...
- upper-roman : I II III IV ...
- lower-alpha : a b c d ...
- upper-alpha : A B C D ...
- none
list-style-image : Image à la place d'une puce (s'applique à ul, ol et li, et éléments avec display: list-item)
- URL
- none
list-style-position : Position de la puce (s'applique à ul, ol et li, et éléments avec display: list-item)
- inside : la puce est à l'intérieur, alignée avec le texte (et donc la première ligne est décallée à droite)
- outside : la puce est à l'extérieur, le texte est lui aligné

Unités

Longueurs et pourcentages

Préférez des unités relatives, car elles peuvent être adaptées au visisteur (mal voyant ou pas) et au périphérique (écran ou imprimé), et banissez les unités absolues (sauf si les relations sont directements définies pour un seul périphérique, par exemple). Ces valeurs peuvent être positives comme négatives (+/-), la valeur 0 ne requérant pas de spécifier d'unité.

Unités de longeur relatives
- em : hauteur de la police de caractère (ou de celle de la balise parente, lors de définition de cette même taille)
- ex : hauteur du caractère x minuscule ('x')
- px : taille d'un pixel (différent à l'écran et sur papier... mais calculés pour être dans les proportions)
Unités de longeur absolues
- cm : centimètres (1 cm = 10 mm)
- mm : millimètres
- in : inches (1 in = 2.54 cm)
- pt : points (1 pt = 1/72 in)
- pc : picas (1 pc = 12pt)
Le pourcentage : Pourcentage de la longueur de l'élément parent

Couleurs

Il existe déjà 16 couleurs prédéfinies : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, et yellow.
Une couleur est donnée au format RGB (Red Green Blue : Rouge, puis Vert, puis Bleu) déclarée ainsi :

Unités de longeur relatives
- #rrggbb (par exemple, du vert moyen, #00cc00)
- #rgb (même exemple : #0c0)
- rgb(x,x,x) où x est un entier entre 0 et 255 inclu (par exemple, rgb(0,204,0))
- rgb(y%,y%,y%) où y est un nombre à virgule compris entre 0.0 et 100.0 inclu (par exemple, rgb(0%,80%,0%))

URLs

Une URL (adresse WEB) est définie par url(l_adresse). L'adresse peut être entre guillemets simples ('') ou doubles ("").
Les parenthèses, virgules, espaces et guillemets dans l'adresse doivent être échappés avec un antislash (\, pour une virgule, \" pour un guillement). Si une adresse relative est donnée, elle est relative à la feuille de style (le fichier .css) et non à la page WEB (.html) !

Sélécteurs

Les validateurs et références...

TODO : cf. page de liens.