ここで書いてる順番は意味はありませんので。
ただ思いついて書いてる順番です。
1.書式
2.コメントの挿入
3.class
4.タグの親子関係によるスタイルの設定
1.書式
h1{color:red}
このような記述があった場合、全体を宣言、h1の部分をセレクタ、
colorの部分をプロパティ、redの部分を値と呼びます。
セレクタはスタイルの対象のタグ。
プロパティはスタイルの性質。
値はプロパティごとの値。
です。
もし、一つのセレクタに対し複数のプロパティと値を記述したいなら
h1{
color:red;
font-size:12pt
}
のように;(セミコロン)で区切って下さい。
ちなみに
h1{color:red;font-size:12pt}
このように一行で書いても問題ないのですが読みやすさを考えた場合、複数行に分けて書いた方がいいと思います。
また、複数のセレクタに同一のスタイルを適用することも出来ます。
h1,h2{color:red;font-size:12pt}
このように,で区切ってタグを追加します。
2.コメントの挿入
CSSファイル内でどんな処理をしてるか自分が後でわかりやすくするために
コメントを入れることが出来ます。
/*ここにコメントを入れます*/
3.class
仮に<p>というタグ(段落を表すタグ)を使っていたとします。
p{
color:red
}
だけどある段落だけフォントの色などを変えたいと思うことなどがありますよね。
そんな場合はクラスという識別子を割り振って対応します。
クラス名をsampleと仮にしておきます。
HTML内の記述
<p class="sample">文章</p>
CSS内の記述
p.sample{
color:pink
}
このようにクラスを利用すれば同じタグで違う効果を使うことが出来ます。
4.タグの親子関係によるスタイルの設定
これは簡単に言うと、ある特定の条件下でしかスタイルが有効にならない方法です。
HTML内の記述
<div><p>文章</p></div>
CSS内の記述
div p{
color:red
}
これは<div>タグの中の<p>タグにしか効果がありません。
他で使ってる<p>タグには何の影響もありません。
ちなみにdivとpの間は半角のスペースで区切ります。
ここではdivとpで説明していますがもちろん組み合わせはいろいろあります。
|