?????????? WEB-??????????

1
?????????? WEB-??????????

• ????? ??????, ?.?.?. ???????? ????? ????????????
• ???? ?????? ? ???????????? ???????
• ??? ????????? ??6-7? ? ??5-71
• 2007-2008 ??????? ???

2
????????? ???????? ??????. ???????????? CSS ? CSS2

• ?????? 14
• ????? ?.?.?., ??????
• ???????? ????? ????????????
• ??????? ??6, 2007

3
CSS ???

• ???????? ? ????????
• ??????? ??? ????????? ??????????????
  ??????????? ????? ????????? ("P", "TABLE",
  "OL"...)
• ??????? ??? ????????, ??????????????? ?
  ?????????, ????????? ?? ???????? ?
  ???????????????? ????????
• ?? ???????? ?
• ???????? ???????

4
CSS2 ???

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

5
CSS2 ???

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

6
??????????? ??????? CSS

• ?????? ??????????? ???????? CSS ?????????? ?????
  ???????? ??????????? 'property-name'
• ????????/Value ?????????????? ????????
  ?????????
• ?????????/Initial ????????? ????????
• ???????????/Applies to   ? ???????????????
  ?????????
• ???????????/Inherited   ???? ????????
  ???????????
• ??????????/Percentage values ?????????????
  ?????????? ????????
• ???????? /Media groups ? ????? ???????
  ????????? ??????????? ????????

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

• ????????? ?????? ???????????? ????????? ????????
  ?????
• Value\???????? N NW NEValue ltlengthgt
  thick thin 1,4Value ltfamily-namegt ,
  ltfamily-namegtValue lturigt? ltcolorgt / ltcolorgt
  ?Value lturigt ltcolorgt

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

• ?1 ( ??lor red)
• ???????? ??lor ????????,
• ? red ???????? ????????
• H1 ( font 16pt "Arial"
• Font-weight bold
• Margin-left0.25 in
• Color black)
• 35 ???????, ??????????? ?????

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

• ?????????? ????? ???????????? ??? ??????????
  ????????? ?????????? ?????????
• ltP STYLE - "font 24pt Arial"gt
• This text is 24 point
• ltPgt
• This text probably isn't.

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

• ltSTYLEgt
• lt/STYLE gt

• ltSPAN gt
• lt/ SPAN gt

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

• ltSTYLE TYPE"text/css"gt
• lt!--
• H1 font 20pt "Garamond"
• font-weight bold
• margin-left 0.25in
• color red
• H2 font 14pt "Arial"
• font-weight bold
• margin-left 0.50in
• color blue
• H3 font 12pt "Arial"
• font-weight bold
• margin-left 0.75in
• color brown

• PRE font 9pt"Courier New"
• font-weight normal
• margin-left 0.75in
• color black
• P font 11pt "New Times Roman"
• margin-top 0.0in
• margin-bottom0.0in
• margin-left 0.5in
• margin-right 0.5in
• font-weight normal
• xline-height 14pt
• text-indent 0.25in
• color black
• --gt

12
?????? ?? ???????? ?????? (LINK)

• ltLINK REL STYLESHEET TYPE text/CSS
• SRC http//www.yoursite.com/styles.cssgt

13
????????? ?????? CSS
14
??????? STYLE ? ??? ??????? TYPE"text/css

• lt/STYLEgt
• ltHEADgt
• ltTITLEgtOur First Style Sheetlt/TITLEgt
• lt/HEADgt
• ltBODY BgColorwhitegt
• lth1gt?????? 2 - ????????? ???????? ??????lt/h1gt
• lth2gtCascade Style Sheetslt/h2gt
• ltPgt ???????? ?????? - ?????? ?????????? ? ?????
  HTML. ??? ???? ??????????? Web-????????????
  ????? ?????????????? ??????????, ????? ? ??????
  ???-????????. ???????????? ????? ?????????? ?????
  ????? ? ????? ????????, ? ??? ????? ??????? ????
  ?? ???-????????, ??????? ??????????? ? ?????-????
  ???????????? ???????. ???????? ?????? ??? ???
  ????????? ??????????? ????????? ???? ????????.
• ltpgt?????? "????" ?????
• ltpregt
• P font 11pt "New Times Roman"
• margin-top -0.25in
• margin-bottom0.0in
• margin-left 0.5in
• margin-right 0.5in
• font-weight normal
• line-height 14pt
• text-indent 0.25in
• color black

• ltHTMLgt
• ltSTYLE TYPE"text/css"gt
• lt!--
• H1 font 40pt "Garamond"
• font-weight bold
• margin-left 0.25in
• color red
• H2 font 14pt "Arial"
• font-weight bold
• margin-left 0.50in
• color blue
• H3 font 12pt "Arial"
• font-weight bold
• margin-left 0.75in
• color brown
• PRE font 9pt"Courier New"
• font-weight normal
• margin-left 0.75in
• color black

15
????????? ?????? ???????? STYLE
16
??????????????

• ?????? ?????? ?
• ltSTYLE TYPE text/cssgt
• P first-line font-size150

• ?????? ????? ?????????? ?????
• P first-letter font-size300
• lt/STYLEgt

17
?????? ????????? ??????? ????????? CSS

• ???????? ??????
• ???????? ????? ? ????
• ???????? ?????? ?
• ???????? CSS-??????

18
????????? CSS2 ?? ????????? ? CSS1

• ????? ????????????????
• ??????????? ????????
• ????????????? ?????????
• ??????? ?? (???????????????? ?????)
• ?? - ??? ?????-???? ?????????, ????????????????
  ???????? ? ??????????????? ? ??? ??????? ?????? ?
  ???????????? ? ????????? ?????? ????????????.

19
????? ???????????????? CSS2

• ??????? ????? ????????
• ???????? 'inherit' ??? ???? ???????
• ?????????? ????????
• ???????? ??????? ??????
• ????????? ????? ???????????????????, ???????
  ????? ????????? ???????, ?????????
  ???????????????? ?????? ? ?????????????? ? ?????
  ?????? ???????.
• ??????????? ???????? ?????? ??????, ???????
  ????????? ??????, ?????? ? ??????????? ??????.
• ???????, ??????? ????? ???????? 'display' ?
  'vertical-align'.
• ????????????? ? ?????????? ????????????????,
  ??????? ????????????? ????????????????.
• ????? ???? ?????? (?????? ? ????- ? ??????-)
  compact ? run-in.

• ??????????? ?????????????? ????????????, ?????? ?
  ????????? ??????????? ? ?????? ???????????
  ??????????????.
• ??????????? ??????????????? ???????????? ?
  ??????????? ?????? ? ?????? ? ?????? ???????????
  ??????????????.
• ??????????? ???????? ??????????, ??????? ????????
  ?????????, ??????? ????????? ? ?????????
  ?????????.
• ???????????? ??????????, ???????? ?
  ?????????????? ????????? ? ???????.
• ????????? ?????? ? ??????? ?????? ????????
  'text-shadow'.
• ????????? ????? ????????????, first-child,
  hover, focus, lang.
• ????????? ????? ? ??????.
• ???????.
• ???????????? ?????

20
????????????? ????????? ?? ????????? ? CSS1

• "!important
• ???????? ????? - ? ???????????? ? ??????
  ??????????
• ????? ????? ?????????? 'margin-right' ???
  'margin-left' ??????? ?? ??????????? ??????
• ?????? ??????? "containing block/?????????? ????"
• ????????? ???????? 'display' - 'inline' ? CSS2, ?
  ?? 'block', ??? ? CSS1.

• ???????? 'clear' ??????????? ?????? ? ?????????
  ?????? ?????
• link', 'visited' ? 'active' -CSS2  'active'
  ????? ?????????? ?????? ?  'link' ???
  'visited'.
• ?????? ???????? ????? ???????? ?????????
  'font-size' ???????? ? 1.5 ?? 1.2.
• ?????? ??????????? ???????????, ? ?? ???????,
  ???????? 'font-size'.
• ??????

21
??????????? ????? ???????

• H1 font bold 12pt/14pt Helvetica

• H1
• font-weight bold
• font-size 12pt
• line-height 14pt
• font-family Helvetica
• font-variant normal
• font-style normal
• font-stretch normal
• font-size-adjust none

22
???? ???? CSS2

• ??? ?????? ?????????-?????????, ????????????? ?
  HTML
• lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"gt
• ltHTMLgt
• ltTITLEgtMy home pagelt/TITLEgt
• ltBODYgt
• ltH1gtMy home pagelt/H1gt
• ltPgtWelcome to my home page! Let me tell you
  about my favorite composers
• ltULgt
• ltLIgt Elvis Costello
• ltLIgt Johannes Brahms
• ltLIgt Georges Brassens
• lt/ULgt
• lt/BODYgt
• lt/HTMLgt

??? ?????? ??????? ?????????
23
????????? CSS2

• 1 ??????????? ?????? (IDENT, HASH)
• 2 ???????? ????? (red red)
• 3 ??????? ? ??????? (???????????????, \)
• 4 ????????? (?????? ??????)
• 5 at-??????? (at-rules)
• 6 ?????
• 7 ?????? ??????, ????? ?????????? ? ?????????
• 8 ?????????? ? ????????
• 9 ??????????? "/ "/".

24
???????? ? CSS2

• 1 ????? ? ???????????? ?????
• 2 ???????
• 3 ?????????? ????????
• 4 URL URN URI
• 5 ????????
• 6 ?????
• 7 ??????? ????????
• 8 ?????
• 9 ???????
• 10 ??????

• ltintegergt , ltnumbergt

25
???????? ? CSS2

• 1 ????? ? ???????????? ?????
• 2 ???????
• 3 ?????????? ????????
• 4 URL URN URI
• 5 ????????
• 6 ?????
• 7 ??????? ????????
• 8 ?????
• 9 ???????
• 10 ??????

26
???????? ? CSS2

• 1 ????? ? ???????????? ?????
• 2 ???????
• 3 ?????????? ????????
• 4 URL URN URI
• 5 ????????
• 6 ?????
• 7 ??????? ????????
• 8 ?????
• 9 ???????
• 10 ??????

• ltpercentagegt

27
???????? ? CSS2

• 1 ????? ? ???????????? ?????
• 2 ???????
• 3 ?????????? ????????
• 4 URL URN URI
• 5 ????????
• 6 ?????
• 7 ??????? ????????
• 8 ?????
• 9 ???????
• 10 ??????

?? ????? ??-??????? ???????????? URI
28
???????? ? CSS2

• 1 ????? ? ???????????? ?????
• 2 ???????
• 3 ?????????? ????????
• 4 URL URN URI
• 5 ????????
• 6 ?????
• 7 ??????? ????????
• 8 ?????
• 9 ???????
• 10 ??????

• P counter-increment par-num
• H1 counter-reset par-num
• Pbefore content counter(par-num, upper-roman)
  ". "

29
???????? ? CSS2

• 1 ????? ? ???????????? ?????
• 2 ???????
• 3 ?????????? ????????
• 4 URL URN URI
• 5 ????????
• 6 ?????
• 7 ??????? ????????
• 8 ?????
• 9 ???????
• 10 ??????

• ltcolorgt - ??? ???????????????? ????? ??? ????????
  ???????????? RGB.

30
???????? ? CSS2 - ?????

• BODY color black background white H1
  color maroon H2 color olive
• EM color f00
• EM color rgb(255,0,0)
• EM color rgb(100, 0, 0)

• 16 ????????
• ?????? ?????? RGB 'rgb

31
???????? ? CSS2

• 1 ????? ? ???????????? ?????
• 2 ???????
• 3 ?????????? ????????
• 4 URL URN URI
• 5 ????????
• 6 ?????
• 7 ??????? ????????
• 8 ?????
• 9 ???????
• 10 ??????

• ltanglegt
• ????????? ????????? ????? ????????
• deg ???????
• grad ?????
• rad ???????

32
???????? ? CSS2

• 1 ????? ? ???????????? ?????
• 2 ???????
• 3 ?????????? ????????
• 4 URL URN URI
• 5 ????????
• 6 ?????
• 7 ??????? ????????
• 8 ?????
• 9 ???????
• 10 ??????

• lttimegt
• ????????? ????????? ??????? ????????
• ms ????????????
• s ???????

33
???????? ? CSS2

• 1 ????? ? ???????????? ?????
• 2 ???????
• 3 ?????????? ????????
• 4 URL URN URI
• 5 ????????
• 6 ?????
• 7 ??????? ????????
• 8 ?????
• 9 ???????
• 10 ??????

• lt frequency gt
• ????????? ????????? ??????? ????????
• Hz ?????
• kHz ?????????

34
???????? ? CSS2

• 1 ????? ? ???????????? ?????
• 2 ???????
• 3 ?????????? ????????
• 4 URL URN URI
• 5 ????????
• 6 ?????
• 7 ??????? ????????
• 8 ?????
• 9 ???????
• 10 ??????

• "this is a 'string "
• "this is a \"string\""
• 'this is a "string"'
• 'this is a \'string\ '
• ATITLE"a not s\ o very long title" /.../
• ATITLE"a not so very long title" /.../

35
????????????? ????????? CSS

• ??????? ?????? ???????? ? ?????? ????????
• ??????? STYLE ??? ??????? "style" ? HTML

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

36
?????????????? ? ????????????
37
??????? ?? ????????!