Cours

Objectifs

Comment mettre en forme une page Web ?

Présentation

CSS

Programmation Web et bases de données

CSS


p {
  color: red;
}

h1 {
  font-size: 24px;
}

Langage de feuilles de style pour décrire la présentation d'un document structuré (HTML).
Extension des fichiers en .css.

Règle CSS

https://web.dev/static/learn/css/selectors/image/an-image-a-css-rule-the-ced38545b4bec.svg

https://web.dev/learn/css/selectors

Liste de règles. Chaque règle est composée de :
Un sélecteur : où appliquer la règle.
Un bloc de déclarations délimité par {} : quoi appliquer
Une déclaration est composée d'une propriété et d'une valeur séparées par :.
Une déclaration se termine par un ;.

Sélecteur simple : Sélecteur de type


<div>
  <h1 id=main class="title">Titre</h1>
  <p>Paragraphe</p>
  <p>Deuxième paragraphe</p>
  <h2 class="title subtitle">Sous-titre</h2>
  <p>
    Autre paragraphe avec un
    <a href="https://example.com">lien</a>.
  </p>
</div>


h1 {
  color: blue;
}

Sélectionne tous les éléments d'un type (tag).

Sélecteur simple : Sélecteur de classe


<div>
  <h1 id=main class="title">Titre</h1>
  <p>Paragraphe</p>
  <p>Deuxième paragraphe</p>
  <h2 class="title subtitle">Sous-titre</h2>
  <p>
    Autre paragraphe avec un
    <a href="https://example.com">lien</a>.
  </p>
</div>


.title {
  color: blue;
}

Sélectionne tous les éléments avec l'attribut class contenant la classe.
Un élément peut avoir plusieurs classes séparées par des espaces.
Peut être combiné avec d'autres sélecteurs : h1.title.
Peut être combiné avec d'autres classes : .title.subtitle.

Sélecteur simple : Sélecteur d'identifiant


<div>
  <h1 id=main class="title">Titre</h1>
  <p>Paragraphe</p>
  <p>Deuxième paragraphe</p>
  <h2 class="title subtitle">Sous-titre</h2>
  <p>
    Autre paragraphe avec un
    <a href="https://example.com">lien</a>.
  </p>
</div>


#main {
  color: blue;
}

Sélectionne l'élément avec l'attribut id égal à l'identifiant.
Chaque identifiant doit être unique dans une page.
Peut être combiné avec d'autres sélecteurs : h1#main.

Sélecteur simple : Sélecteur universel


<div>
  <h1 id=main class="title">Titre</h1>
  <p>Paragraphe</p>
  <p>Deuxième paragraphe</p>
  <h2 class="title subtitle">Sous-titre</h2>
  <p>
    Autre paragraphe avec un
    <a href="https://example.com">lien</a>.
  </p>
</div>


* {
  color: blue;
}

Sélectionne tous les éléments de la page.

Sélecteur simple : Sélecteur d'attribut


<div>
  <h1 id=main class="title">Titre</h1>
  <p>Paragraphe</p>
  <p>Deuxième paragraphe</p>
  <h2 class="title subtitle">Sous-titre</h2>
  <p>
    Autre paragraphe avec un
    <a href="https://example.com">lien</a>.
  </p>
</div>


[href] {
  color: blue;
}

Sélectionne tous les éléments avec un attribut.
Peut être combiné avec une valeur d'attribut : [class="title"].
Peut être combiné avec d'autres sélecteurs : a[href].

Combinateur : Voisin direct


<div>
  <h1 id=main class="title">Titre</h1>
  <p>Paragraphe</p>
  <p>Deuxième paragraphe</p>
  <h2 class="title subtitle">Sous-titre</h2>
  <p>
    Autre paragraphe avec un
    <a href="https://example.com">lien</a>.
  </p>
</div>


h1 + p {
  color: blue;
}

Sélectionne les éléments qui sont des voisins directs d'un élément.
Syntaxe : h1 + p sélectionne les <p> qui suivent immédiatement un <h1>.

Combinateur : Voisin


<div>
  <h1 id=main class="title">Titre</h1>
  <p>Paragraphe</p>
  <p>Deuxième paragraphe</p>
  <h2 class="title subtitle">Sous-titre</h2>
  <p>
    Autre paragraphe avec un
    <a href="https://example.com">lien</a>.
  </p>
</div>


h1 ~ p {
  color: blue;
}

Sélectionne les éléments qui sont des voisins d'un élément.
h1 ~ p sélectionne les <p> qui ont le même parent que <h1>.

Combinateur : Enfant


<div>
  <h1 id=main class="title">Titre</h1>
  <p>Paragraphe</p>
  <p>Deuxième paragraphe</p>
  <h2 class="title subtitle">Sous-titre</h2>
  <p>
    Autre paragraphe avec un
    <a href="https://example.com">lien</a>.
  </p>
</div>


div > h2 {
  color: blue;
}

Sélectionne les éléments qui ont un parent direct d'un élément.
div > h2 sélectionne les <h2> qui sont des enfants (descendants directs) de <div>.

Combinateur : Descendant


<div>
  <h1 id=main class="title">Titre</h1>
  <p>Paragraphe</p>
  <p>Deuxième paragraphe</p>
  <h2 class="title subtitle">Sous-titre</h2>
  <p>
    Autre paragraphe avec un
    <a href="https://example.com">lien</a>.
  </p>
</div>


div a {
  color: blue;
}

Sélectionne les éléments qui ont un parent (non direct) d'un élément.
div a sélectionne les <a> qui sont des descendants de <div>.

Pseudo-classe

Selon l'état d'un élément, par exemple :
:hover : lorsque la souris survol l'élément.
:focus : lorsque l'élément est en focus (sélectionné).
:link : pour les liens non visités.
:visited : pour les liens visités.
:first-child : pour le premier enfant d'un parent.
Exemples

Pseudo-élément

Permet de cibler une partie d'un élément.
::before : insère du contenu avant le contenu de l'élément.
::after : insère du contenu après le contenu de l'élément.
::first-letter : cible la première lettre d'un élément.
::first-line : cible la première ligne d'un élément.
Exemples

Résumé des sélecteurs

Sélecteur simple
- Sélecteur de type : h1
- Sélecteur de classe : .title
- Sélecteur d'identifiant : #main
- Sélecteur universel : *
- Sélecteur d'attribut : [href]
Combinateur
- Voisin direct : h1 + p
- Voisin : h1 ~ p
- Enfant : div > p
- Descendant : div p

Pseudo-classe : :hover
Pseudo-élément : ::before
Éditeur en ligne
Well-aimed?

Ajout de styles

Trois manières d'appliquer du CSS :

Inline : attribut style dans une balise HTML.
Interne : balise <style> dans la section <head> du document HTML.
Externe : fichier .css lié à la page HTML avec une balise <link> dans la section <head>.

Inline


<!doctype html>
<html>
  <head>
    ...
  </head>
  <body>
    <p style="color: red;">Texte rouge</p>
  </body>
</html>

Application ponctuelle pour un élément.
Difficile à maintenir et à réutiliser → déconseillé

Interne


<!doctype html>
<html>
  <head>
    <style>
      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <p>Texte rouge</p>
  </body>
</html>

Application ponctuelle pour une page.
Mélangé avec le contenu → déconseillé

Externe

index.html


<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <p>Texte rouge</p>
  </body>
</html>

style.css


p {
  color: red;
}

Application globale pour un site.
Séparé du contenu et réutilisable → recommandé

Chargement

https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites/rendering.svg

https://developer.mozilla.org/fr/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites

Chargement sans CSS

https://i0.wp.com/css-tricks.com/wp-content/uploads/2019/04/s_601945040BCA3610D759145A4442799C97B904D9A9F8326DD30FDF0CF48A96B7_1555363400264_wikipedia-compare.jpg

https://css-tricks.com/that-time-i-tried-browsing-the-web-without-css/

Ajout de styles

Trois manières d'appliquer du CSS :
- Inline : attribut style
- Interne : balise <style>
- Externe : fichier .css
Priorité : Inline > Interne > Externe
Héritage : les enfants héritent des propriétés des parents.
Cascade : règles plus spécifiques > règles plus générales

Cascade

La cascade est un algorithme qui détermine quelle règle CSS s'applique lorsqu'il y a plusieurs règles.
Origine des règles : Inline > Interne > Externe
Spécificité : règles plus spécifiques > règles plus générales
- Identifiant > Classe > Type : #main > .title > h1
- Plus de sélecteurs > moins de sélecteurs : h1.title > h1
- Beaucoup de combinaisons > peu de combinaisons : div p > p
Ordre d'apparition : Défini en dernier > défini en premier
Important : une règle avec !important a la priorité sur les autres règles, à utiliser avec parcimonie.
Héritage : les enfants héritent de leur parent (par défaut).
- Propriété héritée : color, font-family, …
- Propriété non héritée : margin, padding, …