Maison >interface Web >tutoriel CSS >Comment lier des fichiers CSS et de polices externes à partir de différents dossiers dans le développement Web ?

Comment lier des fichiers CSS et de polices externes à partir de différents dossiers dans le développement Web ?

Susan Sarandon
Susan Sarandonoriginal
2024-11-30 01:57:13892parcourir

How to Link External CSS and Font Files from Different Folders in Web Development?

Lier des ressources externes dans des répertoires de fichiers

Un défi courant dans le développement Web consiste à lier des ressources externes telles que des feuilles de style et des polices lorsque leurs emplacements diffèrent de le document HTML principal. Dans cet article, nous explorerons les techniques pour lier ces éléments dans des scénarios où ils résident dans des dossiers séparés.

Lier un fichier CSS à partir d'un dossier différent

Pour lier une feuille de style d'un autre dossier, utilisez la syntaxe suivante :

<link href="filepath/stylesheet.css" rel="stylesheet">

Remplacez "filepath" par le chemin relatif du fichier CSS. Par exemple, si le fichier CSS se trouve dans un dossier nommé « styles » dans le dossier « assets », le chemin serait :

<link href="assets/styles/stylesheet.css" rel="stylesheet">

Lien d'un fichier CSS Font-Face

Pour lier un fichier CSS font-face à partir d'un dossier différent, suivez une approche similaire :

<link href="filepath/font-face.css" rel="stylesheet">

Par exemple, si le Le fichier CSS font-face se trouve dans le dossier "fonts" du dossier "assets", le chemin serait :

<link href="assets/fonts/font-face.css" rel="stylesheet">

Liaison des polices à l'aide de l'attribut src

Dans le fichier CSS font-face, vous devez spécifier les fichiers de polices à l'aide de l'attribut src. Les chemins de fichiers doivent être relatifs à l'emplacement du fichier CSS font-face. Par exemple, si les fichiers de polices se trouvent dans le dossier « font1 » du dossier « fonts », l'attribut src serait :

@font-face {
  font-family: 'Font1';
  src: url('font1/font1.ttf') format('truetype');
}

Cette approche garantit que vos feuilles de style et vos polices sont correctement liées, quel que soit le leur emplacement dans la structure du fichier.

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:
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