??CSS??

1
??CSS??
2
?????

• text-decoration none underline overline
  line-through blink
• text-transform none capitalize uppercase
  lowercase
• line-height
• text-indent
• text-align left right center justify
• vertical-align baseline sub super top
  text-top middle
• bottom text-bottom ltpercentagegt
  ltlengthgt
• letter-spacing
• word-spacing
• white-space
• direction ltr rtl

3
?????(text-decoration)

• ltp style"text-decoration none"gtText Decoration
  - nonelt/pgt
• ltp style"text-decoration underline"gtText
  Decoration - underlinelt/pgt
• ltp style"text-decoration overline"gtText
  Decoration - overlinelt/pgt
• ltp style"text-decoration line-through"gtText
  Decoration - line-throughlt/pgt
• ltp style"text-decoration blink"gtText
  Decoration - blinklt/pgt

4
????????(text-transform)

• ltp style"text-transform none"gttext transform -
  none lt/pgt
• ltp style"text-transform capitalize"gttext
  transform - capitalizelt/pgt
• ltp style"text-transform lowercase"gttext
  transform - lowercaselt/pgt
• ltp style"text-transform uppercase"gttext
  transform - uppercaselt/pgt

5
????(line-height)

• ltp style"line-height normal"gt
• Line height of paragraph is normal. ltbr /gt
• Line height of paragraph is normal. lt/pgt
• ltp style"line-height 2.5"gt
• Line height of paragraph is 2.5. ltbr /gt
• Line height of paragraph is 2.5. lt/pgt
• ltp style"line-height 2em"gt
• Line height of paragraph is 2em. ltbr /gt
• Line height of paragraph is 2em. lt/pgt
• ltp style"line-height 220"gt
• Line height of paragraph is 220. ltbr /gt
• Line height of paragraph is 220. lt/pgt

6

• span line-height 2em font-size 28px border
  1px solid blue
• em3 line-height 3em font-size 16px border
  1px solid blue
• ...
• lthr /gtltspangtLine height is 2em. Font size is
  28px.lt/spangtlthr /gt
• ltspangtLine height is 2em. Font size is
  28px.lt/spangtlthr /gt
• ltspan id"em3"gtLine height is 3em. Font size is
  16px.lt/spangtlthr /gt
• ltspan id"em3"gtLine height is 3em. Font size is
  16px.lt/spangtlthr /gt

7
???????(text-indent)
ltp style"text-indent 0"gt
ltp style"text-indent 3.5em"gt
ltp style"text-indent 25"gt
ltp style"text-indent -36px"gt
8
??????(text-align)
ltp style"text-align left"gt
ltp style"text-align right"gt
ltp style"text-align center"gt
ltp style"text-align justify"gt
9
????(vertical-align)

• ?????
• baseline sub super
• ??????
• text-top middle text-bottom
• ????
• top bottom

http//www.jb51.net/css/10337.html
10
vertical-align Example
ltstyle type"text/css"gt preface
background-colorcfc line-height2 font-size1
8pt fb1 vertical-align middle fb2
vertical-align text-bottom lt/stylegt
ltdiv id"preface"gt ???????????????ltimg
src"fb.png" id"fb1" /gt?,??????????(Fuji TV)ltimg
src"fb.png" id"fb2" /gt????lt/divgt
11

• p line-height 60px
• img width 40px height 40px
• baseline.ltimg src"fish.jpg" alt""
  style"vertical-align baseline" /gt

12
????(letter-spacing)

• ltp style"letter-spacing normal"gtLetter spacing
  is normal.lt/pgt
• ltp style"letter-spacing 6px"gtLetter spacing is
  6px.lt/pgt
• ltp style"letter-spacing 0.6em"gtLetter spacing
  is 0.6em.lt/pgt
• ltp style"letter-spacing -0.1em"gtLetter spacing
  is -0.1em.lt/pgt

13
????(word-spacing)

• ltp style"word-spacing normal"gtWord spacing is
  normal.lt/pgt
• ltp style"word-spacing 16px"gtWord spacing is
  16px.lt/pgt
• ltp style"word-spacing 1.6em"gtWord spacing is
  1.6em.lt/pgt
• ltp style"word-spacing -0.8em"gtWord spacing is
  -0.8em.lt/pgt

14
ltp style"white-space normal"gt White space is
normal. lt/pgt ltp style"white-space
pre"gt White space is
pre. lt/pgt ltp style"white-space nowrap"gt
White space is nowrap. White space
is nowrap. White space is nowrap.
lt/pgt ltp style"white-space pre-wrap"gt White
space is pre-wrap. White space is
pre-wrap. White space is
pre-wrap. lt/pgt ltp style"white-space
pre-line"gt White space is
pre-line. White space is pre-line. White
space is pre-line. lt/pgt
???? (white-space)