ドットインストール CSS入門で学ぶことのまとめ。
Cascading Style Sheet
HTML(文書構造) ＋ CSS（見た目） ＝ Webページ
セレクタ{
プロパティ:値;
プロパティ:値;
プロパティ:値;
}
id→ #
class→.
コメントアウト /* */
スタイルの書き方
● styleタグに入れる
● インラインで書いていく
● 外部ファイルに書いていく
p{
color:red;
}
セレクタについて
*: すべてのセレクタ
a,b（カンマ区切り） :ふくすうのセレクタを指定
a b (空白を開ける) :aの中のbのすべての子要素を指定
a > b（不等号記号）:aの直下のbだけに適用
a + b （プラス記号） :aの直後のbにだけ適用
a.b(aとbの間に空白なし) :aかつbである要素にだけ適用
スタイル指定の優先度
●後から書いたほうが優先
●インラインで書いた方が優先
●詳細度の高い方が優先 例）section #main h1のように詳しく
●!importantが優先
#色の指定方法
●名前 red blue purple
●r(ed) /g(reen) /b(lue) 0-255 rgb(0,255,0)
●16進数 #00f #ff0000
様々なプロパティ
color, font-weight, font-size, text-align, text-decoration,font-family, line-height
背景の色
background-color:green;
background-image:url(‘bg.png’);
background-repeat:no-repeat; repeat-x;なら横方向,repeat-y;なら縦方向のみ
background-position:10px 10px;
background:attachment:fixed;(scroll)
これらは順不同で複数指定可能
ボックスモデル
width, height, border,margin, padding
border
border-color
border-width
border-style solid, dashed, dotted, double, inset,outset
例） border : red 5px solid ;
padding
padding:10px; 上下左右すべての余白
padding:10px 20px;上下10px 左右20px
padding:10px 20px 30px; 上10px 左右 20px 下30px
padding:10px 20px 30px 40px; 上10px 右20px 下30px 左40px
margin も同様
display
-block 前後に改行が入る
-inline 前後に改行が入らない（高さと幅の設定が解除）
-inline-block 前後に改行が入らない（高さと幅の設定が有効）
none 表示されない
overflow
-visible はみ出した部分も表示
-hidden はみ出した部分は非表示
-scroll はみ出した部分はスクロールで表示
position
-static
-relative 親要素
-absolute 子要素
top right left bottom で位置を指定できる
-fixed
top right left bottom で位置を指定できる
z-index
要素の重なりを指定するプロパティ
position のstatic以外に指定出来る
z-index:1;
z-index:2; では 後者のほうが上に来る
float
要素の回り込み
float
-left
-right
解除
clear
-left
-right
-both 両方解除
list
list-style-type マーカーの種類 circle square katakana
list-type-position マーカーの位置 outside inside
list-style-image list-style-typeより優先される
例) list-style:url(‘image.png’);
cursor
カーソルの形を変える
cursor
-move
-help
-wait
-pointer
擬似クラス
ある要素が特定の状態にある場合にスタイル指定
:link 未訪問のリンクにスタイルを指定
:visited 訪問済みのリンクにスタイル指定
:hover マウスが乗っかったときのスタイル指定（リンク要素でなくても可能）
:active リンクを押してから離すまでのスタイル指定
:focus formにfocusしたとき色が変わる