Déclaration de styles
- Feuille de style CSS externe (à préférer, dans l’en tête
<head>...</head>
du document HTML)
<link href="style.css" rel="stylesheet" type="text/css">
- Styles CSS interne dans une balise
<style>
<style type="text/css">
...
</style>
- Styles CSS dans le code html (“inline”)
<p style="text-align: center; color: red">
...
</p>
Structure de base
sélecteur
{
propriété : valeur ;
}
Sélecteurs
p |
Tous les éléments de la balise <p> |
h1, h2 |
Tous les éléments des balises <h1> et <h2> |
.menu |
Tous les éléments de la classe “menu” |
#contenu |
L’unique élément avec un attribut id “contenu” |
td.colonne |
Tous les éléments de la balise <td> avec la classe colonne |
main h1 |
Tous les éléments de la balise <h1> inclus dans <main> |
main > h1 |
Tous les éléments de la balise <h1> étant enfant de <main> |
…. |
…. |
Pseudo-Sélecteurs
:link |
Lien non-actif, non-pas encore visité |
:visited |
Lien visité |
:hover |
Survol de la souris |
:active |
Elément actif |
:focus |
Elément avec focus |
:first-child |
Le sélecteur ne vise que le premier enfant |
:first-line |
Le sélecteur ne vise que la première ligne |
:first-letter |
Le sélecteur ne vise que la première lettre |
:nth-child(2n) |
Le sélecteur vise que les enfants numéro 2n pour tout n naturel |
…. |
…. |
Propriétés
Texte
color |
couleur du texte, p.ex. #FF0000 ou red ou rgb(255,0,0) |
font-weight |
épaisseur du texte, p.ex. pour en gras bold |
font-family |
type de police, p.ex. Helvetica ou Arial |
font-size |
taille de police, p.ex. 2em ou 32px (il vaut mieux éviter les px) |
font-style |
style tu texte, p.ex. italic |
text-decoration |
effets sur du texte, p.ex. underline |
text-align |
alignement du texte, p.ex. left, right, center, justify |
line-height |
interligne, p.ex. 2em |
letter-spacing |
espacement entre les caractères, p.ex. 5px |
text-indent |
indentation de la première ligne, p.ex. 10px |
text-transform |
Formattage du texte, p.ex. uppercase, lowercase, capitalize |
…. |
…. |
Bordures
border-width |
épaisseur bordure,p .ex. homogène 1px, hétérogène 1px 2px 3px 1px |
border-style |
style de la bordure, p.ex. solid, dashed, dotted, .. |
border-color |
couleur de la bordure |
border |
forme courte width style color, p.ex. 1px solid black |
…. |
…. |
Arrière-plan
background-color |
Couleur de l’arrière-plan |
background-image |
Image de l’arrière-plan |
…. |
…. |
Box Model
margin |
marges extérieures |
padding |
marges intérieures |
border |
bordure |
background-color |
couleur de fond, p.ex. white |
…. |
…. |