reorganized levels,

added content updated dependencies
2023-02-14 19:30:53 +01:00 · 2023-02-14 19:30:53 +01:00 · 7f356d807a
commit 7f356d807a
parent 6214c827eb
32 changed files with 11143 additions and 2043 deletions
--- a/docs/dev/01-debutant/css.md
+++ b/docs/dev/01-debutant/css.md
@ -0,0 +1,93 @@
+# 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&nbsp;:
+
+- la mise en page
+- les couleurs
+- les tailles
+- les marges
+- les polices de caractères
+- etc.
+
+On parle de **“&nbsp;règle CSS&nbsp;”.** Une règle se construit ainsi&nbsp;:
+
+`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 “&nbsp;conflit&nbsp;” 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.