Rappels CSS – Bachelor 2 – Développement web

Écrire les règles

Le CSS est un langage informatique dit déclaratif.

Une feuille de style est composée d’une ou plusieurs instructions qui décrivent la façon dont les éléments ou les groupes d’éléments devraient apparaitre.

Chaque règle sélectionne un élément et déclare comment il doit apparaître.

h1 { color: green; }
p { font-size: large; font-family: sans-serif; }

En css, on utilise la terminologie :

Une instruction, ou règle, est constituée :

sélecteur : il identifie l’élément ou les éléments qui doivent être impactés. Dans l’exemple ci-dessus h1 et p sont des sélecteurs respectivement des titres de niveau 1 et des paragraphes.
déclarations : elles fournissent les instructions de rendu. Dans l’exemple ci-dessus, la couleur du texte des titres de niveau 1 sera verte, et la police des paragraphes sera « sans-serif » et affichée en grand.

Une déclaration est constituée :

d’une propriété,
d’une valeur.

Associer les feuilles de style au document

Feuilles de style externes

Une feuille de style externe est un document texte séparé qui contient un certain nombre de règles de style.

Il doit être nommé avec l’extension .css

Et il est

lié au document HTML (grâce à l’élément link qu’on positionnera dans l’élément head de la page)
ou importé depuis une autre feuille de style avec la règle CSS @import. Cette dernière solution est beaucoup plus lente et donc non recommandée.

<head>
    <title>Titre</title>
    <link rel="stylesheet" href="/chemin/exemple.css">
</head>

ou en css :

<style>
    @import url("/chemin/exemple.css");
    p { font-face: verdana; }
</style>

Feuilles de style embarquées

Les règles sont placées dans la partie head du document.

Elles sont déclarées au sein de l’élément style.

<head>
    <title>Titre</title>
    <style>
        /* les règles de style ici */
    </style>
</head>

Styles en ligne

Il est possible d’applique des règles directement depuis les éléments HTML eux-mêmes.

On utilisera alors l’attribut HTML style.

<h1 style="color: red;">Introduction</h1>

Structure d’un document

On a déjà rapidement parlé du DOM, pour « Document Object Model« . Ce modèle construit par les navigateurs impliquent que les documents ont une structure implicite. On donne des noms à certaines relations familières :

tous les éléments contenus dans un élément donné sont ses descendants,
un élément qui est directement contenu dans un autre élément est l’enfant de cet élément,
l’élément conteneur est le parent de l’élément contenu,
deux éléments qui ont le même parent sont frères et sœurs.

L’héritage

Beaucoup de propriétés appliquées à un élément sont appliquées aussi aux éléments qu’il contient. C’est ce que l’on appelle l’héritage. Ce n’est pas le cas de toutes les propriétés, c’est généralement le cas pour les propriétés relatives aux textes, et pas aux autres.

Les cascades

Elles se réfèrent au système de résolution de conflits lorsque plusieurs styles sont appliqués au même élément.

Les informations de style sont transmises jusqu’à ce qu’elles soient écrasées par une règle ayant plus de poids.

Le poids est estimé sur la base de :

la priorité des sources de règles de style,
la spécificité du sélecteur
l’ordre (la position) de la règle

La priorité est donc donnée :

à tout style marqué comme !important dans la feuille de style définie par l’utilisateur dans son navigateur,
à tout style marqué comme !important par l’auteur du site,
aux styles de l’auteur (les feuilles de style du site),
aux styles de l’utilisateur,
aux styles par défaut des navigateurs.

Spécificité : lorsque deux règles sont en conflit dans une même feuille de style, le type de sélecteur est utilisé pour déterminer quelle règle a le plus de poids. Par exemple, un sélecteur d’ID est plus spécifique qu’un sélecteur d’élément.

La règle de l’ordre

Quand deux règles ont le même poids, l’ordre des règles est utilisé. La règle apparaissant en dernier “gagne”.

p { color: red; }
p { color: blue; }
p { color: green; }

Dans ce premier exemple le vert l’emporte.

p { 
    color: red;
    color: blue;
    color: green; 
}

Dans cet exemple aussi.

<!doctype html>
<html>
  <head>
    <title>Titre</title>
    <style>
      @import url('external.css'); /* met le texte en rouge */
      h1 { color: purple; } /* écrase pour du violet */
    </style>
  </head>
  <body>
    <h1 style="color: blue;">Titre</h1> <!-- le bleu arrive en dernier et gagne -->
  </body>
</html>

Les sélecteurs

Éléments :
p, li, h1, footer
Classes :
.rouge, .col-md-6, .slideshow
Identifiant :
#recherche, #navigation_principale
Attributs :
a[target="_blank"], p[id="annexe"]
Pseudo sélecteurs :
a:hover, input:focus, p:first-child

Grouper les sélecteurs :
p, li, td { color: red; }
Sélecteurs descendants :
p em { color: navy; }
Sélecteurs contextuels :
p > em { font-weight: bold; }, h1 + p { font-style: italic; }, * { border: 1px solid grey; }

Les sélecteurs de base

Les sélecteurs d’élément, ou sélecteur de type

Ce sélecteur simple permet de cibler les éléments qui correspondent au nom indiqué.

Exemple :input permettra de cibler n’importe quel élément <input>.

Les sélecteurs de classe

Ce sélecteur simple permet de cibler les éléments en fonction de la valeur de leur attribut class.

.index permettra de cibler n’importe quel élément qui possède la classe index (vraisemblablement définie avec un attribut class="index").

Les sélecteurs d’identifiant

Ce sélecteur simple permet de cibler un élément d’un document en fonction de la valeur de son attribut id. Dans un document, il ne doit y avoir qu’un seul élément pour un identifiant donné.

Exemple :#toc permettra de cibler l’élément qui possède l’identifiant toc (vraisemblablement défini avec un attribut id="toc").

Le sélecteur universel

Ce sélecteur : * permet de cibler tous les nœuds, ou éléments, d’un document.

les sélecteurs d’attributs

Cible les éléments qui disposent de cet attribut, peu importe sa valeur :

element[attribute]

Cible les éléments pour lesquels la valeur de cet attribut a exactement la valeur demandée :

element[attribute="valeur exacte"]

Cible les éléments pour lesquels la valeur de cet attribut contient le mot demandée :

element[attribute~="valeur"]

Cible les éléments pour lesquels la valeur de cet attribut débute par la valeur demandée :

element[attribute^="valeur"]

Cible les éléments pour lesquels la valeur de cet attribut se termine par la valeur demandée :

element[attribute$="valeur"]

Cible les éléments pour lesquels la valeur de cet attribut contient la valeur demandée :

element[attribute*="valeur"]

Il est utile de préciser ici que dans un souci de performances, on privilégiera plutôt la section d’un élément par son id en utilisant les sélecteurs d’attribut :

p[id="annexes"] { font-style: italic; }

Plutôt que le classique mais plus gourmand :

p#annexes { font-style: italic; }

Références du W3C sur les sélecteurs

Les combinateurs

Les sélecteurs de voisin direct

Le combinateur '+' permet de sélectionner les nœuds qui suivent immédiatement un élément donné.

Exemple : div + p permettra de cibler n’importe quel élément <p> qui suit immédiatement un élément <div>.

Les sélecteurs de voisins

Le combinateur '~' permet de sélectionner les nœuds qui suivent un élément et qui ont le même parent.

Exemple : p ~ span permettra de cibler les éléments <span> qui suivent (immédiatement ou non) un élément <p> et qui ont le même élément parent.

Les sélecteurs d’éléments fils

Le combinateur '>' permet de sélectionner les selects nœuds qui sont des fils directs d’un élément donné.

Exemple : ul > li permettra de cibler tous les éléments <li> qui sont directement situés sous un élément <ul>.

Les sélecteurs d’éléments descendants

Le combinateur (espace) permet de sélectionner les nœuds qui sont des descendants (pas nécessairement des fils directs) d’un élément donné, autrement dit des éléments qui sont à l’intérieur, et du coup son descendants d’un autre élément .

Exemple : div span permettra de cibler n’importe quel élément <span> situé à l’intérieur d’un élément <div>.

Les sélecteurs de pseudo-classes

Pour cibler des éléments en fonction de leur état, au survol, à la prise de focus, etc. on utilise les pseudo-classes.

a:hover, a:focus, a:active { color: maroon; background-color: #ffd9d9; }
a:link { color: maroon; background-color: #ffd9d9; }
a:visited { color: gray; }

pseudo-classes de structure

:root
:empty
:first-child
:last-child
:only-child
:first-of-type
:last-of-type
:only-of-type
:nth-child()
:nth-last-child()
:nth-of-type()
:nth-last-of-type()

pseudo-classes de champs de formulaires :

:enabled
:disabled
:checked

pseudo-classes de liens

:target()

pseudo-classes de langue

:lang()

pseudo-classes logiques

:not()

Toutes les pseudo-classes : https://developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes.

Les propriétés

Liste exhaustive des propriétés css : liste des propriétés CSS du W3C, ou sur le site w3schools.

Les propriétés CSS animées.

Mise en forme du texte

Propriété	Valeurs (exemples)	Description
`font-family`	police1, police2, police3, serif, sans-serif, monospace	Nom de police
`@font-face`	Nom et source de la police	Police personnalisée
`font-size`	1.3em, 16px, 120%…	Taille du texte
`font-weight`	bold, normal	Gras
`font-style`	italic, oblique, normal	Italique
`text-decoration`	underline, overline, line-through, blink, none	Soulignement, ligne au-dessus, barré ou clignotant
`font-variant`	small-caps, normal	Petites capitales
`text-transform`	capitalize, lowercase, uppercase	Capitales
`font`	–	Super propriété de police. Combine : `font-weight`, `font-style`, `font-size`, `font-variant`, `font-family`.
`text-align`	left, center, right, justify	Alignement horizontal
`vertical-align`	baseline, middle, sub, super, top, bottom	Alignement vertical (cellules de tableau ou éléments `inline-block` uniquement)
`line-height`	18px, 120%, normal…	Hauteur de ligne
`text-indent`	25px	Alinéa
`white-space`	pre, nowrap, normal	Césure
`word-wrap`	break-word, normal	Césure forcée
`text-shadow`	5px 5px 2px blue (horizontale, verticale, fondu, couleur)	Ombre de texte

Couleurs et fonds

Propriété	Valeurs (exemples)	Description
`color`	nom, rgb(rouge,vert,bleu), rgba(rouge,vert,bleu,transparence), #CF1A20…	Couleur du texte
`background-color`	Identique à color	Couleur de fond
`background-image`	url(‘image.png’) ; linear-gradient(white, grey) ;	Image de fond
`background-attachment`	fixed, scroll	Fond fixe
`background-repeat`	repeat-x, repeat-y, no-repeat, repeat	Répétition du fond
`background-position`	(x y), top, center, bottom, left, right	Position du fond
`background`	–	Super propriété du fond. Combine : `background-image`, `background-repeat`, `background-attachment`, `background-position`
`opacity`	0.5	Transparence

Les boîtes

Propriété	Valeurs (exemples)	Description
`width`	150px, 80%…	Largeur
`height`	150px, 80%…	Hauteur
`min-width`	150px, 80%…	Largeur minimale
`max-width`	150px, 80%…	Largeur maximale
`min-height`	150px, 80%…	Hauteur minimale
`max-height`	150px, 80%…	Hauteur maximale
`margin-top`	23px	Marge en haut
`margin-left`	23px	Marge à gauche
`margin-right`	23px	Marge à droite
`margin-bottom`	23px	Marge en bas
`margin`	23px 5px 23px 5px (haut, droite, bas, gauche)	Super-propriété de marge. Combine : `margin-top`, `margin-right`, `margin-bottom`, `margin-left`.
`padding-left`	23px	Marge intérieure à gauche
`padding-right`	23px	Marge intérieure à droite
`padding-bottom`	23px	Marge intérieure en bas
`padding-top`	23px	Marge intérieure en haut
`padding`	23px 5px 23px 5px (haut, droite, bas, gauche)	Super-propriété de marge intérieure. Combine : `padding-top`, `padding-right`, `padding-bottom`, `padding-left`.
`border-width`	3px	Épaisseur de bordure
`border-color`	nom, rgb(rouge,vert,bleu), rgba(rouge,vert,bleu,transparence), #CF1A20…	Couleur de bordure
`border-style`	solid, dotted, dashed, double, groove, ridge, inset, outset	Type de bordure
`border`	3px solid black	Super-propriété de bordure. Combine `border-width`, `border-color`, `border-style`. Existe aussi en version `border-top`, `border-right`, `border-bottom`, `border-left`.
`border-radius`	5px	Bordure arrondie
`box-shadow`	6px 6px 0px black (horizontale, verticale, fondu, couleur)	Ombre de boîte

Positionnements et affichages

Propriété	Valeurs (exemples)	Description
`display`	block, inline, inline-block, table, table-cell, none…	Type d’élément (`block`, `inline`, `inline-block`, `none`…)
`visibility`	visible, hidden	Visibilité
`clip`	rect (0px, 60px, 30px, 0px) rect (haut, droite, bas, gauche)	Affichage d’une partie de l’élément
`overflow`	auto, scroll, visible, hidden	Comportement en cas de dépassement
`float`	left, right, none	Flottant
`clear`	left, right, both, none	Arrêt d’un flottant
`position`	relative, absolute, static	Positionnement
`top`	20px	Position par rapport au haut
`bottom`	20px	Position par rapport au bas
`left`	20px	Position par rapport à la gauche
`right`	20px	Position par rapport à la droite
`z-index`	10	Ordre d’affichage en cas de superposition. La plus grande valeur est affichée par-dessus les autres.

Les listes

Propriété	Valeurs (exemples)	Description
`list-style-type`	disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none	Type de liste
`list-style-position`	inside, outside	Position en retrait
`list-style-image`	url(‘puce.png’)	Puce personnalisée
`list-style`	–	Super-propriété de liste. Combine `list-style-type`, `list-style-position`, `list-style-image`.

Exercices : listes

Les tableaux

Propriété	Valeurs (exemples)	Description
`border-collapse`	collapse, separate	Fusion des bordures
`empty-cells`	hide, show	Affichage des cellules vides
`caption-side`	bottom, top	Position du titre du tableau

Exercices : tableaux

Les boîtes flexibles

Propriété	Valeurs (exemples)	Description
`flex`	cxxx	xxx
`flex-basis`	cxxx	xxx
`flex-direction`	cxxx	xxx
`flex-flow`	cxxx	xxx
`flex-grow`	cxxx	xxx
`flex-shrink`	cxxx	xxx
`flex-wrap`	cxxx	xxx
`order`	cxxx	xxx

Les grilles

Propriété	Valeurs (exemples)	Description
`grid-template-columns`	mot clé (“none”), liste (100px 1fr ; ou [nomligne1] 100px [nomligne2 nomligne3], liste autoremplie (repeat(auto-fit, 1fr)	définit les noms des lignes et les dimensions des colonnes
`grid-template-rows`	mot clé (“none”), liste (100px 1fr ; ou [nomligne1] 100px [nomligne2 nomligne3], liste autoremplie (repeat(auto-fit, 1fr)	définit les noms des lignes et les dimensions des lignes
`grid-template-areas`	“a b” ; ou “a b b” “a c d” ;	donne des noms aux zones de la grille
`grid-template`	“a a a” 40px “b c c” 40px “b c c” 40px / 1fr 1fr 1fr;	raccourci pour définir les propriétés column, rows et area
`grid-auto-columns`	200px ; 10% ; minmax(100px, auto) ; minmax(max-content, 2fr)	taille des colonnes d’une grille créée implicitement
`grid-auto-rows`	200px ; 10% ; minmax(100px, auto) ; minmax(max-content, 2fr)	taille des lignes d’une grille créée implicitement
`grid-auto-flow`	row ; column ; row dense ;	contrôle du placement automatique dans la grille
`grid`	auto-flow / 1fr 1fr 1fr; repeat(2, 60px) / auto-flow 80px;	raccourci pour déclarer toutes les propriétés implicites et explicites d’une grille : grid-template-rows, grid-template-columns, and grid-template-areas, grid-auto-rows, grid-auto-columns, et grid-auto-flow
`grid-row-start`	auto ; 3 ; -1 ; span 2 ;	définit le début de la position sur une ligne d’un élément
`grid-column-start`	auto ; 3 ; -1 ; span 2 ;	définit le début de la position sur une ligne d’un élément
`grid-row-end`	auto ; 3 ; -1 ; span 2 ;	définit la position de fin d’un élément
`grid-column-end`	auto ; 3 ; -1 ; span 2 ;	définit la position de fin d’un élément
`grid-row`	1 ; 1 / 3 ; 2 / -1 ; 1 / span 2 ;	raccourci pour déclarer grid-row-start et grid-row-end
`grid-column`	1 ; 1 / 3 ; 2 / -1 ; 1 / span 2 ;	raccourci pour déclarer grid-column-start et grid- column-end
`grid-area`	a ; b ; 2 / 1 / 2 / 4	raccourci pour déclarer grid-row-start, grid-row-end, grid-column-start et grid- column-end
`row-gap`	0 ; 1em ; 30px ;	définit la taille des gouttières entre les lignes
`column-gap`	0 ; 1em ; 30px ;	définit la taille des gouttières entre les colonnes
`gap`	0 ; 1em ; 10px 20px ;	définit la taille des gouttières : raccourci pour row-gap et column-gap

Les transitions

Propriété	Valeurs (exemples)	Description
`transition`	margin-right 2s ; margin-right 2s ease-in-out, color 2s;	raccourci pour transition-property, transition-duration, transition-timing-function et transition-delay.
`transition-delay`	1s ; 250ms ;	durée à attendre avant de débuter la transition
`transition-duration`	500ms; 3s ;	durée de l’animation
`transition-property`	margin-right ; all ;	propriétés css sur lesquelles un effet de transition va être appliqué
`transition-timing-function`	linear ; ease-in ; steps(6, end) ; cubic-bezier(.29, 1.01, 1, -.68) ;	décrit la façon dont les valeurs intermédiaires des propriétés CSS affectées par un effet de transition sont calculées. Ceci permet donc de définir une courbe d’accelération, de manière à ce que la vitesse de la transition varie au cours de sa durée.

Les transformations

Propriété	Valeurs (exemples)	Description
`backface-visibility`	cxxx	xxx
`perspective`	cxxx	xxx
`perspective-origin`	cxxx	xxx
`rotate`	cxxx	xxx
`scale`	cxxx	xxx
`transform`	cxxx	xxx
`transform-box`	cxxx	xxx
`transform-origin`	cxxx	xxx
`transform-style`	cxxx	xxx
`translate`	cxxx	xxx

Les animations

Propriété	Valeurs (exemples)	Description
`animation`	cxxx	xxx
`animation-delay`	cxxx	xxx
`animation-direction`	cxxx	xxx
`animation-duration`	cxxx	xxx
`animation-fill-mode`	cxxx	xxx
`animation-iteration-count`	cxxx	xxx
`animation-name`	cxxx	xxx
`animation-play-state`	cxxx	xxx
`animation-timing-function`	cxxx	xxx

Exercices

1. Les sélecteurs

Écrivez un sélecteur pour chacun des énoncés suivants.

Tous les éléments <a> emboités dans un élément <p>.
Tous les éléments <img> appartenant à la classe encadre et placés dans un élément <div> appartenant à la classe enonce.
Tous les éléments <abbr> qui possèdent un attribut title.
Tous les éléments <img> dont l’attribut width vaut 300.
Tous les éléments <time> dont l’attribut datetime a été défini et qui sont situés dans un élément <article> appartenant à la classe remarque.
Tous les éléments <p> qui sont fils d’un élément <div> de la classe exemple.
Tous les éléments <img> de classe encadre placés dans un élément <p> dont l’id est important.
Chaque premier élément <img>, mais qui n’est pas forcément le premier enfant, dont le père est un élément <div>.
Tous les éléments <img> fils de rang impair d’un élément quelconque du document html.
Tous les éléments <a> dont la cible est un fichier d’extension .jpg situé dans le premier élément <p> qui est fils d’un élément <article> de la classe exercice.
Les éléments <div> de la classe remarque qui sont le premier frère suivant d’un élément <div> de classe reponse.
Toutes les lignes de rang pair situées dans le corps d’une table. +
Le second élément de type <p> fils d’un élément <article> placé dans un élément <section>.

2. Autres exercices

Exercices CSS CodinGame

Exercices w3schools sur les modèles de boîtes

Et les autres exercices sur ce même site du w3schools…