recherche

Maison >interface Web >Questions et réponses frontales >Appeler différents CSS

Appeler différents CSS

WBOY
WBOYoriginal
2023-05-21 12:01:07440parcourir

HTML, en tant qu'élément important du développement Web, n'est pas seulement le support de contenu de la page, mais également le définisseur de la structure et du style. En tant que langage permettant de gérer l'apparence et le style de la page, CSS peut rendre le contenu de la page Web plus coloré et plus beau.

Dans le développement réel, nous devons souvent utiliser différents styles pour différentes pages ou différentes parties. À ce stade, nous devons appeler différents fichiers CSS. Cet article expliquera comment appeler différents fichiers CSS et comment les utiliser dans la page pour diversifier les styles.

1. Comment appeler différents fichiers CSS

  1. Appel via la balise de lien

Vous pouvez appeler des fichiers CSS externes dans l'en-tête HTML via la balise de lien. La balise de lien doit contenir trois attributs : href, rel et type.

Le format spécifique est le suivant :

50d3ac49e0522645b04c918b330f3ab9

Parmi eux, href est utilisé pour spécifier le chemin de l'appelé Fichier CSS, et rel est utilisé pour définir la relation entre le document et le document lié, généralement défini sur une feuille de style. type spécifie le type MIME du document lié, généralement défini sur text/css.

Par exemple, nous pouvons utiliser le code suivant pour appeler deux fichiers CSS différents dans l'en-tête HTML : 

<!DOCTYPE html>
<html>
<head>
  <link href="style1.css" rel="stylesheet" type="text/css" />
  <link href="style2.css" rel="stylesheet" type="text/css" />
  <title>调用不同CSS文件示例</title>
</head>
<body>
  <!-- 页面内容 -->
</body>
</html>

À ce stade, nous pouvons définir différents styles dans le fichier style1.css et style2.css, et les appeler dans différentes pages pour diversifier les styles.

  1. Appel via @import

En plus d'utiliser la balise link, nous pouvons également utiliser la méthode @import pour appeler des fichiers CSS. Dans un fichier CSS, vous pouvez utiliser l'instruction @import pour appeler un autre fichier CSS, et les styles du fichier appelé seront fusionnés avec les styles du fichier principal.

La syntaxe spécifique est la suivante :

@import url("file path");

Par exemple, dans la feuille de style principale style.css, nous pouvons utiliser le code suivant pour charger la sous-feuille de style style2. css : 

@import url("style2.css");

De cette façon, lorsque style.css est appelé dans une page HTML, les styles de style2.css seront automatiquement fusionnés, réalisant ainsi une diversification des styles.

2. Appliquer différents styles CSS

Après avoir appelé plusieurs fichiers CSS, nous pouvons utiliser différents styles de manière spécifique. Deux méthodes couramment utilisées sont présentées ci-dessous.

  1. À l'aide du sélecteur d'identifiant

Dans une page HTML, nous pouvons définir l'attribut id d'un élément afin de nous permettre de définir des styles CSS spéciaux pour celui-ci.

Par exemple, dans le fichier style1.css, on peut définir le style CSS suivant : 

#box {
  width: 200px;
  height: 200px;
  background-color: red;
}

Dans le fichier style2.css, on peut définir le style CSS suivant : 

#box {
  width: 100px;
  height: 100px;
  background-color: blue;
}

Ensuite, dans la page HTML, on peut use Le code suivant appelle ces deux styles : 

<!DOCTYPE html>
<html>
<head>
  <link href="style1.css" rel="stylesheet" type="text/css" />
  <link href="style2.css" rel="stylesheet" type="text/css" />
  <title>调用不同CSS文件示例</title>
</head>
<body>
  <div id="box">样式设置示例</div>
</body>
</html>

A ce moment, lorsque nous ouvrirons la page, nous constaterons que la couleur d'arrière-plan de l'élément box est rouge, pas bleue. En effet, en HTML, le sélecteur d'identifiant a une priorité plus élevée que le sélecteur d'étiquette, donc l'élément box utilise le style défini dans style1.css.

  1. Utilisez le sélecteur de classe

Semblable au sélecteur d'identifiant, nous pouvons également utiliser le sélecteur de classe pour définir les styles des éléments. Lorsque vous utilisez le sélecteur de classe, vous devez ajouter un signe "." devant le sélecteur lors de la définition du style dans le fichier CSS.

Par exemple, dans le fichier style1.css, on peut définir le style CSS suivant : 

.red-box {
  width: 200px;
  height: 200px;
  background-color: red;
}

Dans le fichier style2.css, on peut définir le style CSS suivant : 

.blue-box {
  width: 100px;
  height: 100px;
  background-color: blue;
}

Ensuite, dans la page HTML, on peut use Le code suivant appelle ces deux styles : 

<!DOCTYPE html>
<html>
<head>
  <link href="style1.css" rel="stylesheet" type="text/css" />
  <link href="style2.css" rel="stylesheet" type="text/css" />
  <title>调用不同CSS文件示例</title>
</head>
<body>
  <div class="red-box">样式设置示例</div>
  <div class="blue-box">样式设置示例</div>
</body>
</html>

À ce moment-là, lorsque nous ouvrirons la page, nous constaterons que la couleur d'arrière-plan du premier élément box est rouge et la couleur d'arrière-plan du deuxième élément box est bleue. En effet, en HTML, le sélecteur de classe a une priorité inférieure à celle du sélecteur d'identifiant, mais est supérieure à celle du sélecteur d'étiquette. Le premier élément box utilise donc le style défini dans style1.css, tandis que le deuxième élément box utilise les styles définis dans style2. .css.

3. Résumé

Dans le développement Web, le réglage du style peut rendre la page plus belle et plus facile à reconnaître. En appelant différents fichiers CSS, nous pouvons utiliser différents styles dans différentes pages pour obtenir divers effets. Après avoir appelé plusieurs fichiers CSS, nous pouvons utiliser des sélecteurs d'identifiant ou des sélecteurs de classe pour utiliser différents styles afin de répondre aux besoins de style des différents éléments. Par conséquent, l’appel et l’utilisation raisonnables des fichiers CSS sont l’un des points de connaissance importants dans le développement 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!

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
Article précédent：Comment JavaScript surveille les pages imbriquéesArticle suivant：Comment JavaScript surveille les pages imbriquées

Articles Liés

Voir plus