custom css + snippets + dep
This commit is contained in:
parent
d1813227b5
commit
50c7e14d1f
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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 (<span lang="en">hyper text markup language</span>) 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 (<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
|
||||
- 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.
|
||||
|
||||
|
|
|
@ -1,3 +1,7 @@
|
|||
// #region rule
|
||||
p { color: blue; }
|
||||
// #endregion rule
|
||||
|
||||
// #region tag
|
||||
body {}
|
||||
main {}
|
||||
|
|
22
package.json
22
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"
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue