---
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 | ![frama_no_css width:550px](./images/frama_no_css.png) |
| Avec CSS | ![frama_css width:550px](./images/frama_css.png)       |

---

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

![css_syntaxe width:800px](./images/css.svg)

---
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
![compat_nesting](images/compat_nesting.png)

---

## 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 la police de l'élément : `em`
      - de la police 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

---

Avez-vous des questions ?