HTML スタイル - CSS

CSS（Cascading Style Sheets）はHTML要素タグのスタイルをレンダリングするために使用されます。

試してみる - 例

この例では、<head> セクションに追加されたスタイル情報を使用してHTMLをフォーマットする方法を示します。

style属性を使用して下線のないリンクを作成する方法。

この例では、次の方法を示しますタグを外部スタイルシートにリンクします。

CSSの使い方

CSSはHTML 4から使用され始め、HTML要素をより良くレンダリングするために導入されました。

CSSは以下の方法でHTMLに追加できます:

• インラインスタイル - HTML要素で"style"を使用属性
• 内部スタイルシート - HTMLドキュメントのヘッド <head> 領域で<style>を使用要素CSSを含める
• 外部参照 - 外部CSSを使用ファイル

最良の方法は外部CSSファイルを参照することです。

このサイトのHTMLチュートリアルでは、インラインCSSスタイルを使用して例を紹介しています。これは例を簡素化するためであり、コードをオンラインで編集してインスタンスをオンラインで実行しやすくするためでもあります。

このサイトのCSSチュートリアルでより多くのCSS知識を学ぶことができます。

インラインスタイル

特別なスタイルを個々の要素に適用する必要がある場合は、インラインスタイルを使用できます。インラインスタイルを使用する方法は、関連するタグでスタイル属性を使用することです。スタイル属性には任意のCSSプロパティを含めることができます。次の例は、段落の色と左マージンを変更する方法を示しています。

<p style="color:blue;margin-left:20px;">这是一个段落。</p>

スタイルについてもっと学ぶには、こちらをご覧くださいCSSチュートリアル.

HTMLスタイルの例 - 背景色

背景色属性（background-color）は要素の背景色を定義します：

以前は背景色属性（background-color）は bgcolor 属性を使用して定義されていました。

試してみる: 旧版HTMLで背景を設定する方法

HTMLスタイルの例 - フォント、フォントカラー、フォントサイズ

font-family（フォント）、color（色）、font-size（フォントサイズ）属性を使用してフォントのスタイルを定義できます:

現在では、<font>タグを使用する代わりに、font-family（フォント）、color（色）、font-size（フォントサイズ）属性を使用してテキストスタイルを定義するのが一般的です。

HTMLスタイルの例 - テキスト配置

text-align（テキスト配置）属性を使用して、テキストの水平および垂直配置を指定します：

テキスト配置属性 text-align は旧タグ <center> に取って代わりました。

試してみる

内部スタイルシート

単一のファイルに特別なスタイルが必要な場合は、内部スタイルシートを使用できます。<head> セクションで <style> タグを使用して内部スタイルシートを定義できます:

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

外部スタイルシート

スタイルを多くのページに適用する必要がある場合、外部スタイルシートが理想的です。外部スタイルシートを使用すると、1つのファイルを変更するだけでサイト全体の外観を変更できます。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css.html">
</head>

HTMLスタイルタグ

非推奨のタグと属性

HTML 4では、HTML要素のスタイルを定義するために使用されていたタグと属性は非推奨になりました。これらのタグは新しいバージョンのHTMLタグではサポートされません。

推奨されないタグ: <font>, <center>, <strike>

推奨されない属性: color と bgcolor.