Maison > Article > interface Web > Comment introduire le style CSS dans le HTML ? Et la différence entre link et @import (exemple de code)
Comment introduire le style CSS dans le HTML ? Et la différence entre link et @import (exemple de code)
- 青灯夜游original
- 2018-09-13 15:08:554930parcourir
Dans le processus de développement de sites Web front-end, nous devons tous utiliser des styles CSS. Les styles CSS peuvent permettre un contrôle plus précis de la mise en page, des polices, des couleurs, des arrière-plans et d'autres effets de la page. Alors, comment ces fichiers ou codes de style CSS sont-ils importés en HTML ? Ce chapitre va vous montrer comment introduire des fichiers de style CSS dans HTML ? En plus de la différence entre link et @import (exemple de code) , laissez tout le monde comprendre comment les styles CSS sont importés, en vous concentrant sur l'importation de fichiers de style CSS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.
1. Comment importer des styles CSS en HTML
HTML est principalement responsable de l'affichage du contenu de la page Web, tandis que le fichier CSS est responsable du style du contenu de la page Web. Les façons d'utiliser les styles CSS en HTML sont : en ligne, intégré, externe,
et le style externe est divisé en : lien (lien) et importer (@import) ). [Apprentissage recommandé : Tutoriel vidéo CSS]
Alors laissez-moi vous le présenter ci-dessous :
1. - -Exemple de code utilisant CSS
dans les balises HTML :
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>行内式</title> </head> <body> <p style="color: red;font-size: 20px;">行内式行内式行内式行内式行内式行内式行内式行内式行内式<p> </body> </html>
Rendu :
 "165951646569588Comment introduire le style CSS dans le HTML ? Et la différence entre link et @import (exemple de code)")
référence css Le style inline peut également être appelé style inline ou style au niveau de la ligne. Il est introduit directement à l'intérieur de la balise. L'avantage évident est qu'il est très pratique et efficace mais il présente également l'inconvénient de ne pas pouvoir réutiliser le style. Si le nombre de lignes de code atteint une certaine longueur, ce n'est pas recommandé. Le CSS en ligne est souvent utilisé comme test pour trouver des bogues dans le code.
Avantages :
Il n'y a pas de fichier de feuille de style, ce qui peut améliorer l'efficacité à certains moments ;
use L'attribut style a l'effet de style le plus fort et remplacera le même effet de style que les autres méthodes d'introduction.
Inconvénients :
Il est difficile pour plusieurs éléments de partager des styles, ce qui n'est pas propice à la réutilisation du code ;
Les codes HTML et CSS sont mélangés, ce qui n'est pas propice aux programmeurs et aux moteurs de recherche.
2. Embedded --- écrivez le contenu CSS dans la balise head via la balise de style
Exemple de code :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内嵌式</title>
<style>
p{
background-color: #21B4BB;
color: #fff;
font-size: 20px;
}
</style>
</head>
<body>
<p>内嵌式内嵌式内嵌式内嵌式内嵌式内嵌式内嵌式<p>
</body>
</html> Rendu :
 "165951763050474Comment introduire le style CSS dans le HTML ? Et la différence entre link et @import (exemple de code)")
Le style intégré de la référence CSS peut également être appelé style interne ou style au niveau de la page, et le tout est placé Dans la balise head, définissez le style dans la balise style, et sa portée est limitée aux éléments de cette page, si vous écrivez plus de quelques centaines de lignes de code, pensez à quel point il est ennuyeux de tirer la page de codes vers la page de code ; top à chaque fois, donc c'est la maintenabilité est médiocre.
Avantages : comme les feuilles de style en ligne, aucune requête supplémentaire n'est générée et il réalise initialement la séparation de la structure et du style, ce qui le rend plus adapté aux applications de sites Web d'une seule page.
Inconvénients : étant donné que la feuille de style interne est écrite dans le fichier HTML, la page est impure, la taille du fichier est volumineuse, elle ne permet pas aux robots d'exploration Web d'obtenir des informations, elle n'est pas propice à la maintenance et les styles ne peuvent pas être partagés entre les pages
3. Style externe --- Présentation des feuilles de style externes (fichiers de style CSS) via la balise de lien
1) Lien style (lien)
Syntaxe :
<link rel="stylesheet" type="text/css" href="css的路径" >
Exemple de code :
Code HTML :
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>链接式</title> <link rel="stylesheet" type="text/css" href="style.css" > </head> <body> <p>链接式链接式链接式链接式链接式链接式链接式链接式链接式链接式链接式链接式<p> </body> </html>
style css file -- style.css code :
p{
font-size: 20px;
color: #fff;
background-color: #70DBDB;
}Rendu :
 "165951772494750Comment introduire le style CSS dans le HTML ? Et la différence entre link et @import (exemple de code)")
Le lien chargera le fichier CSS avant de charger le corps principal de le fichier de la page Web, donc la page Web affichée sera depuis le début Avec l'effet de style, il n'affichera pas d'abord la page Web sans style, puis affichera la page Web stylisée comme le style importé. C'est l'avantage du style de lien. .
2) Import (@import)
Syntaxe :
<style type="text/css" media="screen">
@import url("CSS文件");
</style>Exemple de code :
Code HTML :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导入式</title>
<style type="text/css" media="screen">
@import url("style.css");
</style>
</head>
<body>
<p>导入式导入式导入式导入式导入式导入式导入式导入式导入式<p>
</body>
</html>Rendu :
L'import chargera le fichier CSS une fois la page Web entière chargée, donc ceci entraîne un problème. Si la page Web est relativement volumineuse, la page sans style apparaîtra pendant un certain temps. Après un flash, le style de la page Web apparaîtra. Il s’agit d’un défaut inhérent aux importations.
3) Avantages et inconvénients de la connexion externe
Avantages :
Code qui implémente la structure et les performances Complet séparation
Facile à réutiliser et à entretenir
Parce qu'il est séparé en fichiers séparés, la taille du fichier HTML est considérablement réduite, permettant au la structure de la page est plus facile à lire par les programmeurs et les robots d'exploration
-
Elle est conviviale pour les moteurs de recherche, permettant aux moteurs de recherche d'évaluer la page plus haut, ce qui est bénéfique pour le classement de la page dans les moteurs de recherche
La feuille de style externe est mise en cache sur l'ordinateur de l'utilisateur après la première visite de l'utilisateur, et n'a pas besoin d'être chargée lors de la prochaine visite
Inconvénients :
S'il existe de nombreux styles, le fichier CSS deviendra très volumineux et difficile à trouver. De plus, un fichier CSS de plus signifie une requête HTTP de plus, ce qui augmentera la pression sur le serveur dans un site Web très visité
2. Lier et importer Le différence entre la formule (@import)
le lien est une balise XHTML En plus de charger du CSS, il peut également définir d'autres transactions telles que RSS while @; import appartient à la catégorie CSS. Seul le CSS peut être chargé ; lorsque le
lien fait référence au CSS, il sera chargé en même temps que la page tandis que @import nécessite la page ; être chargé complètement.
link est une balise XHTML et ne présente aucun problème de compatibilité ; tandis que @import a été proposé en CSS2.1 et n'est pas pris en charge par les navigateurs de versions inférieures.
ink prend en charge l'utilisation de Javascript pour contrôler le DOM afin de modifier le style ; @import ne le prend pas en charge.
@import peut introduire d'autres feuilles de style dans le fichier CSS ; le lien ne le prend pas en charge.
(Partage de vidéos d'apprentissage : Démarrez avec l'interface Web)
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!