30/11/14

Styles embarqués ou internes

Telles que nous les avons utilisées jusqu'à maintenant, les règles CSS ne peuvent s'appliquer qu'au document qui les contient. Pour cette raison, ces règles sont dites "internes".

On peut aussi écrire des styles dits "locaux" ou "embarqués" (traduction de l'angalis "embedded") ; vous l'avez peut-être utilisé en niveau avancé :

<p style="color:0F0; text-align:center">

Ci-dessus les deux propriétés color et text-align sont des propriétés CSS embarquées dans cette balise p.

Il s'agit donc toujours de style CSS mais avec une syntaxe particulière : il n'y a pas de sélecteur; dans ce cas les propriétés ne s'appliquent qu'à l'élément qui les contient (le p pour l'exemple ci-dessus, pas à tous les p du document).

Remarque : l'exemple suivant n'est pas un style CSS mais un style HTML : <p align="center">.....</p>; seul l'attribut STYLE dans une balise permet de définir des propriétés CSS.

Dans les cas où vous mélangeriez dans le même document des styles internes et des styles embarqués, la valeur d'une propriété embarquée sera prioritaire en cas de conflit.

Créez un style embarqué dans un de vos documents qui soit contradictoire avec un style interne ; vérifiez lequel des deux s'applique.

Bien qu'il soit possible d'utiliser des styles embarqués, il est préférable d'utiliser une feuille de style interne (déclarée dans l'en-tête du document).

Styles externes

Télécharger CSS_ext.zip.

Telles qu'elles sont définies, les règles précédentes ne peuvent s'appliquer qu'au document qui les contient. Pour cette raison, la feuille de style est dite interne. Or, si notre site est constitué de nombreuses pages, il est probable que nous souhaitions unifier la mise en forme des pages et donc que certaines règles de style puissent s'appliquer à toutes les pages du site.

Dans cet esprit il serait fastidieux de devoir reporter la même règle sur chaque page ; la technique CSS est de mettre dans un document séparé du fichier html les règles que l'on souhaite utiliser sur plusieurs pages ; ce document s'appelle un fichier de styles ou fichier CSS. On dira que c'est une feuille de style externe car distincte du document HTML.

Un fichier CSS est un document au FORMAT TEXTE portant l'extension CSS. Ce document contient uniquement les règles de style.

Créez un nouveau document dans lequel vous écrirez seulement deux règles : fond bleu pour h1 et texte en vert pour h2 (Dialogue/CSS/Creer un style).

Enregistrez ce document dans le dossier CSS_ext avec comme nom Style.css.

Ouvrez le document life.html avec Bluefish. Observez ce document dans un navigateur.

Dans l'en-tête du document, ajoutez un lien vers le fichier Style.css : Dialogue/CSS/feuille de style... puis sélectionner le fichier Style.css dans la zone HREF à l'aide du bouton .

L'entête du document HTML contient maintenant

<link href="Style.css" type="text/css" rel="stylesheet">

On dit que le fichier CSS a été lié au document HTML.

Autre solution :

Ouvrez le document keepers.html avec Bluefish. Observez ce document dans un navigateur.

Ajoutez dans l'en-tête du document HTML :

<style type="text/css"> @import url("Style.css"); </style>

Observez le résultat.

Remarque : attention, la commande @import doit être en premier avant les règles internes si vous décidez d'en ajouter.

Lorsque l'on travaille sur de gros sites, les feuilles de styles deviennent très longues, une habitude des concepteurs est de les scinder en plusieurs feuilles spécialisées : une pour le style de contenu, une pour le style des éléments de navigation, ... Il est alors possible d'utiliser plusieurs feuilles spécialisées plutôt qu'une seule contenant toutes les règles.

Remarquez que nous pouvons avoir à la fois des règles internes et externes dans le document HTML. On obtient ainsi des fichiers moins lourds car on évite de répéter inutilement les définitions des règles communes à plusieurs pages.

Remarque : lorsqu'il doit dessiner la page web, le navigateur commence par faire la liste ORDONNÉE de toutes les règles CSS : externes, internes et embarquées par ordre d'apparition dans la page HTML.

Donc dans l'en tête du document HTML suivant la position de la balise link avant ou après la balise style l'ordre des règles ne sera pas le même ; par ailleurs les styles embarqués seront toujours prioritaires sur les autres (internes ou externes).

Cet ordre a son importance lorsque plusieurs propriétés entrent en conflit.