Maison > interface Web > tutoriel CSS > Comment introduire une feuille de style CSS externe

Comment introduire une feuille de style CSS externe

青灯夜游
Libérer: 2023-01-07 11:45:56
original
17576 Les gens l'ont consulté

Méthodes pour introduire des feuilles de style CSS externes : 1. Utilisez l'instruction "" pour l'introduire ; 2. Dans la paire de balises de style, utilisez l'instruction "@import url("css file path");"

Comment introduire une feuille de style CSS externe

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Méthodes pour introduire des feuilles de style CSS externes

1. Utilisez la balise

définit la relation entre le document et les ressources externes. L'utilisation la plus courante de la balise consiste à créer un lien vers des feuilles de style CSS externes.

Syntaxe :

<link rel="stylesheet" href="css文件路径" />
Copier après la connexion

2. Utilisez la règle @import

La règle @import permet d'importer une feuille de style dans une autre feuille de style.

Syntaxe : La différence entre

<style type="text/css">
@import url("css文件路径");
</style>
Copier après la connexion

et la méthode @import

  • link appartient à la balise HTML, tandis que @import est fournie par CSS.

  • Lorsque la page est chargée, le lien sera chargé en même temps, et le CSS référencé par @import attendra que la page soit chargée avant de se charger.

  • @import ne peut être reconnu que dans IE 5 ou supérieur, et le lien est une balise HTML, il n'y a donc aucun problème de compatibilité.

  • les styles de style de lien ont un poids plus élevé que les poids @import.

Explication : Chemin

Chemin relatif (Chemin relatif)

Comme son nom l'indique : c'est la position du fichier CSS par rapport à un certain objet de référence.

Lors des cours de physique, les professeurs mentionneront toujours le mouvement relatif : cela signifie qu'un objet se déplace par rapport à un autre objet par rapport à un objet de référence fixe. Lorsque nous marchons et regardons la voiture, nous sentons que la voiture recule. Lorsque la voiture nous regarde, elle avance, donc le chemin relatif ressemble également à ceci. Le répertoire où se trouve la page Web est notre référence. objet.

L'introduction du code CSS comme celui-ci est une adresse de chemin relatif. Le fichier style.css se trouve au même niveau de répertoire que le fichier de la page Web.

<link rel="stylesheet" href="style.css" />
Copier après la connexion

Chemin Absolu

Puisqu'elle est absolue, cela signifie que cette adresse est unique et indépendante. Par rapport à la zone locale, l'adresse absolue du site test à l'heure actuelle est F:test. Par rapport au serveur, il devrait s'agir d'une adresse IP telle que 127.0.0.1/test.

Exemple :

<link rel="stylesheet" href="http://xxx.com/test/css/style.css" />
Copier après la connexion

À propos de l'introduction du chemin

Qu'il s'agisse d'un chemin relatif ou d'un chemin absolu pour importer des fichiers CSS Personnellement, je pense que vous pouvez choisir un chemin relatif lors de la prévisualisation locale et le remplacer par un chemin absolu. quand le projet est en ligne Pourquoi ? Il y a les points suivants :

1. Réduire l'indexation. Le caractère unique de l'adresse absolue peut garantir que lorsque l'utilisateur entre dans la page Web, le navigateur indexe directement l'adresse IP, ce qui est un coup fatal sans aucun délai. Le chemin relatif nécessite d'indexer l'annuaire étape par étape, c'est comme rencontrer une fille qu'on aime sur la route. Nous sommes trop timides pour lui parler face à face, alors nous créons d'innombrables rencontres fortuites avant d'avoir le courage de monter et de monter. demandez ses coordonnées, pour finalement le découvrir. La fille a déjà son nom, si elle avait su cela, pourquoi s'embêter en premier lieu ~

2 Pour ceux qui font du référencement, nous tous. sachez que les liens externes peuvent entraîner une bonne augmentation de poids, même si d'autres viennent s'en emparer. Notre contenu, s'il n'a pas été modifié par sa propre adresse de serveur, cela signifie que l'adresse de référence de ce site Web est toujours notre URL. Le robot d'exploration reculera à travers cette adresse de référence d'image, mais la référence de chemin relatif, car l'adresse a changé, donc le robot d'exploration reculera, le fichier correspondant ne peut pas être trouvé, donc le travail du robot est sur le point de s'arrêter.

3. Améliorez les classements. Si vous travaillez sur le front-end, vous rencontrerez un effet d'animation que vous aimez. Vous avez téléchargé le HTML, mais vous ne souhaitez pas télécharger directement le CSS, vous appellerez donc directement le. adresse réseau localement. Lorsque vous cliquez accidentellement sur l'adresse d'importation lors de la prévisualisation de cette page, elle accédera au CSS du site Web correspondant. Même si vous ne visitez pas sa page d'accueil, vous visitez toujours son nom de domaine, ce qui augmente par inadvertance ses visites.

(Partage de vidéos d'apprentissage : Tutoriel vidéo CSS)

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal