Au cours de cette série, il a déjà été mentionné plusieurs fois les feuilles de style. Ces feuilles de style permettent une stricte séparation entre la mise en page et le design. Les éléments HTML sont exclusivement responsables de la description logique ou sémantique du document Web grâce au CSS.
Il est généralement utile au début de savoir à quoi ressemble une feuille de style. Regardez donc un premier exemple.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
h1 {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
p {
font-family:Geneva, Arial, Helvetica, sans-serif;
color:#0066FF;
}
</style>
</head>
<body>
<h1>PSD-Tutorials.de</h1>
<p>ton portail de graphisme, web et photo</p>
</body>
</html>Dans le navigateur, le document ressemble à ceci :
Dans la section body du fichier HTML, deux éléments ont été définis :
• un titre
• un paragraphe
À travers le CSS, ces deux éléments sont formatés. Cela se fait en définissant une section de feuille de style dans la partie head à l'aide de style. A l'intérieur de cette section, la mise en forme des éléments est réalisée.
Voici à nouveau la définition du titre h1:
h1 {
font-family: "Courier New", Courier, monospace;
font-size: 200%;
}
A travers la syntaxe présentée, deux choses sont définies :
• La famille de police est déterminée.
• La taille de la police est définie.
A ce stade, on va d'abord s'intéresser de manière générale à la syntaxe utilisée. Chaque instruction CSS est fondamentalement composée de deux parties - un sélecteur et la déclaration CSS. A travers le sélecteur, on définit l'élément à formater. La déclaration CSS détermine finalement à quoi ressemblera ce formatage. Le sélecteur est toujours à gauche, la déclaration CSS se trouve à droite entre des accolades.
La déclaration CSS proprement dite se compose à son tour de deux éléments, à savoir la propriété et la valeur. La propriété et la valeur sont séparées par deux points. Un point-virgule suit la valeur.
Sélecteur {
Propriété: Valeur;
}Incorporer des feuilles de style
Il existe différentes façons d'incorporer des feuilles de style dans les pages Web. Tout d'abord, vous pouvez attribuer directement des instructions de style à une balise HTML. Un exemple :
<h1 style="color: #0033CC;">PSD-Tutorials.de</h1>
Dans cet exemple, le titre est affiché en couleur bleue.
Vous pouvez également ajouter plusieurs instructions de style à une balise HTML.
<h1 style="color: #0033CC; background-color: #99FF66">PSD-Tutorials.de</h1>
Il suffit ensuite de les noter les unes après les autres, séparées par des points-virgules.
En principe, ces 'styles inline' ne sont utiles que lorsque des parties individuelles d'une page doivent être formatées de manière individuelle. Normalement, vous devriez cependant éviter ce type de formatage direct, car il rend le code HTML moins lisible.
Définition centrale dans la section head
Vous pouvez définir une feuille de style centrale à l'intérieur de la section d'en-tête du fichier HTML. Tous les styles qui doivent s'appliquer à ce fichier sont définis dedans.
<head>
<style type="text/css">
.text {
font-family: "Courier New", Courier, monospace;
font-size: 200%;
}
</style>
</head>
L'avantage de cette option : contrairement à la version 'inline', les formats définis peuvent être utilisés plusieurs fois dans le document. Dans l'exemple précédent, la classe CSS text a été définie. (Des informations détaillées sur les sélecteurs tels que la classe utilisée ici seront données dans le prochain tutoriel). Cette classe peut maintenant être utilisée autant de fois que nécessaire dans le document.
<h1 class="text">PSD-Tutorials.de</h1> <p class="text">ton portail de graphisme, web et photo</p>
Ce type de définition a bien sûr l'avantage, contrairement à la version 'inline', que des modifications peuvent être rapidement effectuées.
Externaliser les instructions CSS
La façon la plus pratique de définir les CSS est de déplacer les styles dans un fichier externe. Ainsi, un nombre illimité de fichiers HTML peut accéder au même fichier CSS. Cela rend la mise en forme uniforme de tous les fichiers appartenant au projet Web très facile. Les modifications ultérieures qui doivent affecter toutes les pages peuvent alors être réalisées sans problème.
<link rel="stylesheet" type="text/css" href="css/styles.css">
Dans l'en-tête du fichier HTML, l'élément link est défini. A l'intérieur de link, on spécifie en premier lieu la combinaison attribut-valeur rel="stylesheet". Ensuite, on ajoute type="text/css". L'attribut href assigne le fichier CSS pertinent. Assurez-vous ici - de la même manière qu'avec l'insertion d'images - de spécifier le bon chemin. Dans l'exemple actuel, je pars du principe que le fichier CSS styles.css se trouve dans le répertoire css, qui se trouve à son tour au même niveau que le fichier HTML réel.
Le fichier CSS référencé est un fichier texte normal avec l'extension css. Les instructions CSS correspondantes sont définies dans le fichier CSS externe.
h1 {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
En alternative à la variante link montrée, il est également possible d'importer des feuilles de style. Ici aussi, les instructions CSS se trouvent dans un fichier externe. Pour cela, on utilise la syntaxe suivante :
<style type="text/css">
@import url("css/styles.css");
</style>
À l'intérieur des parenthèses, on indique le chemin du fichier CSS à importer. Par ailleurs, @import est une syntaxe CSS. Par conséquent, l'instruction @import peut également être utilisée à l'intérieur des fichiers CSS. Cela permet d'appeler d'autres feuilles de style à partir d'une feuille de style, ce qui permet une meilleure organisation des feuilles de style.
La question se pose naturellement de savoir s'il faut utiliser link ou @import. En général, je préfère link, car cette variante est plus rapide, ce qui signifie que la performance de la page est meilleure.
Feuilles de style spécifiques aux médias
Il est possible de définir des feuilles de style pour des médias très différents tels que les imprimantes ou l'écran. Pour cela, l'attribut media est utilisé. Une feuille de style peut également être assignée à plusieurs médias séparés par des virgules.
<link rel="stylesheet" media="screen" href="css/styles.css"> <link rel="stylesheet" media="print " href="css/druck.css">
Dans ce cas, deux feuilles de style ont été appelées, l'une pour l'écran, l'autre pour l'impression de la page. Ainsi, le fichier CSS druck.css sera chargé lorsque la fonction d'impression du navigateur est appelée. Dans l'ensemble, les valeurs media suivantes sont disponibles :
• all – Valable pour tous les médias de sortie.
• aural – Le fichier CSS est utilisé pour les systèmes de synthèse vocale.
• braille – Le fichier CSS est destiné aux imprimantes en braille offrant un retour tactile, capables de produire le "Braille".
• embossed – Ceci concerne les imprimantes en braille.
• handheld – Destiné aux appareils portables.
• print – Le fichier CSS est destiné à l'impression sur papier. Les navigateurs doivent automatiquement se référer à ce fichier lors de l'appel de la fonction d'impression.
• projection – Cette variante est prévue pour des présentations projetées.
• screen – Destiné à l'affichage sur écran.
• tty – Le fichier CSS est valable pour les médias utilisant une grille de caractères fixes. Il peut s'agir par exemple de téléscripteurs et de terminaux.
• tv – Cela concerne les appareils similaires à la télévision. Il est supposé que ces appareils ont une faible résolution et une capacité de défilement limitée.
En plus de la syntaxe HTML montrée via l'élément link, il existe également des variantes CSS spéciales. Celles-ci utilisent @import ou @media.
<style type="text/css">
@media screen, projection {
/* Formats pour l'écran */
}
@media print {
/* Formats pour l'impression */
}
</style>
À l'intérieur de l'élément style, on définit une zone de définition de format via @media qui est destinée à un média de sortie spécifique. Derrière @media, séparé par des espaces, l'un des différents types de médias décrits précédemment doit être indiqué. Plusieurs types de médias doivent être notés séparément par des virgules.
