Maison > Article > interface Web > Trois façons courantes d'intégrer du CSS dans des documents HTML
Trois façons courantes d'intégrer du CSS dans des documents HTML
- 高洛峰original
- 2017-02-23 13:33:562373parcourir
Les trois méthodes suivantes sont couramment utilisées pour définir CSS en HTML : Incorporation (incorporé), Lien (référence), Inline (inline)
1 Intégré
Utiliser HTML L'élément de style. définit les styles CSS dans le document.
<head>
<style type="text/css">
h1{color:red}
p{color:blue}
</style>
<head>
2. Inline
Chaque élément HTML contient un attribut de style, qui peut définir directement le style. Ce style ne peut être appliqué qu'au contenu de cet élément et n'a aucun effet sur un autre élément du même nom.
<p style="color:#FFF;font-weight:bold;">内联样式</p>
3. Référence externe
La référence externe signifie que le document HTML lui-même ne contient pas de styles CSS, mais référence dynamiquement des fichiers CSS externes pour définir l'expression du document.
1. Utilisez l'instruction de traitement de la feuille de style
Écrivez une instruction de traitement de la feuille de style au début du document HTML
<?xml-stylesheet type="text/css" href="mystyle.css" ?> <html> 指令语句 </html>
Mais utilisez uniquement la syntaxe XML. La directive n'est prise en charge que pour les documents HTML écrits au format xhtml ou xml. La plupart des navigateurs ne sont valides que lorsqu'ils sont enregistrés au format xhtml ou xml, et JS ne peut pas gérer ce type de CSS, il n'est donc pas recommandé de l'utiliser.
2. Utilisez la commande @import
Utilisez la commande @import entre les éléments de style pour importer des fichiers CSS externes
<head>
<style type="text/css">
<!--下面两行代码效果一样
@import "mystyle.css";
@import url("mystyle.css");
-->
</style>
</head>
Toute règle @import doit apparaître dans toutes les règles. Avant. Le paramètre est l'adresse URL d'un fichier CSS. Vous pouvez également utiliser la directive @import dans un fichier CSS pour importer un autre fichier CSS.
3. Utilisez l'élément de lien
<head> <link rel="stylesheet" href="css的url" type="text/css" > </head>
4. Utilisez l'en-tête du message HTTP pour créer un lien vers la feuille de style
Vous pouvez utiliser le champ de lien de l'en-tête du message HTTP pour créer un lien vers une feuille de style externe.
link:<mystyle.css>;rel=stylesheet; //等同于<link rel="stylesheet" href="css的url" type="text/css" >
Plusieurs liens peuvent être utilisés dans l'en-tête HTTP pour lier plusieurs feuilles de style, et le lien dans l'en-tête HTTP a la priorité sur le lien dans le document HTML (dans l'élément head).
Pour plus d'articles sur les trois façons courantes d'intégrer du CSS dans des documents HTML, veuillez prêter attention au site Web PHP chinois !