94 lines
2.6 KiB
Markdown
94 lines
2.6 KiB
Markdown
|
# CSS – Débutant
|
|||
|
|
|
|||
|
|
Le langage CSS (<span lang="en">cascading style sheets</span>) 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
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<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.](https://flukeout.github.io/)
|
|||
|
|
:::
|
|||
|
|
|
|||
|
|
## Propriétés CSS
|
|||
|
|
|
|||
|
|
::: info
|
|||
|
|
Il en existe beaucoup trop pour essayer de les résumer ici.
|
|||
|
|
Se référer à [la documentation.](https://developer.mozilla.org/fr/docs/Web/CSS/Reference)
|
|||
|
|
:::
|
|||
|
|
|
|||
|
|
## 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](https://slidr.io/bramus/the-css-cascade-a-deep-dive-2022-06-09-css-day#1) en anglais explique en détails le fonctionnement de la cascade.
|
|||
|
|
- [Cette page](https://wattenberger.com/blog/css-cascade) (en anglais également) permet de visualiser graphiquement la cascade.
|