Maison > Article > interface Web > Explication détaillée de la création de style CSS

Explication détaillée de la création de style CSS

零下一度original: 2017-05-15 13:12:291797parcourir

Lorsqu'une feuille de style est lue, le navigateur formate le document HTML en fonction de celle-ci.

Le navigateur lira la déclaration de style du fichier mystyle.css et formatera le document en fonction de celle-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");}

Ne laissez pas d'espaces entre la valeur de l'attribut et l'unité. Si vous utilisez "margin-left: 20 px" au lieu de "margin-left: 20px", cela ne fonctionnera que dans IE 6, mais pas dans Mozilla/Firefox ou Netscape.

Feuilles de style internes

Lorsqu'un seul document nécessite un style spécial, une feuille de style interne doit être utilisée. Vous pouvez définir une feuille de style interne en tête du document à l'aide de la balise c9ccee2e6ea535a969eb3f532ad9fe89, comme ceci : Le couplage de styles fait perdre de nombreux avantages des feuilles de style. Utilisez cette approche avec prudence, par exemple lorsque le style ne doit être appliqué qu'une seule fois à un élément.

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

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. Cet exemple montre comment changer la couleur et la marge gauche d'un paragraphe :

Styles multiples

Si certaines propriétés sont définies par le même sélecteur dans différentes feuilles de style, alors la valeur de la propriété Sera

hérité

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

d'une feuille de style plus spécifique.

Par exemple, la feuille de style externe a trois attributs pour le sélecteur h3 :

tandis que la feuille de style interne a deux attributs pour le sélecteur h3 :

Si cette page avec une feuille de style interne est liée à une feuille de style externe en même temps, alors le style obtenu par h3 est :

h3
{
color:red;
text-align:left;
font-size:8pt;
}

C'est-à-dire que l'attribut color sera hérité du feuille de style externe, et la disposition du texte (alignement du texte) et la taille de la police sont remplacées par des règles dans la feuille de style interne.

h3
{
text-align:right;
font-size:20pt;
}

Plusieurs styles seront regroupés dans une

color:red;
text-align:right;
font-size:20pt;

Feuille de style permettant 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érence

plusieurs feuilles de style externes au sein d'un même document HTML.

Ordre en cascade

Lorsqu'un même élément HTML est défini par plusieurs styles, quel style sera utilisé ?

De manière générale, tous les styles seront cascadés dans une nouvelle feuille de style virtuelle selon les règles suivantes, le numéro 4 ayant la plus haute priorité.

Paramètres par défaut du navigateur

Feuilles de style externes

Feuilles de style internes (situées à l'intérieur de la balise 93f0f5c25f18dab9d176bd4f6de5d30e)

Styles en ligne (en HTML à l'intérieur de l'élément )

Par conséquent, les styles en ligne (à l'intérieur des éléments HTML) ont la priorité la plus élevée, ce qui signifie qu'ils auront priorité sur les déclarations de style dans : les balises, les déclarations de style dans les feuilles de style externes ou dans la déclaration de style du navigateur (par défaut).

Astuce : Si vous utilisez le style d'un fichier externe et définissez le style dans 93f0f5c25f18dab9d176bd4f6de5d30e, la feuille de style interne remplacera le style du fichier externe. [Recommandations associées]

1. Recommandation spéciale : Téléchargement de la version V0.1 de "php Programmer Toolbox"

2 . Tutoriel vidéo CSS en ligne gratuit

3 php.cn Dugu Jiujian (2) - 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!

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：Introduction aux sélecteurs d'identifiant et de classe CSSArticle suivant：Introduction aux sélecteurs d'identifiant et de classe CSS

Articles Liés

Voir plus