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 -