interface Web
tutoriel HTML
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)
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 :
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 :
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 :
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Comment utiliser Bootstrap en Vue
Apr 07, 2025 pm 11:33 PM
L'utilisation de bootstrap dans vue.js est divisée en cinq étapes: installer bootstrap. Importer un bootstrap dans main.js. Utilisez le composant bootstrap directement dans le modèle. Facultatif: style personnalisé. Facultatif: utilisez des plug-ins.
Les rôles de HTML, CSS et JavaScript: responsabilités de base
Apr 08, 2025 pm 07:05 PM
HTML définit la structure Web, CSS est responsable du style et de la mise en page, et JavaScript donne une interaction dynamique. Les trois exercent leurs fonctions dans le développement Web et construisent conjointement un site Web coloré.
Comment écrire des lignes fendues sur bootstrap
Apr 07, 2025 pm 03:12 PM
Il existe deux façons de créer une ligne divisée bootstrap: en utilisant la balise, qui crée une ligne divisée horizontale. Utilisez la propriété CSS Border pour créer des lignes de fractionnement de style personnalisées.
Comprendre HTML, CSS et JavaScript: un guide pour débutant
Apr 12, 2025 am 12:02 AM
WebDevelopmentReliesOnHTML, CSS, etjavascript: 1) HTMLSTRUCTURESCONTENT, 2) CSSSTYLESIT, et3) JavascriptAdddsInterActivity, Forming TheasisofmodernweBEBExperiences.
Comment insérer des photos sur bootstrap
Apr 07, 2025 pm 03:30 PM
Il existe plusieurs façons d'insérer des images dans Bootstrap: insérer directement les images, en utilisant la balise HTML IMG. Avec le composant d'image bootstrap, vous pouvez fournir des images réactives et plus de styles. Définissez la taille de l'image, utilisez la classe IMG-FLUID pour rendre l'image adaptable. Réglez la bordure en utilisant la classe IMG-border. Réglez les coins arrondis et utilisez la classe Roundée IMG. Réglez l'ombre, utilisez la classe Shadow. Redimensionner et positionner l'image, en utilisant le style CSS. À l'aide de l'image d'arrière-plan, utilisez la propriété CSS d'image d'arrière-plan.
Comment configurer le cadre de bootstrap
Apr 07, 2025 pm 03:27 PM
Pour configurer le framework Bootstrap, vous devez suivre ces étapes: 1. Référez le fichier bootstrap via CDN; 2. Téléchargez et hébergez le fichier sur votre propre serveur; 3. Incluez le fichier bootstrap dans HTML; 4. Compiler les sass / moins au besoin; 5. Importer un fichier personnalisé (facultatif). Une fois la configuration terminée, vous pouvez utiliser les systèmes, composants et styles de grille de Bootstrap pour créer des sites Web et des applications réactifs.
Comment utiliser le bouton bootstrap
Apr 07, 2025 pm 03:09 PM
Comment utiliser le bouton bootstrap? Introduisez Bootstrap CSS pour créer des éléments de bouton et ajoutez la classe de bouton bootstrap pour ajouter du texte du bouton
Comment redimensionner le bootstrap
Apr 07, 2025 pm 03:18 PM
Pour ajuster la taille des éléments dans Bootstrap, vous pouvez utiliser la classe de dimension, qui comprend: ajuster la largeur: .col-, .w-, .mw-ajustement Hauteur: .h-, .min-h-, .max-h-
