« Le langage CSS/Le positionnement des éléments » : différence entre les versions

Contenu supprimé Contenu ajouté
m Formatage, ajout de code
Ligne 11 :
Voici les principaux points à retenir de cet article :
 
* Tous les éléments (balises) HTML peuvent être positionnés, décorés, dimensionnés, ... grâce aux styles CSS. Cela signifie que les CSS ne s'appliquent pas qu'aux éléments <div> contrairement à certaines idées reçues : une image (<ttcode><nowiki><img></nowiki></ttcode>), une liste (<ttcode><nowiki><ul></nowiki></ttcode>), un paragraphe (<ttcode><nowiki><p></nowiki></ttcode>), etc. peuvent être stylés en CSS sans avoir besoin d'être contenus dans un élément <ttcode><nowiki><div></nowiki></ttcode>. Évitez d'ailleurs de surcharger vos documents d'éléments <ttcode><nowiki><div></nowiki></ttcode> inutiles.
* Employez toujours les éléments selon leur fonction et non selon leur aspect (puisque cet aspect pourra facilement être modifié via CSS) : un paragraphe sera défini par la balise <ttcode><nowiki><p></nowiki></ttcode>, un titre par la balise <t><nowiki><h1></nowiki></ttcode>, <ttcode><nowiki><h2></nowiki></ttcode>..., etc. Notez que l'élément <ttcode><nowiki><div></nowiki></ttcode> est neutre est sert de "bouche-trou" pour englober d'autres éléments ou servir lorsqu'aucun autre élément n'est approprié. N'utilisez pas <ttcode><nowiki><div></nowiki></ttcode> pour englober des éléments seuls !
* Il existe deux types généraux d'éléments HTML : les balises de type "en-ligne" et les balises de type "bloc". Cette différence est fondamentale et a de nombreuses implications sur les styles qui peuvent être appliqués.
* L'imbrication des éléments les uns dans les autres, et les notions de parenté (parent, ancêtre, frère, ...) permettent de styler facilement les éléments en utilisant cette hiérarchie dans les sélecteurs CSS. Cela évite d'employer des noms de classes ou d'id multiples et inutiles, qui complexifient la lecture et la compréhension des styles.
Ligne 24 :
Voici un résumé pour les lecteurs pressés
 
* les éléments de rendu "bloc" se placent toujours l'un en dessous de l'autre par défaut (comme un retour chariot). Par exemple: une suite de paragraphes (balise <ttcode><nowiki><p></nowiki></ttcode>) ou les éléments d'une liste (balise <ttcode><nowiki><li></nowiki><ttcode>). Par ailleurs, un élément "bloc" occupe automatiquement, par défaut, toute la largeur disponible dans son conteneur.
* les éléments de rendu "en-ligne" se placent toujours l'un à côté de l'autre afin de rester dans le texte. Par exemple : le renforcement d'une partie de texte à l'aide de la balise .
* les autres éléments de type en-ligne ("non-remplacés") n'ont pas de dimension à proprement parler par défaut (il n'occupent que la place minimum nécessaire à leur contenu). C'est le cas des éléments <ttcode><nowiki><strong></nowiki></ttcode>, <ttcode><nowiki><em></nowiki></ttcode>, <ttcode><nowiki><span></nowiki></ttcode>, etc.
 
== Ancêtre, Parents, Enfants, Frères ==
Ligne 56 :
Sachez utiliser chaque balise à bon escient !
 
* Il est souvent inutile de faire des imbrications multiples de <ttcode><nowiki><div></nowiki></ttcode>, ceux-ci ne servant qu'à délimiter des zones de page
* Évitez d'utiliser les balises <ttcode><nowiki><table></nowiki></ttcode> pour la mise en page de votre site : ils ne sont pas fait pour ça mais pour des données tabulaires et statistiques
* Utilisez les balises <ttcode><nowiki><h1></nowiki></ttcode>...<nowiki><h6></nowiki></ttcode> pour vos titres et non des balises <ttcode><nowiki><p></nowiki></ttcode> améliorées
* Utilisez les listes <ttcode><nowiki><ul></nowiki><ttcode> <ttcode><nowiki><li></nowiki></ttcode> pour vos menus, car leur utilisation est tout à fait appropriée pour ça (voir les articles de la catégorie "menus en CSS")
 
== Position relative et absolue ==