Mise en forme de la police
Font-family : Propriété pour choisir la police.
Font-size : Propriété pour le corps (taille de la police).
Font-style : Propriété pour l’italique.
Font-weight : Propriété pour la graisse de la police
Line-height : Propriété pour l’espacement entre les lignes
Mise en forme du texte
Color : Propriété pour définir la couleur du texte.
Text-decoration : Propriété pour souligner, surligner, barrer, clignoter.
Mise en forme du fond
Background-color : pour la couleur du fond de page (couleur d’arrière-plan).
Background-image : pour placer une image en fond de page ou d’élément (image d’arrière-plan).
Background-repeat-x : propriété pour répétition horizontale d’une image.
Background-repeat-y : propriété pour répétition verticale d’une image.
Background-attachment : pour définir une image fixe lors du défilement de la page.
Background-attachment y : définir si une image reste fixe verticalement lors du défilement de page.
Background-position : pour définir la position d’une image dans la page ou le bloc.
Marge distance entre le cadre et l’extérieur
margin-top : marge supérieure
margin-right : marge de droite
margin-bottom : marge inférieure
margin-left : marge de gauche
Distance interne entre la bordure et le contenu = remplissage
padding : Propriété raccourcie qui spécifie la valeur de la distance interne entre la bordure et le contenu.
padding-top : Valeur de la marge supérieure
padding-bottom : Valeur de la marge inférieure
padding-right : Valeur de la marge droite
padding-left : Valeur de la marge gauche
Sur le mot "padding" : je crois que "remplissage" est préférable à "marge intérieure", souvent utilisée, parce que :
1- ça conserve deux termes bien distincts, comme le sont "margin" et "padding" en anglais
2- le "padding" ne se comporte pas comme une "margin" :
il adopte la même couleur ou image de fond que le texte, alors que la marge est transparente
il existe pour tous les éléments d’une page alors que la marge n’a de sens que pour les éléments de type "block" : les div, les paragraphes,e tc…
surtout, il n’y a pas de fusion des padding.
Explication : un paragraphe avec margin-bottom:15 px et le suivant avec margin-top:10px seront séparés par 15 pixels (la plus grande des deux marges) et non 10+15=25 pixels.
Alors qu’un paragraphe muni de padding-top:15px et padding-bottom:10px sera haut d’au moins 25 pixels + la hauteur de ce qu’on met dans le paragraphe.
Bordure
border : Raccourci vers les propriétés de bordure
border-top : Valeur de la bordure supérieure
border-right : Valeur de la bordure de droite
border-bottom : Valeur de la bordure inférieure
border-left : Valeur de la bordure de gauche
border-width : Raccourci pour les propriétés d’épaisseur de la bordure
border-top-width : Epaisseur de la bordure supérieure
border-right-width : Epaisseur de la bordure droite
border-bottom-width : Epaisseur de la bordure inférieure
border-left-width : Epaisseur de la bordure gauche
border-style : Raccourci pour les styles de la bordure
border-top-style : Style de la bordure supérieure
border-right-style : Style de la bordure droite
border-bottom-style : Style de la bordure inférieure
border-left-style : Style de la bordure gauche
border-color : Raccourci pour la couleur de la bordure
border-top-color : Couleur de la bordure supérieure
border-right-color : Couleur de la bordure droite
border-bottom-color : Couleur de la bordure inférieure
border-left-color : Couleur de la bordure gauche
Divers
Overflow-x : Pour afficher une scrollbar horiz. ou vert. à la zone de texte overflow-y : idem
visible, rend visible tout ce qui dépasse.
hidden, cache tout ce qui dépasse.
scroll, met toujours une barre de défilement horizontale.
auto, met une barre de défilement horizontale si besoin.
inherit, hérite de son parent (css2).
=>ne pas utiliser car ne fonctionne qu’avec des navigateurs modernes
Max-height : pour spécifier une hauteur maximale sur une balise de type bloc.
=>ne pas utiliser car ne fonctionne pas sous IE
Pour en savoir plus
Sur Spip.net, la rubrique sur Modifier l’habillage graphique
Sur OpenWeb, vous trouverez des exemples d’utilisation des CSS
Un forum d’entraide sur les CSS et mise en forme sur Alsacréations.
Une mine d’infos sur CSS faciles
Un pense-bête sur les CSS sur Self html.
Et enfin, exhaustive mais aride, la traduction de la documentation officielle : spécifications CSS2 du W3C