CSS3 – Propriétés CSS essentielles

LEÇON

 

Qu'est-ce qu'une propriété CSS

Les instructions dans un fichier CSS sont formatées ainsi :

sélecteur
{
  propriété:valeur;
}

Exemple - ici la propriété est background-color

body
{
  background-color:black;
}

Pour comprendre les sélecteurs voir la leçon sur les sélecteurs CSS.

Ci-dessous une liste de propriétés essentielles à connaître, avec un exemple pour chacune.

Exceptions (sont couvertes par des leçons dédiées à part) :

  • marges et padding
  • float / clear (flux de la page)
  • positionnement (absolute, relative, z-index, etc)
  • notion de display : block, inline, none, etc / overflow

 

Font

Pour définir la police du texte.

p
{
  font-family:Tahoma, Arial, sans-serif;
  font-size:1.2em;
  font-size:20px;
  font-weight:bold;
  font-style:italic;
}

 

Remarques :

  • font-family est une liste de polices en ordre de priorité. Les génériques (eg. sans-serif) sont décidés par le navigateur.
  • font-size : "em" est par rapport à la taille par défaut et "px" donne une taille en dur.

 

Color

Pour définir la couleur du texte.

p
{
  color:red;
  color:#ee0080;
}

 

Remarques :

  • on utilise l'orthographe américaine (color) et non pas l'orthographe anglaise (colour)
  • la couleur peut être une des couleurs prédéfinies par les standards CSS (noms des couleurs en anglais comme white, black, red, blue, green, yellow, orange, gray, et cetera)
  • sinon elle peut être spécifiée en RGB hexadécimal
    • préfixé par un dièse (#)
    • 3 couleurs primaires R=rouge G=vert B=bleu
    • un nombre hexadécimal par couleur primaire de 00 (minimum) à ff (maximum)
    • exemple : #ee00af se décompose en R=ee (beaucoup de rouge), G=00 (pas de vert), B=80 (niveau moyen de bleu)

 

Background

Pour définir la couleur ou image du fond du document ou d'une zone.

body
{
  background-color:black;
  background-color:#c0c0c0;
  background-image:url('images/fond.jpg');
  background-repeat:no-repeat;
  background-repeat:repeat-x;
  background-repeat:repeat-y;
  background-repeat:repeat;
  background-position:center top;
  background-position:right bottom;
  background-attachment:scroll;
  background-attachment:fixed;
  background-size:120px 90px;
  background-size:cover;
  background: #c0c0c0 url('images/fond.jpg') no-repeat left center;
}

 

Remarques :

  • les couleurs peuvent être spécifiées en RGB hexadécimal
  • l'URL pour l'image peut être absolue (http://www.monsite.fr/images/sample.jpg) ou relative au chemin du fichier CSS (comme dans l'exemple)
  • on peut faire répéter l'image de fond dans la direction x (repeat-x), la direction y (repeat-y) ou les deux (repeat). Spécifier repeat:no-repeat;  pour aucune répétition.
  • on peut faire en sorte que l'image de fond ne bouge pas quand on scrolle la page ( background-attachment:fixed; )
  • la dernière ligne dans l'exemple ci-dessus est un exemple de l'utilisation du propriété background par laquelle on peut spécifier plusieurs caractéristiques du fond d'un coup. On peut mettre les valeurs pour plusieurs caractéristiques (sans obligation de tout mettre) parmi background-color, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment, and background-image.

 

Texte

Propriétés supplémentaires pour le style du texte.

p
{
  word-spacing:20px;
  letter-spacing:5px;
  text-decoration:underline;
  text-align:justify;
  text-align:center;
  line-height:35px;
}

 

Remarques :

  • text-align:center - centrer le texte dans son container
  • text-align:justify - gérer l'espace entre les mots pour remplir l'espace du container
  • text-align:right/left - aligner le texte sur la limite droite/gauche de son container

 

Bordures

Pour définir des bordures (cadres) autour des zones.

p
{
  border:1px solid black;
  border-width:7px; /* les quatre bords */
  border-width:2px 3px 4px 5px; /* top right bottom left */
  border-width:10px 20px; /* top+bottom right+left */
  border-right-width:10px; /* right uniquement */
  border-color:blue; /* les 4 bords */
}

 

Remarques :

  • souvent plus efficace de définir tout d'un coup - épaisseur, type de ligne et couleur - comme border:1px solid black;
  • si 4 valeurs, l'ordre est toujours top, right, bottom, left (en haut, à droite, en bas, à gauche)
  • si 2 valeurs, l'ordre est toujours top+bottom, right+left (en haut et en bas, puis à droite et à gauche)
  • si 1 valeur, et propriété générique (pas border-left ou border-top par exemple), la valeur s'applique partout

 

 


 

EXERCICES

  1. Avec les propriétés apprises dans cette leçon, plus marges (margin) et padding, écrire un fichier HTML et un fichier CSS pour reproduire cette page :

css_proprietes_essentielles_exercice1

Astuce : voici une URL pour l'image de fond.