L'environnement d'exploitation de cet article : Acer S40-51, HBuilder

Il existe trois façons d'utiliser les feuilles de style CSS :

Feuilles de style en ligne

• Feuilles de style internes

• Feuille de style externe

Feuille de style en ligne

Le style en ligne est Utilisez l'attribut style pour ajouter du code CSS directement à la balise HTML, c'est-à-dire qu'il existe en tant que balise d'attribut du Balise HTML. Exemple :

<h1 style="color:red;">style属性的应用</h1>

De cette façon, vous pouvez facilement définir un style pour un élément individuellement.

Avantages et inconvénients des feuilles de style en ligne :

Avantages :

Sans le fichier de feuille de style, l'efficacité peut être améliorée à un moment donné ;

• L'effet de style utilisant l'attribut style sera le plus fort et écrasera Supprimer le même effet de style des autres méthodes d'introduction.

• Inconvénients :

Il est difficile pour plusieurs éléments de partager des styles, ce qui n'est pas propice à la réutilisation du code ;

• Les codes HTML et CSS sont mélangés, ce qui rend leur lecture difficile pour les programmeurs et les moteurs de recherche.

Feuille de style interne

La feuille de style interne écrit le style CSS dans la balise utilise la balise

Avantages et inconvénients des feuilles de style internes

Avantages : comme les feuilles de style en ligne, aucune requête supplémentaire n'est générée et il réalise initialement la séparation de la structure et du style, ce qui le rend plus adapté aux applications de sites Web d'une seule page. Inconvénients : étant donné que la feuille de style interne est écrite dans le fichier HTML, la page est impure, la taille du fichier est volumineuse, elle ne permet pas aux robots d'exploration Web d'obtenir des informations, elle n'est pas propice à la maintenance et les styles ne peuvent pas être partagés entre les pages

Feuille de style externe

Si le style CSS est placé dans un fichier en dehors du document Web, il est appelé une feuille de style externe et un document de feuille de style CSS représente une feuille de style externe. En fait, une feuille de style externe est un fichier texte avec l'extension .css. Lorsque vous copiez le code de style CSS dans un fichier texte et que vous l'enregistrez en tant que fichier .css, il s'agit d'une feuille de style externe.

Comme indiqué ci-dessous, il s'agit d'une feuille de style externe :

Comment introduire une feuille de style externe :

Les fichiers HTML font référence aux feuilles de style avec l'extension .css de deux manières : type de lien et type d'importation. 1. Style de lien CSS

Le style de lien fait référence à la définition d'une feuille de style CSS en externe et à la formation d'un fichier avec une extension .CSS, puis à un lien vers celle-ci dans la page via le

Syntaxe :

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

2. Import CSS

L'importation est déclarée dans la balise

syntaxe :

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

Avantages et inconvénients des feuilles de style externes

Avantages :

Réaliser une séparation complète de la structure et du code de performance

• Facile à réutiliser et à entretenir

• Comme ils sont séparés en fichiers séparés, la taille des fichiers HTML est considérablement réduite, ce qui rend la structure de la page plus facile à utiliser par les programmeurs et les réseaux. Le robot d'exploration comprend

• et est convivial pour les moteurs de recherche, permettant aux moteurs de recherche d'évaluer la page plus haut, ce qui est bénéfique pour le classement des moteurs de recherche de la page

• Style externe feuille Il sera mis en cache sur l'ordinateur de l'utilisateur après la première visite de l'utilisateur, et il n'est pas nécessaire de le charger lors de la prochaine visite

• Inconvénients :

S'il existe de nombreux styles, les fichiers CSS deviendront très volumineux et difficiles à trouver. De plus, un fichier CSS supplémentaire signifie une requête HTTP supplémentaire, ce qui augmentera la pression sur le serveur dans un site Web très visité

• Pour plus de connaissances liées à la programmation, veuillez visiter :

  Introduction à la programmation
 ! !

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!