1. pro SOUE v PLZNI CSS Cascading Style Sheets Kaskádové styly předmět

2. pro SOUE v PLZNI Přehled VÝZNAM A HISTORIE ÚČEL, K ČEMU SLOUŽÍ A K ČEMU SE POUŽÍVÁ JAK SPOJIT CSS S DOKUMENTEM, CSS JEN PRO TISK A JINÁ ZAŘÍZENÍ CSS PRO ZÁKLADNÍ ČÁSTI STRÁNKY – ZÁKLADNÍ NASTAVENÍ STRÁNKY I STEJNÝ TAG, MŮŽE MÍT NA WEBU JINÝ VZHLED. JAK NA TO? VYSVĚTLENÍ CLASS A ID, KDE POUŽÍVAT A KDE NE JAK SI PŘIPRAVIT CSS PRO SNADNOU PRÁCI ŘEŠENÍ ČASTÝCH PROBLÉMŮ V CSS

3. pro SOUE v PLZNI HLAVNÍ KONCEPT CSS MAXIMÁLNÍ ODDĚLENÍ OBSAHU OD ZPŮSOBU PREZENTACE 4 ÚROVNĚ WEBOVÉ PREZENTACE NENÍ URČENO PRO MODIFIKACI VZHLEDU !

4. pro SOUE v PLZNI VÝHODY ODDĚLENÍ OBSAHU OD PREZENTACE PŘI ZMĚNĚ OBSAHU PREZENTACE JE STÁLE ZACHOVÁN CHARAKTERISTICKÝ STYL PREZENTACE, KTERÝ JE NA OBSAHU NEZÁVISLÝ. ČASTO JE DOKONCE V JINÉM SOUBORU. NAJEDNOU MŮŽEME PRO CELÝ DOKUMENT ZMĚNIT FONTY, ODSAZENÍ, ZAROVNÁNÍ TEXTU, BARVY, … VÍCE SOUBORŮ HTML, CELÁ ROZVĚTVENÁ WEBSTRÁNKA MŮŽE MÍT STYL V JEDNOM JEDINÉM SOUBORU. VYTVOŘÍTE JEDEN STYL PRO CELÝ WEB. NE VŽDY JE ODDĚLENÍ REÁLNĚ MOŽNÉ, ALE VŽDY JE DOBRÉ SE O TO SNAŽIT

5. pro SOUE v PLZNI PŘÍKLAD VÍCE ÚROVNÍ WEBOVÉ PREZENATCE FORMULÁŘ PRO REGISTRACI NOVÉ WEBSTRÁNKY PRO VYHLEDÁVÁNÍ V GOOGLU: https://www.google.com/webmasters/tools/submit-url-achttps://www.google.com/webmasters/tools/submit-url-ac OBSAH: TEXT HTML: STRUKTURA OBSAHU CSS: GRAFICKÁ PREZENTACE FORMULÁŘE JAVASCRIPT: FUNKČNOST FORMULÁŘE (KDYŽ NEZADÁME SPRÁVNÝ TEXT, VRÁTÍ NÁS)

6. pro SOUE v PLZNI JAK HTML URČUJE STRUKTURU DOKUMENTU? HTML TAGVÝZNAM ZDE JE BĚŽNÝ TEXT, ODSTAVEC ZDE SE POČÍTÁ S TÍM, ŽE UMÍSTÍTE DATA STRUKTUROVANÁ DO ŘÁDEK A SLOUPCŮ, A TADY SAMOZŘEJMĚ ODRÁŽKY, NĚJAKÝ SEZNAM OBSAHUJE PRVKY FORMULÁŘE, TEDY CELKEM FORMULÁŘ,,,, … NADPISY, NEJVÝZNAMNĚJŠÍ TÉMATA SPECIFICKÁ JEN PRO TUTO WEB STRÁNKU VÝZNAMOVÉ ZVÝRAZNĚNÍ, VĚTŠINOU SOUČÁST BĚŽNÉHO TEXTU, ALE VYZDVIHUJE VÝZNAMNÉ SLOVO UPROSTŘED TEXTU HTML SE STARÁ O STRUKTUROVÁNÍ VÝZNAMU - SÉMANTIKY

7. pro SOUE v PLZNI MÉNĚ ČASTO POUŽÍVANÉ HTML TAGY PRO VYTVÁŘENÍ OBSAHOVÉ STRUKTURY HTML TAGVÝZNAM VYJADŘUJE ŽE OBSAHEM TAGU JE ADRESA ŘÁDKOVÁ CITACE HLAVIČKA, NÁZVY NAPŘ. SLOUPCŮ TABULEK PATIČKA, UKONČUJE TABULKU JAKO JEJÍ PATIČKA ZMIŇUJE CITACE NEBO ODKAZY NA JINÉ ZDROJE OZNAČUJE TEXT, KTERÝ MÁ BÝT ZADÁN KLÁVESNICÍ, NAPŘÍKLAD KDYŽ JE NA WEB STRÁNCE NĚJAKÝ NÁVOD

8. pro SOUE v PLZNI A TEĎ OBRÁCENĚ JAKÉ HTML TAGY NEPŘIDÁVAJÍ VÝZNAM? HTML TAGVÝZNAM ČÁST TEXTU – PRO NAVĚŠENÍ CSS (POUŽÍVAT MÉNĚ) ČÁST TEXTU – PRO NAVĚŠENÍ CSS (POUŽÍVAT MÉNĚ) FORMÁTUJE TEXT, POUŽIJ RADĚJI CSS (ÚPLNĚ SE VYHNOUT) FORMÁTUJE TEXT, POUŽIJ RADĚJI CSS (ÚPLNĚ SE VYHNOUT) FORMÁTUJE TEXT, POUŽIJ RADĚJI CSS (ÚPLNĚ SE VYHNOUT)

9. pro SOUE v PLZNI JEŠTĚ JEDNOU SLOVY: HTML URČUJE: STRUKTURU A VÝZNAM POUŽITÉHO TEXTU NA STRÁNCE. TEDY ŘÍKÁ: „TOTO JE NÁZEV, TOTO ODSTAVEC, TOTO JE SEZNAM A TOTO ODKAZ NA DALŠÍ DOKUMENT“ CSS URČUJE: VELIKOST, BARVU, FONT PÍSMA, ZAROVNÁNÍ TEXTU, BARVU POZADÍ, POUŽITÉ ŘEZY PÍSMA, VELIKOST RÁMEČKŮ, … „TEDY TENTO TEXT JE ZELENÝ, TENTO ŽLUTÝ“

10. pro SOUE v PLZNI ZOBRAZOVAČE OBSAHU WEB STRÁNKY: PRO ZJEDNODUŠENÉ ZOBRAZENÍ A VÝPISY STRÁNEK – NEPOUŽIJÍ CSS, ALE AUTOMATICKY PRO VŠECHNY H1, H2, P, A, UL, … POUŽIJÍ VLASTNÍ GRAFICKÉ VYJÁDŘENÍ (NĚKTERÝ NÁZEV PODTRHNE, JINÝ HO JEN ZVÝRAZNÍ ATD.) ROBOTI VYHLEDÁVAČŮ: NAPŘÍKLAD GOOGLEBOT: PROCHÁZÍ WEBSTRÁNKAMI A PODLE STRUKTUROVANÉHO TEXTU POZNAJÍ CO JE NA WEBSTRÁNCE NEJDŮLEŽITĚJŠÍ A PODLE TOHO WEBSTRÁNKU I ZAŘADÍ DO VYHLEDÁVÁNÍ. ROBOTI NEVNÍMAJÍ BARVU, VELIKOST, ATD. ALE HLAVNĚ VÝZNAM. ROZDĚLUJE OBSAH NA ČÁSTI, NA KTERÉ SE MŮŽE NAVĚSIT CSS A JAVASCRIPT HTML, XHTML PRO KOHO JE DŮLEŽITÝ VÝZNAM?

11. pro SOUE v PLZNI HLAVNÍ ROZDĚLENÍ HTML TAGŮ JE NA ŘÁDKOVÉ = „INLINE“ A BLOKOVÉ = „BLOCK“ DVA DRUHY HTML ELEMENTŮ: INLINEBLOCK SPANDIV... NELZE VKLÁDAT BLOCK DO INLINE!

12. pro SOUE v PLZNI VYTVOŘTE TABULKU, KDE DO JEDNOHO SLOUPCE VLOŽÍTE VŠECHNY INLINE TAGY A DO DRUHÉHO VŠECHNY BLOKOVÉ TAGY. VÝSLEDEK POŠLETE NA EMAIL SAMOSTATNÁ PRÁCE: INLINEBLOCK SPANDIV....

13. pro SOUE v PLZNI HTML – TÉMĚŘ VŽDY JE MÉNĚ VÍCE! VÍCEMÉNĚ První část Druhá část Třetí část První část Druhá část Třetí část

14. pro SOUE v PLZNI HTML – TÉMĚŘ VŽDY JE MÉNĚ VÍCE! VÍCEMÉNĚ Cammembert Cottage Eidam Ementál Cammembert Cottage Eidam Ementál

15. pro SOUE v PLZNI HTML – TÉMĚŘ VŽDY JE MÉNĚ VÍCE! VÍCEMÉNĚ John Smith 1234 Rolling Rock Rd. Albany, NY, 12345 John Smith 1234 Rolling Rock Rd. Albany, NY, 12345 NAVÍC JE ZDE VYUŽITÝ TAG, KTERÝ URČUJE PŘÍMO VÝZNAM OBSAHU

16. pro SOUE v PLZNI HTML VERSUS XHTML VYUŽITÍ HTML 5 DOCTYPE JE NYNÍ NEJPOUŽÍVANĚJŠÍ, POUŽÍVANÝ NA VÍCE NEŽ 60% STRÁNKÁCH XHTML 1.0 SPADLO Z 60% V ROCE 2008 NA MÉNĚ NEŽ 25% V ROCE 2014 HTML 4.01 SPADLO Z 20% WEB STRÁNEK V ROCE 2008, NA MÉNĚ NEŽ 3% STRÁNEK V ROCE 2014

17. pro SOUE v PLZNI HTML VERSUS XHTML ROZDÍL XHTML PŘÍSNĚJŠÍ SYNTAX VŠECHNY TAGY A JEJICH ATRIBUTY MUSÍ BÝT MALÝM PÍSMEM HODNOTY VŠECH ATRIBUTŮ MUSÍ BÝT UZAVŘENY V UVOZOVKÁCH VŠECHNY TAGY, I TY PRÁZDNÉ MUSÍ BÝT SPRÁVNĚ UZAVŘENY SOUBOR MŮŽE BÝT ČTEN ČTEČKOU XML SOUBORŮ A TAK I ANALYZOVÁN HTML SYNTAX NENÍ TAK PŘÍSNÝ PŮVODNÍ PŘÍSTUP, ZNOVU SE PROSAZUJE

18. pro SOUE v PLZNI STYL KÓDOVÁNÍ DOKUMENTU URČUJE DOCTYPE: DOCTYPE SE DÁVÁ ÚPLNĚ NA ZAČÁTEK TEXTU WEBSTRÁNKY, ÚPLNĚ OD PRVNÍHO ZNAKU UDÁVÁ JAKÁ PRAVIDLA JSME PŘI PSANÍ DOKUMENTU POUŽÍVALI BROWSER SI PŘEČTE PRVNÍ ŘÁDKU S DOCTYPE A PODLE TOHO DOKUMENT ZOBRAZÍ PROČ JE DOBRÁ VALIDACE NA W3C? http://validator.w3.org/ POKUD DÁME POMOCÍ DOCTYPE JASNÁ PRAVIDLA, PODLE KTERÝCH JSME DOKUMENT NAPSALI A PRAVIDLA PAK SAMI NEDODRŽÍME, PAK SE MŮŽE STÁT, ŽE SE NĚKTERÉ ČÁSTI DOKUMENTU ŠPATNĚ ZOBRAZÍ. ZKONTROLUJTE SI WEB VE VALIDÁTORU, ČASTO NÁPRAVA CHYB POMŮŽE!http://validator.w3.org/

19. pro SOUE v PLZNI STYL KÓDOVÁNÍ DOKUMENTU URČUJE DOCTYPE: POUŽITÍ U NEJPOUŽÍVANĚJŠÍCH HTML 5 XHTML 1.0 Transitional XHTML 1.0 Strict HTML 4.01 Transitional

20. pro SOUE v PLZNI ZJISTĚTE U 10 ZNÁMÝCH WEBSTRÁNEK Z JEJICH DOCTYPE, PODLE JAKÝCH PRAVIDEL JSOU SEPSÁNY JE TO HTML 5, NEBO HTML 4.01 NEBO XHTML 1.0? VÝSLEDEK POŠLETE NA EMAIL SAMOSTATNÁ PRÁCE:

21. pro SOUE v PLZNI TEST Zobrazený text MINIMÁLNÍ OBSAH HTML SOUBORU JAZYK DOKUMENTU KÓDOVÁNÍ DOKUMENTU TITULEK DOKUMENTU UVEDEN V ZÁHLAVÍ OKNA BROWSERU

22. pro SOUE v PLZNI CSS A JEHO VERZE CSS SE PLÁNOVALO OD ZAČÁTKU SPOLU S HTML KDYŽ SE ZAČALO VYUŽÍVAT HTML, TAK JEŠTĚ NEEXISTOVALA TECHNOLOGIE PRO VYUŽITÍ CSS NEŽ BYLO CSS VYDÁNO JAKO STANDARD, TAK FIRMY VYRÁBĚJÍCÍ PROHLÍŽEČE PŘIDALY MNOHO TAGŮ PRO GRAFICKÉ STYLOVÁNÍ DOKUMENTŮ, PRO ATRAKTIVNĚJŠÍ VZHLED DOKUMENTŮ 1991 VYDÁNA PRVNÍ VERZE CSS1 (FONT, BARVA, OBRÁZKY NA POZADÍ) 1998 - CSS2 (POZICOVÁNÍ ELEMENTŮ, LAYOUT, FORMÁTOVÁNÍ PRO TISK, STAHOVATELNÉ FONTY) 2011 – CSS2.1 OPRAVA CHYB NYNÍ: CSS3 (DALŠÍ VLASTNOSTI, PROPOJENÍ S HTML 5)

23. pro SOUE v PLZNI TEST Zobrazený text VLOŽENÍ CSS DO HTML - PŘIPOJENÍ SOUBORU

24. pro SOUE v PLZNI VÝHODY: JASNÉ ODDĚLENÍ OBSAHU OD STYLU JASNÉ ODDĚLENÍ OBSAHU OD STYLU NEPRODLUŽUJE HTML SOUBOR NEPRODLUŽUJE HTML SOUBOR VŠE SE MĚNÍ NA JEDNOM MÍSTĚ V SOUBORU MIMO, NE U KAŽDÉHO TAGU ZVLÁŠŤ VŠE SE MĚNÍ NA JEDNOM MÍSTĚ V SOUBORU MIMO, NE U KAŽDÉHO TAGU ZVLÁŠŤNEVÝHODY: JINÝ SOUBOR, MUSÍ BÝT MINIMÁLNĚ DVA SOUBORY JINÝ SOUBOR, MUSÍ BÝT MINIMÁLNĚ DVA SOUBORY NELZE POUŽÍT PRO EMAILY – VĚTŠINA HTML EMAILŮ NEDOKÁŽE NAČÍST VNĚJŠKOVÝ SOUBOR NELZE POUŽÍT PRO EMAILY – VĚTŠINA HTML EMAILŮ NEDOKÁŽE NAČÍST VNĚJŠKOVÝ SOUBOR VLOŽENÍ CSS DO HTML - PŘIPOJENÍ SOUBORU

25. pro SOUE v PLZNI TEST p { color: red; } Zobrazený text VLOŽENÍ CSS KÓDU DO HTML SOUBORU NYNÍ TO BUDE ČERVENÝ TEXT

26. pro SOUE v PLZNI VÝHODY: VŠE POHROMADĚ POUZE V JEDNOM SOUBORU JEDNODUCHÝ WEB VŠE POHROMADĚ POUZE V JEDNOM SOUBORU JEDNODUCHÝ WEB VHODNÉ PRO LADĚNÍ A MALÉ ZMĚNY PŘED TRVALÝM ODDĚLENÍM DO SAMOSTATNÉHO CSS SOUBORU VHODNÉ PRO LADĚNÍ A MALÉ ZMĚNY PŘED TRVALÝM ODDĚLENÍM DO SAMOSTATNÉHO CSS SOUBORUNEVÝHODY: PRODLUŽUJE SE KÓD CELÉ STRÁNKY PRODLUŽUJE SE KÓD CELÉ STRÁNKY V KAŽDÉM HTML SOUBORU SE ZNOVU VKLÁDÁ ČASTO STEJNÝ KÓD A TAK SE ZBYTEČNĚ OPAKUJE – LEPŠÍ JEDEN CENTRÁLNÍ KÓD V KAŽDÉM HTML SOUBORU SE ZNOVU VKLÁDÁ ČASTO STEJNÝ KÓD A TAK SE ZBYTEČNĚ OPAKUJE – LEPŠÍ JEDEN CENTRÁLNÍ KÓD VLOŽENÍ CSS DO HTML – VLOŽEN V HLAVIČCE

27. pro SOUE v PLZNI TEST Zobrazený text VLOŽENÍ CSS DO HTML – VLOŽENÍ DO TAGU TEXT BUDE ČERVENÝ OVLÁDÁN PŘÍMO V KONKRÉTNÍM TAGU

28. pro SOUE v PLZNI VÝHODY: UPRAVÍTE KONKRÉTNÍ TAG, PŘESNĚ JAK CHCETE UPRAVÍTE KONKRÉTNÍ TAG, PŘESNĚ JAK CHCETE NEJSPOLEHLIVĚJŠÍ MOŽNOST STYLOVÁNÍ HTML NEJSPOLEHLIVĚJŠÍ MOŽNOST STYLOVÁNÍ HTMLNEVÝHODY: ČASTO POMĚRNĚ DLOUHÝ ZÁPIS CSS NAVÍC, KTERÝ ZNEPŘEHLEDŇUJE KÓD ČASTO POMĚRNĚ DLOUHÝ ZÁPIS CSS NAVÍC, KTERÝ ZNEPŘEHLEDŇUJE KÓD V PŘÍPADĚ PODOBNÉHO STYLOVÁNÍ RŮZNÝCH TAGŮ, MUSÍME PRO VŠECHNY TAGY, NAPŘ. ZNOVU A ZNOVU KOPÍROVAT STEJNÝ CSS KÓD, STEJNĚ JE TO NEPŘÍJEMNÉ I PRO JAKÉKOLIV ÚPRAVY V PŘÍPADĚ PODOBNÉHO STYLOVÁNÍ RŮZNÝCH TAGŮ, MUSÍME PRO VŠECHNY TAGY, NAPŘ. ZNOVU A ZNOVU KOPÍROVAT STEJNÝ CSS KÓD, STEJNĚ JE TO NEPŘÍJEMNÉ I PRO JAKÉKOLIV ÚPRAVY VLOŽENÍ CSS DO HTML – VLOŽENÍ DO TAGU POUŽÍVÁ SE PRO SPOLEHLIVÉ STYLOVÁNÍ EMAILŮ

29. pro SOUE v PLZNI OTESTOVÁNÍ RŮZNÝCH ZPŮSOBŮ VKLÁDÁNÍ CSS DO HTML DOKUMENTU 1.VYTVOŘTE HTML DOKUMENT S JEDNÍM ODSTAVCEM – TAGEM V TĚLU DOKUMENTU. VLOŽTE DO ODSTAVCE NĚJAKÝ TEXT. 2.UDĚLEJTE SAMOSTATNÝ CSS SOUBOR, KTERÝ BUDE OBSAHOVAT CSS STYL PRO ZMĚNU BARVY ODSTAVCE NA MODROU, SPOJTE CSS SOUBOR S VAŠÍM HTML SOUBORM V HLAVIČCE 3.DO STEJNÉHO HTML SOUBORU VLOŽTE CSS STYL DO TAGU STYLE V HLAVIČCE DOKUMENTU A STEJNÝ TAG OBARVĚTE NA ZELENO 4.DO STEJNÉHO HTML SOUBORU, PŘÍMO DO TAGU VLOŽTE TZV. INLINE CSS A OBARVĚTE TAG NA ČERVENO. 5.JAKOU MÁ TAG ODSTAVCE VÝSLEDNOU BARVU PO VLOŽENÍ VŠECH CSS? SOUBORY A ODPOVĚĎ NA 5 OTÁZKU POŠLETE NA EMAIL SAMOSTATNÁ PRÁCE:

30. pro SOUE v PLZNI ZE SAMOSTATNÉ PRÁCE JSTE OBJEVILY, KTERÝ ZPŮSOB VKLÁDÁNÍ STYLU DO HTML DOKUMENTU MÁ NEJVYŠŠÍ VÁHU ZE VŠECH. TEDY VŠECHNY OSTATNÍ PŘEBIJE. JE TO STYL UVEDENÝ PŘÍMO V TAGU! KTERÝ ZPŮSOB MÁ HNED DRUHOU NEJVYŠŠÍ PRIORITU? A KTERÝ MÁ NEJNIŽŠÍ PRIORITU? NEJVĚTŠÍ VÁHA UVEDENÝCH STYLŮ

31. pro SOUE v PLZNI ZAJÍMAVOST PRO TESTOVÁNÍ NALÉVÁNÍ TEXTU DO WEBSTRÁNEK SE POUŽÍVAJÍ NÁSTROJE, KTERÉ NÁM TEXT (I KDYŽ NESMYSLNÝ) VYGENERUJÍ TAKTO VYGENEROVANÝ TEXT SE OZNAČUJE JAKO „LOREM IPSUM“ GENERÁTORY JSOU NAPŘÍKLAD ZDE: http://www.lorem-ipsum.cz/ http://cs.blabot.net/ (ČESKÉ TEXTY)http://cs.blabot.net/ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque pretium lectus id turpis. Et harum quidem rerum facilis est et expedita distinctio. Curabitur vitae diam non enim vestibulum interdum.

32. pro SOUE v PLZNI PODLE ZAŘÍZENÍ, NA KTERÉM SE MÁ HTML DOKUMENT ZOBRAZIT SE MŮŽE ÚPLNĚ ZMĚNIT VZHLED TOHOTO DOKUMENTU. JINAK MŮŽE VYPADAT NA MOBILU, JINAK NA PROJEKTORU, JINAK PŘI TISKU A JINAK NA OBRAZOVCE POČÍTAČE. SLOUŽÍ K TOMU: media="all" JEDEN HTML SOUBOR – RŮZNÉ BRÝLE

33. pro SOUE v PLZNI ATRIBUT MEDIA MŮŽE MÍT VÍCE HODNOT. VARIANTY JSOU NAPŘÍKLAD: ATRIBUTY LZE KOMBINOVAT A ODDĚLUJEME JE ČÁRKAMI. NAPŘÍKLAD: media="screen, projection". JEDEN HTML SOUBOR – RŮZNÉ BRÝLE HANDHELDPŘENOSNÉ ZAŘÍZENÍ, MOBILNÍ TELEFON SCREENOBRAZOVKA PRINTTISK

34. pro SOUE v PLZNI DO JEDNOHO HTML DOKUMENTU MŮŽEME VLOŽIT VÍCE STYLŮ. MÁME NA TO 2 ZPŮSOBY V HLAVIČCE DOKUMENTU: media=screen" media=print" NEBO p { color: red; } p { color: green; } JEDEN HTML SOUBOR – RŮZNÉ BRÝLE

35. pro SOUE v PLZNI OTESTOVÁNÍ RŮZNÝCH MÉDIÍ, PRO KTERÉ MÁ STYL FUNGOVAT (TISK A OBRAZOVKA) 1.VYTVOŘTE HTML DOKUMENT S JEDNÍM ODSTAVCEM – TAGEM V TĚLU DOKUMENTU. VLOŽTE DO ODSTAVCE NĚJAKÝ TEXT VYGENEROVANÝ V BLABOTU NA INTERNETU. 2.VYTVOŘTE DVA CSS STYLY: JEDEN PRO TISK A DRUHÝ PRO OBRAZOVKU (MŮŽETE JAKKOLIV: JAK VNĚJŠÍM SOUBOREM, TAK UVNITŘ HTML SOUBORU) PRO OBRAZOVKU ZVOLTE: text-align: left; font-style: italic; color: red; PRO TISK ZVOLTE: text-align: right; font-style: bold; color: green; 3.POROVNEJTE VZHLED ODSTAVCE, ZOBRAZENÉHO A TOHO JAK VYPADÁ, KDYŽ CHCETE WEB STRÁNKU TISKNOUT A DÁTE NÁHLED PŘED TISKEM. JAKÝ JE ROZDÍL? SOUBORY A ODPOVĚĎ NA 3 OTÁZKU POŠLETE NA EMAIL SAMOSTATNÁ PRÁCE:

36. pro SOUE v PLZNI DO JEDNOHO DOKUMENTU MŮŽEME „SLINKOVAT“ PŘIPOJIT VÍCE CSS SOUBORŮ. K ČEMU SE TO VYUŽÍVÁ? MŮŽEME MÍT JEDEN CSS SOUBOR SPOLEČNÝ A PAK VÍCE SPECIÁLNÍCH (NAPŘÍKLAD JEDEN UDÁVÁ STYL CELÉHO WEBU A PAK JSOU STYLY PRO RŮZNÉ ČÁSTI: GALERII, KOŠÍK, BLOG, ATD.) MŮŽEME MÍT JEDEN CSS SOUBOR, KDE MÁME ZÁKLADNÍ NASTAVENÍ, „RESETOVÁNÍ“ VŠECH DŮLEŽITÝCH TAGŮ (P, DIV, UL, OL, A, …) A PAK DO RŮZNÝCH PROJEKTŮ VLOŽÍME SPECIFICKÉ CSS PRO DANÝ PROJEKT. MŮŽEME POUŽÍVAT PŘIPRAVENÉ NÁSTROJE TŘETÍCH STRAN, KTERÉ DO WEBSTRÁNKY PŘIDÁVAJÍ NĚKTERÉ PRVKY A KTERÉ POTŘEBUJÍ VLASTNÍ CSS. JAK MŮŽEME VYUŽÍT VÍCE CSS SOUBORŮ?

37. pro SOUE v PLZNI ZÁKLADNÍ STRUKTURA CSS DEKLARACE p { width: 200px;text-align: justify; } h1 {line-height: 25px;font-size: 15px; } SELEKTOR DEKLARACE VLASTNOST HODNOTA

38. pro SOUE v PLZNI POUŽÍVÁME NÁZVY TAGŮ V HTML TEDY PRO A, PRO P, DIV, … PAK PÍŠEME JEDNOTLIVÁ CSS PRAVIDLA TAKTO: p { width: 250px; text-indent: 20px; text-align: justify; } NAPŘÍKLAD TOTO UPRAVÍ ŠÍŘKU, ODSAZENÍ A ZAROVNÁNÍ VŠECH ODSTAVCŮ V DOKUMENTU. SELEKTORY ELEMENTŮ

39. pro SOUE v PLZNI ZKUSTE NAJÍT NEJVHODNĚJŠÍ CSS VLASTNOSTI, KTERÉ SE MOHOU POUŽÍT PRO NASTYLOVÁNÍ ODSTAVCE. NAJDĚTE JICH ALESPOŇ SEDM. ZKUSTE TYTO VLASTNOSTI SKUTEČNĚ PRO NASTYLOVÁNÍ ODSTAVCE POUŽÍT. A VYLADIT TAK VZHLED NĚJAKÉHO ODSTAVCE. VÝSLEDNÉ SOUBORY CSS A HTML POŠLETE NA EMAIL SAMOSTATNÁ PRÁCE:

40. pro SOUE v PLZNI NĚKDY SE MŮŽE STÁT, ŽE MÁME V DOKUMENTU MNOHO ODSTAVCŮ A KAŽDÝ CHCEME MÍT RŮZNĚ NASTYLOVÁN, MUSÍME TEDY ROZLIŠIT NASTYLOVÁNÍ RŮZNÝCH ODSTAVCŮ PROVEDEME TO TAK, ŽE DO TAGU VLOŽÍME DALŠÍ ATRIBUT CLASS Toto je obsah odstavce A DO CSS SOUBORU VLOŽÍME KROMĚ SELEKTORU ODSTAVCE I SELEKTOR TŘÍDY: p { width: 250px; text-indent: 20px; text-align: justify; color: red; }.odlisny { width: 250px; text-indent: 25px; text-align: left; color: green; } NEBO TAKÉ: p.odlisny { width …. SELEKTORY TŘÍDY

41. pro SOUE v PLZNI ZKUSTE K DALŠÍMU ODSTAVCI VYTVOŘIT TŘÍDU A NASTYLOVAT HO TROCHU JINAK POMOCÍ TÉTO TŘÍDY. NAPŘÍKLAD VYŠŠÍ ROZESTUP ŘÁDEK, JINÉ ZAROVNÁNÍ, JINOU VELIKOST FONTŮ, ATD. VÝSLEDNÉ SOUBORY CSS A HTML POŠLETE NA EMAIL SAMOSTATNÁ PRÁCE:

42. pro SOUE v PLZNI TŘÍDY JE DOBRÉ POUŽÍVAT TAM, KDE SE MŮŽE DANÉ NASTYLOVÁNÍ PRVKU WEB STRÁNKY MŮŽE OPAKOVAT JEŠTĚ NĚKDE JINDE NA STEJNÉ STRÁNCE. VÍCE PRVKŮ NA STRÁNCE MŮŽE MÍT PŘIŘAZENU STEJNOU TŘÍDU Obsah odstavce Obsah odstavce DOKONCE JEDEN TAG MŮŽE MÍT PŘIŘAZENO VÍCE TŘÍD Obsah odstavce SELEKTORY TŘÍDY

43. pro SOUE v PLZNI POKUD MÁME V DOKUMENTU VÍCE RŮZNÝCH JEDINEČNÝCH ODSTAVCŮ, KTERÉ SE NEOPAKUJÍ PAK JE IDENTIFIKUJEME PŘIŘAZENÍM JEDINEČNÉHO ID PROVEDEME TO TAK, ŽE DO TAGU VLOŽÍME DALŠÍ ATRIBUT ID Toto je obsah odstavce, který má v rámci jedné web stránky jedinečný vzhled A DO CSS SOUBORU VLOŽÍME KROMĚ SELEKTORU ODSTAVCE A SELEKTORU TŘÍDY I SELEKTOR ID: p { width: 250px; text-indent: 20px; text-align: justify; color: red; }.odlisny { width: 250px; text-indent: 25px; text-align: left; color: green; } #jedinecny { text-indent: 20px; text-align: right; color: blue; } NEBO TAKÉ: p#jedinecny { text-indent …. SELEKTORY ID

44. pro SOUE v PLZNI ZKUSTE K DALŠÍMU ODSTAVCI VYTVOŘIT ID A NASTYLOVAT HO TROCHU JINAK POMOCÍ TOHOTO ID. NAPŘÍKLAD UŽŠÍ ŠÍŘKA, JINÉ ZAROVNÁNÍ, JINÝ FONT, JINOU BARVU PÍSMA, ATD. VÝSLEDNÉ SOUBORY CSS A HTML POŠLETE NA EMAIL SAMOSTATNÁ PRÁCE:

45. pro SOUE v PLZNI VLOŽIT PAK I PŘIPOJENÍ VNĚJŠÍHO NÁSTROJE