• 基本セクレタ
html の要素にスタイルシートを適用する方法
h1{background-color : blue}
上の定義ではすべての h1 要素に背景が青色という設定がなされる.
書き方の例のような定義方法で OK!


• id セクレタ
id 名でスタイルを設定し，その id 名が指定した要素のみにスタイルシートを適用する. 1 つの html ファイルの中に同じ id のセクレタを複数回適用することができない.
# id名 {属性 : 値}
＜p＞ 要素にこの id を適用したい場合は，htmlファイルに以下のように書く.
＜p id="id名"＞


• クラスセクレタ
id セクレタの複数回使える version (だと思います....)
. クラス名 {属性 : 値}
＜p＞ 要素にこのクラスを適用したい場合は，htmlファイルに以下のように書く.
＜p class="クラス名"＞

       p{                            /* (基本セクレタの例) */
         font-style : itaric ;       /* 複数のスタイルを適用したいときは */
         color : red                 /* "; (カンマ)" で区切って書く */
         }

      #test{                         /* id セクレタの例 */
            font-style : itaric ;    /* "; (カンマ)" で区切って書くのは */
            color : red              /* どの場合でも同じ */
            }

      .test{                         /* クラスセクレタの例 */ 
            font-style : itaric ;  
            color : red              
            }                    
        

• css ファイルを作る
メモ帳などのエディタを開き上のようにスタイルを設定し，保存する際に拡張子を .css に変更するだけで OK !!

• ＜head＞内に定義する
＜head＞ 内に＜style＞＜/style＞を定義しその中に上の例のように書き込む．以下は例( head 内)


    ＜style＞
    ＜!--
       .test{                         
             font-style : itaric ;  
             color : red              
             }
    --＞
    ＜/style＞
        

• フォント



属性	値	説明
font-family	フォントの種類	フォントの指定. 種類についてはえいちてぃえむえるのフォントの項目を参照
font-size	(num) + pt, mm, cm, em, ex	フォントの大きさ
color	--色の項目を参照--	フォントの色の指定
font-style	normal, italic, oblique	文字を斜体にする(通常の状態，イタリック体，通常の文字を斜体にする)
font-weight	bold,bolder,lighter	フォントの太さの指定(太くする，より太くする，より細くする)
font-variant	small-caps	スモールキャピタル(大文字の字体をそのまま小さくしたもの)指定



• テキスト



属性	値	説明
text-align	left,center,right	テキストの水平位置の指定(値は左から，左寄せ，中央寄せ，右寄せ)
text-decoration	underline,overline, line-through	文字の飾り付け(下線，上線，取消線)



• テーブル



属性	値	説明
table-layout	auto, fixed	テーブルのレイアウト方法の指定(表の中身を読み込んでから大きさを決める，表の1 行目を読み込んで大きさを決める.)
empty-cells	hide, show	空のセルの部分のラインの設定(ラインを引かない，ラインを引く)
border-collapse	collapse, separate	セルのラインの引きかた(まとめてラインを引く，セルごとにラインを引く)



• 幅



属性	値	説明
margin-(right,left,top,bottom)	数字 + px	上下左右いずれかのマージン(余白)設定.マージンは領域の外側の余白の設定のこと．padding と混同しないよう注意
marginwidth	数字 + px	左右のマージン設定
marginheight	数字 + px	上下のマージン設定
padding	数字 + px (値を最大 4 つまで指定可能)	パディング設定．パディングとは領域内の余白設定のこと．margin と混同しないように注意． 値が 1 つの場合:上下左右 値が 2 つの場合:上下と左右 値が 3 つの場合:上と下と左右 値が 4 つの場合:上下左右それぞれ



• 背景



属性	値	説明
background-color	--色の項目を参照--	背景の色の指定
background-image	url("画像の URL ")	背景の画像の指定
background-attachment	fixed, scroll	スクロールしたとき文字と画像が一緒にスクロールするかしないかの設定(画像をスクロールしない，画像もスクロールする)



• 色



値	色		値	色		値	色
white			wheat			black
navy			chocolate			lightgreen
yellow			red			purple
tomato			seashell			aqua
greenyellow			orange			brown
snow			forestgreen			lightpink
magenta			mediumaquamarine



• その他



セクレタ	属性	値	説明
a:link	color,background,...	(属性にあった値)	未訪問のリンクにスタイルシートの適用(色の指定，背景色の指定)
a:hover	同上	同上	ポインタが乗ったときにスタイルシートの適用
a:active	同上	同上	クリックしたときにスタイルシートの適用
a:vasit	同上	同上	訪れたことのあるページのリンクにスタイルシートの適用

• 水津弘幸，石井歩 / HTML+CSS HANDBOOK 3rd edition / C&R研究所