Maison > Article > interface Web > Quelles sont les manières de référencer CSS en HTML ?
Quelles sont les manières de référencer CSS en HTML ?
- php中世界最好的语言original
- 2018-02-11 10:51:542054parcourir
Cette fois, je vais vous présenter quelles façons de référencer CSS en HTML, et quelles sont les précautions sur la façon de référencer CSS en HTML. Ce qui suit est un cas pratique. jetez un oeil.
En HTML, les principales méthodes d'introduction du CSS sont en ligne, intégrées, importées et liées.
Inline : c'est-à-dire définir le style CSS dans l'attribut style de la marque This This. ne reflète pas les avantages du CSS, il n'est donc pas recommandé d'utiliser
Exemple :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Text Demo</title>
</head>
<body>
<h1 style=color:white;background-color=blue;>
This is a line of Text.
</h1>
</body>
</html>Embedded : Embedded se concentrera sur l'écriture des paramètres de divers éléments de la page. 93f0f5c25f18dab9d176bd4f6de5d30e et 9c3bca370b5104690d9ef395f2c5f8d1, cette méthode est très pratique pour une seule page Web. Mais pour un site Web contenant de nombreuses pages, si chaque page définit son propre style en ligne, elle perdra les énormes avantages apportés par CSS. Par conséquent, un site Web écrit généralement un fichier de feuille de style CSS indépendant, en utilisant les deux méthodes suivantes. introduit dans le document HTML.
Exemple :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Text Demo</title>
<style type="text/css">
h1{
color:white;
background-color:boue;
}
</style>
</head>
<body>
<h1>This is a line of Text.</h1>
<h1>This is another line of Text.</h1>
</body>
</html>Type d'importation et type de lien : le but du type d'importation et du type de lien est d'introduire un fichier CSS indépendant dans un fichier HTML, et il existe des différences correspondantes entre les deux.
En fait, la plus grande différence entre les deux est que le type de lien utilise des balises HTML pour introduire des fichiers CSS externes, tandis que le type d'importation utilise des règles CSS pour introduire des fichiers CSS externes. Leur syntaxe est donc également différente.
Si vous utilisez le style de lien, vous devez utiliser l'instruction suivante pour introduire des fichiers CSS externes.
<link href="mystyle.css" rel="stylesheet" type="text/css" />
Si vous utilisez l'importation, vous devez utiliser l'instruction suivante.
<style type="text/css">
@import"mystyle.css";
</style>
De plus, les effets d'affichage de ces deux méthodes sont également légèrement différents. Lors de l'utilisation de la méthode de lien, le fichier CSS sera chargé avant la partie principale de la page d'installation, de sorte que la page Web affichée ait un effet de style dès le début. Lors de l'utilisation de la méthode d'importation, le fichier CSS sera chargé après. la page entière est chargée. Pour certains navigateurs, dans certains cas, si la taille du fichier de la page Web est relativement grande, une page sans style sera affichée en premier, puis l'effet de style apparaîtra après un flash. Du point de vue du spectateur, il s’agit d’un inconvénient de l’utilisation de l’importation. Pour certains sites Web relativement volumineux, afin de faciliter la maintenance, vous souhaiterez peut-être placer tous les styles CSS dans plusieurs fichiers CSS. De cette façon, si vous utilisez l'importation de liens, vous aurez besoin de plusieurs instructions pour importer les fichiers CSS séparément. Si vous souhaitez ajuster la classification des fichiers CSS, vous devez ajuster les fichiers HTML en même temps. C'est un inconvénient pour les travaux de maintenance. Si vous utilisez la méthode d'importation, vous ne pouvez importer qu'un fichier CSS général, puis importer d'autres fichiers CSS indépendants dans ce fichier ; la méthode de lien n'a pas cette fonctionnalité ;
Donc, une suggestion ici est que si vous devez introduire un fichier CSS, utilisez la méthode link ; si vous devez introduire plusieurs fichiers CSS, utilisez d'abord la méthode link pour introduire un fichier CSS "répertoire", ceci Fichier CSS "Répertoire", puis utilisez l'importation pour introduire d'autres fichiers CSS.
Si vous souhaitez décider dynamiquement quel fichier CSS importer via JavaScript, vous devez utiliser la méthode link pour y parvenir.
Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture connexe :
Quelles sont les opérations de débordure et d'iframes sans bordure
Comment utiliser les pages Web HTML Anchor
Comment utiliser js pour obtenir l'heure du système local en HTML
Après l'événement de clic du lien hypertexte HTML un saut à l'adresse indiquée par href
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!