ドットインスト-ルCSS偏

・ホームページ=HTML(構造的な文書)+CSS(見た目)

Sublime Text 2:画面分割 | オヤマ日記飴

セレクタ{プロパティ名:値;}

・* 要素名 #id .class

・a,b a b a>b a+b a.b

・属性セレクタ[]{}

・疑似クラス(ある要素の状態を指定するとき)

wp-e.org

ul li:first-child{color:violet;}

a:link{color:skyblue;}
a:visited{color:pink;}
a:hover{color:gold;}
a:active{color:red;}

 

 ・疑似要素(ある要素の一部を指定するとき)

:first-line{color:red;}

p:before{
content:"-->";
}
p:after{
content:"<--;
}

 

 ・プロパティの値を指定しよう

body{font-size:16px;}
h1{font-size:2em;}
h2{font-size:150%;}

h1{color:blue;}
h1{color:#00f;}
h1{color:rgb(0,0,25);}

 

・box

・border

・pading

・marginの相殺

・文字に関するプロパティ font

・リストに関するプロパティlist-style

developer.mozilla.org

・cursorでカーソルの形状を変えよう 

・backgroundで背景スタイルを変えよう

・要素の配置 インラインボックスとブロックボックス

【CSS】display:inline-block;で要素を横並びにする方法(前半はHTML5におけるボックスの話)

Let's begin CSS -- 3.1


h1,p,span,a{

border:1px solid #ddd;
}

h1,p{
width:120px;
display:inline-block;
}

・positionで位置を調整

relative

CSS - position

・z-index、overflowを理解しよう

・float、clearを使ってみよう