| Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente |
| technique:css [2020/12/04 23:20] – francoisa | technique:css [2024/04/02 15:08] (Version actuelle) – modification externe 127.0.0.1 |
|---|
| ====== Feuilles de style CSS - habillage web ====== | **Cette page est obsolète. Veuillez accéder au contenu à son nouvel emplacement : [[https://bibliotech.cemea.org/books/outils-technique/page/css|css]]** |
| | |
| Plein de ressources sur le sujet un peu partout | |
| | |
| * [[https://www.youtube.com/playlist?list=PLjwdMgw5TTLVjTZQocrMwKicV5wsZlRpj|Chaine de Grafikart]] | |
| * [[https://www.alsacreations.com/tuto/liste/2-css.html|Astuces sur Alsacreation]] | |
| * [[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]] | |
| | |
| ===== 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]] | |
| | |
| ===== 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...) | |
| | |
francoisa