Cascading Style Sheet/Lier une feuille de style
Introduction
[modifier | modifier le wikicode]Utiliser les feuilles de style externes est la solution la plus recommandée et la plus souvent utilisée, elle permet de :
- modifier des éléments de la présentation en quelques secondes ;
- afficher plus rapidement les pages pour le visiteur, en effet il n'a pas besoin de télécharger à chaque fois le fichier css puisque celui-ci est mis en cache ;
- proposer plusieurs design à l'utilisateur et changer de présentation en fonction du type de média (grand écran, écran mobile, impression...).
Les 3 méthodes
[modifier | modifier le wikicode]Avec la balise link
[modifier | modifier le wikicode]<link rel="stylesheet" type="text/css" media="screen" href="file.css"/>
Avec la règle @import
[modifier | modifier le wikicode]La règle @import est une nouveauté CSS2 qui permet d'importer une feuille CSS à l'intérieur d'une autre feuille ou d'un élément <style>.
<style type="text/css" media="screen">@import "file.css";</style>
On peut aussi indiquer le type de média associé à la feuille directement dans la règle, cependant cette syntaxe n’est pas comprise par IE7 et inférieur :
<style type="text/css">@import "file.css" screen;</style>
Avec l'instruction de traitement xml-stylesheet
[modifier | modifier le wikicode]Cette méthode fonctionne uniquement dans le cas où votre fichier est un document XML bien-formé et est destiné à être analysé par un parser XML. Les pages X.H.T.M.L. peuvent contenir cette instruction seulement si elles sont associées à un mime type application/xhtml+xml et non pas text/html.
<?xml-stylesheet type="text/css" media="screen" href="file.css" ?>
Sur les sites Médiawiki comme celui-ci, la page Mediawiki:Common.css permet une personnalisation CSS collective, et monobook.css une individuelle par profil.
