À propos des mises en page CSS

From Joomla! Documentation

This page is a translated version of the page About CSS page layouts and the translation is 100% complete.

Other languages:
العربية • ‎বাংলা • ‎Deutsch • ‎English • ‎español • ‎فارسی • ‎français • ‎हिन्दी • ‎Bahasa Indonesia • ‎italiano • ‎Nederlands • ‎Nederlands (informeel)‎ • ‎português • ‎português do Brasil • ‎română • ‎русский • ‎中文(台灣)‎

Les professionnels du web on tendance à toujours séparer le style et le contenu. Il existe plusieurs raisons à cela et la plus évidente (pour un développeur) est la capacité à contrôler l'apparence de différentes pages en modifiant un unique fichier. Les informations portant sur le style peuvent comprendre les polices de caractères, les fonds, les images (qui se répètent sur plusieurs pages), les positions et les dimensions des éléments de la page. Votre fichier HTML présentera dès lors des informations pour l'en-tête, une série d'éléments et le texte de votre site web. Pour travailler avec un template Joomla, vous devrez renseigner certaines informations d'en-tête et du code php pour obtenir le reste de l'information d'en-tête, une série d'éléments, du code php pour déterminer chaque position de module et du code php pour appeler le contenu principal.

Les informations de style sont codées en CSS, feuille de style en cascade, et généralement stockées dans des fichiers ayant pour extension .css. Une page web contiendra un lien vers le fichier .css associé permettant ainsi au navigateur de trouver les informations de style à appliquer à la page. Les CSS peuvent également être placés à l'intérieur d'un fichier html entre les balises <style type="text/css"></style>.

Le code CSS s'applique à un élément déterminé de la page html/xml. Si vous souhaitez qu'un style s'applique à l'ensemble de la page, il vous sera probablement nécessaire de l'appliquer à l'élément <body>. Vous pouvez appliquer des styles à n'importe quel élément html comme <p>, <table> ou <div>. Pour le style d'un élément particulier, il devra avoir un ID. Par exemple, pour appliquer des styles à la balise <div> contenant le titre, vous devrez d'abord inclure un ID dans le html <div ID="title">.