diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css index 4398ba6..ab1a322 100644 --- a/docs/.vitepress/theme/custom.css +++ b/docs/.vitepress/theme/custom.css @@ -1,3 +1,15 @@ :root { --vp-code-font-size: 0.9375rem; } + +:where(details summary) { + cursor: pointer; +} + +a:hover { + text-decoration: underline; +} + +.prev-next a:hover { + text-decoration: none; +} diff --git a/docs/dev/code-camp/index.md b/docs/dev/code-camp/index.md index f9784f0..9a2fb0f 100644 --- a/docs/dev/code-camp/index.md +++ b/docs/dev/code-camp/index.md @@ -59,7 +59,7 @@ code-camp/ ## HTML -Le HTML est un langage de programmation qui sert à structurer, hiérarchiser et afficher le contenu d'une page web. Il s'écrit avec des balises suivant cette syntaxe : +Le HTML (hyper text markup language) est un langage de programmation qui sert à structurer, hiérarchiser et afficher le contenu d'une page web. Il s'écrit avec des balises suivant cette syntaxe : `<` `nom de la balise` `attributs` `>` `contenu de la balise` `<` `nom de la balise` `/>` @@ -126,9 +126,40 @@ Ci-dessous, quelques exemples de balises (listes non exhaustives). <<< @/snippets/html/base.html#full ::: -## Sélecteurs CSS +## CSS -### Sélecteurs de balise +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 +- la justification +- 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 + +::: + +::: tip Astuce +Tout est une boîte en HTML/CSS. +::: + +### Sélecteurs CSS + +#### Sélecteurs de balise Ils sont identiques aux balises HTML (sauf head). @@ -136,7 +167,7 @@ Ils sont identiques aux balises HTML (sauf head). <<< @/snippets/css/base.css#tag ::: -### Sélecteurs de classe +#### Sélecteurs de classe Cible une classe définie dans le HTML avec un point. @@ -144,7 +175,7 @@ Cible une classe définie dans le HTML avec un point. <<< @/snippets/css/base.css#class ::: -### Sélecteurs d’attribut +#### Sélecteurs d’attribut Cible un attribut spécifique avec ou sans valeur entre crochets. @@ -152,7 +183,7 @@ Cible un attribut spécifique avec ou sans valeur entre crochets. <<< @/snippets/css/base.css#attr ::: -### Sélecteurs multiples et chaînés +#### Sélecteurs multiples et chaînés Il est possible de cibler plusieurs éléments ou d’enchaîner les sélecteurs. @@ -160,14 +191,14 @@ Il est possible de cibler plusieurs éléments ou d’enchaîner les sélecteurs <<< @/snippets/css/base.css#chain ::: -## Propriétés CSS +### 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 +### 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. diff --git a/docs/snippets/css/base.css b/docs/snippets/css/base.css index eacca85..6454798 100644 --- a/docs/snippets/css/base.css +++ b/docs/snippets/css/base.css @@ -1,3 +1,7 @@ +// #region rule +p { color: blue; } +// #endregion rule + // #region tag body {} main {} diff --git a/package.json b/package.json index c26ed13..503e034 100644 --- a/package.json +++ b/package.json @@ -1,13 +1,13 @@ { - "name": "vitepress-starter", - "packageManager": "yarn@3.2.1", - "scripts": { - "docs:dev": "vitepress dev docs", - "docs:build": "vitepress build docs", - "docs:serve": "vitepress serve docs" - }, - "devDependencies": { - "vitepress": "^1.0.0-alpha.4", - "vue": "^3.2.37" - } + "name": "vitepress-starter", + "packageManager": "yarn@3.2.1", + "scripts": { + "dev": "vitepress dev docs", + "build": "vitepress build docs", + "serve": "vitepress serve docs" + }, + "devDependencies": { + "vitepress": "^1.0.0-alpha.4", + "vue": "^3.2.37" + } }