HTML スタイル
HTML スタイル
まず例を見てみましょう:
<html> <body style="background-color:PowderBlue;"> <h1>改變顏色</h1> <p style="font-family:verdana;color:red"> 字體顏色變紅色</p> <p style="font-family:times;color:green"> 字體顏色變綠色</p> <p style="font-size:30px">字體高度變?yōu)?0px</p> </body> </html>
HTML の style 屬性
style 屬性の役割:
すべての HTML 要素のスタイルを変更するための汎用メソッドを提供します。
スタイルは HTML 4 で導入され、HTML 要素のスタイルを変更する新しい推奨方法です。 HTML スタイルを使用すると、style 屬性を使用して HTML 要素にスタイルを直接追加したり、別のスタイル シート (CSS ファイル) でスタイルを定義して間接的にスタイルを追加したりできます。
CSS チュートリアルでスタイルと CSS のすべてを學ぶことができます。
HTML チュートリアルでは、style 屬性を使用した HTML スタイルについて説明します。
CSS の使用方法
CSS は HTML 4 で始まり、HTML 要素のレンダリングを改善するために導入されました。
CSS は次の方法で HTML に追加できます:
インライン スタイル - を使用します。 HTML 要素の "style" 屬性
內部スタイル シート - CSS を含めるには、HTML ドキュメントの <head> 領域で <style> 要素を使用します
外部參照 - 外部 CSS ファイルを使用します
最良の方法CSS ファイルを外部から參照することです。
このサイトの HTML チュートリアルでは、例を紹介するためにインライン CSS スタイルを使用します。これは、例を簡略化し、オンラインでのコードの編集や例の実行を容易にするためです。 。
このサイトの CSS チュートリアル CSS チュートリアルを通じて、CSS の知識をさらに學ぶことができます
個別の要素に特別なスタイルを適用する必要がある場合は、インライン スタイルを使用できます。 インライン スタイルを使用する方法は、関連するタグで style 屬性を使用することです。スタイル プロパティには、任意の CSS プロパティを含めることができます。次の例は、段落の色と左余白を変更する方法を示しています。 <p style="color:blue;margin-left:20px;">これは段落です。</p>
HTML スタイルの例 - 背景色
背景色屬性 (background-color) の定義要素の背景色:
<!DOCTYPE html> <html> <body style="background-color:pink;"> <h2 style="background-color:red;">好好學習</h2> <p style="background-color:green;">天天向上</p> </body> </html>
HTML スタイルの例 - フォント、フォントの色、フォント サイズ
font-family (フォント)、color (カラー)、および font-size (フォント サイズ) 屬性を使用して定義できます。フォント スタイル:
例
<!DOCTYPE html> <html> <body> <h1 style="font-family:verdana;">A heading</h1> <p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p> </body> </html>
現(xiàn)在では、<font> を使用する代わりに、font-family (フォント)、color (カラー)、および font-size (フォント サイズ) 屬性を使用してテキスト スタイルを定義することが一般的です。鬼ごっこ。
HTML スタイルの例 - テキスト配置
text-align (テキスト配置) 屬性を使用して、テキストの水平方向と垂直方向の配置を指定します:
例
<!DOCTYPE html> <html> <body> <h1 style="text-align:center;">Center-aligned heading</h1> <p>This is a paragraph.</p> </body> </html>
テキスト配置屬性 text-align は、古いタグ <center> を置き換えます。 ;。
內部スタイル シート
単一のファイルに特別なスタイルが必要な場合は、內部スタイル シートを使用できます。 <head> セクションの <style> タグを使用して內部スタイル シートを定義できます:
<html>
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
<body>
</body>
</html>外部スタイル シート
外部スタイル シートは、多くのページにスタイルを適用する必要がある場合に最適です。外部スタイル シートを使用すると、1 つのファイルを変更するだけでサイト全體の外観を変更できます。
りー
