CSSの基本構造

※定義方法の基本

セレクタ { 属性: 値 }

セレクタ {
属性: 値
}

※ブラウザで表示した時の見え方

文字の背景に色をつけてみましょう。

※ソースサンプル

【CSS】
.back {
background-color: #ffccee
}
【HTML】
<span class="back">文字の背景に色をつけてみましょう。</span>

[ 黒※説明中のタグ 紫※省略可能なタグ 赤※変更可能 緑※文章など ]

※複数の属性をまとめる定義方法

セレクタ { 属性a: 値a; 属性b: 値b }

※ブラウザで表示した時の見え方

文字と背景を自由な色で彩ります。

※ソースサンプル

【CSS】
.moji {
background-color: #ccffcc;
color: #009999
}
【HTML】
<span class="moji">文字と背景を自由な色で彩ります。</span>

※セレクタのグループ化

セレクタ,セレクタ { 属性: 値 }

※ブラウザで表示した時の見え方

見出し1

見出し2

※ソースサンプル

【CSS】
h1,h2 {
background-color: #ccffcc;
color: #009999
}
【HTML】
<h1>見出し1</h1>
<h2>見出し2</h2>