Internetové publikování Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111)

Internetové publikování CSS – 2. část

N Internetové publikování 5. CSS – 2. část Cascading Style Sheets »Formátování HTML dokumentu, které je více či méně oddělené od obsahu »Způsoby implementace »Specifikace stylu pro každý element zvlášť »Definice stylu v hlavičce dokumentu »Připojení stylu z externího souboru

N Internetové publikování 5. CSS – 2. část Styl v hlavičce HTML »Definice stylu pro jediný HTML soubor »Vlastní definice se uzavírá do komentářů, aby se zamezilo intrepretaci ve starších prohlížečích <!--... definice stylu... -->

N Internetové publikování 5. CSS – 2. část Styl v externím souboru »Umožňuje využití jedné definice stylu mnoha HTML dokumenty......

N Internetové publikování 5. CSS – 2. část Styl u každého elementu »Atribut style »Odporuje filozofii CSS, používat vyjímečně... Tento jediný odstavec bude formátován podle definice....

N Internetové publikování 5. CSS – 2. část Opakování - struktura definice CSS »Selektor »Doposud jsme znali pouze typový selektor »odpovídá názvu elementu »platí pro všechny elementy daného typu selektor { vlastnost1: hodnota; vlastnost2: hodnota;... vlastnostN: hodnota }

N Internetové publikování 5. CSS – 2. část Seskupování selektorů Selektory se stejnými deklaracemi je možné sloučit, takže následující zápis h1 { font-family: sans-serif } h2 { font-family: sans-serif } h3 { font-family: sans-serif } je ekvivalentní zápisu: h1, h2, h3 { font-family: sans-serif } POZOR – neplést z dalšími typy selektorů při seskupování je oddělovačem vždy čárka

N Internetové publikování 5. CSS – 2. část Další selektory »Univerzální selektor »* - týká se každého elementu v dokumentu »Např: »* {color: blue} »Všechny elementy budou mít nastaveno modré písmo

N Internetové publikování 5. CSS – 2. část Další selektory - třída »Třída = podskupina elementů »V HTML definována atributem class »Např. modry text »Definice v CSS pro třídu: (element).třída { vlastnost1: hodnota; vlastnost2: hodnota;... vlastnostN: hodnota }.modry { color: blue; }

N Internetové publikování 5. CSS – 2. část Příslušnost k více třídám »Jednotlivé třídy odděleny mezerami »Např. modry text »Definice v CSS pro třídu: p.modry {color: blue;} p.inverzni {background-color: blue;} Selektor pro element patřící do obou tříd p.modry.inverzni {background-color: blue; color: yellow;}

N Internetové publikování 5. CSS – 2. část Další selektory – id elementu »id = identifikátor jednoho konkrétního elementu na stránce »V HTML definován atributem id »Např. modry text »Definice v CSS pro id: #id { vlastnost1: hodnota; vlastnost2: hodnota;... vlastnostN: hodnota } #1odstavec { color: blue; }

N Internetové publikování 5. CSS – 2. část Pseudotřídy »Odkazy »a:link – dosud nenavštívený odkaz »a:visited – navštívený odkaz »a:active – link je aktivní (vybrán klávesou TAB) »a:hover – na odkaz se ukazuje myší

N Internetové publikování 5. CSS – 2. část Dědění vlastností p { color: red } Červený text »I slovo 'text' v příkladě se zobrazí červeně, protože tuto vlastnost zdědil od svého rodičovského elementu

N Internetové publikování 5. CSS – 2. část Vlastnosti seznamů VlastnostPopisHodnoty list-style-imagenastaví zvolený obrázek jako odrážku seznamu none url list-style-positionpoloha odrážkyinside outside list-style-typetyp odrážky-číslovánínone disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha

N Internetové publikování 5. CSS – 2. část Výška a šířka elementu »height: délková míra »width: délková míra »Uplatní se pouze na blokové elementy

N Internetové publikování 5. CSS – 2. část Zarovnání »Zarovnání textu v elementu »text-align »Zarovnání elementu na střed »margin-left: auto; »margin-right: auto; »Zarovnání elementu doprava »margin-left: auto; »margin-right: 0px;

N Internetové publikování 5. CSS – 2. část Vertikální zarovnání »baseline »Align the baseline of the box with the baseline of the parent box. If the box doesn't have a baseline, align the bottom margin edge with the parent's baseline. »middle »Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent. »sub »Lower the baseline of the box to the proper position for subscripts of the parent's box. (This value has no effect on the font size of the element's text.) »super »Raise the baseline of the box to the proper position for superscripts of the parent's box. (This value has no effect on the font size of the element's text.) »text-top »Align the top of the box with the top of the parent's content area (see ). »text-bottom »Align the bottom of the box with the bottom of the parent's content area (see ). » »Raise (positive value) or lower (negative value) the box by this distance (a percentage of the 'line-height' value). The value '0%' means the same as 'baseline'. » »Raise (positive value) or lower (negative value) the box by this distance. The value '0cm' means the same as 'baseline'. »top »Align the top of the aligned subtree with the top of the line box. »bottom »Align the bottom of the aligned subtree with the bottom of the line box.

N Internetové publikování 5. CSS – 2. část Nástroje pro snazší tvorbu CSS »TopStyle Lite 3.10 »