Différences
Ci-dessous, les différences entre deux révisions de la page.
| Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente | ||
| web:css [2023/03/19 16:31] – jcheron | web:css [2023/03/26 19:57] (Version actuelle) – [Principe] jcheron | ||
|---|---|---|---|
| Ligne 18: | Ligne 18: | ||
| ===== Principe ===== | ===== Principe ===== | ||
| - | Définir un style consiste a associer une présentation à des cibles HTML identifées | + | Définir un style consiste a associer une présentation |
| + | * grâce à la définition d'un ensemble de propriétés, | ||
| + | * appliquées | ||
| + | |||
| + | < | ||
| Association d'un texte de couleur rouge aux balises **h1** : | Association d'un texte de couleur rouge aux balises **h1** : | ||
| Ligne 27: | Ligne 31: | ||
| } | } | ||
| </ | </ | ||
| + | |||
| + | |||
| ==== Héritage ==== | ==== Héritage ==== | ||
| Ligne 55: | Ligne 61: | ||
| ===== Sélecteurs ===== | ===== Sélecteurs ===== | ||
| + | Le sélecteur CSS permet de définir le ou les éléments auquels un ensemble de styles va s' | ||
| + | |||
| + | ==== Types de sélecteurs ==== | ||
| + | |||
| + | === Eléments === | ||
| + | |||
| + | Application d'un style a un type d' | ||
| + | <sxh css; | ||
| + | h1 { | ||
| + | color: blue; | ||
| + | } | ||
| + | </ | ||
| + | === Ids === | ||
| + | |||
| + | Application d'un style a un élément défini par son id : | ||
| + | |||
| + | <sxh css; | ||
| + | #elmId { | ||
| + | color: blue; | ||
| + | } | ||
| + | </ | ||
| + | |||
| + | === Classe === | ||
| + | |||
| + | Application d'un style a des éléments définis par une classe CSS : | ||
| + | |||
| + | <sxh css; | ||
| + | .elmsClass { | ||
| + | color: blue; | ||
| + | } | ||
| + | </ | ||
| + | |||
| + | === Attribut === | ||
| + | |||
| + | Application d'un style a des éléments définis par leur type et la valeur d'un attribut : | ||
| + | |||
| + | <sxh css; | ||
| + | a[href=index.html] { | ||
| + | color: blue; | ||
| + | } | ||
| + | </ | ||
| + | |||
| + | === Pseudo élément === | ||
| + | |||
| + | Permet de mettre en forme une partie d'un élément : | ||
| + | |||
| + | <sxh css; | ||
| + | p:: | ||
| + | color: blue; | ||
| + | text-transform: | ||
| + | } | ||
| + | </ | ||
| + | |||
| + | voir [[https:// | ||
| + | |||
| + | === Pseudo classe === | ||
| + | |||
| + | Permet de mettre en forme un élément en fonction de son état, par exemple le passage de la souris au dessus d'une div : | ||
| + | |||
| + | <sxh css; | ||
| + | div:hover { | ||
| + | background-color: | ||
| + | } | ||
| + | </ | ||
| + | |||
| + | voir [[https:// | ||
| + | |||
| + | === Liste de sélecteurs === | ||
| + | |||
| + | Il est possible de cibler plusieurs sélecteurs, | ||
| + | |||
| + | <sxh css; | ||
| + | .elmsClass, a, .elm { | ||
| + | color: blue; | ||
| + | } | ||
| + | </ | ||
| + | === Chaînage === | ||
| + | |||
| + | Elements **a** ayant pour classes **menu** et **item** avec une propriété **data-id** : | ||
| + | |||
| + | <sxh css; | ||
| + | a.menu.item[data-id] { | ||
| + | color: blue; | ||
| + | } | ||
| + | </ | ||
| + | |||
| + | ==== Résumé ==== | ||
| + | |||
| + | ^Sélecteur CSS ^ Signification ^ | ||
| + | ^* | Sélectionne tous les éléments | | ||
| + | ^E, F | Sélectionne tous les éléments de type E et de type F | | ||
| + | ^E F | Sélectionne tous les éléments F à l’intérieur des éléments E, quelque soit le niveau de descendance | | ||
| + | ^E > F | Sélectionne les éléments F enfants directs des éléments E | | ||
| + | ^E + F | Sélectionne tout élément F placé directement après un élément E | | ||
| + | ^E~F | Sélectionne tout élément F placé après un élément E dans la page | | ||
| ===== Propriétés ===== | ===== Propriétés ===== | ||
| + | |||
| + | Approfondir sur [[https:// | ||
| + | |||
| + | ===== Savoir-faire spécifiques ===== | ||
| + | * [[web: | ||
| + | * [[web: | ||
| + | ==== Games ==== | ||
| + | |||
| + | * Maîtriser les sélecteurs CSS avec [[https:// | ||
| + | * Maîtriser le positionnement CSS avec [[https:// | ||
jcheron