« Le langage CSS/Structure et syntaxe » : différence entre les versions
Contenu supprimé Contenu ajouté
Ligne 89 :
Une première méthode pour utiliser des styles CSS consiste à intégrer les styles dans l'entête du fichier HTML à l'aide d'une balise ''style''. Le code CSS est alors simplement écrit entre la balise ouvrante et la balise fermante :
<html>
<head>
<style type="text/css">
Ligne 105 :
</p>
</body>
</syntaxhighlight> Les styles CSS ainsi définis ne sont évidemment valides que pour la page en question, on réservera donc en général cette méthode à l'expérimentation ou à des styles propres à une page unique. Pour plus de souplesse, on peut donc transférer le code CSS dans un fichier texte, par exemple ''styles.css'', et appeler ces styles dans l'entête HTML à l'aide d'une balise ''link''. Ce fichier CSS peut alors être inclus dans toute page web de cette manière :
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
Ligne 119 ⟶ 120 :
</p>
</body>
</syntaxhighlight> Le fichier ''styles.css'' contient alors simplement :
p {
▲<syntaxhighlight lang="html">p {
Remarque : le chemin des fichiers CSS spécifiés peut être absolu ou relatif. Dans ce deuxième cas, il est relatif au fichier important la feuille de styles, en l'occurrence le document web. Exemple :
Ligne 137 ⟶ 139 :
On peut alors utiliser une des règles équivalentes suivantes :
<syntaxhighlight lang="html">
<link rel="stylesheet" type="text/css" href="css/styles.css"> Pour être exhaustif, signalons qu'il existe une autre méthode pour inclure du code CSS externe. Elle consiste à utiliser la règle CSS <code>@import</code> qui permet d'importer une feuille de style dans un code CSS :
<html>
▲<syntaxhighlight lang="html"><html>
<head>
<style type="text/css">
Ligne 159 ⟶ 161 :
</p>
</body>
</syntaxhighlight> Cette règle permet, via ses variantes syntaxiques, de filtrer les navigateurs de génération 4.x et 5.0, par exemple Netscape 4 et Internet Explorer 5.0 Mac et/ou Windows. Il faut donc l'utiliser en toute connaissance de cause. Son avantage est que l'on peut facilement déclarer plusieurs feuilles de styles à importer sans multiplier les balises HTML.
Ligne 178 ⟶ 181 :
Ceci définit des styles spécifiques à la sortie écran. Dans le second cas, le plus courant, on définit des fichiers séparés par type de media. Il faut alors ajouter la mention du media dans la page web à l'aide d'un attribut de la balise ''link'' :
<syntaxhighlight lang="html">
<html> <head>
<link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
Ligne 190 ⟶ 193 :
</p>
</body>
</syntaxhighlight> Dans cet exemple, la feuille ''styles.css'' contient le style destiné à l'affichage à l'écran dans un navigateur courant, et une seconde feuille ''print.css'' spécifique à l'impression.
Ligne 198 ⟶ 202 :
On peut importer une feuille de styles CSS dans un fichier XML. Il faut utiliser la règle suivante :
<syntaxhighlight lang="html">
</syntaxhighlight> L'inconvénient par rapport à l'utilisation d'une feuille de transformation XSL permettant de générer du HTML à partir du XML, est que tous les éléments XML ont la même apparence par défaut. Il faut ainsi redéfinir le style de quasiment chaque élément. Au contraire une transformation en HTML permet d'utiliser les éléments standards du HTML comme les paragraphes, les titres, les listes, etc.
| |||