Il existe 4 façons d'introduire du CSS dans le HTML. Deux d'entre elles consistent à ajouter directement du code CSS dans le fichier HTML, et les deux autres consistent à introduire des fichiers CSS externes. Examinons ces méthodes ainsi que leurs avantages et inconvénients.

Style en ligne

Le style en ligne consiste à ajouter du CSS directement dans l'attributstyled'une balise HTML.

Exemple :

<div style="background: red"></div>

C'est généralement une très mauvaise façon d'écrire. Cela ne peut modifier que le style de la balise actuelle. Si vous voulez que plusieurs balises<div>aient le même style, vous devez ajouter de façon répétée le même style à chaque<div>balise. Si vous voulez modifier un style, vous devez modifier à nouveau tout le code dans `style`. De toute évidence, introduire du code CSS en ligne rendra le code HTML verbeux et la page web difficile à maintenir.

Style intégré

Le style intégré consiste à écrire du code CSS dans l'en-tête HTML, dans la balise<style>`<style>`.

Exemple :

<head>
    <style>

    .content {
        background: red;
    }

    </style>
</head>

Le CSS intégré n'est efficace que pour la page web actuelle. Comme le code CSS se trouve dans le fichier HTML, le code est plus concentré, ce qui est généralement avantageux lorsque nous écrivons des pages web modèles. Parce que les personnes qui consultent le code du modèle peuvent voir la structure HTML et les styles CSS en un coup d'œil. Comme le CSS intégré n'est efficace que pour la page actuelle, lorsque plusieurs pages doivent introduire le même code CSS, l'écrire de cette façon entraînera une redondance de code et n'est pas propice à la maintenance.

Style lié

Le style lié consiste à utiliser, dans l'en-tête HTML, la balise<head>`<link>` pour importer un fichier CSS externe.

Exemple :

<head>
    <link rel="stylesheet" type="text/css" href="style.css.html">
</head>

C'est la manière la plus courante et la plus recommandée d'intégrer du CSS. Avec cette méthode, tout le code CSS n'existe que dans un fichier CSS séparé, ce qui lui confère une bonne maintenabilité. De plus, tout le code CSS n'existe que dans le fichier CSS, et le fichier CSS est chargé lors du premier chargement. Ensuite, lors du changement de page, seul le fichier HTML doit être chargé.

Style importé

Le style importé consiste à utiliser une règle CSS pour importer un fichier CSS externe.

Exemple :

<style>
    @import url(style.css);
</style>

Comparaison entre le style lié et le style importé

Style lié (ci-après dénommé@import`@import`) sont tous deux des moyens d'introduire des fichiers CSS externes. Comparons ces deux méthodes et expliquons pourquoi l'utilisation de `@import` n'est pas recommandée.@import。

  • `link` appartient à HTML, via<link>l'attribut `href` dans la balise pour importer des fichiers externes, tandis que@import`@import` appartient à CSS, donc l'instruction d'importation doit être écrite en CSS. Notez que l'instruction d'importation doit être écrite au début de la feuille de style, sinon le fichier externe ne peut pas être importé correctement.

  • @import`@import` est un concept qui n'est apparu qu'en CSS2.1. Par conséquent, si la version du navigateur est ancienne, les fichiers de style externes ne peuvent pas être importés correctement.

  • Lorsque le fichier HTML est chargé, les fichiers référencés par `link` sont chargés en même temps, tandis que@importles fichiers référencés par `@import` sont chargés après que la page est entièrement téléchargée.

Résumé: Nous devrions essayer d'utiliser<link>la balise `link` pour importer des fichiers CSS externes, et éviter ou utiliser moins les trois autres méthodes.

Source : https://segmentfault.com/a/1190000003866058