2.6 KiB

Raw Blame History

CSS – Débutant

Le langage CSS (cascading style sheets) permet d'agir sur le style du document HTML. C'est-à dire toute la partie visuelle du contenu comme par exemple :

la mise en page
les couleurs
les tailles
les marges
les polices de caractères
etc.

On parle de “ règle CSS ”. Une règle se construit ainsi :

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

::: details Afficher l'exemple

<<< @/snippets/css/base.css#rule

p est le sélecteur
color est la propriété
blue est la valeur
color: blue; est la déclaration
l'ensemble forme la règle

:::

On écrit généralement les règles CSS en dehors du fichier HTML, dans un fichier style.css. Afin de relier les styles au HTML, il convient d'appeler le fichier via une balise <link>, positionnée dans la balise <head> du HTML.

::: details

<head>
  …
  <link rel="stylesheet" href="./css/style.css" />
</head>

:::

Sélecteurs CSS

Sélecteurs de balise

Ils sont identiques aux balises HTML (sauf head).

::: details Afficher le code <<< @/snippets/css/base.css#tag :::

Sélecteurs de classe

Cible une classe définie dans le HTML avec un point.

::: details Afficher le code <<< @/snippets/css/base.css#class :::

Sélecteurs d’attribut

Cible un attribut spécifique avec ou sans valeur entre crochets.

::: details Afficher le code <<< @/snippets/css/base.css#attr :::

Sélecteurs multiples et chaînés

Il est possible de cibler plusieurs éléments ou d’enchaîner les sélecteurs.

::: details Afficher le code <<< @/snippets/css/base.css#chain :::

::: tip Conseil Entraînez-vous à utiliser les sélecteurs avec cet exercice intéractif. :::

Propriétés CSS

::: info Il en existe beaucoup trop pour essayer de les résumer ici. Se référer à la documentation. :::

La cascade du style

Le CSS est régit par un concept appelé la cascade. La cascade est un ensemble de règles de priorité et d'importance. Elles servent à déterminer la règle CSS qui sera appliquée en cas de “ conflit ” entre plusieurs règles.

Les deux éléments de la cascade que nous utiliseront le plus ici sont la spécificité et l'ordre.

Cette présentation en anglais explique en détails le fonctionnement de la cascade.
Cette page (en anglais également) permet de visualiser graphiquement la cascade.

2.6 KiB Raw Blame History Unescape Escape