Différences

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

--- technique:css [2020/12/04 17:59] – créée francoisa
+++ technique:css [2020/12/05 00:12] – francoisa
@@ Ligne 1: / Ligne 1: @@
 ====== Feuilles de style CSS - habillage web ======
-Plein de ressources sur le sujet
+Plein de ressources sur le sujet un peu partout
   * [[https://www.youtube.com/playlist?list=PLjwdMgw5TTLVjTZQocrMwKicV5wsZlRpj|Chaine de Grafikart]]
@@ Ligne 7: / Ligne 7: @@
   * [[https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3?status=published|OpenClassRomm HTML5 et CSS]]
   * [[https://www.w3docs.com/css3-maker/|CSS3 Maker]]
+  * [[https://devdocs.io/css/|Devdocs CSS]]
+  * [[https://developer.mozilla.org/fr/docs/Web/CSS|CSS sur MDN]]
+===== Principes de base en CSS =====
+  * Le particulier l'emporte sur le générique (les classes surchargent les balises génériques)
+  * Les CSS utilisent le mode descendant : parent - enfants
+  * En cas d'égalité, le code le plus bas surcharge le code le plus haut.
+===== Sélecteurs =====
+''.nom { }''  : classe (.titre)
+''#nom { }''  : id (unique, à éviter) (id="titre-site")
+''nom { }''  : balise (p, body)
+''parent > enfant { }''  : enfant direct
+''balise[attribut="valeur"] { }''  : attribut de la balise (utilisation de * pour règle)
+''* { }''  : tout sans distinction
+''balise:pseudo-classe''  { } : pseudo-classes [[https://developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes|prédéfinies]] (ex a:hover, first-child, nth-child)
+''nom + balise { }''  : première balise (uniquement) après nom
+''nom1, nom2 { }''  : style pour les sélecteurs nom1 et nom2 (en complément)
+===== Boîtes =====
+Propriétés : ''width'', ''height''
+Marges : ''border'', ''padding''  (intérieures), ''margin''  (extérieures) : 4 chiffres : top, right, bottom, left / 3 chiffres : top , left-right, bottom / 2 chiffres : top-bottom, lef-right / 1 chiffre : tous.
+''Display block''  (empilés, taille fixable) : h1, p, div, header, section, footer…
+''Display inline''  (en ligne, taille dépendante du conteneur parent) : a, strong, em, span…
+''Display inline-block''  (en ligne, mais taille fixée) : input…
+Cas particuliers des images: Display inline avec taille fixable, width et height possible en ''auto''
+==== Spécifités des boites ====
+  * Les marges adjacentes fusionnent toujours entre elles : la plus grande l'emporte !
+  * Les margin des enfants l'emportent sur des marges plus petites des parents, sans padding
+  * Les espaces sont affichées dans les ''inline''  et ''inline-block''.
+  * L'attribut ''background''  est différent entre ''inline''  et ''inline-block''  (nouvelle boite en ligne)
+  * Plusieurs autres spécificités de display (flexbox, grid…)
 ===== Flexbox : mise en page souple =====
   * [[https://www.grafikart.fr/tutoriels/flexbox-806|Flexbox]] : avec Grafikart
   * [[https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Concepts_de_base_flexbox|Flexbox sur MDN]]