Tutoriel CSS (4) Comment insérer du CSS dans une page Web

Dans les deux premiers chapitres, nous avons appris la syntaxe du CSS, mais si nous voulons afficher l'effet dans le navigateur, nous devons laisser le navigateur le reconnaître et l'appeler. Lorsque le navigateur lit la feuille de style, il doit la lire au format texte. Voici quatre méthodes pour insérer des feuilles de style dans la page : créer des liens vers des feuilles de style externes, des feuilles de style internes, importer des feuilles de style externes et des styles intégrés.

Créer un lien vers une feuille de style externe

Créer un lien vers une feuille de style externe signifie enregistrer la feuille de style en tant que fichier de feuille de style, puis créer un lien vers ce fichier de feuille de style avec le lien ?lt;link> sur la page. Cette balise doit être placée dans la zone de la page, comme suit :

……

......

L'exemple ci-dessus indique que le navigateur lit le style défini feuille au format document à partir du fichier mystyle.css. rel="stylesheet" fait référence à l'utilisation de cette feuille de style externe dans la page. type="text/css" signifie que le type de fichier est du texte de feuille de style. href="mystyle.css" est l'endroit où se trouve le fichier.

Un fichier de feuille de style externe peut être appliqué à plusieurs pages. Lorsque vous modifiez ce fichier de feuille de style, les styles de toutes les pages sont modifiés en conséquence. C'est très utile lors de la création d'un grand nombre de sites Web avec le même style de page. Cela réduit non seulement la charge de travail de duplication, mais facilite également les modifications et éditions futures, et réduit également le téléchargement répété de codes lors de la navigation.

Les fichiers de feuille de style peuvent être ouverts et modifiés avec n'importe quel éditeur de texte (par exemple : Bloc-notes). Généralement, les extensions de fichier de feuille de style sont .css. Le contenu est une feuille de style définie et ne contient pas de balises HTML. Le contenu du fichier mystyle.css est le suivant :
hr {color: sienna}
p {margin-left: 20px>
body. {background-image: url("images/back40.gif")}
(Définissez la couleur de la ligne horizontale comme étant jaune terreux ; la marge sur le côté gauche du paragraphe est de 20 pixels ; l'image d'arrière-plan du page est le fichier back40.gif dans le répertoire images)

Feuille de style interne

La feuille de style interne place la feuille de style dans la zone ?lt;head> les styles définis sont appliqués à la page. La feuille de style est marquée avec
……


Remarque : certains navigateurs de version inférieure ne peuvent pas reconnaître la balise de style, ce qui signifie que le navigateur de version inférieure ignorez le contenu de la balise de style et remplacez le contenu de la balise de style par du texte affiché directement sur la page. Afin d'éviter cette situation, nous utilisons des commentaires HTML () pour masquer le contenu sans le laisser s'afficher :

……
< ;style type="text/css">


……


Importer une feuille de style externe

Importer une feuille de style externe signifie importer une feuille de style externe dans le