この記事では、HTML タグの style 属性の定義と機能、HTML での style 属性の使用例、HTML タグの style 属性のさまざまなスタイル分析について説明します。この記事を一緒に見てみましょう まず、HTML タグの style 属性の定義を紹介します: style 属性は、要素のインライン スタイルを指定します style 属性は、グローバルのスタイルをオーバーライドします タグや外部スタイル シートなどで指定されたスタイル設定。 </p> <p><strong>HTML スタイル属性の例</strong></p> <p> HTML ドキュメントでのスタイル属性の使用: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><h1 style="color:blue; text-align:center">This is a header</h1> <p style="color:red">This is a paragraph.</p></pre><div class="contentsignin">ログイン後にコピー</div></div><p><strong> HTML タグのスタイル属性の構文: </strong></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><element style="value"></pre><div class="contentsignin">ログイン後にコピー</div></div><p><strong> HTML タグのスタイル属性の属性値: </strong></p><p>style_Heading : 1 つ以上の CSSプロパティと値はセミコロンで区切られます。 </p><p><strong>HTMLのstyle属性の各種スタイル解析</strong></p><p><strong>1. style属性はフォントスタイル</strong>(font-family:)、フォントサイズ(font-size:)、文字色(color:)、などの内容です。それぞれ別のタグに設定することも、CSSスタイルシートに設定することもできます。私の記事はすべて http://www.codecademy.com に従って書いているため、まだ CSS を導入していないため、ここでは CSS については触れません。以下は例です。コードと図: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><!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></pre><div class="contentsignin">ログイン後にコピー</div></div><p> 注: </p><p>a) 私が使用しているブラウザは Chrome で、編集して表示するときに、設定した 10px フォントが適用されていないことがわかりました。 Chromeでは最小フォントサイズが12pxに設定されているため、10pxのフォントサイズは役に立ちません。Chromeブラウザの最小フォントサイズを小さいサイズに変更するだけです。 </p><p>b) スタイル属性の割り当て方法は、通常の等号 = ではなく、属性名: 値です。等号を使用すると、スタイル効果は実行されません。 </p><p></p>2. style に背景色 <p> を設定することもできます。style には、background-color 属性が含まれており、その色の値を設定すると、ラベル範囲全体の背景色を、background-color で指定された色に変更できます。以下はサンプル コードと図です: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><!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></pre><div class="contentsignin">ログイン後にコピー</div></div><p></p>3. テキストの配置<p><strong></strong> 一部のラベル属性には、テキストの配置を設定できる align 属性があり、同様の属性をスタイルで設定することもできます。この属性の値は text-align です。その </p><p> 値には、左、中央、右が含まれます。以下はサンプルコードと概略図です: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><!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></pre><div class="contentsignin">ログイン後にコピー</div></div><p><strong> HTML の style 属性の 2 つの具体的な使用例: </strong></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>练习使用HTML</title> <style> /*标签选择器*/ h4 { color: blue; text-align: right; } 测试html的style属性 h41 h42
