Cascading Style Sheets XHTML

1
Cascading Style Sheets XHTML
2
??sa???? st?? ???t?ta
?a pa?ade??µata e??a? ap? t? XML by example,
Benoit, Marchal, second Edition, QUE
3
Cascading Style Sheets

• ?a Cascading Style Sheets (CSS) e??a? ?d???e? ??a
  t? p?? ?a eµfa???eta? µ?a se??da web
• Me ta CSS µp??e? ?a e?e???e? ? eµf???s?
  e?at??t?d?? se??d?? ap? µ?a ?e?t???? p???
• G?a pa??de??µa, e?? ??e?a ???e se??da ?a ??e? t?
  ?d?? ???µa ?p?ßa???? µp??? ?a
• ???? t?? ?d??t?ta BGCOLOR se ???e se??da
• ? ?a ???s?µ?p???s? ??a style sheet ??a ?a t?
  ???µa
• ?e t? style sheet µp??? ?a a????? t? ???µa
  ?p?ßa???? se ??e? t?? se??de? µe µ?a ap?? e?t???
• ????? t? style sheet ?a ?p?epe ?a a????? ???e
  se??da ?a? ?a a????? t?? ?d??t?ta BGCOLOR

4
Cascading Style Sheets (s????e?a)

• ?a p?e??e?t?µata t?? CSS ?a ?????? eµfa??ste?a
  st? s????e?a
• ?e ta CSS µe???eta? ? a????? ??a ?a µp??? tags
  p?? af????? st?? eµf???s? t?? ?e?µ????
• ??a ?? se??de? ?a ????? ????te?? ??d??a?µ????te??
  µ??e???? ?????ta? ta??te?a st?? browser
• ?e ????te?? ??d??a ?? se??de? µp????? ?a
  epe?te????ta?/a??????? e?????te?a

5
S??ta?? CSS

• e?t???? CSS ???f??ta? se ?e????st?? ??aµµ?? p??
  ?a????ta? ?a???e?
• ???e ?a???a? ??e? t??a µ???
• SELECTOR propertyvalue
• St?? pe??ss?te?e? pe??pt?se?? ? selector e??a? t?
  tag p?? ?????µe ?a e??????µe
• Property e??a? ? CSS attribute ?a? ? value
  p??sd?????e? p?? ?a s?µpe??f??eta? ? property
• O s??d?asµ?? property/value ?a?e?ta? d???s?.
• ?a??de??µa ? a???????? CSS ?a???a? ??te? t?
  e?????sµ?? ???µa t?? se??d?? st? purple.
• BODY colorpurple

6
S??ta?? CSS (s????e?a)

• ?ta? ???s?µ?p??e?ta? ??a selector µp??e?te ?a
  ??ete p????? d???se?? (s??d?asµ???
  property/value).
• ??? d?a?????ete µe t?
• ?a?? ?d?a e??a? ?a ?p???e? µ?a ?e????st? ??aµµ?
  ??a ???e d???s?
• ??e? ?? d???se?? pe??st???????ta? µe ta
• BODY colorpurple
• background-coloryellow
• margin-left 50px
• margin-right 50px

7
?µad?p????ta? selectors

• ?p????µe ?a ß????µe p?????? selectors µa??
• ?.?. ? ?a???a? CSS ?a e????e? ta tags H1,H2 ?a?
  ?3
• ??a e??a? ta ?d?a e?t?? ap? t? µ??e???
• H1, H2, H3
• color000066
• background-colortransparent
• text-aligncenter
• font-styleitalic

8
Contextual Selectors

• ?p??e?te ?a ???sete selectors p?? ?e?t???????
  µ??? µ?sa se ?????? selectors
• G?a pa??de??µa, t? ltBgt tag a????e? se bold t?
  ?e?µe??
• ???? µe t?? ep?µe?? ?a???a t? CSS ?a ???e? t? ltBgt
  ?a a????e? t? ?e?µe?? se ??t????, ???? ?ta? t?
  ltBgt tag eµpe????eta? se µ?a pa????af? (ltPgt...lt/Pgt
  tags).
• P B color000000
• background-coloryellow
• font-weightbold

9
???s?µ?p????ta? ta CSS

• ?e t?e?? ?????? t??p??? ?a ???s?µ?p??e?ta? ta CSS
  ??a ??e??? t?? se??d?? web
• Linked Styles? ???st?? e????e? p???ap??? se??de?
  µe ??a linked style
• Embedded StylesO ???st?? e????e? µ?a se??da
• Inline StylesO ???st?? e????e? ??a section µ?a?
  se??da? web
• ?p??e?te ?a ???s?µ?p???sete ??a ap? ta t??a ?
  s??d?asµ??? ?p?te ??ete ta cascading style
  sheets

10
Linked Style Sheets

• Ta linked style e??a? ?da???? ??a e??a?a e????a
  t?? d??t?a??? t?p??
• ???µa ?p?ßa????, ??aµµat?se????, e?d??
  ??aµµat?se????, e?d?? ep??efa??da?, e??a? µ????
  t?? HTML ?a? p??pe? ?a e??a? ????? se ??e? t??
  se??de?
• ?e CSS e??a? ap??
• ????? CSS ?e????st? ?d??t?te? ???e se??da??
  d?s???e? ?? a??a???
• ??µ??????a linked style sheet
• G???te se ??a ?a???????? a??e?? t??? ?a???e? CSS
• ?p????e?este t? a??e?? st? ?d?? directory µe ta
  .html a??e?a
• ??ste t?? ?at????? .css

11
?a??de??µa Linked Style Sheet

• BODY colorpurple
• background-coloryellow
• margin-left50px
• margin-right50px
• ???s??ste µ?a ??aµµ? HTML st?? pe????? HEAD
• ltLINK REL"stylesheet" TYPE"text/css"
  HREF"xxx.css"gt
• RELp????f??e? t?? browser ?t? t? linked file
  e??a? stylesheetTYPET?p?? a??e????e?µe?? ??a
  .cssHREF???µa ?a? ??s? a??e??? css

12
Embedded Styles a

• Embedded styles e??a? ???s?µa ??a ??e??? µ?a?-d??
  se??d??
• ?st? ?t? ??ete ??a µe???? web site p?? e????eta?
  ap? ??a linked stylesheet
• ???? t? ß????af??? sa? ???ete ?a ??e? d?af??et???
  stylesheet?embedded style
• Embedded styles, ?? ?a???e? ?p?? ?a? sta linked,
  a??? a?t? ??a d?af??et??? a??e??, t??? ???fete
  st? tµ?µa HEAD t?? se??da? p?? ???ete ?a
  e????ete
• ?p?s?? ß??ete ?a? t? tag ltSTYLEgt

13
Embedded Styles ß

• ltHEADgt
• ltSTYLE TYPE"text/css"gt
• lt!--
• BODY colorpurple
• background-coloryellow
• margin-left50px
• margin-right50px
• --gt
• lt/STYLEgt
• lt/HEADgt
• ?a tags (lt!-- ... --gt) µpa????? ??a pa?a??te????
  browsers p?? de? µp????? ?a d?aß?s??? CSS.
• ??t? ta tags e??a? s????a p?? ???ß??? t?? css
  code,
• ?a????????? browsers ?a d?aß?s??? ta CSS pa?? ta
  s????a
• ?a ltTITLEgt, ltMETAgt tags ?a? ta ?p????pa t?? HEAD
  µp????? ?a s???p?????? µe ?p??ad?p?te se??? µe t?
  STYLE

14
Inline Styles a

• ?a Inline styles e??????? ??a section µ?a?
  se??da? web.
• ?a??de??µa, ?st? ?t? ???ete ?a a?a?????sete ??t?
  st?? ????a se??da t?? d??t?a??? t?p??, a?t? ?
  a?a?????s? ?a e??a? ??a ???e? ?µ??e? µ???
• ? p?? ap?? ??s? e??a? ta inline styles
• say you want to put a special, attention-grabbing
  message on your main web page. You'll only need
  the message there for a week or so, so you don't
  want to add CSS rules to your linked style sheet
  or you embedded styles. You can use inline
  styles.

15
Inline Styles ß, s??ta??

• ltTAG STYLE"property1value1property2value2"gt...
  lt/TAGgt
• ????se?? inline style ?? d???se?? t??e?ta? ??
  t?µ?? µ?a? ?d??t?ta? STYLE
• To TAG ?a?????e? t? ?????µe ?a e??????µe
• ?a??de??µa t? inline style ?a t???se? t? s?et???
  ?e?µe??
• ltH1 STYLE"coloryellowbackground-colorred"gt?p
  ? ?atas?e??!ltBRgte??te ?a?? se µ?a
  eßd?µ?da.lt/H1gt
• ?? inline style ?a ep?d??se? µ??? st??
  s???e???µ??? ep??efa??da H1
• ??e? ?? ???e? H1 pa?aµ????? a?ep???aste?
• ?a stylesheets µp????? ?a e??a? ?a? eµf???asµ??a
  (cascading)
• ?.?. a? ta H1 ????? ???ste? ?? ?e?t?a??sµ??a se
  linked ? embedded style
• ??te t? pa?ap??? d???s? ?a ???????µ?se? a?t? t??
  ?d??t?ta (?a s??e??se? ?a e??a? ß?ßa?a ??t???? se
  ??????? background)

16
Styles ?a? Class a

• ? ?d??t?ta CLASS ????e? ta st???e?a (elements)
  p?? e??????ta? ap? t? CSS
• ?a??de??µa ?? ???ete ?a ???s?µ?p???sete t??
  a?a?????s? (ap? ta inline css) se p????? se??de?
  st?? d??t?a?? t?p?
• ?p??e?te ?a ???s?µ?p??e?ta? inline style ???e
  f????????ast??? d?s???e? ?? a??a???
• ??a??a?t??? µp??e?te ?a ???s?µ?p???sete t?
  .selector (te?e?a-slector)
• ?a??de??µa se ??a e??te???? style sheet ß??te t?
• .attention coloryellow
• background-colorred
• font-size 14pt
• St?? html page (p?? e??a? LINKed to this .css
  file) a? ß??ete
• ltP CLASS"attention"gt Check out this hot, new
  release!lt/Pgt

17
Styles ?a? Class ß

• O .selector de? af??? µ??? ta tag pa?a???f??
• ?p??e? ?a µpe? se ???? t?? e?d?? ta tags
• ??. se Headline tags ltH1gt - ltH6gt ?a? se ltDIVgt
• ?p??e?te ?a d?sete ?t? ???µa ???ete se .selector
• ??? ???s?µ?p???sete ?µ?? ?e?? ? ?efa?a?a

18
pa?ade??µa e?t???? css, ??a background

• BODY background-colorblue
• background-imageurl(image.gif)
• background-repeatrepeat-y
• background-attachmentfixed

19
pa?ade??µa e?t???? css, ??a links

• Alink colorblue
• background-colortransparent
• text-decorationnone
• Aactive colorblue
• background-colorred
• text-decorationnone
• Avisited colorltblue
• background-colortransparent
• text-decorationnone
• Ahover colorpurple
• background-colortransparent
• text-decorationunderline

20
pa?ade??µa e?t???? css, ??a pa?a???f???

• P color000066
• background-colortransparent
• text-indent.5in
• line-height1.5
• P A colorblue
• background-colorred
• text-decorationunderline
• .quote color000066
• background-colortransparent
• font-size11pt
• font-styleitlaic
• line-heightnormal

21
pa?ade??µa e?t???? css, ??a headings

• H1 color000066
• background-colortransparent
• margin-left100px
• text-aligncenter
• text-transformuppercase
• H2, H3 color000066
• background-colortransparent
• margin-left100px
• text-alignleft
• font-styleitalic
• H4 color000066
• background-colord7d7d7
• font-size12pt
• font-weightbold
• font-stylenormal

22
?a?ade??µata e?t???? ??a ??ste?

• UL LI color660000
• background-colortransparent
• list-style-typedisc
• list-style-imageurl(image.gif)
• UL LI LI color660000
• background-colortransparent
• list-style-typecircle
• OL LI color660000
• background-colortransparent
• list-style-typeupper-roman
• OL LI LI color660000
• background-colortransparent
• list-style-typelower-alpha

23
G?a pe??ss?te?e? p????f???e?

• HTMLGoodieshttp//htmlgoodies.com/beyond/css.html
  
• W3C Cascading Style Sheetshttp//www.w3.org/TR/RE
  C-CSS1
• Web Monkey Style Sheetshttp//www.hotwired.com/we
  bmonkey/98/15/index0a.html
• Microsofts IE supported Style Sheet
  Featureshttp//msdn.microsoft.com/library/default
  .asp?url/workshop/author/css/reference/attributes
  .asp