CSS - Inclusion
Il existe quatre façons d'associer des styles à votre document HTML. Les méthodes les plus couramment utilisées sont le CSS en ligne et le CSS externe.
CSS intégré - L'élément <style>
Vous pouvez mettre vos règles CSS dans un document HTML à l'aide de l'élément <style>. Cette balise est placée à l'intérieur des balises <head> ... </head>. Les règles définies à l'aide de cette syntaxe seront appliquées à tous les éléments disponibles dans le document. Voici la syntaxe générique -
<!DOCTYPE html>
<html>
<head>
<style type = "text/css" media = "all">
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>Il produira le résultat suivant -
Les attributs
Les attributs associés aux éléments <style> sont -
| Attribut | Valeur | La description |
|---|---|---|
| type | texte / css | Spécifie le langage de la feuille de style en tant que type de contenu (type MIME). Cet attribut est obligatoire. |
| médias | écran tty la télé projection portable impression braille auriculaire tout |
Spécifie le périphérique sur lequel le document sera affiché. La valeur par défaut est tout . Ceci est un attribut facultatif. |
CSS en ligne - L' attribut de style
Vous pouvez utiliser l' attribut style de n'importe quel élément HTML pour définir des règles de style. Ces règles seront appliquées à cet élément uniquement. Voici la syntaxe générique -
<element style = "...style rules....">Les attributs
| Attribut | Valeur | La description |
|---|---|---|
| style | règles de style | La valeur de l' attribut style est une combinaison de déclarations de style séparées par un point-virgule (;). |
Exemple
Voici l'exemple de CSS en ligne basé sur la syntaxe ci-dessus -
<html>
<head>
</head>
<body>
<h1 style = "color:#36C;">
This is inline CSS
</h1>
</body>
</html>Il produira le résultat suivant -
CSS externe - L'élément <link>
L'élément <link> peut être utilisé pour inclure un fichier de feuille de style externe dans votre document HTML.
Une feuille de style externe est un fichier texte distinct avec .cssextension. Vous définissez toutes les règles de style dans ce fichier texte et vous pouvez ensuite inclure ce fichier dans n'importe quel document HTML en utilisant l'élément <link>.
Voici la syntaxe générique pour inclure un fichier CSS externe -
<head>
<link type = "text/css" href = "..." media = "..." />
</head>Les attributs
Les attributs associés aux éléments <style> sont -
| Attribut | Valeur | La description |
|---|---|---|
| type | texte css | Spécifie le langage de la feuille de style en tant que type de contenu (type MIME). Cet attribut est obligatoire. |
| href | URL | Spécifie le fichier de feuille de style ayant des règles de style. Cet attribut est obligatoire. |
| médias | écran tty la télé projection portable impression braille auriculaire tout |
Spécifie le périphérique sur lequel le document sera affiché. La valeur par défaut est tout . Il s'agit d'un attribut facultatif. |
Exemple
Considérez un fichier de feuille de style simple avec un nom mystyle.css ayant les règles suivantes -
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}Vous pouvez maintenant inclure ce fichier mystyle.css dans n'importe quel document HTML comme suit -
<head>
<link type = "text/css" href = "mystyle.css" media = " all" />
</head>CSS importé - Règle @import
@import est utilisé pour importer une feuille de style externe d'une manière similaire à l'élément <link>. Voici la syntaxe générique de la règle @import.
<head>
@import "URL";
</head>Ici, URL est l'URL du fichier de feuille de style ayant des règles de style. Vous pouvez également utiliser une autre syntaxe -
<head>
@import url("URL");
</head>Exemple
Voici l'exemple qui vous montre comment importer un fichier de feuille de style dans un document HTML -
<head>
@import "mystyle.css";
</head>Remplacement des règles CSS
Nous avons discuté de quatre façons d'inclure des règles de feuille de style dans un document HTML. Voici la règle pour remplacer toute règle de feuille de style.
Toute feuille de style en ligne a la priorité la plus élevée. Ainsi, il remplacera toute règle définie dans les balises <style> ... </style> ou les règles définies dans tout fichier de feuille de style externe.
Toute règle définie dans les balises <style> ... </style> remplacera les règles définies dans tout fichier de feuille de style externe.
Toute règle définie dans un fichier de feuille de style externe a la priorité la plus basse et les règles définies dans ce fichier ne seront appliquées que lorsque les deux règles ci-dessus ne sont pas applicables.
Gestion des anciens navigateurs
Il existe encore de nombreux anciens navigateurs qui ne prennent pas en charge CSS. Nous devons donc faire attention lors de l'écriture de notre CSS incorporé dans un document HTML. L'extrait suivant montre comment utiliser les balises de commentaire pour masquer le CSS des anciens navigateurs -
<style type = "text/css">
<!--
body, td {
color: blue;
}
-->
</style>Commentaires CSS
Plusieurs fois, vous devrez peut-être ajouter des commentaires supplémentaires dans vos blocs de feuille de style. Ainsi, il est très facile de commenter n'importe quelle partie de la feuille de style. Vous pouvez simplement mettre vos commentaires dans /*..... c'est un commentaire dans la feuille de style ..... * /.
Vous pouvez utiliser / * .... * / pour commenter des blocs multilignes de la même manière que vous le faites dans les langages de programmation C et C ++.
Exemple
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is a multi-line comment */
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>Il produira le résultat suivant -