Cascading Style Sheet/Lier une feuille de style

Leçons de niveau 14
Une page de Wikiversité, la communauté pédagogique libre.
Début de la boite de navigation du chapitre
Lier une feuille de style
Icône de la faculté
Chapitre no 2
Leçon : CSS
Chap. préc. :Introduction
Chap. suiv. :Appliquer un style à un élément
fin de la boite de navigation du chapitre
En raison de limitations techniques, la typographie souhaitable du titre, « Cascading Style Sheet : Lier une feuille de style
Cascading Style Sheet/Lier une feuille de style
 », n'a pu être restituée correctement ci-dessus.

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 :

  1. modifier des éléments de la présentation en quelques secondes ;
  2. 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 ;
  3. 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" ?>


CSS Médiawiki[modifier | modifier le wikicode]

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.