CSS

1
CSS

• ????????? ??????? ??????

2
??????????, ???????

• ?????? ??????? ???????????? ???????????
  HTML-?????????
• CSS ??????? 1 (1996, 1999)
• CSS ??????? 2 ????? ????????????
• CSS ?????? 3 ????????? ? ?????? ??????????

3
????????? CSS

• ??????? ?????? ??????? ?? ??????
• ??????? lt????????gt lt????????gt
• ???????? ?????????? ? ????? ?????????
  ??????????? ???????
• ???????? ???? lt????????gt lt????????gt
• / / ???????????
• ???????
• H1 color red font-size 12pt
• H1 color red H1 font-size 12pt
• .note font-style italic text-alignright

4
?????? ???????

• ???????? ???????
• ????, ???
• ???????? ??????? ?????????
• ???????? ?????????????
• ????????????????
• ???????? ????????????????? ??????????
• ???????????? ??????????

5
???????? ???????

• ?????? font
• font-family ?????????
• font-style (normal, italic, inherit) ?????? ???
  ???
• font-variant (normal, small-caps) ????????
• font-weight (normal, bold)
• font-size (xx-small, x-small, small, medium,
  large, x-large, xx-large, ?????????? ?????,
  ????????)
• line-height ?????? ??????
• P font bold 12pt/14pt Arial

6
????, ???

• color ???? ??????
• background-color
• background-image
• background-repeat (repeat, repeat-x,
  repeat-y, no-repeat)
• background-attachment (scroll, fixed)
• background-position (, ?????, top, center,
  bottom, left, right)

7
???????? ??????

• text-indent (?????, ) ?????? ?????? ??????
• text-align (left, right, center, justify, ??????)
• text-decoration (none, underline, overline,
  line-through, blink)
• text-shadow
• letter-spacing
• word-spacing
• text-transform (capitalize, uppercase, lowercase,
  none)
• white-space (normal, pre, nowrap)

8
???????? ??????

• margin-top, margin-right, margin-bottom ,
  margin-left (, ?????) ????
• border-top, border-right, border-bottom,
  border-left
• border border-style, border-width, ????
• padding-top, padding-right, padding-bottom,
  padding-left
• width, height
• float (left, right, none)
• clear (none, left, right, both)

9
???????????? ??????????

• ?????????????? before ? after
• content (??????, URI, ???????)
• P.notebefore content "?????????? "
• quotes
• list-style-type ( disc, circle, square, decimal,
  decimal-leading- zero, lower-roman, upper-roman,
  lower-greek, )
• list-style-image (URI)
• list-style-position (inside, outside) ??????
  ?????? ??? ???

10
???????????????? ?????????

• cursor (auto, crosshair, default, pointer, move,
  e-resize, ne-resize, nw-resize, n-resize,
  se-resize, sw-resize, s-resize, w-resize, text,
  wait, help)
• outline-width
• outline-style ????????????? ??????
• outline-color

11
????????????? ? ????????????????

• display (inline, block, list-item, run-in,
  compact, marker, table, inline-table,
  table-row-group, table-header-group,
  table-footer-group, table-row, table-column-group,
  table-column, table-cell, table-caption, none)
• position (static, relative, absolute, fixed)
• top, right, bottom, left ?????????? (????????)
• direction (ltr, rtl) ??????????? ??????

12
???????? ????

• ?????????????
• em ???????? font-size
• ex ???????? x-height
• px ???????
• ??????????
• in ?????
• cm ??????????
• mm ??????????
• pt ?????, 1/72 ?????
• pc ???? 12pt

13
???????? ??????

• ?????
• aqua, black, blue, fuchsia, gray, green, lime,
  maroon, navy, olive, purple, red, silver, teal,
  white, yellow
• ? ????????????????? ????
• FFFFFF, FFF, EEE
• ? ?????????? ????
• rgb(255,255,0), rgb(100,50,50)

14
?????????

• ???????
• ????????????? ???????? (??? ????????)
• E ??????? ???? E
• E F ??????? F, ?????????? ???????? E
• E gt F ??????? F, ?????????? ???????? ??-?? E
• E F ??????? F, ?????? ????? ?? ??-?? E
• E.C ??????? E ?????? C
• I ??????? ? ???? I
• Eattr ??????? ? ????????? attr
• Eattrvalue ??????? ? ????????? attrvalue
• P ??????????? ????????

15
?????? ?????????

• ltHTMLgt
• ltHEADgt
• ltTITLEgt??????lt/TITLEgt
• lt/HEADgt
• ltBODYgt
• ltPgt??? ?????.
• ltULgt
• ltLIgt?????? ??????? ??????
• ltLIgt?????? ??????? ??????
• lt/ULgt
• lt/BODYgt
• lt/HTMLgt

16
????????????

• first-child ?????? ???????
• link, visited, active, hover, focus
  ???????????? ??????
• lang(c) ????
• ???????
• Alink color red
• LI A.externalvisited color blue

17
??????? ???????? ??????? ??????

• ? ???? (??????? style)
• ltp style"colorred"gt
• ? ????????? ????????? (??????? ltSTYLEgt lt/STYLEgt
  )
• ltSTYLEgtp colorredlt/STYLEgt
• ?? ??????? ?????
• ltLINK href"style.css" rel"stylesheet"
  type"text/css"gt
• ltLINK rel"alternate stylesheet" title"a"
  href"a.css" type"text/css"gt
• ltSTYLEgt_at_import "subs.css"lt/STYLEgt