4. lekce - další vlastnosti textu
Než se podíváme na některé vlastnosti textu, které můžeme pomocí stylů upravit, seznámíme se s jednoduchým editorem stylů, který nám výrazně usnadní práci se styly. Podobně jako existuje velké množství editorů html (či stránek), existuje i řada editorů stylů. Profesionální editory (komerční) umožňují většinou editaci stránky i stylů, my využijeme editor stylů Topstyle, který je freeware (zdarma), jeho instalaci si můžete zkopírovat domů.
Při standardním zobrazení se jeho okno skládá ze tří částí - největší je okno pro zápis vlastností jednotlivých tagů, vpravo je přehled vlastností tagu, který je vlevo vybraný a ve spodní části jsou k dispozici náhledy jednotlivých tagů s danými vlastnostmi.
Vlastní používání tohoto editoru je vcelku intuitivní, vlastnosti tagů můžete zapisovat v hlavním levém okně buď "ručně", nebo s využitím nabídky, která se objeví po zápisu složené závorky nebo mezery. Po výběru z této nabídky se objeví další nabídky pro úpravu hodnot (velikosti, barvy a pod.). Upravovat vlastnosti tagu, který je v levém okně vybraný lze také v pravém okně.
Jednou z pomůcek je například nabídka harmonických barev při výběru barvy z palety barev, nebo možnost "namíchání" odstínu libovolné barvy (potom už nemusí existovat anglický název barvy, je vyjádřená zápisem v šestnáctkové sestavě, který určuje množství červené zelené a modré barvy - RGB popis barvy).
V minulých lekcí jsme na stránce použili tagy <body> (tělo stránky), <p> (textový odstavec) a <h1> (resp. h2 až h6 - nadpisy). Pro všechny tyto tagy můžeme ve stylu určit řadu vlastností, nejdůležitější jsou vlastnosti tagu <body>, které platí pro celou stránku, pokud nejsou pro jiný tag změněny. Je-li například pro tag <body> určena barva a velikost textu a pro tag <p> jen barva textu, potom velikost písma v tagu <p> je převzata z tagu <body> . Nejsou-li vlastnosti textu určeny ani v tagu body (třeba font písma), potom prohlížeč stránek použije své vlastní předdefinované.
Zatím vyzkoušíme následující vlastnosti (připomeneme i vlastnosti z minulé lekce):
color = barva textu
font-size = velikost textu vyjádřena relativními nebo absolutními jednotkami (o jednotkách níže), nebo klíčovými slovy - od xx-small (nejmenší), přes x-small, smal, large, x-large až po xx-large (největší)
font-family = uvede se buď název písma (víceslovné názvy v uvozovkách) nebo jeho třída (serif - patkové písmo, sans-serif - bezpatkové, pro web vhodnější, cursive - kurzíva, fantasy - okrasné a monospace - bez proporcí jako na psacím stroji), viz příklad: font-family: Arial, Helvetica, sans-serif; - prohlížeč použije písmo Arial, pokud není na počítači uživatele nainstalované, potom použije písmo Helvetica (v systémech Mac) a pokud není ani to, použije písmo z rodiny sans-serif, čili bezpatkových písem. Musíte počítat s tím, že písmo, které chcete použít, ať už je sebehezčí, nemusí mít uživatel na svém počítači nainstalované!
text-align = zarovnání textu jako např. v textovém editoru (left - vlevo, right - vpravo, center - na střed, do bloku - justify)
font-style = styl (normal, italic = kurzíva, oblique = skloněné, prakticky stejné jako italic, některé prohlížeče ani neznají)
font-weight = tloušťka (v násobcích od 100 do 900, ale funkční jsou jen některé, záleží na prohlížeči)
text-decoration = podtržení či škrtnutí textu (none = nepodtržený, underline = podtržený, overline = přeškrtnutý)
letter-spacing = mezera mezi písmeny
font-variant = (normal, small-caps = kapitálky (velká písmena))
text-indent = odsazení prvního řádku odstavce
line-height = výška řádku
vertical-align = svislé posunutí od normální polohy, používá se třeba pro indexy (horní, dolní), poznámky apod.
Existují i další vlastnosti textu (některé můžete vidět v Topstylu), ale buď jsou pro nás zatím málo významné, nebo jsou ještě natolik nepoužívané, že je mohou různé prohlížeče zobrazovat různě nebo dokonce špatně.
Přidáme ještě jednu vlastnost, která se netýká přímo vlastností textu:
background-color = barva pozadí
Zápis stylů v souboru s příponou css by mohl potom vypadat například takto:
body {color: Maroon; font-size: 15pt; font-family: Arial, Helvetica, sans-serif; background-color: black;}
p {
text-decoration: underline;
color: red;
font-size: 12px;
text-align: justify;
background-color: #FF4500;
}
h1,h2,h3 {
color: green;
text-align: center;
}
Na posledním řádku je ukázka takzvané hromadné deklarace, je možné více tagů (v ukázce jsou nadpisy) oddělit čárkou a potom vlastnosti v závorce platí pro všechny z nich. Chceme-li u některého z nich potom nějakou vlastnost nastavit jinak, prostě ji na dalším řádku přidáme, například:
h3 {font-style: italic;}
Všechny nadpisy h1, h2, h3 budou mít zelenou barvu a budou zarovnané na střed, nadpis h3 bude navíc kurzívou.
Vlastnosti textu (podobně jako u některých dalších tagů, viz později) je možné zapsat zkráceně, například:
p {font: bold italic small-caps 12px Verdana, Arial, sans-serif}
Chcete-li použít takovýto zkrácený zápis, potom musí obsahovat velikost písma a font-family a vlastnosti musí být uvedené ve stejném pořadí jako v ukázce (i když některým verzím některých prohlížečů by jiné pořadí nevadilo).
Všimněte si, že v ukázce je u body velikost textu 15pt a u odstavce 12px, nejde o překlep, ale o různé jednotky - px (pixel obrazovky) a pt (typografický bod), zde je přehled všech používaných jednotek:
1. Relativní velikosti - velikosti vztažené k jiné hodnotě. Jsou výhodnější než hodnoty absolutní, neboť se snáze přizpůsobují danému výstupnímu zařízení a dobře se konvertují mezi různými médii - např. mezi výstupem na obrazovku a na tiskárnu.
em - aktuální velikost písma, přesněji šířka velkého M (používá se například u mezer mezi textem a rámečkem, může být třeba 1.5em)
ex - odpovídá přibližně výšce malých znaků "bez nožiček" (x, m, n). Pro jednoduchost lze předpokládat, že ex je asi polovina em - jakkoli to není zcela přesné, v běžné praxi je to obvykle dostačující.
% - v procentech vzhledem k aktuální velikosti
px - pixely - velikost obrazového bodu zobrazovacího zařízení (monitor, displej), proto patří mezi relativní velikosti. Na jednom zařízení (stejně velkých monitorech) už je potom velikostí absolutní (nemění se), dokonce IE ve verzích starších než verze 7 nemohl měnit velikost písma (v nabídce Zobrazit - Velikost textu) pokud byla daná v pixelech.
V literatuře jsem častěji narazil na doporučení udávat velikost textu v em.
2. Absolutní velikosti
Jsou vhodné, jen pokud známe fyzické vlastnosti konkrétního výstupního média - např. velikost papíru v tiskárně nebo přesný rozměr a rozlišení jedné konkrétní obrazovky.
cm - centimetry, mm - milimetry, in - palce - vhodné například u stránek určených pro tiskový výstup
pt - "typografické body" - 1pt = 1/72 palce
pc - pica - 1pc = 12pt
Musíme počítat s tím, že každý systém jinak interpretuje jednotku pt - záleží totiž na rozlišení obrazovky i prohlížeče. Obecně platí, že MS-Windows používá rozlišení 96 dpi, zatímco jiné systémy častěji 72 dpi. Např. písmo velikosti 10pt je proto dobře čitelné ve Windows, ale jinde je skoro k nepřečtení. Navíc některé prohlížeče umožňují uživateli hodnotu rozlišení nastavit, takže nelze spoléhat na nic. Jistější je pak použít jednotku px, která se mezi systémy tolik neliší.
Úkoly:
Úkol (2 body):
Styly pro stránku vtipy.html doplňte o font-family, barvu pozadí a některou z dalších výše uvedených vlastností dle výběru.
Úkol (3 body):
Vytvořte novou stránku s názvem autor.html (k ní nový soubor se styly), která bude obsahovat informace o autorovi - jméno, vzdělání, záliby, případně další (celkem alespoň tři řádky). Jednotlivé řádky textu odlište velikostí, barvou textu, případně barvou pozadí či dalšími vlastnostmi.
| Název školy: | Základní škola, Hradec Králové, M. Horákové 258 |
| Název projektu: | EU peníze školám |
| Číslo projektu: | CZ.1.07/1.4.00/21.2575 |
| Téma: | Tvorba WWW stránek |
| Název: | VY_32_INOVACE_04_10B_tvorba www4 |
| Autor: | Pavel Petr |