Domů

Programování

CSS (Cascading Style Sheets - Kaskádové šablony stylů)

• HTML (HyperText Markup Language) - Textový kódovací jazyk používaný k vytváření dokumentů na WWW. Pro strukturu a formátování využívá tzv. tagy. Obsah je tvořen několika částmi dokumentu jako jsou nadpisy, odstavce, seznamy, tabulky, formuláře a několika málo dalšími částmi. Možnost podrobnějšího nastavení písma nebo odstavce je téměř vyloučeno. Výhodou jednoduchosti je zobrazení na různých platformách a operačních systémech. Stačí mít vhodný internetový prohlížeč, připojení k Internetu a stránky uložené na různých internetových serverech jsou dostupné odkudkoliv na světě. Specialitou jazyka jsou odkazy na další dokumenty, obrázky a služby. Prohlížeč odkaz zobrazí odlišnou barvou a podtržením, po kliknutí poskytne rychlý přistup k dokumentu či službě.
• Obsah je nejdůležitější částí strukturovaných dokumentů HTML, XHTML a XML. Moderní prezentace na Internetu už nejsou jen jednoduché texty a obrázky. Vzhled je důležitým prvkem v úspěchu stránek a jazyky Markup Language se svými formátovacími možnostmi přestávají stačit. Uživatelé hledají možnosti podobné textovým editorům, kde není problémem text formátovat s použitím stylů, chtějí určovat libovolné typy a velikosti písma, nastavit různé odsazení u odstavců a touží po dalších možnostech. Splněním požadavků je použití kaskádových stylů.
• Kaskádové styly jsou definice pravidel rozšiřující možnosti internetových dokumentů HTML, XHTML a XML. Jednotlivé styly definují vizuální podobu obsahu. Kromě vlastností písma lze definovat i vlastnosti dalších elementů a ovlivnit celkový vzhled stránky. Hlavním účelem je oddělení obsahu dokumentu od layoutu (vzhledu) definovaném pomocím CSS.

Pro a Proti

• Výhody: 1. Přehlednější a jednoduší kód stránky. Zmenšení celkového množství kódu a zrychlení načítání stránek.  2. Globální a rychlá změna vzhledu stránek pomocí změny CSS.  3. Větší možnosti v definici stylů. Pomocí stylu lze nastavit mnoho atributů, které samotné HTML neumí. 4. Různé vlastnosti pro odkazy. 5. Podpora zobrazení na různých médiích - různá přizpůsobení pro obrazovku monitoru, mobilní zařízení, tisk, televizi. 
• Nevýhody: Různé verze prohlížečů ne vždy podporují CSS, a pokud ano, ne všechny vlastnosti CSS, případně je interpretují různě a výsledek může být zcela neočekávaný. Problémy s kompatibilitou a dodržováním standardů CSS od výrobců prohlížečů jsou velmi často vytýkány CSS. Starší verze prohlížečů (např. IE3) CSS nepodporují a jejich používání je ignorováno.

Historie

• Standardem od roku 1996, kdy byla vydána první verze CCS1 konsorciem W3C (The World Wide Web Consortium). V roce 1998 přichází verze CCS2 a v roce 2003 by mohla být schválena verze CCS3. Bohužel, i když novější verze může přinést mnohá zlepšení, trvá delší dobu, než se uplatní podpora v prohlížečích.

Příklady možností CSS

• Změna vlastností písma -  typ a řez, velikost, barva písma i pozadí a zarovnání. Samotné HMTL například neumí určit velikost v pixelech, s pomocí CSS lze určit velikost více způsoby.
• Větší možnosti ve formátování textů, elementů HTML a mnoho dalších věcí, které se samotným HML provést nelze. Mnoho možností formátování se již obejde bez pomoci tabulek. Širší možnosti a jednoduší používání zvýraznění písma a různých stylů pro nadpisy.
• Snadná a rychlá údržba celkového vzhledu všech stránek. Styl všech stránek lze změnit dodatečně pouhou změnou v souboru se stylem.

Syntaxe pro jednotlivé vlastnosti

Selector

• Selektor je jméno stylu, pro který bude definice vlastností uplatněna. Nejznámější jsou 3 typy: označení prvku HTML, třídy nebo ID objektu.
• Property name - Jméno vlastnosti ze specifikace. Vlastností jsou desítky a je nutné používat specifikaci. Příkladem několika vlastností ovlivňujících písmo jsou: font-family, font-style, font-size, font-weight, text-decoration, text-align.
• Value - Hodnota pro příslušnou vlastnost. K nalezení opět ve specifikaci. Povoleny jsou klíčová slova nebo hodnoty. Různé vlastnosti obvykle vyžadují různé hodnoty - pro typ písma se zadá jméno písma, pro velikost kombinace čísla a jednotky.

Porovnání CSS vs. HTML s omezeným použitím CSS

 vs.

• Většina atributů pro upřesnění vzhledu obsahu je podle specifikace HTML označená jako deprecated tzn. nemoderní a není doporučeno je používat.

Praktické používání - Zápisy stylů

• 1.) Přímo u elementu (inline style) - Definice stylu v kódu pro jednotlivé elementy. Na rozdíl od stylů v hlavičce nebo v externím souboru se neuvádí selektor, ale pouze samotná definice. Není doporučeno s ohledem na problémovou a pracnou aktualizaci. Použití pro výjimečné případy, kdy výskyt stylu je v jednom nebo několika málo řádcích, a kdy není počítáno s aktualizací do budoucna.

• 2. ) V hlavičce stránky - Definice stylu na začátku stránky. Nevýhodou je celková větší velikost každé stránky. Při použití externího souboru se stáhne soubor jen jednou a použije se i pro další stránky používající stejný soubor. Nepříjemná je pracnost opravy stylu v každé stránce.

• 3.) V externím souboru (stylesheets) - Použití definic stylů uložené v externím textovém souboru s příponou *.css (nejčastější a doporučovaná verze). Nevýhodou je problém s uložením stránky nebo odesláním elektronickou poštou, kdy při chybějícím souboru *.css se stránka zobrazí chybně. Příklad obsahu souboru:

Příklad hlavičky s odkazem na soubor pojmenovaný styl.css:

Příklad méně tradiční hlavičky s odkazem na více souborů:

• Pro tento případ je méně známé: 1. Možnost používání více souborů *.css. 2. Používání typu nepovinné položky pro určování typu media, kdy je vyžadován rozdílný typ zobrazení na různých mediích (obrazovce, tiskárně nebo handheldu).

Hlavička, kdy externí soubor je načten pouze v případě, že prohlížeč podporuje CSS2

• Prohlížeče nepodporující CSS nebo podporující CSS1, soubor nenačtou a styly budou ignorovány. Ideální pro použití v případech, kdy načtení stylů v některých prohlížečích způsobuje chybné zobrazení.
• Jednotlivé zápisy lze kombinovat. Vpřípadě rozdílných parametrů má nejvyšší prioritu definice stylu přímo u elementu.

Různé typy medií

• all - Suitable for all devices.
• aural - Intended for speech synthesizers.
• braille - Intended for braille tactile feedback devices.
• embossed -Intended for paged braille printers.
• handheld - Intended for handheld devices (typically small screen, monochrome, limited
  bandwidth).
• print - Intended for paged, opaque material and for documents viewed on screen in print preview mode.
• projection - Intended for projected presentations, for example projectors or print to transparencies.
• screen - Intended primarily for color computer screens.
• tty - Intended for media using a fixed-pitch character grid, such as teletypes, terminals, or portable devices with limited display capabilities. 
• tv - Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).

Poznámky

• Při návrhu je vhodné promyslet strukturu dokumentu bez použití CSS a potom optimalizovat pomocí CSS. Výsledkem může být lepší čitelnost v různých prohlížečích. V praxi a s použitím různých prohlížečů jsou některé stránky zcela nečitelné.
• Pro kontrolu zobrazení využijte více verzí a typů prohlížečů. Pro rok 2003 je nejpoužívanější Internet Explorer 6. Doporučeno je prohlídnout stránky v Netscape Navigator (Mozilla) a Opeře.

• Pro návrh a kontrolu stylů jsou užitečným pomocníkem specializované programy. Známým je například Topstyle nebo internetové kontrolní služby, z nejznámějších Validator na stránkách W3C.
• Článek by měl být jemným úvodem pro vysvětlení a ukázku některých základů CSS. Podrobnosti hledejte ve specifikaci a na internetových stránkách specializovaných na problematiku CSS.

Příbuzné odkazy

Seznam Odkazů»Programování»Internet»CSS

Tisk Verze pro tisk | Doporučit Poslat odkaz přes email