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

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

1 Internetové publikování Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111) e-mail: petr.zamostny@vscht.cz petr.zamostny@vscht.czpetr.zamostny@vscht.cz

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

3 N111031 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

4 N111031 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... -->

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

6 N111031 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....

7 N111031 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 }

8 N111031 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

9 N111031 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

10 N111031 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; }

11 N111031 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;}

12 N111031 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; }

13 N111031 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ší

14 N111031 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

15 N111031 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

16 N111031 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

17 N111031 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;

18 N111031 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 10.6.1). »text-bottom »Align the bottom of the box with the bottom of the parent's content area (see 10.6.1). » »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.

19 N111031 Internetové publikování 5. CSS – 2. část Nástroje pro snazší tvorbu CSS »TopStyle Lite 3.10 »http://www.bradsoft.com/download/index.asphttp://www.bradsoft.com/download/index.asp