Différences

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

--- web:basescss [2022/08/25 12:23] – [?. Les balises de type "bloc et en ligne"] phil
+++ web:basescss [2023/06/18 18:47] (Version actuelle) – phil
@@ Ligne 3: / Ligne 3: @@
 ===== WEB - Les bases du CSS =====
-[Mise à jour le 25/8/2022]
+[Mise à jour le 18/6/2023]
-  * **Source**
+  * **Ressources**
     * <html><a href="https://developer.mozilla.org/fr/docs/Web/CSS" target="_blank">MDN web doc</a></html>
@@ Ligne 258: / Ligne 258: @@
 {{ :web:excss2.png?nolink |}}
 ==== 7. Les balises de type "bloc et en ligne" ====
-  * **HTML** \\ La plupart des balises peuvent se ranger dans l’une ou l’autre des **catégories** : **bloc** ou **en ligne**. \\ \\ Une balise de type **bloc** crée automatiquement un **retour à la ligne** avant et après son contenu. Une page web est constituée d’un ensemble de blocs que l’on peut mettre les **uns à l’intérieur des autres**. \\ \\ //Exemples// \\ \\ <code html *.html>
+===HTML===
+La plupart des balises peuvent se ranger dans l’une ou l’autre des **catégories** : **bloc** ou **en ligne**. \\ \\ Une balise de type **bloc** crée automatiquement un **retour à la ligne** avant et après son contenu. Une page web est constituée d’un ensemble de blocs que l’on peut mettre les **uns à l’intérieur des autres**. \\ \\ //Exemples// \\ \\ <code html *.html>
 <h1></h1>
 <p></p>
@@ Ligne 269: / Ligne 270: @@
 </code>
-  * **CSS** \\ La propriété CSS **display** permet de transformer n’importe quel élément d’un type dans un autre. Cette propriété prend les valeurs ci-dessous.
+===CSS===
+La propriété CSS **display** permet de transformer n’importe quel élément d’un type dans un autre. Cette propriété prend les valeurs ci-dessous.
 ^  Valeur  ^  Description  ^
@@ Ligne 284: / Ligne 286: @@
  }
 </code>
+==== 8. Sélecteurs avancés ====
+***** : **sélecteur universel**
+// Exemple //
+<code css *.css>
+/* Pour faire un RESET CSS on applique la même règle à toutes les balises */
+* {
+    /* Règle CSS */
+}
+</code>
+**A B : une balise contenue dans une autre**
+// Exemple //
+<code css *.css>
+/* Pour appliquer la règle à toutes les balises <em> contenues dans une balise <h3> */
+h3 em {
+    /* Règle CSS */
+}
+</code>
+**A + B : une balise qui en suit une autre**
+// Exemple //
+<code css *.css>
+/* Pour appliquer la règle à la première balise p (paragraphe) qui suit une balise h3 (titre) */
+h3 + p {
+    /* Règle CSS */
+}
+</code>
+**A[attribut] : une balise possédant un attribut**
+// Exemple //
+<code css *.css>
+/* Pour appliquer la règle à toutes les balises a (lien) possédant l'attribut title */
+a[title]{
+    /* Règle CSS */
+}
+</code>
+**A[attribut="valeur"] : une balise possédant un attribut et une valeur exacte**
+// Exemple //
+<code css *.css>
+/* Pour appliquer la règle à toutes les balises a (lien) dont l'attribut title est égal au texte : Cliquez ici */
+a[title="Cliquez ici"]{
+    /* Règle CSS */
+}
+</code>
+**A[attribut*="valeur"] : une balise, un attribut et une valeur**
+// Exemple //
+<code css *.css>
+/* Pour appliquer la règle à toutes les balises a (lien) dont l'attribut title contient le texte : ici */
+a[title*="Clic ici"]
+{
+    /* Règle CSS */
+}
+</code>
+==== Pour aller plus loin ... ====
+<html><a href="https://fr.learnlayout.com/" target="_blank">Apprendre les mises en page CSS</a></html>