| 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 |
| technique:css [2020/12/04 22:50] – francoisa | technique:css [2020/12/05 00:12] – francoisa |
|---|
| * [[https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3?status=published|OpenClassRomm HTML5 et CSS]] | * [[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://www.w3docs.com/css3-maker/|CSS3 Maker]] |
| | * [[https://devdocs.io/css/|Devdocs CSS]] |
| ===== Flexbox : mise en page souple ===== | * [[https://developer.mozilla.org/fr/docs/Web/CSS|CSS sur MDN]] |
| | |
| * [[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]] | |
| |
| ===== Principes de base en CSS ===== | ===== Principes de base en CSS ===== |
| | |
| * Le particulier l'emporte sur le générique (les classes surchargent les balises génériques) | * 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 | * Les CSS utilisent le mode descendant : parent - enfants |
| 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. | 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... | ''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'' (en ligne, taille dépendante du conteneur parent) : a, strong, em, span… |
| |
| ''Display inline-block'' (en ligne, mais taille fixée) : input... | ''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'' | 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]] |
| |
| |
127.0.0.1