Trois façons courantes d'intégrer du CSS dans des documents HTML-tutoriel HTML-php.cn

Trois façons courantes d'intégrer du CSS dans des documents HTML

高洛峰

Libérer： 2017-02-23 13:33:56

original

2410 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

C'est également la méthode la plus couramment utilisée.

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" >

Copier après la connexion

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 !