????????????????? CSS (Cascading Style Sheets) - PowerPoint PPT Presentation

1 / 20
About This Presentation
Title:

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

Description:

CSS (Cascading Style Sheets) . http://www.siam2dev.com – PowerPoint PPT presentation

Number of Views:208
Avg rating:3.0/5.0
Slides: 21
Provided by: sany5
Category:

less

Transcript and Presenter's Notes

Title: ????????????????? 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
Write a Comment
User Comments (0)
About PowerShow.com