ホームページ > 記事 > ウェブフロントエンド > HTMLタグのstyle属性の使い方を詳しく解説（具体例付き）
HTMLタグのstyle属性の使い方を詳しく解説（具体例付き）
- 寻∝梦オリジナル
- 2018-08-27 14:10:3638269ブラウズ
この記事では、HTML タグの style 属性の定義と機能、HTML での style 属性の使用例、HTML タグの style 属性のさまざまなスタイル分析について説明します。この記事を一緒に見てみましょう
まず、HTML タグの style 属性の定義を紹介します:
style 属性は、要素のインライン スタイルを指定します
style 属性は、グローバルのスタイルをオーバーライドしますc9ccee2e6ea535a969eb3f532ad9fe89 タグや外部スタイル シートなどで指定されたスタイル設定。
HTML スタイル属性の例
HTML ドキュメントでのスタイル属性の使用:
<h1 style="color:blue; text-align:center">This is a header</h1> <p style="color:red">This is a paragraph.</p>
HTML タグのスタイル属性の構文:
<element style="value">
HTML タグのスタイル属性の属性値:
style_Heading : 1 つ以上の CSSプロパティと値はセミコロンで区切られます。
HTMLのstyle属性の各種スタイル解析
1. style属性はフォントスタイル(font-family:)、フォントサイズ(font-size:)、文字色(color:)、などの内容です。それぞれ別のタグに設定することも、CSSスタイルシートに設定することもできます。私の記事はすべて http://www.codecademy.com に従って書いているため、まだ CSS を導入していないため、ここでは CSS については触れません。以下は例です。コードと図:
<!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) 私が使用しているブラウザは Chrome で、編集して表示するときに、設定した 10px フォントが適用されていないことがわかりました。 Chromeでは最小フォントサイズが12pxに設定されているため、10pxのフォントサイズは役に立ちません。Chromeブラウザの最小フォントサイズを小さいサイズに変更するだけです。
b) スタイル属性の割り当て方法は、通常の等号 = ではなく、属性名: 値です。等号を使用すると、スタイル効果は実行されません。
2. style に背景色を設定することもできます。style には、background-color 属性が含まれており、その色の値を設定すると、ラベル範囲全体の背景色を、background-color で指定された色に変更できます。以下はサンプル コードと図です:
<!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>3. テキストの配置
一部のラベル属性には、テキストの配置を設定できる align 属性があり、同様の属性をスタイルで設定することもできます。この属性の値は text-align です。その
値には、左、中央、右が含まれます。以下はサンプルコードと概略図です:
<!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>
HTML の style 属性の 2 つの具体的な使用例:
<!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>[編集者からの関連おすすめ]
html5 詳細タグの役割は何ですか? 9b9049ef7a1a196379a5449b7c38cbbeタグの使い方入門(使用例付き)
HTMLテーブルとは？ f5d188ed2c074f8b944552db028f98a1タグでの様々な属性の使い方
以上がHTMLタグのstyle属性の使い方を詳しく解説（具体例付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。