Une brève introduction aux trois méthodes introduites en CSS

Le contenu de cet article est une brève introduction aux trois méthodes introduites dans CSS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Il existe trois façons d'introduire CSS : feuille de style interne, feuille de style en ligne (style en ligne), feuille de style externe. Bien sûr, vous pouvez également utiliser plusieurs styles

Style en ligne

<p style="color:red;font-size:20px">内联样式表</p >

Le style en ligne décharge le style directement dans la ligne de code html Il n'est généralement utilisé que lorsque ce style est uniquement appliqué. à l'élément actuel, essayez de ne pas l'utiliser dans d'autres circonstances.

Feuille de style interne

 <style>
        p {
            color: blue;
            font-size: 20px        }
    </style>

La feuille de style interne est généralement écrite dans l'en-tête HTML, en utilisant style de balise> Cette méthode est généralement utilisée lorsque la page en cours nécessite un style particulier.

Feuille de style externe

 <link rel="stylesheet" href="CSS/Googlefonts.css">

La feuille de style externe consiste à écrire les styles séparément dans un fichier CSS et à y faire référence dans l'en-tête. Lorsque vous utilisez des feuilles de style externes, soyez conscient des problèmes provoqués par les remplacements de style si plusieurs styles apparaissent.

Styles multiples

Lors de l'utilisation de plusieurs styles, les plusieurs styles se chevaucheront en un seul. De manière générale, plusieurs feuilles de style se chevaucheront en une seule selon les règles suivantes, où 4 est le poids le plus élevé<.>

Paramètres par défaut du navigateur
Feuille de style externe
Feuille de style interne (située dans la balise head Interne)
Styles en ligne (à l'intérieur des éléments HTML)
Ordre prioritaire de styles multiples

Pour le même élément Pour plusieurs styles , l'ordre de priorité est le suivant, 7 a la priorité la plus élevée (sauf pour la règle !important, mais essayez généralement de ne pas l'utiliser) :

Sélecteur universel (*)
Sélecteur d'élément (type)
Sélecteur de classe
Sélecteur d'attribut
Pseudo-classe
Sélecteur d'ID
Style en ligne
Recommandations associées :

Comment implémenter le retour à la ligne d'un élément flottant en CSS

Résumé de l'utilisation de la disposition Grid en CSS (avec code)

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!