Syntaxe et sélecteurs

Références : MDN Sélecteurs : MDC CSS Selectors

Syntaxe

Le CSS associée des règles de représentation à des éléments sélectionnés dans le document HTML. Une règle de représentation est composée d'un ou plusieurs sélecteurs et d'une déclaration qui elle-même est composée d'une ou plusieurs propriétés et de leur valeur.

Les propriétés sont tout ce qui peut être appliqué à un élément : couleur, taille, marge, police, etc.

Illustration CSS properties

Exemple de structure :

selecteur1 {
  propriete: valeur;
}

selecteur2,
selecteur3 {
  propriete: valeur;
}

Sélecteurs

Sélecteurs simples, hiérarchie

  1. li == sélectionne toutes les balises li du document
  2. article li == sélectionne toutes les balises li qui sont des descendants (pas forcément directs) d'un article
  3. article > ul == sélectionne tous les ul qui sont enfant direct d'un article
  4. article > ul > li == sélectionne tous les enfants direct d'un ul descendant direct d'un article
  5. h1 + p == sélectionne toutes les balises p qui suivent immédiatement un h1
  6. h1 ~ p == sélectionne toutes les balises p qui suivent (immédiatement ou non) un h1 et qui ont le même parent

Exemple :

li {
  background-color: yellow;
}
article li {
  border: 1px solid red;
}
article > ul {
  background-color: blue;
}
article > ul > li {
  border: 3px solid green;
}
h1 + p {
  background-color: orange;
}
h1 ~ p {
  border: 3px solid purple;
}

Sélecteur simples & hiérarchie

Sélecteur de classe, d'id et d'attribut

  • .rouge == sélectionne toutes les balises ayant la classe "rouge"
  • h1.rouge == sélectionne toutes les balises h1 ayant la classe rouge
  • #article-1 == sélectionne toutes (=LA) balise ayant l'id article-1
  • img[alt='Pingouin'] == sélectionne toutes les balises img ayant un attribut alt égal à Pingouin

Plusieurs variantes pour le sélecteur d'attribut : MDN CSS Attribute selectors :

  • attr$=valeur : sélectionne les éléments dont l'attribut se termine par valeur
  • attr^=valeur : sélectionne les éléments dont l'attribut commence par valeur
  • attr*=valeur : sélectionne les éléments dont l'attribut contient valeur
  • attr~=valeur : sélectionne les éléments dont l'attribut contient valeur
  • ...

Exemple :

.rouge {
  background-color: red;
}
h1.rouge {
  border: 1px solid red;
}
#article-1 {
  background-color: yellow;
}
img[alt="Pingouin"] {
  background-color: blue;
}

Sélecteurs de classe, d'id et d'attribut

Sélecteurs de pseudo-classes et pseudo-éléments

Références : MDN CSS Pseudo-classes et MDN CSS Pseudo-elements

  • :hover : lorsque la souris survole l'élément
  • :active : lorsque l'élément est cliqué
  • :focus : lorsque l'élément a le focus
  • :first-child : lorsque l'élément est le premier enfant de son parent
  • :last-child : lorsque l'élément est le dernier enfant de son parent
  • :nth-child(n) : lorsque l'élément est le n-ième enfant de son parent
  • :nth-of-type(n) : lorsque l'élément est le n-ième enfant de son parent du même type
  • :before : avant le contenu de l'élément
  • :after : après le contenu de l'élément
  • ::first-letter : première lettre de l'élément
  • ::first-line : première ligne de l'élément
  • ::selection : sélection de l'élément
  • ...

Propriétés

Toutes les propriétés

Les propriétés régissent tous les aspect de la présentation d'un élément : arrière plan, bordures, polices, affichage de texte, positionnement, ...

Liste "antisèche" de 5 pages, très complète, de 2009 (il manque quelques valeurs) et Référence MDN CSS (à jour)

Quelques exemples "classiques":

  • font-size : en mm, px, pt, em, rem
  • font-weight : normal, bold, 200, 300..
  • color : #RRGGBB ou #RGB ou rgb(255,255,255) ou rgba(255,255,255,1)
  • background-image : url('http://adresse/image')
  • ...

Valeurs

Les valeurs dépendent de la propriété; certaines propriétés acceptent des "mots" préféfinis (ex: text-align: left|right|start|end|center|justify;), d'autres acceptent des valeurs dimensionnelles (ex: font-size: 12px;), d'autres acceptent des valeurs de type couleur (ex: color: #RRGGBB;).

Valeurs dimensionnelles

  • px : pixels = pixels "réels" (ex: 12px) sur l'écran
  • pt : points = 1/72 de pouce (ex: 12pt)
  • mm : millimètres (ex: 12mm) et cm : centimètres (ex: 12cm)
  • em : taille de la police du parent
  • rem : taille de la police de l'élément racine
  • % : pourcentage de la taille de l'élément parent
  • vh : 1% de la hauteur de la fenêtre
  • vw : 1% de la largeur de la fenêtre
  • vmin : 1% de la plus petite dimension de la fenêtre
  • vmax : 1% de la plus grande dimension de la fenêtre
  • ...

Valeurs de couleur

Référence MDN Color value

  • #RRGGBB : rouge, vert, bleu (ex: #FF0000 = rouge)
  • #RGB : rouge, vert, bleu (ex: #F00 = rouge)
  • rgb(255,0,0) : rouge, vert, bleu (ex: rgb(255,0,0) = rouge)
  • rgba(255,0,0,1) : rouge, vert, bleu, alpha (ex: rgba(255,0,0,1) = rouge)
  • couleurs nommées : red, blue, green, yellow, black, white, ... cf [MDN]https://developer.mozilla.org/en-US/docs/Web/CSS/named-color)
  • ...

Valeurs calculées

Référence MDN calc()

  • calc() : permet de faire des calculs sur les valeurs dimensionnelles (ex: width: calc(100% - 20px); ou width: calc(100vh - 20px);)
  • clamp() : permet de fixer une valeur entre deux bornes (ex: width: clamp(100px, calc(...), 500px); ou width: clamp(100px, calc(...), 500px);)
  • min() : permet de prendre la valeur la plus petite (ex: width: min(100px, 50vw);)
  • max() : permet de prendre la valeur la plus grande (ex: width: max(100px, 50vw);)

Variables CSS

Référence MDN CSS Variables

Les variables CSS permettent de définir des valeurs réutilisables dans le document CSS. Elles sont définies avec le préfixe -- et peuvent être utilisées avec la fonction var(). Par exemple :

:root {
  --main-color: #3498db;
  --secondary-color: #2ecc71;
}
h1 {
  color: var(--main-color);
}
p {
  color: var(--secondary-color);
}

Programme

  • SNT : thème Web