Comment référencer des fichiers CSS en HTML-tutoriel HTML-php.cn

Comment référencer des fichiers CSS en HTML

青灯夜游

Libérer： 2023-01-07 11:43:18

original

13528 Les gens l'ont consulté

Comment citer des fichiers CSS : 1. Utilisez l'instruction "" 2. Utilisez "@import" dans le champ ; style tag url("chemin du fichier css");" instruction.

Comment référencer des fichiers CSS en HTML

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

Le code CSS est stocké dans une feuille de style avec une extension .css.

Les fichiers HTML font référence à une feuille de style avec une extension .css (CSS externe). Il existe deux manières : le type de lien et le type d'importation.

Grammaire :

1. Type de lien

<link type="text/css" rel="styleSheet"  href="CSS文件路径" />

Copier après la connexion

2. Type d'importation

<style type="text/css">
  @import url("css文件路径");
</style>

Copier après la connexion

Par exemple :

<!DOCTYPE>
<html>
<head>
  <meta charset="utf-8" />
  <title>外部样式表</title>
  <!--链接式:推荐使用-->
  <link rel="stylesheet" type="text/css" href="css/style.css" /> 
  <!--导入式-->
  <style type="text/css">
    @import url("css/style.css");
  </style>
</head>
<body>
     <ol>
         <li>1111</li>
         <li>2222</li>
     </ol>
</html>

Copier après la connexion

La différence entre le type de lien et le type d'importation

1. Appartenir à XHTML

2. Priorisez le chargement des fichiers CSS sur la page

@import

1 Appartient à CSS2.1

2 Chargez d'abord la structure HTML, puis chargez les fichiers CSS.

Avantages du CSS externe :

1 La taille de la page HTML est plus petite et la structure est plus claire.

2. Vitesse de chargement plus rapide.

3. Le même fichier .css peut être utilisé sur plusieurs pages.

Inconvénients du CSS externe :