 |
Accueil ISD Equipe de recherche Laboratoire Paragraphe Enssib ECP Contact |  |
Langage CSS
Liste des propriétés de style CSS
Nom
Description
Exemple
font-family
nom et famille de la police
BODY {font-family: gill, helvetica, sans-serif }
font-style
style normal, italique et oblique
H1, H2, H3{font-style: italic }
font-weight
Epaisseur de la police
EM{font-weight:bolder }
font-size
Taille de la police
P { font-size: 12pt; }
BLOCKQUOTE {font-size: larger }
EM { font-size:150%}
EM { font-size:1.5em}font
Permet de regrouper les différentes propriétés de polices en une ligne
P { font: 12pt/14pt sans-serif }
P { font: 80% sans-serif }
P { font: x-large/110% "new century schoolbook", serif }
P { font: bold italic large Palatino, serif }
P { font: normal small-caps 120%/120% fantasy }color
couleur d'un texte
P { color: red }
EM{color:rgb(255,0,0)}
EM { color: #f00 }background-color
couleur du fond d'écran
H1 { background-color: #F00 }
background-image
image du fond d'écran
BODY { background-image: url(ungi.gif)}
background
permet de regrouper les différentes propriétés de fond d'écran en une ligne
P { background: url(hess.gif) green 50% repeat fixed }
word-spacing
définit la distance d'espacement entre mots
H1 { word-spacing: 0.4em}
letter-spacing
définit la distance d'espacement entre caractères
EM { letter-spacing: 0.1em }
vertical-align
spécifie l'alignement vertical du texte par rapport au reste du texte
EM {vertical-align: sub}
text-transform
permet de forcer les caractères en majuscule (uppercase) ou en minuscule (lowercase); capitalize force en majuscule le premier caractère
H2 { text-transform: uppercase }
text-align
permet de placer le texte à gauche, à droite, de le centrer ou de le justifier.
P { text-align:justify}
text-indent
valeur de l'indentation avant la première ligne
P { text-indent: 3em }
line-height
valeur entre deux lignes adjacentes
DIV { line-height: 1.2; font-size: 10pt }
margin-top
valeur de la marge haute
H1 { margin-top: 3px }
margin-right
valeur de la marge droite
H1 { margin-rigth: 3px }
margin-bottom
valeur de la marge basse
H1 { margin-bottom: 3px }
margin-left
valeur de la marge gauche
H1 { margin-left: 3px }
margin
permet de regrouper les différentes propriétés de marge en une ligne
BODY { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */
border-color
donne la couleur des bordures
H1 { border-color: red }
border-style
permet de donner le style de la ligne de remplissage de la bordure
#xy34 { border-style: solid dotted }
border-top
regroupe toutes les propriétés des bordures hautes : épaisseur, style et couleur
H1 { border-top: thick }
border-right
regroupe toutes les propriétés des bordures droites: épaisseur, style et couleur
H1 { border-right: 1em }
border-bottom
regroupe toutes les propriétés des bordures basses: épaisseur, style et couleur
H1 { border-bottom: thick solid red }
border-left
regroupe toutes les propriétés des bordures gauches: épaisseur, style et couleur
H1 { border-left: thick solid red }
border
regroupe toutes les propriétés des bordures
P { border: solid red }
width
permet de donner la largeur d'un élément texte ou image
IMG.icon { width: 100px }
height
permet de donner la longueur d'un élément texte ou image
IMG.icon { height: 100px }
float
permet de cadrer l'élément là où il apparaît ou à gauche ou à droite
IMG.icon {
float: left;
margin-left: 0;
}clear
permet à un élément d'être cadré sur le côté spécifié
H1 { clear: left }
display
spécifie où l'élément est affiché
P { display: block }
white-space
type d'espace blanc
PRE { white-space: pre }
list-style-type
définit le type de numérotation, de bullet dans les listes
OL { list-style-type: lower-roman } /* i ii iii iv v etc. */
list-style-image
permet de remplacer les types de numérotation de list-style-type par une image
UL { list-style-image: url(ungi.gif) }
list-style-position
spécifie si les bullets ou numérotation ou images sont à l'intérieur ou à l'extérieur du texte.
UL { list-style-position: outside }
list-style
permet de regrouper les différentes catégories de list-style
UL { list-style: upper-roman inside }
Quelques exemples de règles CSS :
La règle suivante affectera l'ensemble du document (body):
BODY { margin-left: 30px ; color: navy ; background: white URL(image.gif) ; font-family: "Times New Roman", serif }
Règle affectant les titres de niveaux 1 à 3 :
H1,H2,H3 { text-align: center ; font-family: Arial, Helvetica, sans-serif ; font-variant: small-caps ; font-size: x-large ; color: white ; background: #DD0000 ; border-witdh: 1 ; border: solid }
Règle n'affectant que les titres de 1er niveau :
H1 { margin-top: 20pt }
Règle affectant les images : IMG { border: 0 }
Règle affectant le texte préformaté :
PRE { font-family: monospace ; color: red ; font-weight: bold ; font-size: smaller }
Règle affectant les cellules de type en-tête d'un tableau : TH { background: silver }
Règle affectant les objets de listes numérotées seulement (pas les objets de listes non numérotées) de façon analogue à la méthode classique <OL TYPE="1|a|A|i|I"> (notez les espaces et non pas virgules entre les sélecteurs OL et LI !) :
OL LI { list-style-type: upper-alpha } (numérot. 1er niveau = lettres maj.)
OL OL LI { list-style-type: upper-roman } (numérot. 2e niveau = chiffres romains maj.)
OL OL OL LI { list-style-type: lower-alpha } (numérot. 3e niveau = lettres minusc.)
OL OL OL OL LI { list-style-type: lower-roman } (numérot. 4e niveau = chiffres romains minusc.)
OL OL OL OL OL LI { list-style-type: decimal } (numérot. 5e niveau = chiffres)
Règle définissant une puce graphique (via un fichier image) pour les listes non numérotées :
UL { list-style-image: url(smile.gif) }
________________________________________________________
Accueil ISD Equipe de recherche Laboratoire Paragraphe Enssib ECP Contact
