Boites, cadre, etc

Mémento CSS3 Tous les éléments présents sur une page web sont considérés comme des boites constituées ainsi:

Structure d'un fichier CSS

Un fichier .css est constitué d’une suite d’élément ayant la syntaxe suivantes :
sélecteur {
propriété: valeur; height
}
Sélecteur peut être :
●
Une balise (body, h1, p, ...)
●
Une classe (le nom de la classe est précédé d'un point )
●
Un identifiant (le nom de l'identifiant est précédé d'un # )

width
Pour le texte
Propriété Valeur(s) Description
Propriété Valeur(s) Description width 150px; Largeur de la boite en pixel (ici 150)
font-family Changer la police de caractère height 200px; Hauteur de la boite en pixel (ici 200)
serif; Caractères avec empattements margin 10px; Taille de margin en pixel (ici 10)
sans-serif; Caractères sans empattements margin-left 5px; Taille de margin gauche en pixel (ici 5).
monospace; Tous les caractères ont la même largeur On peut faire de même pour droite,haut et bas.
cursive; Effet écriture manuelle padding 10px; Taille de padding gauche en pixel (ici 5).
fantasy; Police "décorative" padding-top 5px; Taille de padding haut en pixel (ici 5).
On peut faire de même pour droite,gauche et bas.
font-size Taille des caractères border-color voir couleur Couleur de la bordure
xx-small; border-style Style de la bordure
x-small; dotted; Pointillés
small;
dashed; Tirets
medium;
large; solid; Lignes pleines simples
x-large; double; Lignes pleines doubles
xx-large; ridge; Lignes pleines avec effet 3D
font-weight "gras" des caractères
normal; border-width 2px; Largeur de la bordure en pixel (ici 2)
bold;
font-style Style du texte border-collapse collapse; Fusionner les bordures d'un tableau
normal; border-collapse separate; Séparer les bordures d'un tableau
italic;
oblique -40deg; Oblique incliné de -40 degrés Il est possible d'appliquer un style particulier si la souris passe sur un élément
text-align Alignement du texte dans la boite selecteur:hover
left; {
right; style à appliquer
center; } Effets
justify;
Exemple
Couleurs 1 moncss.css

Propriété Valeur(s) Description

color Couleur des caractères
white, silver, black, Le nom de la couleur (en anglais) 2
red, green, ...

rgb(r,v,b) r(ouge),v(ert) et b(leu) correspondent

aux composantes de la couleur. 1
r,v et b sont des entiers entre 0 et 255. 3
1
rgba(r,v,b,a) Même chose que pour rgb, mais 2
1
avec un paramètre d'opacité
"a" entre 0 (transparent) et 1 (opaque). 4 3

background-color Couleur de fond 4

3
les mêmes possibilités
que pour color