Tvorba webů – kaskádové styly
Co budete dělat?
-
Zavolejte si mě, abych s vámi prošel předchozí úkol (změna stylů).
-
Procvičíte si CSS.
-
Dostanete studijní materiál (odkazy).
-
Vyzkoušíte si práci s různými médii (tiskárna, monitor) a s dědičností.
-
Úkoly budou opět značeny takto: nějaké zadání úkolu.
Cvičení
Používejte editor CSS (ve Web Developer Toolkitu pro FF) a proveďte zkusmo tyto změny:
-
Změňte odrážky. Jakou vlastnost odrážek ovlivňuje atribut list-style-position?
-
Změňte písmo.
-
Změňte tloušťku, barvu i styl rámečku. Dokážete mu nastavit levou čáru pětkrát silnější než ostatní čáry?
-
Text je zevnitř nevkusně nalepený na rámeček. Použijte vlastnost padding, abyste to změnili.
-
Rámeček je nevkusně nalepený na okraj stránky. Vylepšete to nastavením vlastnosti margin.
-
Zkuste nastavovat šířku kontejneru (div) s přehledem toho, co budete dělat (na začátku stránky). Použijte různé způsoby (px, em, ex, %, cm, mm) – ve kterých situacích se jednotlivé způsoby nejvíce uplatní?
-
Všimněte si pomlčky v předchozím bodě. Najeďte na ni myší a nechte si zobrazit text. V nadpisu stránky druhy.html jsem použil typograficky nevhodně krátký spojovník či mínus ( - ), v nadpisu této stránkyje už vhodněji použita standardně dlouhá pomlčka ( – ) vhodnou právě na tyto situace (myslím, že se jí v typografii říká půlčtverčíková). Existuje ještě delší pomlčka ( — ) užitečná třeba básníkům.
-
Nastavíme-li margin na hodnotu auto, nastaví se levý i pravý okraj na stejnou velikost. Toho lze využít k centrování na střed. Pozor, díky nedostatečné podpoře CSS to v některých prohlížečích (hlavně starších) nefunguje, vertikální centrování pokud vím zatím nezvládá vůbec žádný. Aby to fungovalo, musí mít daný prvek menší šířku (width) než prvek jemu nadřazený.
-
A nakonec rámeček nechte zmizet pomocí vhodné hodnoty vlastnosti display. K čemu nám může být dobré mizení? Toť otázka na příště.
Další studium
Na internetu je spousta takzvaných tutoriálů, referenčních příruček, návodů, rad, tipů a triků a také diskusních fór a skupin. Nebojte se je hledat a používat. Když nějaký dobrý tutoriál nebo referenční příručku či diskusní fórum najdete, dejte na své stránky odkaz. Uvedu dva příklady.
http://www.csszengarden.com je přepečlivě napsaná kraťoučká webovka v xhtml strict. Její struktura je dokonale promyšlená a precizně napsaná. Lidé z celého světa se baví tím, že k takto vytvořenému html kódu tvoří různé css styly. Ty si můžeme na stránce přepínat. Je fascinující vidět, co všechno se dá udělat jenom změnou CSS stylů.
http://www.webtip.cz/art/wt_tech_html/wt_cssserial_001.html je velmi dobře napsaný přehled (nebo spíše tutoriál) k CSS.
Více o CSS
Různé styly pro monitor a pro tiskárnu
V definici stylů (head) na této stránce je použit atribut media s hodnotou screen. Tím jsme řekli, že tyto styly se použijí pro zobrazování stránky na obrazovce (monitor, projektor...).
Někdy může být vhodné nastavit další (odlišný) styl pro tiskárnu. Pak místo screen uvedeme print.
Vyvěste kopii této studijní stránky na internetu a přidejte do ní styl pro tisk. Počítejte s tím, že tiskárna není barevná. Na vývojářské liště ve FF lze nastavovot zobrazení print/screen.
Selektory, dědičnost
V tuto chvíli byste už měli vědět, že lze nastavovat vlastnosti jak konkrétním elementům html (h1, a, p), tak třídám (.ukol, .prehled). Teď je vhodný čas trochu to precizovat. Podívejte se na stránku, kde je to přehledně vysvětleno.
V kopii této studijní stránky na internetu (musíte si ji tam nejprve "pověsit") zařiďte následující změnu:
Když nějaký text zvýrazním pomocí tagu em a v rámci tohoto textu opět něco zvýrazním tímtéž tagem, ať je to poprvé skloněným písmem a podruhé tučně. Tento text tedy bude skloněným písmem, ovšem TOTO má být tučně.
