ࡱ> YgX~( / 0DTimes New Romanܭ 0 0DArialNew Romanܭ 0 0" DWingdingsRomanܭ 0 0 @n?" dd@  @@`` PT|        $  0e0e     A@ A5% 8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E|| @ g4LdLd  0t ppp@ <4BdBd$t<4!d!d$t?  O =Kurz XHTML a CSS st 2: Popis vzhledu dokumentu za pomoc CSS - kaskdovch styloFF:Co je CSS a pro  je pou~vat?Cascading style sheets = kaskdov styly. Jazyk pro definici vzhledu webovch strnek. Jeden soubor se vzhledem pro vaechny dokumenty Mena objem XHTML dokumento Zrychl va web a zefektivn jeho sprvu! 4XL*$ *Co napYklad um CSS? Kdy~ chcete zmnit barvu psma a prohodit sloupce v layoutu vaaeho webu: V HTML: 1 hodina V XHTML/CSS: 5 minutNJ+V59.PYklad, kter u~ znme 4TYi zposoby zapisovn CSS !TVzhoru do praxe: definujeme barvu a pozad $BFonty - mnme pYednastaven font -:Zarovnn: doleva i doprava? 'Hrajeme si s odkazy ) Okraje a rme ky 5 Okraje a rme ky /6Jednotky: m mYme v CSS? 1POdliaen prvko dokumentu: identifiktory 9 @Odliaen prvko dokumentu: tYdy  b Dkuji za pozornost www.vzhurudolu.cz/xhtml-css62((,(/l "&(*. 0 2 6:  ` ̙33` ` ff3333f` 333MMM` f` f` 3>?" dd@ x?" dd@  " @ ` n?" dd@   @@``PR    @ ` ` p>>0 e(  R  s *`   6Y `  XKlepnutm lze upravit styl pYedlohy nadpiso.- -  0   Klepnutm lze upravit styly pYedlohy textu Druh roveH TYet roveH tvrt roveH Pt roveH+    _  0 ``  =*  0 `   ?*  s *D `   K*"H  0޽h ? ̙33H0 0(    0ԗ P    Y*   0D     * [* d  c $ ?  L  0*  @ L Klepnutm lze upravit styly pYedlohy textu Druh roveH TYet roveH tvrt roveH Pt roveH+    _  6d9 `P   Y*   6d9 `   [* H  0޽h ? ̙33J @$r(  $R $ s *l $ C мP0  J l $ C 4Ѽ@   J H $ 0޽h ? ̙33  P0$(  0r 0 S Ӽ`  J r 0 S Ҽ J H 0 0޽h ? ̙33  `0(  x  c $Լ`  J x  c $Լ J H  0޽h ? ̙33  NFp(  x  c $Tռ`  J x  c $ռ J   <4ԼX  :XHTML: <h1>Vzhoru dolo</h1> CSS: h1 { color: blue; } Vsledek vprohl~e i: Vzhoru dolo(bV ,-)H  0޽h ? ̙33  (  x  c $tּ`  J x  c $ּ J v  <ּ  PYmo v XHTML: <h1 style= color: blue >Vzhoru dolo</h1> Stylopisem: <style> h1 { color: blue } </style> ... <h1>Vzhoru dolo</h1> V externm CSS souboru: <link rel="stylesheet" type="text/css" href= screen.css"> b(=9 >  H  0޽h ? ̙33   (  x  c $׼`   x  c $Tؼ    <׼  |V CSS souboru: h1 { background: blue; color: white; } V XHTML souboru: <h1>Vzhoru dolo</h1>J`'P ,H  0޽h ? ̙33  ,(  x  c $ؼ`   x  c $ټ    <4׼  TV CSS souboru: body { pro cel dokument font-family: Arial, sans-serif; bezpatkov psmo font-size: 0.8em; velikost fontu line-height: 1.4em; vaka Ydku } " ~;   H  0޽h ? ̙33   E(  x  c $ټ`   x  c $4ڼ     <tټd N  1V CSS souboru: h1 { text-align: center; } 22"  H  0޽h ? ̙33  VN(  x  c $ڼ`   x  c $Tۼ    0ڼ  NV CSS souboru: a { definice pro odkazy font-weight: bold; tu n psmo text-decoration: none; bez podtr~en color: red; erven barva } a:hover { po najet myai text-decoration: underline; se odkaz podtrhne }     3   H  0޽h ? ̙33X  (  x  c $S`   x  c $4J  H  0J   V CSS souboru: h1 { margin: 1em; vnja okraj padding: 1em; vnitYn okraj border: 1px solid red; rme ek } z~ P H  0޽h ? ̙33#   8K( w 8p 8 H?P`@p 8 H?p P p 8 H? x 8 c $J`  J x 8 c $TJ J  8 0JP  EPrvek dokumentu 8 NJ ?   .VnitYn okraj = padding  8 NJ ? 0  t Rme ek = border   8 NTJ ? p ~*Vnja okraj = marginH 8 0޽h ? ̙336    ^(   x   c $J`   x   c $J  &   0tJ `" Pixely, obrazov body padding: 20px; Em, tver ky, aYe malho  m font-size: 0.8em; Procenta: font-size: 50%; b}" H0H   0޽h ? ̙33   g_((  (x ( c $J`   x ( c $4J   ( 0J `& 7   ( 0J `  Atribut  id V tle dokumentu jenom jednou XHTML: <p id= paticka >Copyright 2006</p> CSS: #paticka { color: grey } Z-M6"P=H ( 0޽h ? ̙33/   HW(  Hx H c $`   x H c $   H 0 `& 7  H 0 `   Atribut  class V tle dokumentu mo~e bt vcekrt XHTML: <p class= cervenyText >Bla bla</p> CSS: .cervenyText { color: red; } Z5Q>" 2  H H 0޽h ? ̙33 tl0(  R  s *r  S TJ@    H  0޽h ? ̙330 x@(  R  3    ~  C tJ @    H  0޽h ? ̙330 P(  X  C      S J @    H  0޽h ? ̙330 `(  X  C      S J @    H  0޽h ? ̙330 p(  X  C      S TJ @    H  0޽h ? ̙330 (  X  C      S J @    H  0޽h ? ̙330 (  X  C      S J @    H  0޽h ? ̙330 (  X  C      S J @    H  0޽h ? ̙330  (   X   C       S J @    H   0޽h ? ̙330 (  X  C      S 4J @    H  0޽h ? ̙330 $(  $X $ C     $ S ۼ @    H $ 0޽h ? ̙330 ,(  ,X , C     , S Ѽ @    H , 0޽h ? ̙330 <(  <X < C     < S J @    H < 0޽h ? ̙33 0 L(  LX L C     L S 4 @    H L 0޽h ? ̙33r@(*dL"f,g/i2pkN8Dm$N<&PoDpEJr-`ZAtUhvZ _PID_GUIDAN{48EC9675-E83A-487A-B0BC-50_WMachalw@6A7111882B}- &y& "Arial Kww 0wf-0 0DArialNew Romanܭ 0 0" DWingdingsRomanܭ 0 0 @n?" dd@  @@`` PT|         $  0e0e     A@ A5% 8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E|| @ g4LdLd  0t ppp@ <4BdBdT<4!d!dT?  O =Kurz XHTML a CSS st 2: Popis vzhledu dokumentu za pomoc CSS - kaskdovch styloFF:Co je CSS a pro  je pou~vat?Cascading style sheets = kaskdov styly. Jazyk pro definici vzhledu webovch strnek. Jeden soubor se vzhledem pro vaechny dokumenty Mena objem XHTML dokumento Zrychl va web a zefektivn jeho sprvu! 4XL*$ *Co napYklad um CSS? Kdy~ chcete zmnit barvu psma a prohodit sloupce v layoutu vaaeho webu: V HTML: 1 hodina V XHTML/CSS: 5 minutNJ+V59.PYklad, kter u~ znme 4TYi zposoby zapisovn CSS !TVzhoru do praxe: definujeme barvu a pozad $BFonty - mnme pYednastaven font -:Zarovnn: doleva i doprava? 'Hrajeme si s odkazy ) Okraje a rme ky 5 Okraje a rme ky /6Jednotky: m mYme v CSS? 1POdliaen prvko dokumentu: identifiktory 9 @Odliaen prvko dokumentu: tYdy  b Dkuji za pozornost www.vzhurudolu.cz/xhtml-css62((,(/8  B:(  x  c $t `   x  c $Ԣ      <4   .PYmo ve zna ce v XHTML: <h1 style= color: blue >Vzhoru dolo</h1> Stylopisem v XHTML: <style> h1 { color: blue } </style> ... <h1>Vzhoru dolo</h1> V externm CSS souboru: <link rel="stylesheet" type="text/css" href= screen.css"> b(=9' >  H  0޽h ? ̙33rmI:}( / 0DTimes New Romanܭ 0 0DArialNew Romanܭ 0 0" DWingdingsRomanܭ 0 0 @n?" dd@  @@`` TV        $  0e0e     A@ A5% 8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E|| @ g4LdLd  0t ppp@ <4BdBdT<4!d!dT?  O =Kurz XHTML a CSS st 2: Popis vzhledu dokumentu za pomoc CSS - kaskdovch styloFF:Co je CSS a pro  je pou~vat?Cascading style sheets = kaskdov styly. Jazyk pro definici vzhledu webovch strnek. Jeden soubor se vzhledem pro vaechny dokumenty Mena objem XHTML dokumento Zrychl va web a zefektivn jeho sprvu! 4XL*$ *Co napYklad um CSS? Kdy~ chcete zmnit barvu psma a prohodit sloupce v layoutu vaaeho webu: V HTML: 1 hodina V XHTML/CSS: 5 minutNJ+V59.PYklad, kter u~ znme   !"#$%&'()*+,-./0123456789:;<=>?[ACDEFGHIJKLMNOPQRSTUVWmZ\]^_`abcdefBijkl@nopqrstuvwxyz{|}Root EntrydO)fC60h Current User4&SummaryInformation(TPowerPoint Document(XDocumentSummaryInformation8"@  @@`` PT|        $  0e0e     A@ A5% 8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E|| @ g4LdLd  0t ppp@ <4BdBd$t<4!d!d$t?  O =Kurz XHTML a CSS st 2: Popis vzhledu dokumentu za pomoc CSS - kaskdovch styloFF:Co je CSS a pro  je pou~vat?Cascading style sheets = kaskdov styly. Jazyk pro definici vzhledu webovch strnek. Jeden soubor se vzhledem pro vaechny dokumenty Mena objem XHTML dokumento Zrychl va web a zefektivn jeho sprvu! 4XL*$ *Co napYklad um CSS? Kdy~ chcete zmnit barvu psma a prohodit sloupce v layoutu vaaeho webu: V HTML: 1 hodina V XHTML/CSS: 5 minutNJ+V59.PYklad, kter u~ znme 4TYi zposoby zapisovn CSS !TVzhoru do praxe: definujeme barvu a pozad $BFonty - mnme pYednastaven font -:Zarovnn: doleva i doprava? 'Hrajeme si s odkazy ) Okraje a rme ky 5 Okraje a rme ky /6Jednotky: m mYme v CSS? 1POdliaen prvko dokumentu: identifiktory 9 @Odliaen prvko dokumentu: tYdy  b Dkuji za pozornost www.vzhurudolu.cz/xhtml-css62((,(/l "&(*. 0 2 6:r~\~9:}( / 0DTimes New Romanܭ   !#$%&'()*+,-./01235Oh+'0$ `h|   XHTML a CSSMachal Machal 149Microsoft PowerPointP@ug.@ ]@1760lG(oM  F& &&#TNPPH0D & TNPP &&TNPP    --- !------ !---&G&w@ k`ww 0wfV- &y& "Arial Ϭww 0wfV- . 2 d1 .------8X-- "Arial mww 0wfV- .2 bKurz XHTML a CSS $  .--Q1`-- "Arial Ьww 0wfV- .F2 oj*st 2: Popis vzhledu dokumentu za pomoc     . .*2 jCSS - kaskdovch styl   .--"SystemVfV !4-&TNPP &՜.+,D՜.+,     Ypedvdn na obrazovce edX Times New RomanArial 4TYi zposoby zapisovn CSS !TVzhoru do praxe: definujeme barvu a pozad $BFonty - mnme pYednastaven font -:Zarovnn: doleva i doprava? 'Hrajeme si s odkazy ) Okraje a rme ky 5 Okraje a rme ky /6Jednotky: m mYme v CSS? 1POdliaen prvko dokumentu: identifiktory 9 @Odliaen prvko dokumentu: tYdy ;! Kaskdovn   b Dkuji za pozornost www.vzhurudolu.cz/xhtml-css62((,(/ "&(*. 0 2 6:<  P(  Px P c $$`   x P c $   P 0 `& 7 H P 0D `V  CSS: .cervenyText { color: red; } .velkePismo { font-size: 2em; } XHTML: <p class= cervenyText velkePismo > Vzhoru dolo </p>@>4  H P 0޽h ? ̙33!0 T(  TX T C     T S  @    H T 0޽h ? ̙33r; ed!8<I( / 0DTimes New Romanܭ 0 0DArialNew Romanܭ 0 0" DWingdingsRomanܭ 0 0 @n?" dd@  @@`` \X"       $ !" 0e0e     A@ A5% 8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E|| @ g4LdLd  0t ppp@ <4BdBdT<4!d!dT?  O =FKurz XHTML a CSS st 2: Popis vzhledu dokumentu za pomoc CSS - kaskdovch styloFF:Co je CSS a pro  je pou~vat?Cascading style sheets = kaskdov styly. Jazyk pro definici vzhledu webovch strnek. Jeden soubor se vzhledem pro vaechny dokumenty Mena objem XHTML dokumento Zrychl va web a zefektivn jeho sprvu! 4XL*$ *Co napYklad um CSS? Kdy~ chcete zmnit barvu psma a prohodit sloupce v layoutu vaaeho webu: V HTML: 1 hodina V XHTML/CSS: 5 minutNJ+V59.PYklad, kter u~ znme 4TYi zposoby zapisovn CSS !TVzhoru do praxe: definujeme barvu a pozad $BFonty - mnme pYednastaven font -:Zarovnn: doleva i doprava? 'Hrajeme si s odkazy ) Okraje a rme ky 5 Okraje a rme ky /6Jednotky: m mYme v CSS? 1POdliaen prvko dokumentu: identifiktory 9 @Odliaen prvko dokumentu: tYdy ;! Kaskdovn  =" Kaskdovn   b Dkuji za pozornost www.vzhurudolu.cz/xhtml-css62((,(/ "&(*. 0 2 6:<>  P(  Px P c $$`   x P c $   P 0 `& 7 H P 0D `V  CSS: .cervenyText { color: red; } .velkePismo { font-size: 2em; } XHTML: <p class= cervenyText velkePismo > Vzhoru dolo </p>@>4  H P 0޽h ? ̙33  X(  Xx X c $4`   x X c $   X 0 `& 7 H X 0T `V  CSS: .cervenyText { color: red; } .velkePismo { font-size: 2em; } XHTML: <p class= cervenyText velkePismo > Vzhoru dolo </p>@>4  H X 0޽h ? ̙33"0  \(  \X \ C     \ S  @    H \ 0޽h ? ̙33rx;= !T>I( / 0DTimes New Romanܭ 0 0DArialNew Romanܭ 0 0" DWingdingsRomanܭ 0 0 @n?" dd@  @@`` \X"       $ !" 0e0e     A@ A5% 8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E|| @ g4LdLd  0t ppp@ <4BdBdT<4!d!dT?  O =FKurz XHTML a CSS st 2: Popis vzhledu dokumentu za pomoc CSS - kaskdovch styloFF:Co je CSS a pro  je pou~vat?Cascading style sheets = kaskdov styly. Jazyk pro definici vzhledu webovch strnek. Jeden soubor se vzhledem pro vaechny dokumenty Mena objem XHTML dokumento Zrychl va web a zefektivn jeho sprvu! 4XL*$ *Co napYklad um CSS? Kdy~ chcete zmnit barvu psma a prohodit sloupce v layoutu vaaeho webu: V HTML: 1 hodina V XHTML/CSS: 5 minutNJ+V59.PYklad, kter u~ znme 4TYi zposoby zapisovn CSS !TVzhoru do praxe: definujeme barvu a pozad $BFonty - mnme pYednastaven font -:Zarovnn: doleva i doprava? 'Hrajeme si s odkazy ) Okraje a rme ky 5 Okraje a rme ky /6Jednotky: m mYme v CSS? 1POdliaen prvko dokumentu: identifiktory 9 @Odliaen prvko dokumentu: tYdy ;! Kaskdovn  =" Kaskdovn   b Dkuji za pozornost www.vzhurudolu.cz/xhtml-css62((,(/ "&(*. 0 2 6:<>/  XW(  Xx X c $4`   x X c $   X 0 `& 7  X 0T `< CSS: .velkePismo { font-size: 2em; } .velkePismo.sedaBarva { color: grey; } XHTML: <p class= velkePismo sedaBarva > Vzhoru dolo </p>@K2     H X 0޽h ? ̙33r=4"k>I( / 0DTimes New Romanܭ 0 0DArialNew Romanܭ 0 0" DWingdingsRomanܭ 0 0 @n?" dd@  @@`` \X"       $ !" 0e0e     A@ A5% 8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E|| @ g4LdLd  0t ppp@ <4BdBdT<4!d!dT?  O =FKurz XHTML a CSS st 2: Popis vzhledu dokumentu za pomoc CSS - kaskdovch styloFF:Co je CSS a pro  je pou~vat?Cascading style sheets = kaskdov styly. Jazyk pro definici vzhledu webovch strnek. Jeden soubor se vzhledem pro vaechny dokumenty Mena objem XHTML dokumento Zrychl va web a zefektivn jeho sprvu! 4XL*$ *Co napYklad um CSS? Kdy~ chcete zmnit barvu psma a prohodit sloupce v layoutu vaaeho webu: V HTML: 1 hodina V XHTML/CSS: 5 minutNJ+V59.PYklad, kter u~ znme 4TYi zposoby zapisovn CSS !TVzhoru do praxe: definujeme barvu a pozad $BFonty - mnme pYednastaven font -:Zarovnn: doleva i doprava? 'Hrajeme si s odkazy ) Okraje a rme ky 5 Okraje a rme ky /6Jednotky: m mYme v CSS? 1POdliaen prvko dokumentu: identifiktory 9 @Odliaen prvko dokumentu: tYdy ;! Kaskdovn  =" Kaskdovn   b Dkuji za pozornost www.vzhurudolu.cz/xhtml-css62((,(/ "&(*. 0 2 6:<>r"5>( / 0DTimes New Romanܭ 0 0DArialNew Romanܭ 0 0" DWingdingsRomanܭ 0 0 @n?" dd@  @@`` dZ$       $ !"#$ 0e0e     A@ A5% 8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E|| @ g4LdLd  0t ppp@ <4BdBdT<4!d!dT?  O =Kurz XHTML a CSS st 2: Popis vzhledu dokumentu za pomoc CSS - kaskdovch styloFF:Co je CSS a pro  je pou~vat?Cascading style sheets = kaskdov styly. Jazyk pro definici vzhledu webovch strnek. Jeden soubor se vzhledem pro vaechny dokumenty Mena objem XHTML dokumento Zrychl va web a zefektivn jeho sprvu! 4XL*$ *Co napYklad um CSS? Kdy~ chcete zmnit barvu psma a prohodit sloupce v layoutu vaaeho webu: V HTML: 1 hodina V XHTML/CSS: 5 minutNJ+V59.PYklad, kter u~ znme 4TYi zposoby zapisovn CSS !TVzhoru do praxe: definujeme barvu a pozad $BFonty - mnme pYednastaven font -:Zarovnn: doleva i doprava? 'Hrajeme si s odkazy ) Okraje a rme ky 5 Okraje a rme ky /6Jednotky: m mYme v CSS? 1POdliaen prvko dokumentu: identifiktory 9 @Odliaen prvko dokumentu: tYdy ;!Sdru~ovn tYd ="Sdru~ovn tYd ?# Kaskdovn   b Dkuji za pozornost www.vzhurudolu.cz/xhtml-css62((,(/ "&(*. 0 2 6:<>@  UM0`(  `x ` c $`   x ` c $4   ` 0  `& 7  ` 0D `V  CSS: h1 { font-size: 2em; } .sedaBarva { color: grey; } XHTML: <h1 class= sedaBarva > Vzhoru dolo </p>@l7(t  H ` 0޽h ? ̙33#0 @d(  dX d C     d S  @    H d 0޽h ? ̙33r,6? ;QV#6W@