Différences

Ci-dessous, les différences entre deux révisions de la page.

--- web:css [2023/03/19 16:38] – jcheron
+++ web:css [2023/03/26 19:57] (Version actuelle) – [Principe] jcheron
@@ Ligne 18: / Ligne 18: @@
 ===== Principe =====
-Définir un style consiste a associer une présentation à des cibles HTML identifées grace à un sélecteur.
+Définir un style consiste a associer une présentation :
+  * grâce à la définition d'un ensemble de propriétés,
+  * appliquées à des cibles HTML identifées par un sélecteur.
+<html><div class="imageB"></html>{{:web:pasted:20230326-195749.png}}<html></div></html>
 Association d'un texte de couleur rouge aux balises **h1** :
@@ Ligne 27: / Ligne 31: @@
 }
 </sxh>
 ==== Héritage ====
@@ Ligne 133: / Ligne 139: @@
 === Chaînage ===
-Elements a ayant pour classes menu et item avec une propriété data-id :
+Elements **a** ayant pour classes **menu** et **item** avec une propriété **data-id** :
 <sxh css;gutter:false>
@@ Ligne 140: / Ligne 146: @@
 }
 </sxh>
-==== Propriétés ====
+==== 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 =====
 Approfondir sur [[https://developer.mozilla.org/en-US/docs/Web/CSS/Reference|MDN]]
-==== Savoir-faire spécifiques ====
+===== Savoir-faire spécifiques =====
-  * Positionnement en CSS
+  * [[web:css:position|Positionnement en CSS]]
-  * Media-queries
+  * [[web:css:mediaqueries|Media-queries]]
 ==== Games ====
-  * [[https://flukeout.github.io/|Css diner]]
+  * Maîtriser les sélecteurs CSS avec [[https://flukeout.github.io/|Css diner]]
-  * [[https://flexboxfroggy.com/#fr|Flexbox froggy]]
+  * Maîtriser le positionnement CSS avec [[https://flexboxfroggy.com/#fr|Flexbox froggy]]