KASKÁDOVÉ STYLY. 2 2. SYNTAXE STYLŮ PRAVIDLO DEFINUJÍCÍ STYL SE SKLÁDÁ Z NEJMÉNĚ TŘÍ ZÁKLADNÍCH ČÁSTÍ: * SELEKTOR ZNAČKY * SLOŽENÉ ZÁVORKY A V NICH JE.

Prezentace na téma: "KASKÁDOVÉ STYLY. 2 2. SYNTAXE STYLŮ PRAVIDLO DEFINUJÍCÍ STYL SE SKLÁDÁ Z NEJMÉNĚ TŘÍ ZÁKLADNÍCH ČÁSTÍ: * SELEKTOR ZNAČKY * SLOŽENÉ ZÁVORKY A V NICH JE."— Transkript prezentace:

1 KASKÁDOVÉ STYLY

2 2 2. SYNTAXE STYLŮ PRAVIDLO DEFINUJÍCÍ STYL SE SKLÁDÁ Z NEJMÉNĚ TŘÍ ZÁKLADNÍCH ČÁSTÍ: * SELEKTOR ZNAČKY * SLOŽENÉ ZÁVORKY A V NICH JE * STŘEDNÍKEM ODDĚLENÝ SEZNAM VLASTNOSTÍ V DEFINICI STYLU NEJSOU ROZLIŠOVÁNA MALÁ A VELKÁ PÍSMENA, OVŠEM STRIKTNÍ PRAVIDLA ŘÍKAJÍ, ŽE SELEKTORY JSOU PSÁNY MALÝMI PÍSMENY, A STEJNĚ TAK I JEJICH HODNOTY. selektor_značky { parametr: hodnota;}

3 3 SELEKTORY PRO URČENÍ ČÁSTI DOKUMENTU, JEJÍŽ VZHLED BUDE UPRAVOVÁN PODLE STYLU, SE POUŽÍVAJÍ SELEKTORY. VÝBĚR PRVKU PODLE JMÉNA VÝBĚR VŠECH PRVKŮ VÝBĚR PRVKU PODLE ATRIBUTU „id“ VÝBĚR PRVKU PODLE TŘÍDY VÝBĚR PRVKU PODLE JEHO UMÍSTĚNÍ

4 4 VÝBĚR PRVKU PODLE JMÉNA p {…………….} h1 {……………} TAKOVÝ ZÁPIS PROHLÍŽEČI ŘÍKÁ : „URČITÝM ZPŮSOBEM UPRAV VZHLED VŠECH PRVKŮ S ODPOVÍDAJÍCÍM NÁZVEM, KTERÉ NALEZNEŠ V DOKUMENTU“.

5 5 POKUD POTŘEBUJETE NASTAVIT SPOLEČNOU VLASTNOST PRO VÍCE SELEKTORŮ, TYTO SE PAK UVÁDÍ ZA SEBE ODDĚLENÉ ČÁRKOU TAK, JAK UKAZUJE NÁSLEDUJÍCÍ PŘÍKLAD. V NĚM JE UKÁZÁNO, JAK NADPISY 1. AŽ 6. ÚROVNĚ BUDOU VYCENTROVÁNY NA STŘED ŘÁDKU. h1, h2, h3, h4, h5, h6 { text-align: center; }

6 6 VÝBĚR VŠECH PRVKŮ * {…………….} UNIVERZÁLNÍ SELEKTOR – URČUJE, ŽE UVEDENÝ VZHLED BUDE APLIKOVÁN NA VŠECHNY ELEMENTY V DOKUMENTU BEZ ROZDÍLU.

7 7 IDENTIFIKÁTORY SE POUŽÍVAJÍ TEHDY, POKUD SE DANÝ PRVEK VYSKYTUJE NA STRÁNCE POUZE JEDNOU (NA ROZDÍL OD TŘÍD, KTERÉ JE MOŽNÉ POUŽÍVAT NA STRÁNCE VÍCEKRÁT). POUŽÍVAJÍ SE NAPŘ. PRO DEFINICI POZICOVANÝCH PRVKŮ NA STRÁNCE (HLAVIČKA, NAVIGACE, TĚLO, PATIČKA, ATP.). JEJICH NÁZEV SI MŮŽE UŽIVATEL VYTVOŘIT SÁM, PŘED NÍM VŠAK VŽDY MUSÍ BÝT ZNAK # (ZAHRÁDKA, HASH), VIZ UKÁZKA: VÝBĚR PRVKU PODLE ATRIBUTU „id“ #hlavicka { position: absolute; top: 0px; left: 0px; width: 30%; }

8 8 Z PŘEDCHOZÍHO ODSTAVCE JIŽ VÍTE, ŽE SE NA KONKRÉTNÍ STRÁNCE MŮŽE DANÝ IDENTIFIKÁTOR VYSKYTOVAT POUZE JEDNOU. JAK SE TEDY ZAPÍŠE DO STRÁNKY? POMOCÍ PARAMETRU id="nazev_identifikatoru", KTERÝ JE MOŽNÉ PSÁT KE VŠEM ZNAČKÁM, NEJČASTĚJI ALE K PÁROVÉ ZNAČCE, VIZ NÁSLEDUJÍCÍ UKÁZKA:... ZNAČKOU (TZV. KONTEJNEREM) SE TEDY ZADEFINUJE OBLAST S VLASTNOSTMI DEFINOVANÝMI POD PŘÍSLUŠNÝM IDENTIFIKÁTOREM POMOCÍ CSS. IDENTIFIKÁTORY SE NEPOUŽÍVAJÍ JEN V SOUVISLOSTI S CSS, ALE MNOHDY JE MŮŽETE NALÉZT U SKRIPTŮ (NAPŘ. JAVASCRIPTŮ), FLASHOVÝCH PRVKŮ, ATP. VÝBĚR PRVKU PODLE ATRIBUTU „id“

9 9 ČASTO SE STÁVÁ, ŽE POTŘEBUJEME UPRAVIT VZHLED JENOM JEDNOHO URČITÉHO PRVKU V DOKUMENTU (NAPŘ. POUZE PRVNÍHO ODSTAVCE). KDYBYCHOM JAKO SELEKTOR POUŽILI p, ÚPRAVA VZHLEDU BY SE TÝKALA VŠECH ODSTAVCŮ. PRO JEDNOZNAČNÉ URČENÍ PRVKU POUŽIJEME HODNOTU ATRIBUTU „id“ (IDENTIFIKÁTORU). HODNOTA „id“ MUSÍ BÝT UNIKÁTNÍ !! Ukákový příklad <!-- #prvni {color: red} --> Text prvniho odstavce. Text druhého odstavce

10 10 NYNÍ SE ZAMĚŘÍME NA TZV. TŘÍDY STYLŮ, KTERÉ UMOŽŇUJÍ VE STYLOPISECH VYTVÁŘET NĚKOLIK RŮZNÝCH STYLŮ PRO JEDINOU ZNAČKU, PŘIČEMŽ STYLY SE LIŠÍ JMÉNEM SVÉ TŘÍDY. SETKÁVÁME SE TEDY S TZV. REGULÁRNÍMI TŘÍDAMI, KTERÉ MOHOU BÝT POUŽITY NAPŘ. V TEXTU, KDE JE POTŘEBA POUŽÍVAT RŮZNÉ STYLY ODSTAVCŮ. NÁZEV TŘÍDY SE OD SELEKTORU ODDĚLUJE (BEZ MEZER) TEČKOU. VÍCE PAK UKAZUJE NÁSLEDUJÍCÍ UKÁZKA S DEFINICÍ REGULÁRNÍ TŘÍDY. p.blok { text-align: justify; font-size: 1em; font-family: serif; } p.definice { text-align: center; font-style: italic; } VÝBĚR PRVKU PODLE TŘÍDY

11 11 PŘÍSLUŠNOU TŘÍDU PAK V HTML KÓDU POUŽIJETE POMOCÍ PARAMETRU class="název_třídy" (UVEDENÉHO U ZNAČKY, KDE BYLA REGULÁRNÍ TŘÍDA DEFINOVÁNA NAPŘ. TEDY ). REGULÁRNÍ TŘÍDU LZE POUŽÍT POUZE U TÉ ZNAČKY, U NÍŽ BYLA PŘÍSLUŠNÝM SELEKTOREM DEFINOVÁNA. MŮŽEME TÉŽ DEFINOVAT TZV. GENERICKÉ TŘÍDY, KTERÉ SE NEVZTAHUJÍ KE KONKRÉTNÍ ZNAČCE A JE MOŽNÉ JÍ POUŽÍT U JAKÉKOLI ZNAČKY, COŽ UKAZUJE I NÁSLEDUJÍCÍ PŘÍKLAD. U GENERICKÉ TŘÍDY NENÍ DEFINOVÁN ŽÁDNÝ SELEKTOR A DEFINUJE SE OPĚT PŘED NÁZVEM TŘÍDY TEČKOU..kurziva { font-style: italic; }

12 12 TUTO GENERICKOU TŘÍDU PAK V HTML KÓDU POUŽIJETE STEJNÝM ZPŮSOBEM JAKO TŘÍDU REGULÁRNÍ (NAPŘ. TEDY NEBO TÉŽ U JINÉ ZNAČKY ). U KASKÁDOVÝCH STYLŮ EXISTUJÍ JEŠTĚ TZV. PSEUDOTŘÍDY, KTERÉ SLOUŽÍ K DEFINICI STYLU ZOBRAZENÍ PRO URČITÉ STAVY ZNAČEK. JMÉNO ZNAČKY JE ODDĚLENO OD NÁZVU PSEUDOTŘÍDY DVOJTEČKOU A NÁZEV TŘÍDY JE JIŽ PŘEDDEFINOVÁN, COŽ NÁM NEUMOŽŇUJE DALŠÍ PSEUDOTŘÍDY VYTVÁŘET. NĚKTERÉ PSEUDOTŘÍDY SI ZDE UVEDEME, OSTATNÍ JE PAK MOŽNÉ NAJÍT V REFERENCI CSS NAPŘ. NA WWW.W3C.ORG.WWW.W3C.ORG U ODKAZŮ SE POUŽÍVAJÍ TYTO PSEUDOTŘÍDY: a:link - pro nenavštívený odkaz a:active - pro odkaz, který je právě vyvoláván a:visited - pro navštívený odkaz a:hover - pro odkaz, nad nímž právě přejíždíte kurzorem myši a:focus - pro odkaz, který byl nastaven pomocí klávesy [TAB] (tabulátor)

13 13 DALŠÍ DVĚ PSEUDOTŘÍDY SE POUŽÍVAJÍ U ODSTAVCŮ: p:first-line - pro zvýraznění prvního řádku odstavce p:first-letter - pro zvýraznění prvního znaku odstavce (např. iniciála) CSS2 DEFINUJE JEŠTĚ NEKOLIK TYPŮ PSEUDOTŘÍD (NAPŘ. JAZYKOVOU PSEUDOTŘÍDU :lang(jazyk), RODIČOVSKOU PSEUDOTŘÍDU :first-child, MÍSTO PŘED :before A ZA :after, ATP.)

14 14 VÝBĚR PRVKU PODLE TŘÍDY NĚKDY JE POTŘEBA PRO VÍCE PRVKŮ, KTERÉ SPOLU NAVENEK NIJAK NESOUVISÍ, URČIT STEJNOU VLSTNOST ZOBRAZENÍ. Ukákový příklad <!--.modre {color: blue} /* obsah všech prvků třídy "modré" se zobrazí modře (první nadpis a první odstavec) */ h1.modre {......} /* upravujeme vzhled prvku h1 patřícího do třídy "modré" (pouze první nadpis) */ p.modre {.......} /* upravujeme vzhled prvku p patřícího do třídy "modré" (pouze první odstavec)*/ --> První nadpis. Druhý nadpis. Text prvního odstavce. Text druhého odstavce.

15 15 VÝBĚR PRVKU PODLE JEHO UMÍSTĚNÍ Ukákový příklad <!-- h1 em {color: red} p em {color: blue} --> V nadpisu je jedno významné slovo. Text odstavce obsahuje další důležité slovo. OZNAČUJE URČITÉ PRVKY PODLE JEJICH UMÍSTĚNÍ. p a em {……} - VYBERE OBA PRVKY

16 16 ZAJÍMAVÝM PRVKEM JSOU TZV. KONTEXTOVÉ SELEKTORY, KTERÉ ZARUČÍ POUŽITÍ KONKRÉTNÍHO STYLU V OKAMŽIKU, KDY SE V KÓDU STRÁNKY OBJEVÍ PŘÍSLUŠNÁ SEKVENCE, NAPŘ.: h2 em { color: red; } VÝBĚR PRVKU PODLE JEHO UMÍSTĚNÍ

17 End of Lecture Good Night.