Maison  >  Article  >  interface Web  >  Comment référencer le style CSS en HTML ? Introduction à trois méthodes de référencement HTML des fichiers CSS

Comment référencer le style CSS en HTML ? Introduction à trois méthodes de référencement HTML des fichiers CSS

不言
不言original
2018-11-08 09:43:086974parcourir

Il existe trois façons de référencer les styles CSS en HTML Alors, quelles sont les trois façons ? Cet article vous donnera une introduction détaillée à trois méthodes permettant au HTML de référencer des fichiers CSS.

L'application de feuilles de style aux documents HTML et XHTML en CSS peut être grossièrement divisée selon les trois méthodes suivantes. (Tutoriel recommandé : Tutoriel vidéo CSS)

1 Utilisez l'élément 2cdf5bf648cf2f33323966d7f58a7f3f pour appeler et appliquer des fichiers CSS externes

2. élément à appliquer Unité de document

3. Appliquer des styles en ajoutant des attributs de style aux éléments

Utilisez l'élément 2cdf5bf648cf2f33323966d7f58a7f3f pour appeler et appliquer des fichiers CSS externes

créé Un fichier CSS qui décrit la feuille de style séparément du fichier HTML et l'appelle à partir du fichier HTML. Pour les appels, le fichier CSS externe est spécifié via un élément 2cdf5bf648cf2f33323966d7f58a7f3f dans l'élément 93f0f5c25f18dab9d176bd4f6de5d30e Pour informer le navigateur, etc. que les styles appliqués sont basés sur CSS, spécifiez text/css pour la valeur de l'attribut type de l'élément 2cdf5bf648cf2f33323966d7f58a7f3f. Compte tenu de la compatibilité avec XHTML, de la facilité de modification des styles, etc., il est recommandé de configurer la feuille de style de cette façon.

Les composants de la feuille de style sont décrits dans des fichiers externes (xxx.css).

p {color:blue; line-height:1.5;}

Code source HTML

<html> 
<head> 
<link rel =“ stylesheet ”type =“ text / css ”href =“ xxx.css ”>
</ head> 
<body> 
<p>这是一个段落</ p> 
</ body> 
</ html>

Appliqué à l'unité de document à l'aide de l'élément c9ccee2e6ea535a969eb3f532ad9fe89 >Écrivez un élément c9ccee2e6ea535a969eb3f532ad9fe89 dans l'élément 93f0f5c25f18dab9d176bd4f6de5d30e et définissez une feuille de style pour chaque document. Spécifiez text/css comme valeur de l'attribut type de l'élément c9ccee2e6ea535a969eb3f532ad9fe89 pour informer les navigateurs, etc. que les styles appliqués sont basés sur CSS.

Utilisez également 1e0dc9dd195550f5079c2ed08555544cLa section de la feuille de style des commentaires permet d'empêcher l'affichage du contenu de l'élément c9ccee2e6ea535a969eb3f532ad9fe89 dans les anciens navigateurs qui ne correspondent pas à la feuille de style. Cependant, comme la plupart des navigateurs prennent en charge depuis quelques années l'élément c9ccee2e6ea535a969eb3f532ad9fe89, même si l'élément 949b4fbf39934287f6d80ccf9853e0b4, il n'y a presque aucun problème.

Appliquez des styles en ajoutant des attributs de style aux éléments

<html>
<head>
<style type="text/css">
<!--
p {color:blue; line-height:1.5;}
-->
</style>
</head>
<body>
<p>这是一个段落。</p>
</body>
</html>

Ajoutez des attributs de style aux éléments et décrivez les spécifications de style directement dans le code source HTML. Afin de spécifier un style via l'attribut style, afin d'informer le navigateur, etc. que la feuille de style utilisée dans le document est CSS, ajoutez un élément e8e496c15ba93d81f6ea4fe5f55a2244 à l'élément 93f0f5c25f18dab9d176bd4f6de5d30e text/css comme valeur. Dans de nombreux cas, le navigateur le comprendra automatiquement même si vous ne le spécifiez pas, mais vous devez l'écrire pour éviter les problèmes. L'attribution de style aux attributs de style est utile pour hiérarchiser partiellement les styles, mais elle a tendance à compliquer la gestion des styles à mesure que la source HTML devient complexe. Lorsque l’on vise une gestion efficace des styles, il est courant de convertir les parties CSS en fichiers externes.

Exemple : Appliquer une feuille de style directement à l'aide des attributs de style

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn