Cascading
Style
Sheet

Conception de documents et d'interfaces numériques

CSS, pour quoi faire ?

Modifier le style des éléments composant une page web :

 

  • dimensions
  • marges
  • positionnement
  • couleurs
  • polices d'écriture
  • taille et style du texte
  • ...
h1 {
  text-align: center;
  
  font-size: 5rem;
  font-weight: bold;
  color: white;
}

Sélecteur

Déclaration

Propriété

Valeur

Règle

<!DOCTYPE html>
<html>
  <head>
    <!-- ... -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <!-- ... -->
  </body>
</html>

Lier un fichier CSS à un document HTML

Les sélecteurs

Les classes

Combiner des sélecteurs

Les pseudo-classes

Les polices d'écriture (font)

Les variables

Spécificité

X - Y -Z

Nombre de sélecteurs d'ID

Nombre de sélecteurs de classes, d'attributs et de pseudo-classes

Nombre de sélecteurs de types et de pseudo-éléments

body {
  /*
   * 1 sélecteur de type => 0 - 0 - 1 
   */
}

.abstract {
  /*
   * 1 sélecteur de classe => 0 - 1 - 0 
   */
}

#article {
  /*
   * 1 sélecteur d'ID => 1 - 0 - 0 
   */
}
body .abstract {
  /*
   * 1 sélecteur de type + 1 sélecteur de classe => 0 - 1 - 1 
   */
}

body #article .abstract {
  /*
   * 1 sélecteur de type + 1 sélecteur d'ID + 1 sélecteur de classe => 1 - 1 - 1 
   */
}

Cascade

En cas de conflit entre deux règles CSS qui appliquent la même propriété avec des valeurs différentes :

  • L'ordre des classes dans l'attribut class n'a pas d'importance
  • Pour deux règles qui ont la même spécificité, l'ordre dans lequel les règles CSS figurent dans un fichier CSS ont une important : celle qui arrive en dernière gagne en cas de conflit
  • Pour deux règles qui n'ont pas la même spécificité, celle qui a la plus grande spécificité gagne, peu importe l'ordre dans lesquelles elles apparaissent dans le fichier CSS

Le modèle de boîte

Contenu

Marge interne (padding)

Bordure (border)

Marge externe (margin)

Eléments block vs inline

Dimensions

Flexbox

Liens complémentaires

TD

CDIN - 03 - CSS : les bases

By Cyrille Perois

CDIN - 03 - CSS : les bases

  • 1,190