KASKÁDOVÉ STYLY 1. 2 PRVNÍ STANDARD (CSS1) BYL PŘEDSTAVEN V ROCE 1996, PROTO STARŠÍ PROHLÍŽEČE ("ČTYŘKOVÉ" VERZE) IE A NN KASKÁDOVÉ STYLY NEPODPORUJÍ.

Prezentace na téma: "KASKÁDOVÉ STYLY 1. 2 PRVNÍ STANDARD (CSS1) BYL PŘEDSTAVEN V ROCE 1996, PROTO STARŠÍ PROHLÍŽEČE ("ČTYŘKOVÉ" VERZE) IE A NN KASKÁDOVÉ STYLY NEPODPORUJÍ."— Transkript prezentace:

1 KASKÁDOVÉ STYLY 1

2 2 PRVNÍ STANDARD (CSS1) BYL PŘEDSTAVEN V ROCE 1996, PROTO STARŠÍ PROHLÍŽEČE ("ČTYŘKOVÉ" VERZE) IE A NN KASKÁDOVÉ STYLY NEPODPORUJÍ. SOUČASNÉ PROHLÍŽEČE JIŽ KASKÁDOVÉ STYLY PODPORUJÍ, OVŠEM DÍKY KONKURENČNÍMU BOJI NĚKTERÉ VLASTNOSTI FUNGUJÍ POUZE V NĚKTERÝCH PROHLÍŽEČÍCH A JINDE JSOU IGNOROVÁNY. CSS2 BYLO UVEDENO V ROCE 1998, OVŠEM PODPORUJÍ JEJ POUZE NĚKTERÉ NOVĚJŠÍ PROHLÍŽEČE.

3 3 U STYLOPISŮ (BUDE VYSVĚTLENO V DALŠÍ KAPITOLE) JE VHODNÉ POUŽÍVAT KOMENTÁŘŮ, KTERÉ SE LIŠÍ OD KOMENTÁŘŮ V HTML. /* komentářová poznámka */ NEJČASTĚJI SLOUŽÍ PRO POPSÁNÍ NASTAVENÍ PŘÍSLUŠNÉ ZNAČKY, TŘÍDY ČI PSEUDOTŘÍDY, COŽ SE UPLATNÍ PŘI POZDĚJŠÍ MODIFIKACI TĚCHTO PRVKŮ NEBO NAPŘ. PŘI LADĚNÍ STYLU.

4 4 NA INTERNETU JE SPOUSTA NÁSTROJŮ, KTERÉ UMOŽŇUJÍ VYTVÁŘET STYL VELMI POHODLNÝM ZPŮSOBEM. JEDEN TAKOVÝ PROGRAM VÁM ZDE NABÍZÍM. JMENUJE SE KM CSS EDITOR OD MIRKA KINTRA, KTERÝ JE ŠÍŘEN JAKO GNU LICENCE. MŮŽETE SI JEJ TEDY ZDARMA STÁHNOUT. NA ADRESE MUJWEB.ATLAS.CZ/WWW/KMTOOLS, JSOU TÉŽ ZDROJOVÉ KÓDY V OBJECT PASCALU.STÁHNOUTMUJWEB.ATLAS.CZ/WWW/KMTOOLS TO SAMOZŘEJMĚ NEVYLUČUJE TVORBU STYLŮ NAPŘ. V POZNÁMKOVÉM BLOKU (NOTEPAD) ČI JAKÉMKOLI ASCII EDITORU. NĚKDY JE PRÁVĚ TENTO ZPŮSOB RYCHLEJŠÍ, NEŽ POUŽITÍ NĚJAKÉHO SPECIALIZOVANÉHO

5 5 1. DEFINICE KASKÁDOVÝCH STYLŮ KASKÁDOVÝ STYL SE DEFINUJE TŘEMI ZPŮSOBY: * IN-LINE ZÁPISEM – ŘÁDKOVÝ STYL * STYLOPISEM – INTERNÍ STYLOVÝ DOKUMENT * EXTERNÍM STYLOPISEM – EXTERNÍ STYLOVÝ DOKUMENT

6 6 IN-LINE ZÁPIS SLOUŽÍ PRO NASTAVENÍ PARAMETRŮ KONKRÉTNÍ ZNAČKY. POKUD TEDY POTŘEBUJETE NASTAVIT POUZE KONKRÉTNÍ ZNAČKU, POUŽIJE SE U NÍ PARAMETR STYLE=" ". HODNOTOU TOHOTO PARAMETRU JE PAK SEZNAM ATRIBUTŮ, KTERÉ TUTO ZNAČKU OVLIVNÍ.... a) ŘÁDKOVÝ STYL

7 7 Ukákový příklad Text odstavce. ŘÁDKOVÝ STYL

8 8 VYTVOŘTE INTERNETOVOU STRÁNKU POMOCÍ ŘÁDKOVÉHO STYLU CSS. POZADÍ : MODRÉ NADPIS: H1 – ŽLUTÝ TEXT PRVNÍHO ODSTAVCE : ITALIC, X-LARGE, ČERVENÝ TEXT DRUHÉHO ODSTAVCE : OBLIQUE, SMALER, BÍLÝ TEXT TŘETÍHO ODSTAVCE: NORMAL, LARGER, ŠEDIVÝ CVIČENÍ

9 9 STYLOPIS SE DEKLARUJE V HLAVIČCE HTML STRÁNKY PÁROVOU ZNAČKOU. UVNITŘ TÉTO ZNAČKY JE PAK UVEDEN NÁZEV ZNAČKY (TZV. SELEKTOR ZNAČKY - BUDE POPSÁNO DÁLE), KTEROU NASTAVUJETE A VE SLOŽENÝCH ZÁVORKÁCH JE SEZNAM ATRIBUTŮ. JEDNOTLIVÉ ATRIBUTY S HODNOTAMI SE ODDĚLUJÍ STŘEDNÍKEM! STYLOPIS SE POUŽÍVÁ V PŘÍPADĚ, KDY CHCETE NASTAVIT SPOLEČNÉ VLASTNOSTI ZNAČEK NA JEDNÉ WWW STRÁNCE. <!-- p { color: red; } h1 { font-size: 16pt; } --> b) INTERNÍ STYLOVÝ DOKUMENT

10 10 Ukákový příklad <!-- h1 {color: red} --> Nadpis první úrovně. Nadpis druhé úrovně. INTERNÍ STYLOVÝ DOKUMENT

11 11 CVIČENÍ VYTVOŘTE INTERNETOVOU STRÁNKU POMOCÍ INTERNÍHO CSS. POZADÍ : MODRÉ NADPIS: H1 – ŽLUTÝ TEXT ODSTAVCE : ITALIC, X-LARGE, ČERVENÝ

12 12 EXTERNÍ STYLOPIS SE POUŽÍVÁ PRO VÍCE SPOLEČNÝCH WWW STRÁNEK, KDE JE PAK ZARUČEN STEJNÝ DESIGN VŠECH STRÁNEK, VE KTERÝCH JE DEFINICE TOHOTO STYLU. PRAKTICKY JE TO REALIZOVÁNO EXTERNÍM SOUBOREM (NAPŘ. MUJ_STYL.CSS), V NĚMŽ JE STYL DEFINOVÁN A WWW STRÁNKOU, DO NÍŽ JE CSS STYL "NALINKOVÁN". TOTO OVŠEM NEVYLUČUJE POUŽITÍ RŮZNÝCH VLASTNOSTÍ NA JEDNOTLIVÝCH STRÁNKÁCH. Soubor muj_styl.css p { color: red; } h1 { font-size: 16pt; } WWW stránka obsahuje tzv. "linkovací řádek": DO KONKRÉTNÍ WWW STRÁNKY JE PAK EXTERNÍ SOUBOR NALINKOVÁN. POKUD VYTVÁŘÍTE URČITOU STROMOVOU STRUKTURU VAŠICH WWW STRÁNEK, NEZAPOMEŇTE UVÉST SPRÁVNOU CESTU K TOMUTO EXTERNÍMU SOUBORU! c) EXTERNÍ STYLOVÝ DOKUMENT

13 13 Ukákový příklad Nadpis první úrovně. Nadpis druhé úrovně. Nadpis třetí úrovně. h3 {color: green} EXTERNÍ STYLOVÝ DOKUMENT

14 14 SESKUPOVÁNÍ h1 {color: red} h1{font-variant: small-caps} h2{color: blue} h1{font-family: serif} h2{font-variant: small-caps} h1 {color: red; font-variant: small-caps; font-family:serif} h2 {color: blue; font-variant: small-caps} h1, h2{font-variant: small-caps} h1{color: red; font-family: serif} h2{color: blue}

15 End of Lecture Good Night.