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>

提出するリセットコード
自動運転