Ajoute cours et TD HTML CSS
This commit is contained in:
parent
3f1e5d91ba
commit
29833dc3a9
23 changed files with 1069 additions and 1 deletions
449
src/slides/B1/web/02_css_bases.md
Normal file
449
src/slides/B1/web/02_css_bases.md
Normal file
|
|
@ -0,0 +1,449 @@
|
|||
---
|
||||
marp: true
|
||||
theme: catppuccin
|
||||
paginate: true
|
||||
size: 4:3
|
||||
transition: coverflow
|
||||
footer: ''
|
||||
math: katex
|
||||
lang: "fr"
|
||||
---
|
||||
|
||||
<style>
|
||||
section {
|
||||
font-size: 28px;
|
||||
text-align: left
|
||||
}
|
||||
</style>
|
||||
|
||||
# CSS
|
||||
|
||||
---
|
||||
|
||||
## Qu'est-ce que le CSS ?
|
||||
|
||||
---
|
||||
|
||||
- Permet de choisir le **style** de votre page
|
||||
- On peut choisir :
|
||||
- couleurs
|
||||
- tailles du texte, polices
|
||||
- bordures, marges etc...
|
||||
- Pour rendre votre site plus agréable à lire
|
||||
- **Attention** : navigateurs ne connaissent pas toutes les propriétés CSS
|
||||
- Mais ignorées si non connues
|
||||
|
||||
---
|
||||
|
||||
| | |
|
||||
| -------- | ------------------------------------------------------ |
|
||||
| Sans CSS |  |
|
||||
| Avec CSS |  |
|
||||
|
||||
---
|
||||
|
||||
CSS et HTML sont indissociables :
|
||||
- Beaucoup d'exemples avec HTML pour comprendre le lien
|
||||
- Nouvelles notions de HTML car utiles avec CSS
|
||||
|
||||
---
|
||||
|
||||
## Intégrer du CSS
|
||||
|
||||
Une ligne à ajouter :
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
```
|
||||
|
||||
Dans la section `<head>`
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<title>Ma page</title>
|
||||
</head>
|
||||
...
|
||||
<html>
|
||||
```
|
||||
|
||||
Attributs :
|
||||
- `rel` : `stylesheet` pour préciser que c'est du CSS
|
||||
- `href` : pour donner le nom du fichier CSS
|
||||
|
||||
---
|
||||
|
||||
## Syntaxe de base
|
||||
|
||||
|
||||
|
||||
---
|
||||
3 éléments :
|
||||
|
||||
- **Sélecteurs** : permet de selectionner l'élément où on applique le style
|
||||
- ex: pour sélectionner les balises `<p>` on écrit `p`
|
||||
- **Propriétés** : l'effet à modifier
|
||||
- ex: `color` permet de modifier la couleur d'un texte
|
||||
- **Valeurs** : la valeur de la proipriété à appliquer
|
||||
- ex: la valeur `blue` permet d'appliquer la couleur bleue à la propriété `color`
|
||||
|
||||
---
|
||||
|
||||
- **Syntaxe** détaillée :
|
||||
```css
|
||||
selecteur {
|
||||
propriete1: valeur;
|
||||
propriete2: valeur;
|
||||
}
|
||||
```
|
||||
|
||||
- Accolades `{}` pour préciser le groupe de propriétés appliquées au sélecteur
|
||||
- `:` pour séparer la propriété et la valeur
|
||||
- `;` à la fin d'une ligne
|
||||
- Pas de limite au nombre de propriétés
|
||||
|
||||
---
|
||||
|
||||
### Commentaires
|
||||
|
||||
On peut ajouter des commentaires dans le CSS
|
||||
- début : `/*`
|
||||
- fin : `*/`
|
||||
|
||||
```css
|
||||
/* ceci est un commentaire */
|
||||
|
||||
/* Il peut
|
||||
prendre
|
||||
plusieurs
|
||||
lignes */
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Sélecteurs
|
||||
|
||||
---
|
||||
|
||||
### Sélection multiple
|
||||
|
||||
On peut sélectionner plusieurs éléments à la fois en les séparant par une virgule
|
||||
```css
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
color: blue;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Sélecteur de balise
|
||||
|
||||
- On peut sélectionner selon une balise
|
||||
- On utilise la balise sans les chevrons `<>`
|
||||
|
||||
```css
|
||||
p {
|
||||
color: blue
|
||||
}
|
||||
```
|
||||
|
||||
Ici tous les paragraphes (balise `<p>`) seront en bleu.
|
||||
|
||||
|
||||
---
|
||||
### Sélectionner une balise enfant
|
||||
|
||||
On peut vouloir sélectionner une balise incluse dans une autre :
|
||||
- il suffit de mettre deux sélecteurs séparés par un espace
|
||||
|
||||
```css
|
||||
nav ul {
|
||||
display: flex;
|
||||
}
|
||||
```
|
||||
Ici on sélectionne toutes les listes non ordonnées à l'intérieur d'une balise `<nav>` (pour qu'elles soient affichées en `flex`)
|
||||
|
||||
---
|
||||
|
||||
### Sélecteur de classe et d'id
|
||||
|
||||
---
|
||||
|
||||
#### En HTML : `id` et `class`
|
||||
Parfois, on veut appliquer des styles différents à des éléments dans une même balise
|
||||
- on peut vouloir certains paragraphes différents des autres par exemple
|
||||
- il faut alors pouvoir les différencier
|
||||
- deux possibilités :
|
||||
- grâce à l'attribut `class`
|
||||
- grâce à l'attribut `id`
|
||||
|
||||
---
|
||||
|
||||
Ce sont des attributs qu'on rajoute dans le HTML à la balise :
|
||||
|
||||
- `class` : vient **typer** une balise pour la spécialiser
|
||||
- utilisable plusieurs fois
|
||||
```html
|
||||
<p class="introduction">Bonjour et bienvenue sur mon site !</p>
|
||||
<p>Encore un peu de texte dans un paragraphe</p>
|
||||
```
|
||||
|
||||
- `id` : vient nommer de manière **unique** une balise
|
||||
- ne peut être utilisé qu'une seule fois !
|
||||
```html
|
||||
<img src="images/logo.png" alt="Logo du site" id="logo" />
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
#### En CSS : sélectionner par `id` et `class`
|
||||
|
||||
- Sélection par `class` : on utilise `.` + classe
|
||||
- Sélection par `id` : on utilise `#` + id
|
||||
|
||||
Exemple :
|
||||
|
||||
```html
|
||||
<img src="images/logo.png" alt="Logo du site" id="logo" />
|
||||
<p class="introduction">Bonjour et bienvenue sur mon site !</p>
|
||||
<p>Encore un peu de texte dans un paragraphe</p>
|
||||
```
|
||||
|
||||
```css
|
||||
.introduction {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: 50px;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
#### En HTML : balises universelles
|
||||
|
||||
- Les `class` et `id` sont des attributs HTML
|
||||
- on ne peut les mettre que sur des balises
|
||||
- Parfois on veut appliquer du CSS sur des éléments précis qui ne sont pas dans des balises
|
||||
- On peut utiliser des balises **universelles** : elles n'ont pas de signification
|
||||
- **`<span></span>`** : **au milieu d'un texte** pour entourer une portion précise
|
||||
- **`<div></div>`** : **autour d'un bloc** (elle provoque un retour à la ligne)
|
||||
- on peut alors ajouter des classes et id sur ces balises
|
||||
|
||||
---
|
||||
|
||||
Exemple :
|
||||
```html
|
||||
<div class="logo_et_accueil">
|
||||
<img src="images/logo.png" alt="Logo du site"/>
|
||||
<p>Bonjour et bienvenue sur <span id="mon_site">mon site</span> !</p>
|
||||
<p>Encore un peu de texte dans un paragraphe</p>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Sélecteurs avancés
|
||||
|
||||
- `*` : sélecteur universel : sélectionne toutes les balises
|
||||
```css
|
||||
* {
|
||||
}
|
||||
```
|
||||
- `+` : balise qui en suit une autre
|
||||
- Exemple on sélectionne la balise `p` qui suit balise `h3`
|
||||
```html
|
||||
<h3>Mon titre</h3>
|
||||
<p>Mon paragraphe</p>
|
||||
```
|
||||
```css
|
||||
h3 + p {
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
- `>` : imbrication précise
|
||||
- On veut une balise `img` incluse dans une balise `section` **directement**
|
||||
```css
|
||||
section > img {
|
||||
/*...*/
|
||||
}
|
||||
```
|
||||
```html
|
||||
<section>
|
||||
<!-- sélectionnée -->
|
||||
<img src="..."/>
|
||||
<div>
|
||||
<!-- non sélectionnée -->
|
||||
<img src="..."/>
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
- `[attribut]` : balise avec attribut
|
||||
- **Exemple** : sélectionne les liens avec un attribut `title`
|
||||
```css
|
||||
a[title] {
|
||||
/*...*/
|
||||
}
|
||||
```
|
||||
- Variantes :
|
||||
- `[attribut="valeur"]` : balise avec attribut et valeur **exacte**
|
||||
- `[attribut*="valeur"]` : balise avec attribut qui **contient** "valeur"
|
||||
|
||||
---
|
||||
|
||||
### Sélectionner par pseudo-classe
|
||||
|
||||
- Modifications dynamiques : changements d'apparence quand la page a été chargée
|
||||
- on utilise des pseudo-classes
|
||||
- Exemples :
|
||||
- `:hover` : au survol par la souris
|
||||
- Utilisé pour les liens
|
||||
- `:active` : à l'instant où on clique dessus
|
||||
- Utilisé pour les boutons
|
||||
- `:focus` : lorsque l'élément est sélectionné
|
||||
- Utilisé pour les champs de formulaires
|
||||
- `:visited` : lorsque la page en lien a été visitée
|
||||
- Utilisé pour les liens
|
||||
|
||||
---
|
||||
|
||||
```css
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: green;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: purple;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Syntaxe imbriquée
|
||||
|
||||
Pour plus de lisibilité on peut imbriquer les balises en CSS
|
||||
- **Attention** : syntaxe très récente, supportée par les navigateurs modernes à jour
|
||||
- sélecteur `&` pour combiner aux autres sélecteurs
|
||||
|
||||
```css
|
||||
nav {
|
||||
a {
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: green;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&:visited {
|
||||
color: purple;
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Compatibilité de l'opérateur `&` : sur les navigateurs récents
|
||||
|
||||
|
||||
---
|
||||
|
||||
## Propriétés
|
||||
|
||||
---
|
||||
|
||||
### Quelques propriétés courantes
|
||||
|
||||
- `font-size` : changer la taille du texte
|
||||
- `color` : changer la couleur du texte
|
||||
- `font-style` : modifier le style du texte (italique par ex)
|
||||
- `font-weight` : modifier le poids (épaisseur) du texte (de extra-light à gras)
|
||||
- `text-decoration` : décore le texte (souligné, barré, ligne au dessus, clignote...)
|
||||
- `text-align` : aligne le texte (droite, gauche, centre...)
|
||||
- `background-color` : modifie la couleur de fond
|
||||
---
|
||||
|
||||
#### Police (font)
|
||||
|
||||
- Un problème : l'utilisateur doit avoir la police installée (ou vous devrez lui fournir)
|
||||
- On précise donc plusieurs polices avec `font-family`, dans l'ordre de priorité.
|
||||
- On essaie de mettre une police standard à la fin
|
||||
|
||||
```css
|
||||
font-family: Helvetica, "Arial Black", Arial, sans-serif;
|
||||
```
|
||||
- Ici : Helvetica, sinon Arial Black, Arial, puis finalement une police standard sans-serif
|
||||
- Notez : guillemets si votre nom de police contient des espaces
|
||||
|
||||
---
|
||||
|
||||
## Valeurs
|
||||
|
||||
Différents types de valeurs reviennent régulièrement. Elles sont standard en CSS.
|
||||
|
||||
---
|
||||
|
||||
### Les tailles
|
||||
|
||||
- Chiffre + unité
|
||||
- Les unités possibles :
|
||||
- **Absolues** :
|
||||
- pixels : `px`
|
||||
- millimètres : `mm`
|
||||
- **Relatives** :
|
||||
- 1 est la valeur de référence
|
||||
- Proportionnel à la taille
|
||||
- de l'élément : `em`
|
||||
- de la page : `rem`
|
||||
- du viewport : `vh` et `vw`
|
||||
- Selon les propriétés : les `%` sont possibles
|
||||
|
||||
---
|
||||
### Les couleurs
|
||||
Plusieurs standards de couleur possibles :
|
||||
- **RGB** : `rgb(186 218 85)`
|
||||
- **Hexadécimal** : `#bada55`
|
||||
- Hue Saturation Lightness : `hsl(74 64.3% 59.4%)`
|
||||
- Hue Whiteness Blackness : `hwb(74 33.3% 14.5%)`
|
||||
- color() : `color(srgb 0.73 0.85 0.33)`
|
||||
|
||||
---
|
||||
### Les URL
|
||||
|
||||
La fonction `url()` peut être utilisée pour inclure un fichier
|
||||
- URL absolue ou relative
|
||||
- Image, police ou feuille de style selon les cas
|
||||
|
||||
```css
|
||||
url('https://example.com/images/myImg.jpg');
|
||||
url(https://example.com/images/myImg.jpg);
|
||||
url(myImg.jpg);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Documentation
|
||||
|
||||
La référence : [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference)
|
||||
- Recense toutes les propriétés, sélecteurs, valeurs
|
||||
- Donne des informations de compatibilité entre navigateurs
|
||||
- Articles et guides explicatifs + exemples
|
||||
|
||||
---
|
||||
BIN
src/slides/B1/web/images/colors_css.png
Normal file
BIN
src/slides/B1/web/images/colors_css.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
BIN
src/slides/B1/web/images/compat_nesting.png
Normal file
BIN
src/slides/B1/web/images/compat_nesting.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
475
src/slides/B1/web/images/css.excalidraw
Normal file
475
src/slides/B1/web/images/css.excalidraw
Normal file
File diff suppressed because one or more lines are too long
4
src/slides/B1/web/images/css.svg
Normal file
4
src/slides/B1/web/images/css.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 31 KiB |
|
Before Width: | Height: | Size: 248 KiB After Width: | Height: | Size: 248 KiB |
BIN
src/slides/B1/web/images/frama_css.png
Normal file
BIN
src/slides/B1/web/images/frama_css.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 173 KiB |
BIN
src/slides/B1/web/images/frama_no_css.png
Normal file
BIN
src/slides/B1/web/images/frama_no_css.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 175 KiB |
|
Before Width: | Height: | Size: 297 KiB After Width: | Height: | Size: 297 KiB |
Loading…
Add table
Add a link
Reference in a new issue