CSS入門 #CSS

URL

CSS入門 (全18回) - プログラミングならドットインストール

わかってるつもりで分かってないことが多いのでメモ

内容

04 セレクタを使ってみよう

* 全てのセレクタ
, ~と~
半角スペースそれぞれの子要素を指定する
> 子要素だけ
+ 直後の

05 スタイル指定の優先度を理解しよう

あとから描いたほうが優先
インラインで描いたほうが優先(style)
詳細度の高いほうが優先
- 詳細度
  - #(100point)
  - .(10point)
  - 要素(1point)
  - 例)#id.class { } → 110point
!importantが優先

06 色を指定してみよう

red, bulue, yellow ....
rgb(rrr, ggg, bbb)
16進数(#001122)

07 テキストのスタイルを指定しよう

color: red;
font-weight: bold;
font-size: 14px;// 上、下に14pxの余白が出来ます
text-align: center;
text-decoration: line-through; //打ち消し
font-family: Impact;
lign-height: 20px;(行の高さ)

08 backgroundを使ってみよう

background-color: red;
background-image: url(filename)
background-repeat: norepeat, repeat-x, repeat-y
background-position: 10px 10px;
background-atachment: scroll; // スクロールで流れる
background-atachment: fixed; // スクロールで流れない

これらは全て
* background:だけで指定できる
* background: red, url(filename), ....

09 ボックスモデルを理解しよう

box

box height, width
widht:は%が使えるが、heightは使えない。
heightで%を使うには、それの親要素にheight: 100%;を設定しないといけない。

10 borderを使ってみよう

border:

11 padding､marginを使ってみよう

padding

top left&right bottom
top right bottom left

12 display､overflowを使ってみよう

display
- block 前後に改行
- inline 前後に改行はいらない(高さと幅の設定が無効)
- inline-block 前後に改行が入らない(高さと幅の設定が有効)
- none 非表示

divはデフォでblock
* overflow
* visible
* hidden
* scroll

要素の中身がはみ出した時、そのはみ出したのをどう表示するか

13 positionを使ってみよう

position

static (初期値)
relative (相対的)
absolute (絶対的)
fixed(スクロールしても同じ位置にあるようにする)

親要素にrelativeを指定
子要素にabsoluteを指定

-6pxとかやるとはみ出す。

14 z-indexを使ってみよう

要素の重なり
同じ階層でかつposition: fixedは使えない
z-indexが大きいほうが上に来る。

15 float､clearを使ってみよう

要素を回りこませるためのfloat, それを解除するためのclear

float: left; /* right, both */

とすると、回りこむ。

clear: left;
とすると、回りこみを解除する。

16 list-styleを使ってみよう

list-style-type: マーカの種類 circle square katakana
list-style-position: マーカの位置 outside inside
list-style-image: url(~)(最優先)

これは

list-style: circle, outside

で一気に指定できる。

17 cursorをつかってみよう！

カーソルの形状を変えるやつ

.change {
cursor: move, help(?), wait(砂時計), pointer
}

18 擬似クラスを使ってみよう

:link
:visited
:hover
:active
:focus

未訪問のリンクに対しては
a:link {color: blue;}
a:visited {color: gray;}
a:hover {font-weight: bold;}
a:active {background: red;} クリックして、離すまでのcss指定

hoverはaタグ要素だけでなく、他の要素にも指定できるよ

順番が重要。

forcus: textboxとか、フォーカス当てられるinput要素に対してcss指定