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édenteDernière révisionLes deux révisions suivantes | ||
web:basescss [2022/08/25 12:02] – [5.2 Les classes génériques] phil | web:basescss [2023/06/18 18:46] – [WEB - Les bases du CSS] phil | ||
---|---|---|---|
Ligne 3: | Ligne 3: | ||
===== WEB - Les bases du CSS ===== | ===== WEB - Les bases du CSS ===== | ||
- | [Mise à jour le 25/8/2022] | + | [Mise à jour le 14/11/2022] |
- | * **Source** | + | * **Ressources** |
* < | * < | ||
Ligne 197: | Ligne 197: | ||
</ | </ | ||
- | {{ :web:testegris.png? | + | {{ :web:testegrisgenerique.png? |
* //Exemple d' | * //Exemple d' | ||
Ligne 227: | Ligne 227: | ||
</ | </ | ||
==== 6. Le sélecteur id ==== | ==== 6. Le sélecteur id ==== | ||
- | <callout type=" | + | <callout type=" |
* // | * // | ||
Ligne 240: | Ligne 240: | ||
< | < | ||
<style type=" | <style type=" | ||
- | | + | #tcan { |
- | color: | + | color: blue; |
- | } | + | |
+ | } | ||
</ | </ | ||
</ | </ | ||
< | < | ||
- | <h1 id="titre1">Ceci est un résumé</h1> | + | <h1 id="tcan">La conversion analogique numérique</ |
+ | <p> Un convertisseur analogique-numérique | ||
... | ... | ||
</ | </ | ||
Ligne 253: | Ligne 255: | ||
</ | </ | ||
</ | </ | ||
- | === ?. 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**. \\ \\ // | + | {{ : |
+ | ==== 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**. \\ \\ // | ||
< | < | ||
< | < | ||
Ligne 265: | Ligne 270: | ||
</ | </ | ||
- | * **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 | ^ Valeur | ||
Ligne 280: | Ligne 286: | ||
} | } | ||
</ | </ | ||
+ | |||
+ | ==== 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 */ | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | **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 */ | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | **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 */ | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | **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' | ||
+ | |||
+ | a[title]{ | ||
+ | /* Règle CSS */ | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | **A[attribut=" | ||
+ | |||
+ | // Exemple // | ||
+ | <code css *.css> | ||
+ | /* Pour appliquer la règle à toutes les balises a (lien) dont l' | ||
+ | |||
+ | a[title=" | ||
+ | /* Règle CSS */ | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | **A[attribut*=" | ||
+ | |||
+ | // Exemple // | ||
+ | <code css *.css> | ||
+ | /* Pour appliquer la règle à toutes les balises a (lien) dont l' | ||
+ | a[title*=" | ||
+ | { | ||
+ | /* Règle CSS */ | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | ==== Pour aller plus loin ... ==== | ||
+ | < |