Maison > Article > interface Web > Qu'est-ce que le CSS de lien externe ?
Qu'est-ce que le CSS de lien externe ?
- 青灯夜游original
- 2022-09-01 18:43:323318parcourir
Le lien externe CSS fait référence à la définition du style CSS dans un fichier au format ".css", puis à l'utilisation de la balise de lien HTML pour lier le fichier CSS au document HTML. Le lien externe CSS chargera le fichier CSS avant que le corps principal du fichier de la page Web ne soit chargé, de sorte que la page Web affichée sera stylisée depuis le début. Elle n'affichera pas d'abord la page Web sans style, puis celle stylée comme celle importée. css.
L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.
Le lien externe CSS fait référence à l'utilisation de la balise de lien HTML pour lier le fichier CSS au document HTML.
Les fichiers CSS sont généralement appelés feuilles de style externes CSS, qui sont des fichiers texte utilisés pour placer des codes CSS, et les codes CSS sont composés de codes texte avec certaines règles régulières. Nous utilisons le Bloc-notes pour modifier l'extension afin de devenir un fichier CSS.
Les fichiers CSS ont le suffixe .css. Nous voyons que les fichiers avec le suffixe .css sont des fichiers CSS.
la balise de lien doit être placée dans la section
Le type de lien chargera le fichier CSS avant de charger le corps principal du fichier de la page Web, de sorte que la page Web affichée sera stylisée depuis le début. Elle n'affichera pas d'abord la page Web sans style, puis affichera celle stylisée comme celle-ci. type d'importation de pages Web, c'est l'avantage des liens.
Ce qui suit est un exemple concret à démontrer.
Tout d'abord, vous devez définir un fichier de style au format .css (tel que style.css), comme indiqué ci-dessous :
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}Ensuite, nous introduisons ce fichier style.css dans le document HTML, comme indiqué ci-dessous :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<h1>PHP中文网</h1>
<p>https://www.php.cn/</p>
</body>
</html> 
Description de chaque attribut de la balise link : L'attribut
href définit l'adresse du fichier de feuille de style externe, qui peut être une adresse relative ou une adresse absolue. L'attribut
rel définit le document associé, c'est-à-dire ici la feuille de style associée. L'attribut
type définit le type de fichier importé. Comme l'élément style, text/css indique un fichier texte CSS.
Généralement, lors de la définition de la balise , 3 attributs de base doivent être définis, parmi lesquels href est un attribut incontournable.
Vous pouvez également ajouter l'attribut title dans l'élément link pour définir le titre de la feuille de style facultative. Autrement dit, lorsqu'un document Web importe plusieurs feuilles de style, vous pouvez sélectionner le fichier de feuille de style à appliquer via la valeur de l'attribut title. .
Conseils : dans le navigateur Firefox, vous pouvez sélectionner l'option "Affichage --> Style de page" dans le menu, puis la valeur de l'attribut de titre sera affichée dans le sous-menu. Il vous suffit de sélectionner différentes valeurs d'attribut de titre, qui. peuvent être appliqués de manière sélective. Le navigateur IE ne prend pas en charge cette fonctionnalité.
De plus, l'attribut title est lié à l'attribut rel Selon le plan de l'organisation W3C, les futurs documents Web utiliseront plusieurs éléments fichiers de thème, et même inclut des fichiers supplémentaires supplémentaires pour une personnalisation personnelle. Après avoir importé autant de fichiers de types et de noms différents, vous pouvez utiliser l'attribut title pour sélectionner. À ce stade, le rôle de l'attribut rel devient évident. Il peut spécifier le type de fichier importé à appliquer lors de la création initiale du fichier de page Web. affiché. Actuellement, il ne peut être associé qu’au type de feuille de style.
Remarque :
En plus d'utiliser la balise de lien pour introduire des feuilles de style externes CSS, vous pouvez également @importer.
La différence entre lien externe (lien) et import (@import) :
link est une balise XHTML En plus de charger du CSS, il peut également définir d'autres transactions telles que RSS tandis que @import appartient au CSS ; catégorie et ne peut être chargé que CSS ; lorsque
link fait référence à CSS, il sera chargé en même temps que la page est chargée tandis que @import nécessite que la page soit complètement chargée avant le chargement.
link est une balise XHTML et n'a aucun problème de compatibilité ; alors 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 à nouveau introduire d'autres feuilles de style dans le fichier CSS ; le lien ne le prend pas en charge ;
(Partage de vidéos d'apprentissage : front-end 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!