ドットインストール覚え書き_CSS
first-line first-letter
before
after
詳細度
style
id
擬似クラス
擬似要素
長さ
px
em
%
色
blue
#0000ff
rgb(0, 0, 255)
rgb(0%, 0%, 100%)
ボックスモデル
padding
border
margin
border-color
border-width
border-style: solid/dotted/dashed/double/inset/outset
↓
限定
border-top/bottom/left/right
背景(枠)の外側の余白
margin: 0px;
padding/margin
背景(枠)の内側の余白
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
or
padding:
all
top/bottom right/left(値のみ指定)
top right/left bottom(値のみ指定)
top right bottom left(値のみ指定。時計回り)
margin
隣り合う2領域のmarginは相殺され、大きい方のmarginになる(下記の場合30pxになる)
・html
aaa
bbb
div#box1 {
background: red;
margin: 10px 20px 30px;
}
div#box2 {
background: blue;
margin: 20px;
}
/*
text
- color: orange;
- font-size: 14px;
- font-family: Arial, Helvetica;
- font-weight: bold/normal
- text-align: right/center/left;
- text-decoration: underline/line-through/none
/
p {
color: silver;
font-size: 24px;
font-family: Arial;
font-weight: bold;
text-align: center;
text-decoration: underline line-through;
}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- aaa
- bbb
- ccc
/*
list
- list-style-type: disc/circle/square/decimal/lower-alpha
- list-style-image:
- list-style-position: inside/outside
- list-style:
/
ul {
/* list-style: inside decimal; */
/* list-style: outside lower-alpha; */
list-style: url('test.png') circle;
}
cursol
クラスとそれに対応させるカーソルを指定
.help { cursor: help; }
.moveClass { cursor: move; }
.pointerClass { cursor: pointer; }
.imageClass { cursor: url('test.png'), auto; }
body {
/* background-color: silver;
background-image: url('bg.png');
background-repeat: no-repeat;
background-repeat: repeat-x;
background-position: 10px 10px;
background-position: top center;
background-attachment: scroll;
background-attachment: fixed; */
background: url('bg.png') no-repeat fixed;