CSS

Un article de Haypo.

Retour à la page précédente Retour à la programmation

Les feuilles de style en cascade ou « CSS » pour Cascading Style Sheets sont une description de la mise en forme d'un document HTML ou XML (et par extension XHTML voir même SVG). On y décrit les couleurs, les polices de caratères utilisées, la taille des différentes boîtes, etc. On peut changer la disposition des différents éléments ou encore cacher certaines parties (utile pour cacher le menu à l'impression par exemple).

Sommaire

[modifier] Syntaxe

Je ne vais présenter ici que les outils les plus courants, en omettant les options peu utilisées (comme inherit par exemple).

  • <taille> : Une taille peut s'exprimer dans différentes unités ou encore en pourcent, on peut citer :
    • 1ex : Hauteur de la lettre « x » minuscule
    • 1em : Largeur de la lettre « m » minuscule
    • 1px : Un pixel
    • 80% : Taille relative à la dernière taille fixe spécifiée (d'un des parents)

[modifier] Inclure une feuille de style CSS dans une page HTML

[modifier] Balise <link rel="stylesheet">

Dans une page HTML, vous pouvez utiliser le syntaxe suivante : 

<link rel="stylesheet" type="text/css" media="screen" href="<url du CSS>" />

Il existe différents media dans les principaux sont :

  • screen : Écran d'ordinateur
  • print : Impression

[modifier] Balise <style>

Il est possible d'inclure directement du CSS dans l'entête d'une page HTML : 

<html>
   <head>
      <style type="text/css">
         ... (insérez ici vos styles CSS)
      </style>
      ...
   </head>
   <body>
      ...
   </body>
</html>

[modifier] Polices de caractères (text et font) 

font-family: <famille>;
font-size: <taille>;
font-style: normal | italic;
font-weight: normal | bold;

text-align: left | center | right | justify;
text-decoration: none | underline;
text-variant: normal | small-caps;

La famille de police de caractère est en fait une liste. Les polices en plusieurs mots (« Times New Roman » par exemple) doivent être écrites entre guillemets anglais. Il faut toujours terminer la liste par une police générique (serif, sans-serif, cursive, monospace, ou fantasy). Exemples :

  • font-family: "Times", "Georgia", "Times New Roman", "Garamond", serif;
  • font-family: "Arial", "Helvetica", "Verdana", "MS Trebuchet", sans-serif;
  • font-family: "Courier", "MS Courier New", monospace;

[modifier] Liens externes

Récupérée de « http://www.haypocalc.com/wiki/CSS »