Maison >interface Web >tutoriel HTML >Que signifie la balise de style HTML ? Explication détaillée sur la façon d'utiliser la balise de style
Que signifie la balise de style HTML ? Explication détaillée sur la façon d'utiliser la balise de style
- 寻∝梦original
- 2018-08-22 13:58:3916509parcourir
Cet article parle principalement de la définition et de l'introduction des attributs de la balise de style HTML. Tout d'abord, comprenons quelques utilisations et positions de la balise de style en HTML, puis introduisons quelques méthodes et techniques détaillées utilisées. regardez la définition et l'utilisation de la balise de style
html : la balise
c9ccee2e6ea535a969eb3f532ad9fe89 .
Avec style, vous pouvez spécifier comment le document HTML est rendu dans le navigateur.
L'attribut type est obligatoire et définit le contenu de l'élément style. La seule valeur possible est "text/css". L'élément
style est situé dans la section head.
Instance de balise HTML c9ccee2e6ea535a969eb3f532ad9fe89 :
<html>
<head>
<style type="text/css">
h1 {color:red}
p {color:blue}
</style>
</head>
<body>
<h1>Header 1</h1>
<p>A paragraph.</p>
</body>
</html>Attributs obligatoires :
type : text/css : Spécifie le MIME du style type de feuille.
Explication détaillée de la façon d'utiliser la balise de style HTML :
531ac245ce3e4fe3d50054a55f265927 , qui peut être body Cela peut aussi être h1, c'est-à-dire écrire tous les styles en ligne ensemble
Par exemple, si 10 balises sont toutes de la même classe, vous devez en écrire 10
dans le style en ligne et dans le style Écrivez-en simplement un. Maintenant, tous sont des modèles de conception qui séparent la structure (html), le style (css) et le comportement (js)<p id="xxx">===><style>#xxx{}</style>
<p class="xxx">===><style>.xxx{}</style>
<body></body>===><style>body{}</style>La balise de style est située dans la feuille de style CSS selon son emplacement Il y a trois positions :
1. Feuille de style en ligne 2. Feuille de style interne 3. >Détails ci-dessous Expliquez :1. La feuille de style intégrée
est écrite dans la balise (Tag) qui l'utilise. Par exemple, pour l'utiliser dans la balise e388a4556c0f65e1904146cc1a846bee 🎜>La syntaxe est :
2. La feuille de style interne
est différente de la feuille de style intégrée, qui est écrite dans le 93f0f5c25f18dab9d176bd4f6de5d30e3c7b149cc556f883a18b3c490b028d4e de l'heure de la page Web html, elle est donc valable pour toute cette page Web. Il est à noter que comme elle n'est pas écrite dans une certaine balise, vous devez faire attention lors de son écriture. Si vous souhaitez utiliser cette feuille de style dans cette balise, vous devez également l'écrire clairement lorsque vous la définissez, sinon cela entraînera. la page entière est encombrée de confusion. Par exemple :<p style font-size:20pt>这段文字使用了内嵌样式表，更改了字体大小为20</p>
Vous pouvez voir que lors de la définition d'une feuille de style interne, lorsque vous déclarez c9ccee2e6ea535a969eb3f532ad9fe89 auparavant, vous devez d'abord déclarer dans quelle balise cette feuille de style est utilisée. Si vous ne le souhaitez pas. utilisez-la sur toutes les pages. Si cette feuille de style est utilisée dans toutes les balises, ajoutez un nom de feuille de style auto-défini après la balise déclarée, comme p.mylayout ci-dessus, ce qui signifie que cette feuille de style ne peut être utilisée que dans le 01ffcd5d1a840d2341909ced6bafa76c de la page Web. , déclarez-le dans la balise e388a4556c0f65e1904146cc1a846bee où vous souhaitez utiliser cette feuille de style. La méthode de déclaration est 137c0f7277f904878572439b787a19e5
En utilisant la sélection de la feuille de style, vous pouvez utiliser la même balise HTML pour former un style différent. Par exemple, vous souhaitez que le paragraphe e388a4556c0f65e1904146cc1a846bee ait deux styles, l’un centré et l’autre aligné à droite. Vous pouvez écrire le style suivant :<html>
<head>
p.mylayout <style type="text/css">{font-size:22pt; color:blue; border-width:1px; border:double; text-align:center; }</style></head>
<body>
<p class="mylayout">这段文字使用了样式表</p>
<p>这段文字没有使用样式表</p>
</body>
</html>où à droite et au centre se trouvent deux feuilles de style. Vous pouvez ensuite référencer ces deux feuilles de style. L'exemple de code est le suivant : p.right {text-align:right}
p.center {text-align:center}Vous pouvez également utiliser directement "." plus le nom de la feuille de style sans utiliser de balises HTML. L'exemple de code est le suivant : <p class="center">这一段居中显示。</p> <p class="right">这一段是居右显示。</p>Ce nom de feuille de style universel n'a aucune limitation de balise et peut être utilisé pour différentes balises. Par exemple :
.center {text-align: center}3. Feuille de style externe
<h1 class = "center">这个标题居中显示。</h1> <p class = "center">这个段落居中显示。</p>
Une feuille de style externe écrit le contenu de la feuille de style séparément dans un bloc-notes et l'enregistre avec le suffixe. .css, ajoutez le code suivant à la page Web que vous souhaitez appeler (bien sûr, ajoutez-le toujours entre 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1) :
Par exemple : Écrivez d'abord un morceau de code et enregistrez-le sous p.css<link href="你css文件所在的文件夹" rel="stylesheet" type="text/css">Ensuite, appelez cette feuille de style dans la page Web que vous écrivez :
p.mylayout {font-size:20pt; border-width:1px; color:blue; }Donc, une feuille de style externe peut être De nombreuses pages Web appellent cela, ce qui constitue l'avantage des feuilles de style externes. Les feuilles de style peuvent également être concaténées, c'est-à-dire qu'une page Web utilise plusieurs CSS. L'ordre de concaténation est : intégré > interne > externe > propre au navigateur <HTML> <head> <link href="p.css所在的相对路径" rel="stylesheet" type="text/css"> </head> <body> <p class="mylayout"> 这个标题使用了Style 。</p> <p>这个标题没有使用Style。</p> </body> </HTML>
c'est-à-dire lorsqu'un site Web. la page a du CSS interne, son appel au CSS externe sera écrasé (c'est-à-dire que le CSS externe ne fonctionnera pas)
Description de l'imbrication lorsque la feuille de style CSS est définie :
p b {color :blue; >
Lorsqu'il est utilisé :
cursor:hand Cet attribut transforme la souris en forme de main. [Articles connexes de l'éditeur]<p>这段文字在b标签中的为<b>蓝色</b></p>Quelle est la fonction de la balise em html ? La différence entre les balises 907fae80ddef53131f3292ee4f81644b et 5a8028ccc7a7e27417bff9f05adf5932
Que signifie la balise de sortie html5 ? Comment utiliser la balise de sortie html5
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!