読者です 読者をやめる 読者になる 読者になる

Awesome Hacks!

プログラミング初心者なので地道に勉強していきます。分からない人の立場から整理していきます。

ドットインストール覚え書き_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
CSS
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;