![]() ![]() |
|
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() |
|
![]() ![]() ![]() |
|
À l'origine, le langage HTML a été conçu par Tim Berners-Lee pour structurer et définir le contenu d'une page web à l'aide de balises. Avec l'évolution naturelle de ce langage, liée aux progrès techniques des réseaux, les feuilles de styles ou CSS (Cascading Style Sheets) ont vu le jour avec le HTML 4 pour palier aux limites graphiques des balises HTML. Aujourd'hui, le XHTML (EXtensible HyperText Markup Language) précise encore cette tendance grâce à une syntaxe plus stricte.
Toutes les informations destinées aux comportements graphiques des contenus peuvent être désormais stockées en dehors du fichier html, dans une feuille de styles séparée. Ces feuilles de style externes (.css) permettent de contrôler l'aspect des pages en modifiant uniquement le fichier CSS associé aux documents. Il est possible de définir des styles spécifiques, des caractéristiques rigoureuses de mise en forme pour chaque élément (typo, taille, marges, comportement, couleur, etc) et les appliquer à des ensembles de pages, ou à un site entier. Pour faire des modifications générales sur la globalité d'un site, il suffit donc de changer un style pour agir automatiquement sur tous les éléments HTML correspondants. On appelle ces instructions "feuilles de style en cascade" car on peut en définir plusieurs, et en cas de redondance de style, un ordre de priorité est donné au navigateur. Les feuilles de style permettent l'homogènéité d'un site, des chargements de page plus rapides, et facilitent les manipulations graphiques sur des ensembles de pages en séparant la présentation du contenu. Cette approche est généralisée dans le cas de sites dynamiques (weblogs, spip, etc) et autres systèmes de gestion de contenus.
Il existe trois méthodes pour utiliser une feuille de styles:
![]() Très pratique lorsque vos styles doivent s'appliquer à un nombre important de pages. Cette méthode nécessite de faire appel à ce fichier externe dans chaque document . Pour cela, il faut utiliser la balise <link> et la placer dans l'en-tête entre les deux balises <head> et </head>: <head> <link rel="stylesheet" type="text/css" href="adresse/mafeuilledestyles.css"> </head> Exemple: la feuille de style externe de multimedialab.be ![]() Cette méthode est plus appropriée lorsque l'on souhaite définir des styles pour une ou quelques pages. Au lieu d'utiliser un fichier externe, il faut définir les styles dans le fichier html en utilisant la balise <style> placée dans l'en-tête du document de la manière suivante : <head> <style type="text/css"> body {background-color: white} p {margin-right: 20px} </style> </head> ![]() Pour cela il suffit d'insérer l'attribut style au sein de votre tag: <p style="color: #000000; margin-left: 20px"> Ceci est un paragraphe dont la police sera noire et la taille de la marge de gauche sera de 20 pixels. </p> Les documents de référence concernant les CSS sont publiés sur le site du W3. En voici une traduction, contenant elle-même le lien vers leur version respective et officielle du W3: ![]() ![]() ![]() ![]() ![]() ![]() ![]() Pour terminer cette introduction, je vous recommande définitivement de naviguer avec Firefox et son extension Web developer qui permet une manipulation et une consultation optimale des CSS. ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Conseils d'utilisation des CSS dans Dreamweaver MX. Avantages des styles CSS. Mise en page sans tableaux avec des CSS. Utilisation de CSS sur macromedia.com |
|
![]() |