Maison > Article > interface Web > Introduction aux feuilles de style CSS et aux multiples priorités de style
Introduction aux feuilles de style CSS et aux multiples priorités de style
- 王林original
- 2020-05-25 17:41:282854parcourir
Il existe trois façons d'insérer une feuille de style, à savoir :
1. Feuille de style externe
2. >
3. Styles en ligneFeuilles de style externes
Avec les feuilles de style externes, vous pouvez modifier l'apparence de l'ensemble du site en modifiant un fichier. Chaque page est liée à la feuille de style à l'aide de la balise 2cdf5bf648cf2f33323966d7f58a7f3f La balise 2cdf5bf648cf2f33323966d7f58a7f3f est dans l'en-tête (du document) : L'exemple est le suivant :<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>Le navigateur lira la déclaration de style du fichier mystyle.css et formatera le document selon celui-ci. Les feuilles de style externes peuvent être modifiées dans n'importe quel éditeur de texte. Le fichier ne peut contenir aucune balise HTML. Les feuilles de style doivent être enregistrées avec une extension .css. Voici un exemple de fichier de feuille de style :
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}
Remarque : Ne laissez pas d'espace entre la valeur de l'attribut et l'unité (comme : "margin-left: 20 px"), le l'écriture correcte est " margin-left: 20px" .
(Tutoriel vidéo recommandé :Tutoriel vidéo CSS)
Feuille de style interne
Lorsqu'un seul document a besoin spécial Lors du style, vous devez utiliser une feuille de style interne. Vous pouvez définir une feuille de style interne en tête du document à l'aide de la balise c9ccee2e6ea535a969eb3f532ad9fe89, par exemple :<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
Styles en ligne
si le style n'a besoin que de à appliquer sur un élément. Cette méthode peut être utilisée une seule fois. (Veuillez utiliser avec prudence) Pour utiliser des styles en ligne, vous devez utiliser l'attribut style dans la balise appropriée. La propriété Style peut contenir n'importe quelle propriété CSS. Voici comment changer la couleur et la marge gauche d'un paragraphe :<p style="color:sienna;margin-left:20px">这是一个段落。</p>
Styles multiples
Si certaines propriétés sont spécifiées dans différentes feuilles de style Avec le même définition de sélecteur, les valeurs d'attribut seront héritées de la feuille de style plus spécifique. Par exemple, la feuille de style externe a trois attributs pour le sélecteur h3 :h3{
color:red;
text-align:left;
font-size:8pt;
} et la feuille de style interne a deux attributs pour le sélecteur h3 : h3{
text-align:right;
font-size:20pt;
}If This la page avec une feuille de style interne est liée à une feuille de style externe en même temps, donc le style obtenu par h3 est : color:red;text-align:right;font-size:20pt;c'est-à-dire que les propriétés de couleur seront héritées de la feuille de style externe, tandis que l'alignement du texte et la taille de la police seront remplacés par des règles dans la feuille de style interne.
Priorités de style multiples
Les feuilles de style permettent de spécifier les informations de style de plusieurs manières. Les styles peuvent être spécifiés dans des éléments HTML individuels, dans l'élément d'en-tête d'une page HTML ou dans un fichier CSS externe. Vous pouvez même référencer plusieurs feuilles de style externes dans le même document HTML. Généralement, la priorité est la suivante : Style en ligne) Style en ligne > (Style interne) Feuille de style interne > >Remarque : Si le style extérieur est placé après le style intérieur, le style extérieur remplacera le style intérieur.Tutoriel recommandé :
Tutoriel de base pour démarrer avec CSSCe 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!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Compréhension approfondie des différences entre px, rem, em, vh, vwArticle suivant：Compréhension approfondie des différences entre px, rem, em, vh, vw