« Le langage CSS/Structure et syntaxe » : différence entre les versions

Aller à la navigation Aller à la recherche
m
<source> -> <syntaxhighlight> (phab:T237267)
m (Révocation des modifications de 195.83.211.130 (discussion) vers la dernière version de 93.23.17.90)
Balise : Révocation
m (<source> -> <syntaxhighlight> (phab:T237267))
 
 
<sourcesyntaxhighlight lang="html"><html>
<head>
<style type="text/css">
</p>
</body>
</html></sourcesyntaxhighlight>
 
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 :
 
 
<sourcesyntaxhighlight lang="html"><html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</p>
</body>
</html></sourcesyntaxhighlight>
 
Le fichier ''styles.css'' contient alors simplement :
 
 
<sourcesyntaxhighlight lang="html">p {
font-family: Bitstream Vera Sans;
color: #666;
line-height: 1.6em;
}
</sourcesyntaxhighlight>
 
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 :
 
<sourcesyntaxhighlight lang="html"><link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="./css/styles.css">
<link rel="stylesheet" type="text/css" href="http://mon.site.org/css/styles.css">
<link rel="stylesheet" type="text/css" href="/css/styles.css">
</sourcesyntaxhighlight>
 
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 :
 
 
<sourcesyntaxhighlight lang="html"><html>
<head>
<style type="text/css">
</p>
</body>
</html></sourcesyntaxhighlight>
 
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.
 
<sourcesyntaxhighlight lang="html"><html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
</p>
</body>
</html></sourcesyntaxhighlight>
 
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.
 
 
<sourcesyntaxhighlight lang="html"><?xml-stylesheet type="text/css" href="styles.css"?></sourcesyntaxhighlight>
 
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.
 
<sourcesyntaxhighlight lang="html"><div id="page">
<h1>Titre de la page</h1>
<p>...</p>
...
</ul>
</div></sourcesyntaxhighlight>
 
Nous supposons ici que les éléments du menu sont tous contenus dans un unique bloc parent, un élément ''div'' d'identifiant ''menu''. Que se passerait-il si une feuille de styles importée par la suite modifiait à nouveau la couleur des éléments de titre HTML par un « <code>h1 {color: black}</code> » ? Rien !
 
<sourcesyntaxhighlight lang="html">
<div id="page">
<p> ...
</p>
</div>
</syntaxhighlight>
</source>
 
le style des liens ''A'' doit vraisemblablement être spécifié en partant d'une règle simple comme « <code>div#page a</code> » plutôt que « <code>div#page p ul li a</code> » d'emblée. C'est seulement si d'autres liens apparaissent dans la page en dehors des listes que l'on utilisera « <code>div#page li a</code> », et ainsi de suite.
 
Exemple :
<sourcesyntaxhighlight lang="css">
:root {
--my-super-custom-color: #f6f6f6;
background-color: var(--my-super-custom-color);
}
</syntaxhighlight>
</source>
1 535

modifications

Menu de navigation