目次を読む
CSSがどのように機能するかを確認するためのCSSの例
CSSとは何ですか？
CSSはCascadingStyleSheetsの略で、CascadingStyleSheetsとも呼ばれます。
CSSは、画面、紙、またはその他のメディアにHTML要素を表示する方法を説明しています。
CSSは多くの作業を節約します。複数のWebページのレイアウトを同時に制御できます。
外部スタイルシートはCSSファイルに保存されます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>wgchen</title>
<style>
body {
background-color: #d0e4fe;
}
h1 {
color: orange;
text-align: center;
}
p {
font-family: "Times New Roman";
font-size: 20px;
}
</style>
</head>
<body>
<h1>CSS 实例!</h1>
<p>这是一个段落。</p>
</body>
</html>
CSS構文
CSSルールセットは、セレクターと宣言ブロックで構成されます。
セレクターは、スタイルを設定するHTML要素を指します。
宣言ブロックには、セミコロンで区切られた1つ以上の宣言が含まれます。
各宣言は、コロンで区切られたCSSプロパティ名と値で構成されます。
複数のCSS宣言はセミコロンで区切られ、宣言ブロックは中括弧で囲まれています。
p {
color: red;
text-align: center;
}
インスタンスのすべての<p>要素、赤いテキストの色で中央揃えになります。
説明例
pはCSSのセレクターです（スタイルを設定するHTML要素を指します:) <p>。
色は属性で、赤は属性値です。
text-alignはプロパティで、centerはプロパティ値です。
CSSセレクター
CSSセレクターは、スタイルを設定するHTML要素を「検索」（または選択）するために使用されます。
CSSセレクターは次の5つのカテゴリに分類できます。
简单选择器（根据名称、id、类来选取元素）
组合器选择器（根据它们之间的特定关系来选取元素）
伪类选择器（根据特定状态选取元素）
伪元素选择器（选取元素的一部分并设置其样式）
属性选择器（根据属性或属性值来选取元素）
CSS要素セレクター
要素セレクターは、要素名に基づいてHTML要素を選択します。
p {
text-align: center;
color: red;
}
<p>每个段落都会受到样式的影响。</p>
<p id="para1">我也是！</p>
<p>还有我！</p>
ここでは、ページ上のすべての<p>要素赤いテキスト色で中央揃えになります。
CSSIDセレクター
idセレクターは、HTML要素のid属性を使用して、特定の要素を選択します。
要素のIDはページ内で一意であるため、IDセレクターを使用して一意の要素を選択します。
特定のIDを持つ要素を選択するには、ポンド記号（＃）の後に要素のIDを記述します。
#para1 {
text-align: center;
color: red;
}
<p id="para1">Hello World!</p>
<p>本段不受样式的影响。</p>
このCSSルールは、id =” para1”のHTML要素に適用されます。
注意：id名前を数字で始めることはできません。
CSSクラスセレクター
クラスセレクターは、特定のクラス属性を持つHTML要素を選択します。
特定のクラスの要素を選択するには、ピリオド（.）文字ます。
.center {
text-align: center;
color: red;
}
<h1 class="center">居中的红色标题</h1>
<p class="center">居中的红色段落。</p>
この例では、class = "center"のすべてのHTML要素が赤で中央揃えになり
ます。また、特定のHTML要素のみがクラスの影響を受けるように指定することもできます。
注意：クラス名を数字で始めることはできません！
CSSユニバーサルセレクター
汎用セレクターページ上のすべてのHTML要素を（*）選択します。
次のCSSルールは、ページ上のすべてのHTML要素に影響します。
* {
text-align: center;
color: blue;
}
CSSグループ化セレクター
グループセレクターは、同じスタイル定義を持つすべてのHTML要素を選択します。
以下のCSSコードを見てください（h1、h2、p要素は同じスタイル定義を持っています）：
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
コードサイズを最小限に抑えるために、セレクターをグループ化することをお勧めします。
セレクターをグループ化するには、各セレクターをコンマで区切ります。
h1, h2, p {
text-align: center;
color: red;
}
この例では、上記のコードでセレクターをグループ化しました。