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

Comment introduire une feuille de style CSS externe

Jul 27, 2021 pm 04:11 PM

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!

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

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

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 !

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Vue 3 Vue 3 Apr 02, 2025 pm 06:32 PM

Il est sorti! Félicitations à l'équipe Vue pour l'avoir fait, je sais que ce fut un effort massif et une longue période à venir. Tous les nouveaux documents aussi.

Construire une application Ethereum à l'aide de Redwood.js et de la faune Construire une application Ethereum à l'aide de Redwood.js et de la faune Mar 28, 2025 am 09:18 AM

Avec la récente montée du prix du bitcoin sur 20k $ USD, et pour lui, récemment en train de briser 30k, je pensais que cela valait la peine de reprendre une profonde plongeon dans la création d'Ethereum

Pouvez-vous obtenir des valeurs de propriété CSS valides du navigateur? Pouvez-vous obtenir des valeurs de propriété CSS valides du navigateur? Apr 02, 2025 pm 06:17 PM

J'ai eu quelqu'un qui écrivait avec cette question très légitime. Lea vient de bloguer sur la façon dont vous pouvez obtenir les propriétés CSS valides elles-mêmes du navigateur. C'est comme ça.

Un peu sur CI / CD Un peu sur CI / CD Apr 02, 2025 pm 06:21 PM

Je dirais que "Site Web" correspond mieux que "Application mobile" mais j'aime ce cadrage de Max Lynch:

Cartes empilées avec un positionnement collant et une pincée de sass Cartes empilées avec un positionnement collant et une pincée de sass Apr 03, 2025 am 10:30 AM

L'autre jour, j'ai repéré ce morceau particulièrement charmant sur le site Web de Corey Ginnivan où une collection de cartes se cassent les uns sur les autres pendant que vous faites défiler.

Comparaison des navigateurs pour une conception réactive Comparaison des navigateurs pour une conception réactive Apr 02, 2025 pm 06:25 PM

Il existe un certain nombre de ces applications de bureau où l'objectif montre votre site à différentes dimensions en même temps. Vous pouvez donc, par exemple, écrire

Utilisation de Markdown et de la localisation dans l'éditeur de blocs WordPress Utilisation de Markdown et de la localisation dans l'éditeur de blocs WordPress Apr 02, 2025 am 04:27 AM

Si nous devons afficher la documentation à l'utilisateur directement dans l'éditeur WordPress, quelle est la meilleure façon de le faire?

Pourquoi les zones réduites pourpre dans la disposition Flex sont-elles considérées à tort «espace de débordement»? Pourquoi les zones réduites pourpre dans la disposition Flex sont-elles considérées à tort «espace de débordement»? Apr 05, 2025 pm 05:51 PM

Questions sur les zones de slash violet dans les dispositions flexibles Lorsque vous utilisez des dispositions flexibles, vous pouvez rencontrer des phénomènes déroutants, comme dans les outils du développeur (D ...

See all articles