Le Memento CSS | Brikwo

Ce mémento est un rappel des balises et propriétés les plus utilisés en CSS (cascading style sheet) pour les feuilles de style.

LA TYPOGRAPHIE

---

      font-family: nom de la police
                   sans-serif | monospace | etc...)
                  "Trebuchet MS", Arial, Verdana, sans-serif;
      

Permet de choisir la police appliquée à l’élément sélectionné. Possibilité d'indiquer plusieurs valeurs par ordre croissant de choix. Les noms de polices contenant des espaces sont à placer entre guillemets.

---

      font-size:  taille
                  pourcentage
      

Détermine la taille de la police de l’élement. Les unités recommandées sont en em, ex, % afin de préserver la fluidité des textes.

---

      color:  couleur rgb()
              couleur hexa
              mot-clé (silver | fuschia | navy | etc.)
              tranparent
              inherit
     

Applique une couleur de police de l’élement sélectionné. Une palette de 16 couleurs de base (black, white, yellow, fuschia, silver, etc.) est prise en charge par l’ensemble des navigateurs graphiques et écrans. La palette élargie (256 couleurs) peut également être définie par des mots-clés (antiquewhite, chocolate, olive, salmon, etc.)

---

      font-style: italic
                  oblique
                  inherit
      

Détermine l’orientation de la police: italique (penché à droite) ou oblique (penché à gauche si la police est prévue pour admettre cette valeur).

---

      font-weight: mots-clés (bold | bloder | normal | etc.)
                   valeur numérique (500 700)
                   oblique
                   inherit
      

Choisit la graisse de la police dans l’élement sélectionné. Les mots-clés (thin, thick) et les valeurs numériques (100, 200, etc.) ne sont pas reconnues par l’ensemble des navigateurs. Il est préférable de se restreindre aux seuls mots-clés blod, bolder, et normal.

---

      font-variant: normal
                    small-caps
      

Permet d’afficher la police d’un élément en petites majuscules.

---

      text-decoration:  none
                        underline
                        overline
                        line-trought
      

Détermine le souligement ou le surlignement de l’élément. Un texte peut être souligné, surligné, barré. Il est posible de cumuler les valeurs.

---

      text-align: left
                  right
                  center
                  justify
                  inherit
      

Défini l’alignement du texte dans un élément.

---

      text-transform: none
                      capitalize
                      uppercase
                      lowercase
                      inherit
      

Mise en majuscules ou en miniscules du texte. La valeur capitalize affiche les premières lettres en majuscules. uppercase affiche toutes les lettres en majuscules et lowercase affiche toutes les lettres en minuscules.

---

      text-indent:  valeur
                    pourcentage
      

Détermine la valeur de l’alinéa (retrait de la première ligne de texte).

---

      line-height:  normal
                    nombre
                    longueur
                    pourcentage
                    inherit
      

Précise la hauteur de ligne de texte. A ne pas vonfondre avec les marges entre chaque paragraphe.

---

      letter-spacing: normal
                      longueur
                      inherit
      

Précise l’espace entre chaque lettre de texte. Une valeur négative est autorisée afin de rapprocher les lettres.

---

      word-spacing: normal
                    longueur
      

Précise l’espace entre chaque mot. Une valeur négative est autorisée afin de rapprocher les mots.

LES BORDURES

---

      border: épaisseur (en px)
              style
              couleur
              inherit
      

Peut contenir les différentes valeurs d’épaisseurs (width) de style (style) et de couleur (color) et s’applique aux quatres bordures.

---

      border-width: épaisseur (en px)
                    inherit
			

Spécifie la valeur de l’épaisseur de la du haut, de droite, du bas et de gauche d’un élément.

---

      border-color: couleur
                    transparent
                    inherit
      

Détermine la couleur des quatres bordures d’un élément.

---

      border-style: style (dashed | solid)
                    inherit
			

Indique de quel style sera la bordure d’un élément et s’applique aux quatres bordures à la fois.

---