Différences

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

--- web:basescss [2022/08/25 11:58] – [5.1 Les classes régulières] 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 183: / Ligne 183: @@
 === 5.2 Les classes génériques ===
-<callout type="primary" icon="true">Elles peuvent être **appliquées à toutes les balises**.</callout>
+<callout type="primary" icon="true">Elles ne sont pas liées à un sélecteur et peuvent être **appliquées à toutes les balises**.</callout>
   * //Syntaxe//
     * **Déclaration** : **.**//nom_classe// {déclaration(s) de style}
@@ Ligne 190: / Ligne 190: @@
   * //Exemple de déclaration//
 <code css *.css>
-.macouleur{
+/* Déclaraion d'une classe gris générique */
-    color:#64abfb;
+.gris {
+    color: grey;
+    font-style: italic;
 }
 </code>
+{{ :web:testegrisgenerique.png?nolink|}}
   * //Exemple d'utilisation//
 <code html *.html>
-    <p class="macouleur">Ceci est un résumé.</p>
+    <!-- Il faut préciser le nom de la classe générique pour qu'elle s'applique à la balise -->
+    <p class="gris">Ce texte est en gris et en italique.</p>
 </code>
 === 5.3 Les pseudo-classes ===
 <callout type="primary" icon="true">Elles autorisent des définitions pour l'affichage des balises dans des **états particuliers**.</callout>
@@ Ligne 223: / 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 236: / 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 249: / 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 261: / 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 276: / 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>