Prezentace se nahrává, počkejte prosím

Prezentace se nahrává, počkejte prosím

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

Podobné prezentace


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)

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

3 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

4 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

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

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

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

8 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

9 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

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

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

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

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

14 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

15 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

16 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

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

18 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.

19 N 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


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

Podobné prezentace


Reklamy Google