なお、実技の練習は実際のパソコンで行いますので記載致しませんので、ご了承ください。
タイプセレクタ
HTMLタグ名をそのまま指定します、各要素そのものに対して指示を行うもの、セレクタとしてh1やpなど要素名を記述します、HTMLファイルに現れる指示した要素すべてに対して内容が反映されます、特定の要素対象(p { },h1 { })
p{ color:white;}
ユニバーサルセレクタ
アスタリスク * 1文字のセレクタでHTMLファイルの中の全ての要素に反映させられる(プロパティと値を一括指定した場合に使える、全ての要素( * { } )
クラスセレクタ
HTMLファイル中でいずれかの要素に対してclass属性を使用して名前を付け、このクラスに対して指定を行うもの、特定のクラス名(.menu { } )ドットの後にクラス名を書く、
idセレクタ
HTML要素に1つだけに与えられる(id属性)にスタイルを適用する為のCSSセレクタです、クラスと違って同じIDは1ページ内で1回しか使えません(#の後にIDを書きます)クラスよりもCSSの優先順位が高い、重複しないものはidセレクタを使う
グループ化要素について
CSSで同じスタイルを複数の要素に一括で適用したい場合に使います、複数セレクタを , カンマで区切ってまとめる事でコードの重複を避け効率的に記述出来ます、セレクタとセレクタの間にカンマを入れる、カンマの後ろに半角スペースを入れた方が見やすい
din要素とspan要素
div(ディブ)要素→ブロックレベル要素、文章や画像をまとまりとして区切る時に使う、改行が入り上下に分かれて表示されます
span(スパン)要素→インライン要素、文章の一部だけにスタイルを当てたい時に使います、改行せず同じ行の中で使われます
ブロックレベル要素→常に新しい行から始まり横幅いっぱいに広がります、他の要素を中に含める入れ子にすることが出来る、段落、見出し、区切りに使われる(div,p,h1,ul,ol,table,form)
インライン要素→同じ行内で表示される、幅や高さを指定できない、ブロック要素を中に含めない、文字を装飾を加える目的で使われる事が多い(span,a,strong,em,img,input)
組み合わせセレクタ
セレクタ同士を , カンマで並べると複数のセレクタに対して同時に指示が出来る(h1,h2,h3)
セレクタ同士を 半角スペースで空けて並べると、指定を絞り込めます(p em{ })Pようの中に含まれるem要素だけに適用される
コメント