Rychlá příručka - CSS - Fonty a text

Kaskádové styly nahrazující tagy <b>, <i> a <u>

Tagy <b>, <i> a <u> slouží pro základní úpravu textu, ale i tyto tagy můžeme nahradit kaskádovými styly. Ztučnění textu, které v jazyce HTML provádí tag <b>, umožňuje kaskádový styl font-weight. Ten může mít za hodnotu slovo normal, které text udělá normálním, nebo slovo bold, které text udělá tučným. Lze ale jako hodnotu kaskádového stylu použít i čísla 100, 200, 300, 400, 500, 600, 700, 800 a 900. Tato čísla pak udávají tučnost slova, hodnota 100 udělá nejméně tučný text, hodnota 900 tedy samozřejmě text, který bude nejtučnější. Tagem <i> můžeme v jazyce HTML psát text kurzívou, ale i tento tag můžeme nahradit. Kaskádový styl font-style, který tento tag nahrazuje, může mít za hodnotu slovo normal, to udělá normální text, nebo slovo italic, které udělá kurzívu textu. Poslední tag pro nejzákladnější úpravu textu, tag <u>, můžeme nahradit kaskádovým stylem text-decoration. Tento kaskádový styl má za hodnotu slovo none, které nepodtrhne text, nebo slovo underline, to nám podtrhne text, nebo slovo overline, které vytvoří linku nad textem. Můžete si tedy všimnout, že tyto kaskádové styly nenahrazují pouze tagy, ale nabízejí také další možnosti (např. u tučnosti nebo podtržení).

Kaskádové styly tagů <h1>, <h2>, <h3>, <h4>, <h5> a <h6>

Tagy <h1>, <h2>, <h3>, <h4>, <h5> a <h6> kaskádovými styly nahradit nelze, můžeme ale tyto tagy rozšiřovat o různé kaskádové styly. Zde je výhodou kaskádových stylů to, že nejen nám usnadní grafickou úpravu webu, ale zbavíme se také neustálého zadávání parametrů ke každému nadpisu, který bychom chtěli mít stejný. Jak víte, tak větší nadpisy mají kromě většího písma také nastavenou tučnost. Tu můžeme odebrat pomocí kaskádového stylu font-weight, který bude mít v tomto případě za hodnotu slovo normal (normální netučný text). Velikost písma ale můžeme také upravit, pokud se nám nehodí. Pro to existuje kaskádový styl font-size, který má za hodnotu číslo, jež vyjadřuje velikost písma. U kaskádových stylů je nejlepší, když za jakékoliv číslo dodáte jednotku, která bude za číslem bez mezery. Většinou se udává velikost v pixelech, proto bude za číslem px. V HTML části této příručky jste se také mohli dozvědět to, že každý z těchto tagů má nastaveno odsazení nahoře a dole. Pro odsazení jakýchkoliv objektů existuje kaskádový styl margin. Když napíšete pouze slovo margin, musíte udat celkem čtyři hodnoty. Za mezerou po dvojtečce bude nejdříve hodnota, která bude vyjadřovat velikost odsazení nahoře, za číslem nezapomeňte udat jednotku. Poté bude následovat mezera, za kterou bude číslo s jednotkou vyjadřující velikost odsazení vpravo. Po další mezeře bude hodnota odsazení dole a nakonec hodnota odsazení vlevo. Můžete si tedy všimnout, že se hodnoty udávají po směru hodinových ručiček a začíná se na 12 hodinách. Kdybyste chtěli nastavit pouze jedno odsazení, bude asi lepší, když použijete kaskádový styl margin-top (pro nastavování odsazení nahoře), margin-right (odsazení vpravo), margin-bottom (odsazení dole) nebo margin-left (odsazení vlevo). Dále můžeme nastavit velikost prostoru mezi ohraničením objektu a obsahem objektu (v tomto případě nadpisu) kaskádovým stylem padding. Ten funguje stejně tak, jako kaskádový styl margin. Pokud zadáte tedy pouze kaskádový styl padding, musíte zadat všechny hodnoty po směru hodinových ručiček, ale pokud chcete upravit jen jednu velikost tohoto prostoru, použijte padding-top, padding-right, padding-bottom nebo padding-left. Všechny nadpisy mají výšku nastavenou podle velikosti písma a šířku mají přes 100% obrazovky. Výšku lze upravit kaskádovým stylem height, který bude mít za hodnotu číslo s příslušnou jednotkou. Šířku lze upravit kaskádovým stylem width, který bude mít také za hodnotu číslo s příslušnou jednotkou, ale hodnota může být v tomto případě vyjádřena i procenty. Pokud chceme zarovnat text nadpisu pomocí kaskádových stylů, použijeme kaskádový styl text-align, který bude mít za hodnotu buď slovo left, center nebo right. Tato slova fungují stejně tak, jako v jazyce HTML. Dále můžeme použít pro nadpisy kaskádový styl font-family, který má za hodnotu název fontu, jež bude použit. Kaskádovým stylem color můžeme nastavit barvu fontu. Za hodnotu bude mít buď anglický název barvy, nebo kód barvy s hashem (s křížkem před šesti znaky kódu barvy). Pro nadpisy pak můžeme použít také pozadí nebo rámečky, o vytváření takovéto grafiky se dozvíte o několik řádků níže.

Kaskádové styly tagu <span>, podobnému tagu <font>

Tag <font> se velmi hodí pro úpravu určitého textu v jazyce HTML. Pomocí něj a jeho parametrů můžeme upravit barvu nebo velikost fontu, ale pokud upravujeme grafiku webu pomocí kaskádových stylů, je lepší použít tag <span>. O něm jste se již mohli dočíst v úvodu do kaskádových stylů. Tag <span> upraví jen tu část textu svými následně přiřazenými kaskádovými styly, která se bude nacházet mezi <span> </span>. Kaskádovými styly pro tag <span> může být font-weight (pro úpravu tučnosti textu), font-style (pro kurzíva textu), text-decoration (pro úpravu podtržení textu), font-family (pro úpravu fontu), color (pro úpravu barvy fontu), ale mohou to být i kaskádové styly pro nastavení pozadí nebo rámečku. O takových kaskádových stylech se dočtete pár řádků níže.

Kaskádový styl background - nastavení pozadí

Pozadí můžeme nastavit pomocí kaskádového stylu background. Tento kaskádový styl má složité nastavování jeho hodnoty. Nejdříve za mezeru po dvojtečce nastavíme barvu, kterou chceme mít na pozadí. Barvu nastavíme tak, že napíšeme buď anglický název barvy, nebo kód barvy s hashem (křížkem před šesti znaky kódu). Pokud chceme pouze barvu na pozadí, nikoliv obrázek, můžeme nastavování pozadí ukončit středníkem. Pokud ale chceme na pozadí obrázek, pokračujeme po nastavení barvy mezerou, za kterou bude napsáno: url(“cesta k obrázku“). Poté uděláme znovu mezeru, za níž bude dáno to, jestli chceme opakující se nebo neopakující se obrázek na pozadí. Pokud chceme, aby se opakoval, napíšeme slovo repeat a tím ukončíme nastavování pozadí středníkem, ale pokud chceme neopakující se obrázek, napíšeme slovo no-repeat a pokračujeme v nastavování další mezerou. Za touto mezerou bude příkaz, který bude udávat umístění neopakujícího se obrázku. Výchozí umístění je vlevo nahoře, pokud chceme nastavit jinou možnost, napíšeme nejdříve pozici pro horizontální umístění (left, center nebo right) a poté za další mezerou pozici pro vertikální umístění (left, center nebo right). Po zadání umístění můžeme konečně ukončit nastavování pozadí. Pokud chcete nastavit obrázek na pozadí, je stejně lepší, když nastavíte i barvu, protože alespoň ta by se načetla při nějakých problémech uživatele s internetem. Cesta k obrázku na pozadí v kaskádových stylech se píše stejně tak, jako cesta k obrázku, který chceme vložit, v souboru jazyka HTML, proto si o cestách k obrázkům přečtěte, pokud potřebujete, tam. Pokud jste nepochopili nastavování pozadí, nemusíte se obávat, tento kaskádový styl je jeden z nejsložitějších, a proto bude nejspíše potřeba si tento článek přečíst vícekrát.

Kaskádový styl border - nastavení rámečků

Rámečky lze nastavit pomocí kaskádového stylu border. Tento kaskádový styl je také velmi složitý na pochopení. Nejdříve si musíme uvědomit, kde všude u daného objektu chceme mít rámeček. Jestli chceme mít pouze jeden (např. dole), nebo jestli chceme nastavit více rámečků u objektu. Rámečky lze totiž nastavovat dvojím způsobem, buď můžeme nastavit postupně každý zvlášť, nebo můžeme nastavit nejdříve u všech šířku, pak barvu a nakonec styl. První způsob, který je asi přehlednější, uděláme tedy pomocí kaskádových stylů border-top, border-right, border-bottom a border-left. Pro příklad nyní budeme nastavovat rámeček nahoře pomocí kaskádového stylu border-top. Napíšeme tedy tento kaskádový styl a po mezeře za dvojtečkou bude nejdříve hodnota, kterou vyjádříme to, jak chceme mít rámeček nahoře široký. Nezapomeňte za číslem napsat i jednotku (většinou px – pixely). Po této hodnotě bude následovat mezera, za kterou bude barva ohraničení. Barvu lze nastavit stejně tak, jako u pozadí, tedy buď anglickým názvem barvy, nebo kódem barvy, což je šest znaků, před kterými musí být tzv. hash (křížek). Až nastavíme barvu, uděláme znovu mezeru, za níž bude styl ohraničení. Pokud chceme plnou čáru, napíšeme slovo solid, když chceme tečky, napíšeme slovo dotted, pro přerušované čárky napíšeme slovo dashed a můžeme také použít dvojitou čáru, pro kterou bude výraz double. Takto pak můžeme nastavit tyto tři hodnoty postupně u všech ohraničení, které chceme. Druhou možností je ale nastavit nejdříve u všeho šířku, pak barvu a nakonec styl. To se dělá tak, že nejdříve napíšeme kaskádový styl border-width, který bude mít nejdříve za dvojtečkou a mezerou hodnotu (číslo a jednotku) pro šířku horního rámečku, za další mezerou bude hodnota šířky pravého rámečku, po další mezeře bude šířka dolního rámečku a nakonec levého rámečku. Nastavuje se to tedy stejně tak, jako např. odsazení různých objektů – po směru hodinových ručiček. V kaskádovém stylu border-color, kterým budeme nastavovat barvu rámečku, budou také čtyři hodnoty a barvy budeme nastavovat také po směru hodinových ručiček. Posledním kaskádovým stylem pro nastavování rámečků, border-style, nastavíme po směru hodinových ručiček styl ohraničení. Pokud jste článek nepochopili, nevadí, přečtěte si jej znovu, protože to je přece jen složité na pochopení.

© 2013 Petr Lhotský - petrlhotsky@windowslive.com