CSS の概要LOGIN
简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）

CSS の概要

CSS の学習を始める前に、次の前提知識があることを確認してください:

  • HTML / XHTML

HTML と

CSS を学習するには、CSS とは何かを知る必要がありますか?

CSSはCascading Style Sheetsのことです

  • スタイルはHTML要素の表示方法を定義する方法

  • スタイルは通常スタイルシートに保存されます

  • コンテンツの分離の問題を解決するためにスタイルはHTML 4.0に追加されましたおよびプレゼンテーション

  • 外部スタイル シートは作業効率を大幅に向上させます

  • 外部スタイル シートは通常 CSS ファイルに保存されます

  • さらに多くのスタイル定義を 1 つにカスケードできます

スタイルは大きな問題を解決します問題

HTML タグは、次の例に示すように、もともとドキュメントのコンテンツを定義するために設計されました:

This is a title

This is a Paragraph.



スタイル シートの定義HTML 3.2 のフォント タグやカラー属性と同様に、HTML 要素がどのように表示されるか。スタイルは通常、外部の .css ファイルに保存されます。外部スタイル シートを使用すると、単純な CSS ドキュメントを編集することで、サイト内のすべてのページのレイアウトと外観を同時に変更できます。

この問題を解決するために、非営利の標準化同盟である World Wide Web Consortium (W3C) は HTML を標準化するという使命を担い、HTML 4.0 以外のスタイルを作成しました。

現代のブラウザはすべて CSS をサポートしています。

CSS スタイル シートは作業効率を大幅に向上させます

スタイル シートは HTML 要素の表示方法を定義します

スタイル シートは、HTML 3.2 のフォント ラベルやラベルと同様に、HTML 要素の表示方法を定義します色のプロパティ。スタイルは通常、外部の .css ファイルに保存されます。外部スタイルシートを使用すると、単純な CSS ドキュメントを編集することで、サイト内のすべてのページのレイアウトと外観を同時に変更できます。

CSS の例

HTML ドキュメントではさまざまなスタイルを表示できます

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>PHP中文网（php.cn）</title>
    <style>
        h1{color: #00a0e9}
        p{background-color: #8de943
        }
        p.ex {margin-top:2cm;}
        p.bottommargin {margin-bottom:25%;}
    </style>
</head>
<body>
<h1>标题</h1>
<p>一个没有指定边距大小的段落。</p>
<p class="ex">一个2厘米上边距的段落。</p>
</body>
</html>

プログラムを実行して試してください



次のセクション
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> h1 {color:#00ff00;} p{color: #ffd4f0 } .ex {color:rgb(0,0,255);} </style> </head> <body> <h1>这是一个标题</h1> <p>这是一个普通的段落。请注意,本文是红色的。页面中定义的默认文本颜色选择器。</p> <p class="ex">这段文字是蓝色的</p> </body> </html>
提出するリセットコード
章コースウェア