????????????????? CSS (Cascading Style Sheets)

1
????????????????? CSS (Cascading Style Sheets)
?. ??????? ???????? http//www.siam2dev.com xnatt
apong_at_hotmail.com ?. ????????????
2
Cascading Style Sheets(CSS)

• Microsoft internet explorer 3.0 ??? Netscape 4.0
  ?????????
• ??????????????????????????????????????????????
  ???? ????????????????? ?????????????????? Heading
  ?????? ????????????????? ???????
  ????????????????????
• ??????????????????????????????????????????????????
  ????????????? tag ltfontgt ??? html ???????
• ?????????????????????? CSS ??? tag ?????
  ??????????? html??????

3
????????????????????????? CSS ???????

• ?????????????????????????
• ????????????????????(????????????????)
• ????????????
• ??????????
• ????
• ?????
• ????????
• ?????????? ???? html ???????? CSS ?????????

4
??????????? CSS

• CSS ?????????????????? tag ??? html
  ?????????????????????????? ?????????
  ??????????????????????????????
• CSS ?????????????????????? html ??????????????? ?
  ????? ?????????????????????????????
  ??????????????????????????????????????????????????
  ??????????????????????????????????????????????????
  ??????? tag ????? ??????????????
• CSS ????????????????????????????????????? html
  ????????????????????????????????????????
  ?????????????????????????????????????????????????
  ??

5
???????????????? CSS

• ?????????? CSS ???????? html ????????????????????
  ???????????????????????????????????????????????
  ?????? ltheadgt ?? tag ltstylegt..lt/stylegt
  ????????????????

6
cascading style sheets ????????????????????????
3 ???????

• Property ???????????????????????????????????
  ??????????? ????????????????? ???????
• Dot ??????????????????? property
  ??????????????????? property ???? ?
• Value ????????????????????????????????????????????
  ? property property ??? value ????????????????????
  ?????????????????????????????? semi-colon

?????? Property value
7
????????

• ??????????????????????????????????????????????????
  ?????????? sans-serif ????????????????
• colornavy font-familysans-serif

8
??????

• ?????????????????????????????????????????????????
  ??? selectors ???????????????????????????????????
  ????????????????? ?????????????
• ????(???????????) ??????????? ??????????????
  (?????????? "")
• HTML-TAG property1value1 property2value2
  ...

9

• ???? ???????????????????????? lth1gt ?????????? 12
  points ???????? sans-serif????????????????????
• h1 font-size 12pt font-familysans-serif

10
?????????????????? ? ?????????? style ????????

• ??????????????????????????????????????????? comma
  ????
• h1 font-familysans-serif h2
  font-familysans-serif h3 font-familysans-ser
  if h4 font-familysans-serif
• ?????????????
• h1,h2,h3,h4 font-familysans-serif

11

• ?????????????????????????????????????????????????
  ?????????????????????????????????????? ????????
  (space) ??? comma
• ???? ?????????????? ????????? style lth1gt
  ???????????????????????????????????? tag
  ltemgt...lt/emgt ?????????????
• h1 em colorgreen

12
????????

• h1 em colorgreen
• ????????????
• cascading ltemgtstylelt/emgtsheets
• ??????????????
• cascading style sheets

13
?????????????????????????????? classes

• ?????????????????????????? ltigt...lt/igt?????????????
  ?????? ltbgt...lt/bgt ?? CSS ?????????????????????????
  ?????????????????????
• ???? ????? ?????????????? Myformat
  ???????????????? ????????? "." (???)
  ??????????????? ????????????????????????????????
  ??????????? ???????? Myformat ????????????????????
  ?????????????? ?????????????
• .Myformat colorred

14
??????? Class ??????????????????

• ltp class"Myformat"gt???????lt/pgt
• ????????????????????????????????????????????ltfont
  colorredgt....lt/fontgt ???????
• ?????????? ?????????????????? Myformat
  ?????????????????????? ??????????????????????????
  Myformat ????????????????????????
  ????????????????????????????????????????????
  ??????????????????????????????????????????? html

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

• / ???????????????????????/ body
  colorblack/ ????????????????????????????/
  background-colorwhite/?????? "sea.gif"
  ??????????? / backgroundimageurl(http//samansk
  .cjb.net//images/sea.gif) / ???????? serifed
  font family /font-familyserif /???????????
  body/
• / ????????????????????????? comment ????browser
  ???????????????????// Unvisited links are
  blue /alink colorblue/ Visited links are
  purple /avisited colorpurple / Active
  links are red / aactive colorred

16
?????? CSS ??????? html ????? 3 ?????????
?????? 1 Inline styles

• ???? new "style...." ???????????????????????????
  ?????????????????????????????????????? html ????
  ????
• ltp style"colorred font-familysans-serif"gt?????
  ?? lt/pgt
• / ??? inline style/
• .mywords colordarkgreen font-styleitalic /
  ??? inline class /

17

• ??????????????????????????????????????????????????
  ??????????????????????????????????????? style
  ??????????????????? ??? tag ltdivgt ??? ltspangt
  ????ltspan style"colorgreen"gt ??????? lt/spangt
• ????????????????????????????? ltdivgt???ltspangt?????
  ???????? ?????????????????????????????? ltdivgt
  ?????????????????????????????????????? 1
  ????????????????????????????????????????
  "style" ??? "class"

18
?????? 2 Document style

• ???? ltstylegt...lt/stylegt????????????????????????
  ltheadgt...lt/headgt??????????????????????????????????
  ?????????????? ????

lthtmlgt ltheadgtlttitlegtdocument Title Herelt/titlegt
ltstyle TYPE"text/css"gt lt!-- / ????????????-
??????????????? browser?????????????? CSS
???????/ h1,h2,h3 font-family sans-serif
color navy /????????????? ?????????????????/
--gt / ??????????????????/lt/stylegt lt/headgt
ltbodygtlth1gtHeading in navy sans-serif textlt/h1gt
Other text here. lt/bodygt lt/htmlgt
19
?????? 3 External style sheet

• ?????????????? CSS ???????????????????????????????
  ??????? tag ltlinkgt ????????? ltheadgt
  ???????????????? ????????????????????????????????
  ? html ???????? ??????????????????????????
  browser ????????????????????? html ???????? CSS
  ???????? ??????? CSS ?????????????????????
• Browser ??????????????????????? html ??????
  ??????????? CSS ????????????? share.css
  ?????????????????????????????

20

• lthtmlgtltheadgtlttitlegtDocument Title
  Herelt/titlegtltlink REL"STYLESHEET"
  HREF"share.css" TYPE"text/css"gt lt/headgt ltbodygt
  Document Body Here lt/bodygt lt/htmlgt