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">字体高度变为30px</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>

現在では、<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 つのファイルを変更するだけでサイト全体の外観を変更できます。

りー

学び続ける

新しいファイル

<!DOCTYPE html> <html> <body style="background-color:pink;"> <h2 style="background-color:red;">好好学习</h2> <p style="background-color:green;">天天向上</p> </body> </html>

提出するリセットコード

自動運転