Maison > Article > interface Web > Explication détaillée sur la façon d'utiliser l'attribut style des balises HTML (avec des exemples spécifiques)
Explication détaillée sur la façon d'utiliser l'attribut style des balises HTML (avec des exemples spécifiques)
- 寻∝梦original
- 2018-08-27 14:10:3638274parcourir
Cet article vous explique la définition et la fonction de l'attribut style des balises HTML, ainsi que des exemples d'utilisation de l'attribut style en HTML et diverses analyses de style de l'attribut style dans les balises HTML. Jetons un coup d'œil ensemble à cet article
Tout d'abord, introduisons la définition de l'attribut style de la balise HTML :
L'attribut style spécifie le style en ligne de l'élément. ) L'attribut
style remplacera tous les paramètres de style globaux, tels que ceux spécifiés dans la balise c9ccee2e6ea535a969eb3f532ad9fe89
Exemple d'attribut de style HTML
Utilisation de l'attribut style dans les documents HTML :
<h1 style="color:blue; text-align:center">This is a header</h1> <p style="color:red">This is a paragraph.</p>
La syntaxe de l'attribut de style de balise HTML :
<element style="value">
Valeur de l'attribut de style de balise HTML :
style_definition : Un ou plusieurs attributs et valeurs CSS séparés par des points-virgules.
Diverses analyses de style de l'attribut style en HTML
1 L'attribut style peut définir le style de police (font-family :), Taille de la police (font-size :), couleur du texte (color :), etc. Il peut être défini dans chaque balise
différente, ou il peut être défini dans une feuille de style CSS. Parce que mes articles sont tous écrits sur http://www.codecademy.com, je n'ai pas encore introduit le CSS, donc je ne couvrirai pas le CSS ici pour l'instant, définissez-le simplement dans la balise, voici l'exemple de code. et diagramme schématique :
Remarque :<!DOCTYPE html> <html> <head> <title>color the text</title> </head> <!-- now i will color the text--> <body> <h3 style="color:blue;font-size=20px">Hello World!</h3> <p style="color:red;font-size=10px">你好！！！！</p> </body> </html>
a) Le navigateur que j'utilise est Chrome, et lors de sa modification et de son affichage, je trouve toujours que la police 10px définie n'est pas appliquée, en recherchant les paramètres de Chrome, j'ai trouvé que
est la police minimale définie dans Chrome est de 12 px, donc la taille de police de 10 px est inutile, changez simplement la police minimale du navigateur Chrome pour une taille plus petite.
b) La méthode d'affectation dans l'attribut style est : nom de l'attribut : valeur, au lieu du signe égal = habituel. Si le signe égal est utilisé, l'effet de style ne sera pas exécuté.
2. La couleur d'arrière-plan peut également être définie dans le style. Le style contient l'attribut background-color. La définition de sa valeur de couleur peut modifier la couleur d'arrière-plan dans toute la plage d'étiquettes La couleur spécifiée pour background-color. Voici l'exemple de code et le diagramme schématique :
3. Alignement du texte<!DOCTYPE html> <html> <head> <title>color the text</title> </head> <!-- now i will color the text--> <body> <h3 style="color:blue;font-size=20px ;background-color:yellow">Hello World!</h3> <p style="color:red;font-size=10px ;background-color:green">你好！！！！</p> </body> </html>
Certains attributs d'étiquette ont l'attribut align, qui peut définir l'alignement du texte, et aussi dans le style Des propriétés similaires peuvent être définies. La valeur de cet attribut est text-align. Ses valeurs
incluent la gauche, le centre et la droite. Voici l'exemple de code et le diagramme schématique : Deux exemples d'utilisation spécifiques de l'attribut style de HTML :<!DOCTYPE html> <html> <head> <title>color the text</title> </head> <!-- now i will color the text--> <body> <h3 style="color:blue;font-size=20px ;background-color:yellow;text-align:center">Hello World!</h3> <p style="color:red;font-size=10px ;background-color:green;text-align:right">你好！！！！</p> </body> </html>
[Recommandations associées du éditeur]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>练习使用HTML</title>
<style>
/*标签选择器*/
h4 {
color: blue;
text-align: right;
}
</style>
</head>
<body>
<!--规定元素的行内样式-->
<p style="color:red;text-align:center">测试html的style属性</p>
<h4>h41</h4>
<h4>h42</h4>
</body>
</html>Quel est le rôle de la balise détails html5 ? 9b6f0f9472fe4ecc49b4002406414906Introduction à l'utilisation des balises (avec exemples d'utilisation)
Qu'est-ce que le tableau html ? f5d188ed2c074f8b944552db028f98a1Comment utiliser divers attributs dans les balises
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!