|
Styly Každý autor HTML stránek musí řešit jeden zásadní problém, shrnutý do následujícího hesla:
To je jediná pravda, platící stoprocentně. Nic naplat, že stránku, kterou jsem si tak pracně připravil, vidím v nádherných barvách, pečlivě rozvrženou a upravenou — někdo se na ni podívá konkurenčním browserem nižší verse, nebo má jinak nainstalovaná písma, nebo používá neobvyklé rozlišení obrazovky, v každém případě uvidí nelogicky rozházené texty, prošpikované obrázky na nečekaných místech. Aby měl autor stránky větší šanci ovlivnit výsledek, byly do HaTMatiLky doplněny kaskádové styly. Tedy věc, která bude zajisté blízká každému, kdo je zvyklý dělat s textovými editory — ostatně, je to od nich odvozeno. Princip je jednoduchý: označit části textu a určit, jakým písmem, jakou barvou, s jakým pozadím atd… se mají zobrazovat. Protože můžeme očekávat, že se vzhled textu bude v různých částech opakovat, stačí definovat jednotný styl a ten pak k vybrané části přiřadit. Pokud jde o dělení na části, snadno vystačíme s běžnými tagy, které HaTMatiLkový text dělí až-až. Ostatně několik předchůdců stylů již známe: nadpisy, ohraničené <H>…</H> používají styl, předepsaný v prohlížeči; a odkazy bývají podtržené, aniž by se autor o tento detail staral. Vlastní definování vzhledu písma se vcelku běžně provádí vymezením bloků, v nichž platí jistý atribut (<b>tučné</b>, <i>kurzíva</i>…) nebo dokonce určujeme velikost, barvu a typ písma (<font size=-1 color="0000AA" face="sans-serif">bez patek</font>). Úplně nejhloupějším příkladem na použití stylu je vložený textový inzerát, který má být napsán tučně, velkými bezpatkovými písmeny barvy modré. Protože zbytek textu je „prostě nějaký”, definuji si styl jen na jedno použití: Příklad
Jak je z příkladu patrné, objevuje se zde nový tag <SPAN>, sloužící jako kontejner pro styl. Obecně lze použít libovolný jiný párový příkaz — obvykle <P>…</P>. Další novinkou je <Style>, uvnitř kterého se styl definuje. Aby byla definice pro čtenáře neviditelná, je schována do poznámky. Starší prohlížeče, nepodporující styly, ji proto prostě překročí a neberou na vědomí. Malý problém může způsobit samotný tag <Style>, neboť některé browsery neznámé tagy vypisují. Ale mnoho jich není.
Uvnitř je schován popis stylů. Na začátku je seznam prvků, pro které zvolený styl platí. V uvedeném příkladu jde o SPAN a znamená to, že vše, co se bude nacházet mezi <SPAN>…</SPAN> kdekoliv dále v dokumentu, bude zobrazeno popsaným stylem. Popis stylu je uzavřen do složených závorek.
Styl je popsán jednotlivými atributy. Ten nejpochopitelnější se týká barvy, proto se mu budu věnovat.
Jména atributů jsou přesně dána a budeme se jim postupně věnovat. Některá (jako „color”) jsou jednoduchá, více jich však je složených. Například všechny, týkající se „řezu písma” začínají Pak následuje oddělovač. Tím je dvojtečka. Pokud někdo omylem napíše znak „=” (rovnítko), obvykle se nic neděje a styl bude fungovat. Ale je to jednoznačně chyba, tak to nedoporučuji. Za oddělovačem je hodnota atributu. V případě barvy to bývá triplet RGB, ale samozřejmě, že je možné používat i obvyklá slovní vyjádření. Na konci je středník. Nezapomínat! Chybějící středník je záludnou chybou, která se projeví třeba v následujícím stylu, nebo někdy funguje, někdy ne. První věcí, kterou je dobré zkontrolovat, když styl nefunguje, jsou středníky. Další atributy použité v ukázce nastavují písmo. Zcela jasný je zřejmě font-size, jímž je stanovena velikost písma na 18 bodů. Ani font-weight není nepochopitelný; definuje tloušťku písma. Hodnota „bold” znamená, že jde o tučné písmo, naopak tenké by bylo „light”. Posledním je font-family, který určuje typ písma. Jde o ekvivalent k parametru face="???" v tagu <font>. I zde je nutné napsat jméno písma, případně jejich seznam (oddělený čárkami, nikoliv středníky!). Pokud nemám jistotu, použiji některé z univerzálních jmen, jako je tomu zde. Myslím, že napoprvé to docela stačí. Podrobnosti o nastavení písma budou v lekci příští.
Nakonec jen malou poznámku: přestože je možné napsat definici stylu kdekoliv v dokumentu (pokud to bude dřív, než je použita), obvykle se dává do hlavičky. To má dva dobré důvody. Jednak se tam dobře hledá (když potřebuji opravit styl, určitě je na začátku souboru), druhak je běžné, že je styl používán opakovaně (proto také vznikl!) a hlavička je prostě výše, než může být první použití.
A ještě menší poznámka: přestože styly mohou být použity v lecjakém tagu, <Body> ani <HTML> mezi ně nepatří…!
|
|
Úvod |
Lekce 2 |