Propriétés d'un sélecteur CSS

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

Leave a Reply

Your email address will not be published. Required fields are marked *