CSSとは?


CSSの世界
1.	基本的定義:「セレクタ」「属性」「値」を組み合わせて定義していく
 (ア)	セレクタ{属性:値}
  @	例   h1{background-color:#0000ff;}
    入力の過程で、改行、半角スペース、タブはブラウザで解釈される際に無視
    されます。
    ただし、セレクタ名、属性名、値の途中で、改行、半角スペース、タブを入
    れてはいけません。
 (イ)	複数の属性をまとめて定義する方法
  @	セレクタ{属性1:値1;属性2:値2}
    例 div	{
        background-color:#0000ff;
        color:#696969
         			}
  A	セレクタのグループ化
    セレクタ1,セレクタ2{属性:値}
    例 h1,h2 {
        color:#0000ff;
     			}
  B	子孫セレクタ
    セレクタ,セレクタ{属性:値}
    要素名をスペースで区切って複数並べると、ある特定の要素の子孫にあたる要
    素にスタイルを適用することができる。
    例えば、<a>の要素に含まれる<img>の枠線を赤色にする場合、
    例 a img{
         border-color:red
       		}
  C	子供セレクタ
    セレクタ>セレクタ{属性:値}
    選択対象の要素がある別の要素の子供であるとき。
    例えば、<body>要素の直接の子供である<p>要素だけ行間を1.8倍にする時、
    例 body > p {
 			      line-height:1.8cm
	     	   }
  D	コメントの書き方
    /* コメントになる部分 */
		例 h1{
 			 color:#0000ff/* 文字色を青にする */
    	}
 (ウ)	セレクタの種類
  @	基本セレクタ
		<h1>〜</h1>や<p>〜</p>などに設定する。
		例 div {background-color : #ADFF2F}
	A	IDセレクタ:ID属性を設定した要素に対してスタイルシートを設定します。
		HTML中で利用できるのは一回のみ。
		#ID名{属性:値}
		基本セレクタ名#ID名{属性:値}
		例 #footer {
			   font-color:#dcdcdc
       	}

	B	CLASSセレクタ: CLASS属性を設定した要素に対してスタイルシートを設定します。
		CSSのセレクタのの先頭に「.」を付けて定義します。
		.CLASS名{属性:値}
		基本セレクタ名.CLASS名{属性:値}
		例 .honbun {
			    font-color:#dcdcdc
 		       }
			<body>
 				<div class=”honbun”>
    				    このホームページは・・・・
  			</ div>
	C	擬似クラス:文章中の性質とは関係ない性質に対して設定するクラス。
		擬似クラスは「:」にあらかじめ決められた予約語を組み合わせて定義します。
		主に<a>(アンカー)要素の色を変化させるために利用される。