Différences

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

--- web:basescss [2022/08/25 12:02] – [5.2 Les classes génériques] 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 197: / Ligne 197: @@
 </code>
-{{ :web:testegris.png?nolink|}}
+{{ :web:testegrisgenerique.png?nolink|}}
   * //Exemple d'utilisation//
@@ Ligne 227: / Ligne 227: @@
 </code>
 ==== 6. Le sélecteur id ====
-<callout type="primary" icon="true">Ce sélecteur accroche un effet de style (comme le sélecteur class) mais **ne peut être appelé qu'une seule fois** dans le document. Il permet d'identifier un élément unique dans la page (**très utile lorsqu'on fait appel à du code JavaScript**.</callout>
+<callout type="primary" icon="true">Ce sélecteur accroche un effet de style (comme le sélecteur class) mais **ne peut être appelé qu'une seule fois** dans le document. Il permet d'identifier un élément unique dans la page (**très utile lorsqu'on fait appel à du code JavaScript**).</callout>
   * //Syntaxe//
@@ Ligne 240: / Ligne 240: @@
 <head>
     <style type="text/css">
-        #titre1{
+       #tcan {
-            color:blue;
+          color: blue;
-        }
+          font-size: 20px;
+       }
     </style>
 </head>
 <body>
-    <h1 id="titre1">Ceci est un résumé</h1>
+    <h1 id="tcan">La conversion analogique numérique</h1>
+    <p> Un convertisseur analogique-numérique est un dispositif électronique ...</p>
     ...
 </body>
@@ Ligne 253: / Ligne 255: @@
 </html>
 </code>
-=== ?. 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>
+{{ :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>
 <h1></h1>
 <p></p>
@@ Ligne 265: / 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 280: / 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>