Découvrez quatre façons d'utiliser les feuilles de style CSS dans les pages Web_Experience Exchange

Comment insérer du CSS dans une page Web

Nous avons déjà 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.

1. Créer un lien vers une feuille de style externe
Pour créer un lien vers une feuille de style externe, vous devez enregistrer la feuille de style en tant que fichier de feuille de style, puis utiliser la balise < fichier de feuille de style sur la page. Cette balise doit être placée dans la zone de la page, comme suit :

Copiez le code . Le code est le suivant :

……
… 

L'exemple ci-dessus indique que le navigateur lit la feuille de style définie 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. media consiste à sélectionner le type de média. Ces médias comprennent : écran, papier, appareil de synthèse vocale, appareil de lecture braille, etc.

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 vide sur le côté gauche du paragraphe est de 20 pixels ; est le fichier back40.gif dans le répertoire images*/

2. Feuille de style interne
La feuille de style interne place la feuille de style dans la zone < les styles sont appliqués à la page. La feuille de style est marquée avec < style > Inséré, l'utilisation de la balise < style > peut être vue dans l'exemple suivant :

Copier le code Le code est le suivant :

…… } 
body {background-image: url(" images/back40.gif")} 
 
…… 
 


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 ignorera le contenu de la balise de style et affichera le contenu de la balise de style directement sur la page sous forme de texte. Afin d'éviter cette situation, nous utilisons des commentaires HTML (< !-- Commentaires -- >) pour masquer le contenu sans le laisser s'afficher :

Copier le code

Le code est le suivant : ;!-- hr {color: sienna}

p {margin-left: 20px }

corps {background-image: url("images/back40.gif")}
--> ; 
 
…… 
 🎜>

3. Externes Stylesheet importieren
Importieren eines externen Stylesheets im < ;head>
……
Pfad. Die Methode ist der Methode der Verknüpfung in ein Stylesheet sehr ähnlich, die Methode zum Importieren eines externen Stylesheets bietet jedoch weitere Vorteile. Im Wesentlichen entspricht es der Speicherung in einem internen Stylesheet.
Hinweis: Der Import externer Stylesheets muss am Anfang des Stylesheets erfolgen, über anderen internen Stylesheets.

4. Inline-Stile
Inline-Stile werden in HTML-Tags gemischt. Auf diese Weise können Sie ganz einfach einen separaten Stil für ein Element definieren. Bei der Verwendung von Inline-Stilen werden Stilparameter direkt zum HTML-Tag hinzugefügt. Der Inhalt des Stilparameters sind die CSS-Attribute und -Werte, wie im folgenden Beispiel:

> Der Inhalt in den Anführungszeichen nach dem Stilparameter entspricht dem Inhalt in die geschweiften Klammern des Stylesheets.
Hinweis: Der Stilparameter kann auf jedes Element innerhalb des BODY (einschließlich des BODY selbst) angewendet werden, außer BASEFONT, PARAM und SCRIPT.​