1. Sélecteur de balise & syntaxe générale d'un code CSS

Avant de de parler des propriétés d'un sélecteur, prenons un exemple simple :

Exemple

Pour mettre les balise de titre <h1> en bleue, on utilise le code :

Ici dans cet exemple :

1. h1: s'appelle le sélécteur de balise ( il sélectionne ici la balise titre h1) ,
2. color: designe ici la propriété du sélecteur)
3. #0000FF: designe la valeur de la propriété color qui dans ce cas bleue

à partir de cet exemple, on peut déduire la syntaxe générale d'un code CSS :

2. Exemple de sélecteurs de balises CSS

Exemple

Si on veut par exemple que les balises de titre soit en rouge avec la taille 22px, et les balises de sous titre soient en bleu avec la taille 18px, on utilise le code CSS:

Voici le code complet de la page Web :

3. Récapitulatif des propriétés d'un selecteur

3.1 Les propriétés de mise en forme d'un texte

1. text-align: alignement horizontal du texte
2. text-decoration: soulignement, ligne au-dessus, barré ou clignotant
3. text-transform: modifier la casse d'un texte.
4. text-overflow: définit la méthode d'affichage d'un contenu tronqué.
5. text-shadow: ombre du texte
6. text-indent: propriétés utilisé pour indenter le texte d'un paragraphe.
7. text-rendering: informe le moteur de rendu sur ce qu'il doit optimiser en affichant le texte.
8. text-justify: défint la méthode de justification du texte.
9. font-family: nom de police
10. @font-face: police personnalisée
11. font-size: taille du texte
12. font-weight: bold
13. font-style: italique
14. font-variant: petites capitales
15. letter-spacing: spécifie l'espacement entre les caractères
16. font: super propriété de police. Combine : font-weight  , font-style  , font-size  , font-variant  , font-family .
17. vertical-align: alignement vertical (s'applique au céllules d'un tableau)
18. line-height: hauteur de ligne
19. white-space: césure
20. word-wrap: césure forcée

3.2 Les propriétés de couleur de fond

1. color: définit la couleur du texte
2. background-color: définit la couleur de fond
3. background-image: définit l'image de fond
4. background-attachment: utilisé pour définir un fond fixe
5. background-repeat: pépétition du fond
6. background-position: : définit la position du fond
7. background: super propriété du fond. Combine :  background-image  , background-repeat  , background-attachment , background-position
8. opacity: définit le degré de transparence

3.3 Les propriétés des boîtes

1. width: définit la largeur
2. height: définit la hauteur
3. min-width: définit la largeur minimale
4. max-width: définit la largeur maximale
5. min-height: définit la hauteur minimale
6. max-height: définit la hauteur maximale
7. margin-top: définit la marge en haut
8. margin-left: définit la marge à gauche
9. margin-right: définit la marge à droite
10. margin-bottom: définit la marge en bas
11. margin: super-propriété de marge. Combinée: margin-top, margin-right, margin-bottom, margin-left.
12. padding-left: définit la marge intérieure à gauche
13. padding-right: définit la marge intérieure à droite
14. padding-bottom: définit la marge intérieure en bas
15. padding-top: définit la marge intérieure en haut
16. padding: super-propriété de marge intérieure. Combinée: padding-top, padding-right, padding-bottom, padding-left .
17. border-width: définit l'épaisseur de bordure
18. border-color: définit la couleur de bordure
19. border-style: définit la type de bordure
20. border: super-propriété de bordure. Combinée: border-width, border-color, border-style, border-top, border-right, border-bottom, border-left.
21. border-radius: définit une bordure arrondie.
22. box-shadow: définit l'ombre d'une boite.

3.4 Les Propriétés de positionnement

1. display: définit le type d'élément ( block  , inline  , inline-block  , none  …)
2. visibility: définit la visibilité
3. clip: affichage d'une partie de l'élément
4. overflow: définit le comportement en cas de dépassement
5. float: flottant
6. clear: arrêt d'un flottant
7. position: définit le positionnement
8. top: définit la position par rapport au haut
9. bottom: définit la position par rapport au bas
10. left: définit la position à gauche
11. right: position par rapport à la droite
12. z-index: définit l'ordre d'affichage en cas de superposition.

3.5 Les propriétés des listes

1. list-style-type: définit le type de liste
2. list-style-position: définit la position en retrait
3. list-style-image: puce personnalisée
4. list-style: super-propriété de liste. Combinée: list-style-type  , ,list-style-position  , list-style-image.

3.6 Les propriétés des tableaux

1. border-collapse: définit la fusion des bordures
2. empty-cells: affichage des cellules vides
3. caption-side: définit la position du titre du tableau

Younes Derfoufi
CRMEF OUJDA