Quels types de feuilles de style CSS existe-t-il ? Quelle est la priorité du sélecteur ?

Il existe trois types de feuilles de style CSS : les feuilles de style en ligne, les feuilles de style internes et les feuilles de style externes. La priorité du sélecteur est : "Sélecteur universel>Sélecteur d'élément>Sélecteur de classe>Sélecteur d'attribut>Pseudo-classe>Sélecteur d'ID>Style en ligne".

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

Quels sont les types de feuilles de style CSS ?

Selon l'endroit où les styles CSS sont écrits (ou la manière dont ils sont introduits), les feuilles de style CSS peuvent être divisées en trois catégories suivantes :

1. Feuilles de style en ligne

Le style en ligne signifie placer des styles CSS. directement dans la ligne de code Dans la balise, il est généralement placé dans l'attribut style de la balise. Puisque le style en ligne est directement inséré dans la balise, c'est le moyen le plus direct, et c'est aussi le style le plus gênant à modifier. .

Exemple :

<p style="background-color: #999900">行内元素，控制段落-1</p>

2. Feuille de style interne

La feuille de style interne est contenue dans la balise c9ccee2e6ea535a969eb3f532ad9fe89

Si un document Web contient plusieurs balises c9ccee2e6ea535a969eb3f532ad9fe89, cela signifie que le document contient plusieurs feuilles de style internes.

Exemple :

<style>
div {
color: blue;
font-size: 16px;
}
</style>

3. Feuille de style externe

Si le style CSS est placé dans un fichier en dehors du document de la page Web, on l'appelle une feuille de style externe. Un document de feuille de style CSS représente une feuille de style externe.

En fait, une feuille de style externe n'est qu'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.

Dans la page HTML, utilisez la balise 9b3737d50531bee70b4389e7b6fabf02 pour introduire le fichier. Le code d'introduction spécifique est le suivant :

<link rel="styleheet" href="css文件路径">

Priorité de plusieurs feuilles de style :

style en ligne > sheet > Feuille de style externe La valeur d'attribut la plus pertinente pour l'élément est déterminée et appliquée à cet élément. La priorité est déterminée uniquement par les règles de correspondance composées de sélecteurs.

La priorité est un poids attribué à une déclaration CSS spécifiée, qui est déterminé par la valeur de chaque type de sélecteur dans le sélecteur correspondant.

Quelle est la priorité du sélecteur ?

Voici une liste de sélecteurs avec une priorité croissante :

Sélecteur universel (*)

Sélecteur d'élément (type)

• Sélecteur de classe
• Sélecteur d'attribut
• Pseudo-classe
• Sélecteur d'ID
• En ligne styles
• !Exceptions aux règles importantes
• Lorsque la règle !important est appliquée à une déclaration de style, la déclaration de style remplacera toute autre déclaration en CSS, qu'elle se trouve ou non dans la liste de déclarations Où. Cependant, les règles !importantes ont. rien à voir avec les priorités. Utiliser !important n'est pas une bonne pratique car cela modifie les règles en cascade d'origine de votre feuille de style, ce qui rend le débogage difficile.

Quelques règles empiriques :

Toujours

Pour optimiser, envisagez d'utiliser la priorité des règles de style pour résoudre le problème au lieu de !important

• Seulement uniquement lorsque vous devez remplacer l'ensemble du site ou CSS externe (par exemple, utilisez !important!important
• Only 只在需要覆盖全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定页面中使用 !important
• Never 永远不要在全站范围的 css 上使用 !important
• Never 永远不要在你的插件中使用 !important 

Jamais

dans des pages spécifiques d'ExtJs ou YUI référencées. N'utilisez jamais !important

Jamais

sur l'ensemble du site css. N'utilisez jamais !important dans vos plugins

Calcul du poids :
• Explication :
• 1. Les feuilles de style en ligne ont un poids maximum de 1000

2. ID Le le poids du sélecteur est de 100

🎜 3. Le poids du sélecteur de classe Class est de 10🎜🎜 4. Le poids du sélecteur de balise HTML est de 1🎜🎜🎜 Utilisez le poids du sélecteur pour calculer et comparer, em affiche en bleu, l'exemple est le suivant : https://c.runoob.com/codedemo/3048🎜

Règle de priorité CSS :

• A. Chaque sélecteur a un poids, et plus le poids est grand, la priorité
• B. Lorsque les poids sont égaux, le paramètre de feuille de style qui apparaît plus tard est meilleur que le paramètre de feuille de style qui apparaît. apparaît en premier ;
• C Les règles du créateur sont supérieures à celles du spectateur : c'est-à-dire que le style CSS défini par le rédacteur de la page Web a une priorité plus élevée que le style défini par le navigateur
• D Le style CSS hérité ; n'est pas aussi bon que le style CSS spécifié plus tard ;
• E Dans le même Les règles marquées de "!important" dans les paramètres d'attribut de groupe ont la priorité la plus élevée ; /codedemo/3049
  Résultat : affiché en bleu sous Firefox ; affiché en rouge sous IE 6 ;

Voici un diagramme de relation de poids CSS populaire :

(Partage vidéo d'apprentissage : Tutoriel vidéo CSS)

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!