Façons d'introduire le CSS en HTML

Façons d'introduire le CSS en HTML Il existe 4 façons d'introduire le CSS en HTML. Deux d’entre eux consistent à ajouter du code CSS directement dans le fichier HTML, et les deux autres consistent à introduire des fichiers CSS externes. Jetons un coup d'œil à ces méthodes ainsi qu'à leurs avantages et inconvénients.

Méthode en ligne La méthode en ligne fait référence au style style code> Ajoutez du CSS à l'attribut.

Exemple :

Copier après la connexion Copier après la connexion C'est généralement une mauvaise façon de l'écrire, cela ne change le style de l'étiquette actuelle que si vous voulez que plusieurs aient le même style, et vous devez le répéter pour chacun

Ajoutez le même style. Si vous souhaitez modifier un style, vous devez modifier le code dans tous les styles. De toute évidence, l’introduction du code CSS en ligne rendra le code HTML verbeux et rendra la page Web difficile à maintenir. Méthode d'intégration La méthode d'intégration fait référence au Code CSS sous la balise

.

.content { background: red; }

Copier après la connexion Copier après la connexion Exemple :

Le CSS intégré n'est valable que pour la page Web actuelle. Étant donné que 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 modèles de pages Web. Parce que quelqu'un qui regarde le code du modèle peut voir la structure HTML et les styles CSS en un coup d'œil. Étant donné que le CSS intégré n'est valable que pour la page actuelle, lorsque plusieurs pages doivent introduire le même code CSS, écrire de cette manière entraînera une redondance du code et ne favorisera pas la maintenance. Méthode de lien La méthode de lien fait référence à l'utilisation de l'en-tête HTML

importe des fichiers CSS externes.

Copier après la connexion Copier après la connexion Exemple :

Il s'agit de la manière la plus courante et la plus recommandée d'introduire CSS. En utilisant cette approche, tout le code CSS n'existe que dans un seul fichier CSS, il a donc une bonne maintenabilité. Et tout le code CSS n'existe que dans le fichier CSS. Le fichier CSS sera introduit lors de son premier chargement. Lors du prochain changement de page, il vous suffira de charger le fichier HTML. Méthode d'importation

La méthode d'importation fait référence à l'utilisation de règles CSS pour introduire des fichiers CSS externes.

@import url(style.css); Copier après la connexion Copier après la connexion Exemple : Comparez la méthode de liaison et la méthode d'importation

Méthode de liaison ( (Remplacé par le lien ci-dessous) et la méthode d'importation (remplacée par @import ci-dessous) sont deux façons d'introduire des fichiers CSS externes. Comparons ces deux méthodes ci-dessous et expliquons pourquoi @import n'est pas recommandé. le lien appartient au HTML, via le href dans le

attribut tag pour introduire des fichiers externes, et @import appartient à CSS, donc l'instruction d'importation doit être écrite en CSS. Il convient de noter que l'instruction d'importation doit être écrite au début de la feuille de style, sinon le fichier externe ne peut pas être écrit. importé correctement ;

@import est un concept qui n'est apparu que dans CSS2.1, donc si la version du navigateur est inférieure, les fichiers de style externes ne peuvent pas être importés correctement ;

Lorsque le fichier HTML est chargé, le fichier référencé par lien sera chargé en même temps, tandis que le fichier référencé par @import ne sera chargé que lorsque la page est complètement téléchargée Résumé : Nous devrions essayer d'utiliser le

pour importer des fichiers CSS externes à éviter Ou utilisez les trois autres méthodes avec parcimonie.

Référence :

http://www.stevesouders.com/blog/ 2009/04/09/dont-use-import

http://matthewjamestaylor.com/blog/adding-css-to-html-with-link -embed-inline-and-import

Comment introduire CSS dans HTML Il existe 4 façons d'introduire le CSS en HTML. Deux d’entre eux consistent à ajouter du code CSS directement dans le fichier HTML, et les deux autres consistent à introduire des fichiers CSS externes. Jetons un coup d'œil à ces méthodes ainsi qu'à leurs avantages et inconvénients.