Leçons de niveau 14

Cascading Style Sheet/Lier une feuille de style

Une page de Wikiversité.
Sauter à la navigation Sauter à la recherche
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
Icon falscher Titel.svg
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" rel="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.