6. lekce – KASK?DOVÉ STYLY
Čtvrtek, 25. Září. 2008 | 6. Lekce - Kaskádové styly | Comments Off on 6. lekce – KASK?DOVÉ STYLY
Před nástupem kaskádových stylů (CSS, Cascading Style Sheet) se k formátování textu v dokumentech používaly výhradně prostředky jazyka HTML. Jazyk HTML k tomu nabízí poměrně široké spektrum značek a atributů. CSS však tyto možnosti rozšiřuje. Použití CSS v praxi může přinést
- širší formátovací možnosti,
- snadnou tvorbu a údržbu konzistentního stylu,
- oddělení struktury a stylu,
- vyšší přístupnost dokumentů,
- dynamickou práci se styly.
CSS nabízí velké množství možností při formátování do bloku, vlastnosti jako padding a margin nemají v HTML obdobu. ?eší se složitým vnořováním tabulek.
Hlavním přínosem CSS je možnost důsledného oddělení struktury obsahu a formátování dokumentu. Jazyk HTML je v prvé řadě jazykem pro popis struktury hypertextového obsahu, jeho použitím lze označit strukturální význam jednotlivých částí (nadpisy, odstavce, seznamy, tabulky, atd.). Během vývoje HTML do něj byly přidány i prvky, které nesouvisejí se strukturou a slouží k formátování. V posledních letech dochází k opačnému trendu, kdy jsou tyto prvky z jazyka odstra?ovány. Výsledkem je, že současné normy jazyka HTML umož?ují definovat vzhled webu pouze pomocí CSS. Výhody oddělení struktury a formátování:
- obsah a vzhled mohou tvořit různí lidé,
- tentýž obsah lze reprezentovat v různých variantách formátování (různě šablony vzhledu),
- stylové předpisy je možné tvořit pro obecnou strukturu obsahu dříve, než skutečný obsah vznikne,
- stylové předpisy lze snadno upravovat.
Možnosti deklarace CSS
CSS lze nadeklarovat třemi způsoby:
- externě – připojením souboru s definicí CSS pravidel pomocí elementu <link> v hlavičce dokumentu,
- globálně – definicí CSS pravidel v hlavičce dokumentu v elementu <style>
- lokálně – definicí CSS pravidel v atributu style jednotlivých elementů.
Externí deklarace CSS
Do hlavičky dokumentu vložíme element link, který zajistí provázání HTML dokumentu a externího souboru s CSS. Pro tento způsob je potřeba mít další soubor, ve kterém bude stylopis. Element link má atributy rel (uvádí se hodnota stylesheet), který říká, že se jedná o stylopis. Nepovinným atributem je type (uvádí se hodnota text/css), který definuje tzv. MIME typ připojeného dokumentu. Nezbytný je atribut href, jehož hodnotou je jméno souboru s definicí CSS pravidel.
Globální deklarace CSS
Druhou možností je vložit stylopis přímo do hlavičky dokumentu pomocí elementu <style>. Tento způsob bývá využíván pro jednodušší stránky či názorné příklady.
definice CSS pravidel
</style>
Lokální deklarace CSS
Poslední možností je vkládat styly přímo do elementů pomocí atributu style, hodí se pro jednoúčelová nastavení. Není efektivní pro rozsáhlejší web.
V CSS se používá jiný typ komentářů než v HTML. Je stejný jako například v PHP.
Definice CSS pravidel
Než si ukážeme, jak používat konkrétní pravidla CSS, podíváme se, jak se určují jednotlivé prvky, zapisují vlastnosti a jejich hodnoty, také jak nastavit více prvkům jednu vlastnost, aniž by měly stejný atribut a mnoho dalšího.
Nejdříve je potřeba ve stylopisu určit prvek, kterému chceme nastavit nějakou vlastnost. K tomu se používají tzv. selektory, které určují, čemu se mají napsané vlastnosti přiřadit (jaký prvek ovlivní). Zápis vlastností následuje za selektorem a je uzavřen ve složených závorkách.
Způsobů, jak definovat selektory, na které se aplikuje definovaná vlastnost, je celá řada. Nejprve několik základních pojmů:
Identifikátor
Neboli id. Použijeme v případě, když chceme nějakou CSS vlastnost přiřadit jednomu konkrétnímu prvku na stránce (většinou např. záhlaví, patička atd.). Je potřeba, aby v HTML byl určen atribut id a ve stylech se k tomuto atributu přiřadila vlastnost a hodnota. V CSS se selektor id uvozuje znakem #.
V kódu HTML:
V CSS:
Třída
Neboli class. Použijeme, když chceme stejným způsobem ovlivnit více prvků na stránce zárove?. Opět podobně jako u identifikátoru, musí být v HTML u patřičných prvků použit atribut (class) a v CSS přiřazena vlastnost a hodnota. V CSS je jméno třídy uvozeno tečkou. Ve výsledku bude mít několik prvků stejné vlastnosti definované v pro danou třídu.
V kódu HTML:
V CSS:
Určení elementu
Používá se v případě, kdy chceme definovat nějakou vlastnost (např. typ písma) ve všech elementech stejného typu (např. v elementu p).
V kódu HTML:
V CSS:
V tomto případě bude text uvedený v libovolném elementu p ovlivněn definovanou vlastností.
Bližší určení elementu
Používá se v např. případě, kde potřebujeme rozlišit vlastnosti v elementech p a div, které mají stejnou třídu. A zárove? je třída použita ještě jinde.
V CSS:
div.trida {barva-pozadí:tmavě červená;}
V kódu HTML:
<div class=”trida”>tmavě červené pozadí</div>
Toto způsobí, že elementy p (s class=”trida”) budou mít barvu pozadí bílou, barva pozadí elementů div (s touto třídou) bude tmavě červená, ale barva pozadí všech ostatních o stejné třídě bude černá.
Společné určení
Využijeme v případě, kdy potřebujeme přiřadit nějakou vlastnost různým elementům zárove?.
Vyvstává otázka, co když má nějaký prvek určenu jednu vlastnost vícekrát a navíc pokaždé různou? Dříve nebo později nastabe situace, že se na jeden element bude vztahovat několik různých deklarací, které si mohou navzájem odporovat. Pak platí jednoduché pravidlo – v takovémto případě se bere jako určující poslední definice. Tzn. že lokální definice má přednost před globální a ta před externí. V případě konfliktu více stejných pravidel, např. v lokální definici, platí přednost posledního.
Pozn.: Ale pokud přesto chceme, aby vlastnost, která je uvedená výše než jiná, platila, doplníme za hodnotu vlastnosti: !important a až poté napíšeme středník. Při používání této konstrukce buďte opatrní, stylopis se tím značně znepřehlední.
Hodnoty v CSS
V CSS musí mít každá vlastnosti alespo? jednu hodnotu. Možných typů hodnot je více, zde jsou uvedeny ty nejčastější. Ostatní se běžně nepoužívají a je zbytečné se s nimi zatěžovat. Běžné hodnoty css vlastností jsou tyto:
- číslo,
- nula,
- jednotka,
- barva,
- URI.
Čísla
Ve většině případů se číslo váže na některou jednotku. Základní pravidlo pro psaní čísel s jednotkou je, že mezi číslem a jednotkou se nepíše mezera.
Čísla mohou být dvojího druhu: celá a reálná. Pro zápis reálných čísel se jako oddělovač desetinných míst používá tečka.
Nula
Nula samotná se ve stylech objeví málokdy, ale pokud je použita, není nutné za ní psát jednotky.
Jednotky
Jednotek se v CSS používá více. Pro naše potřeby bohatě stačí tři, např.: palec pro nás není ideální.
Pixel
Zde platí, že jeden bod na obrazovce je jeden pixel, při zobrazení stránky tedy záleží na rozlišení obrazovky (nebo jiného zobrazovacího zařízení). Je to jednotka základní.
Em
1em = výška aktuálního písmena “m”, neboli jeden čtverčík. Je to jednotka relativní, jelikož se s velikostí písma mění. Velice často se používá právě pro hodnoty týkající se písem.
Procento
Procenta se počítají z velikosti nadřazeného prvku, pokud není uveden, vypočítá se rozměr podle aktuální velikosti body.
Doporučuje se zvolit si jednu hlavní jednotku (nejlépe em, která bude použita nejčasteji, a jen zřídka použít jinou.
Barvy
Ve stylopisu je několik možností, jak zadat barvu. Jménem barvy, v hexadecimálním rvaru či pomocí RGB složek.
Pojmenované barvy
Pojmenovaných barev je v CSS opravdu hodně, jsou to anglické výrazy. Viz např. Kompletní přehled barev.
- white – bílánení vidět
- yellow – žlutá
- red – červená
- fuchsia – růžová
- green – zelená
- blue – modrá
- purple – fialová
- silver – světle šedá
- gray – šedá
- black – černá
RGB
Barva bodu na obrazovce se skládá ze tří složek. Z červené, zelené a modré, anglicky red, green, blue. Výsledná barva se určuje podle poměru těchto složek. Složky se zapisují pomocí:
- Procent – rgb(0%, 50% 100%)
- Hodnot dekadické soustavy z rozsahu 0 až 255 – rgb(0,128,255)
- Hodnot hexadecimální soustavy z rozsahu 0 až f. Místo rgb a závorky se píše # a za tento znak se zapíše postupně hodnota jednotlivých barev. – #0088ff
Všechny tyto barvy jsou ve výsledku:
URL
Představuje adresu externího prvku. Zapisuje se: url(cesta/soubor). Využívá se např. pro nastavení obrázku na pozadí blokového elementu.
CSS vlastnosti
V následujícím textu bude uveden přehled nejpoužívanějších CSS vlastností. Přehled je členěn do kategorií tak, jak spolu jednotlivé vlastnosti souvisí, nikoli podle důležitosti.
Rozměry a pozadí prvků
Jak definovat rozměry prvků? Jak nastavit barvu pozadí?. Alfou a omegou jsou zde dvě vlastnosti. Width a height, v překladu to je šířka a výška. Pro pozadí to je vlastnost background.
width
Určuje šírku prvku.
height
Určuje výšku prvku.
V tomto případě je šířka určena automaticky. Samozřejmě je možné ji zadat ručně.
background
Definuje pozadí prvku. Lze použít několik různých hodnot. Základním příkladem je definování barevného odstínu na pozadí prvku. K tomu je možné použít buď background nebo zde background-color. Vlastnost background je obecnější,pomocí ní je možné definovat jakýkoli typ pozadí (např. i s obrázkem), vlastnost background-color slouží pouze k definování barvy pozadí. Hodnotou je jakýkoliv zápis barvy, který byl popsán v předchozí lekci.
Další možností je dát na pozadí obrázek. Můžeme použít tří vlastnosti, které se skládají ze spojení background- a vlastností: image, repeat, position nebo můžeme použít společnou vlastnost background.
Takto lze vložit dopl?ující grafiku, kdy se nějakému blokovému elementu (nejčastěji div) určí obrázkové pozadí, velikost a pozice obrázku na pozadí. V CSS nelze zadat atributy title a alt jako u obrázků (atributy jsou v kódu HTML, neplést). Navíc by takto zobrazené obrázky neměly mít žadnou informační hodnotu, jen dopl?ovat nějakým způsobem vzhled stránky.
background-image
Hodnotou je URL, které ukazuje na obrázek, který chceme zobrazit na pozadí bloku.
<div style=”width: 45px; height: 50px;background-image:url(smile.gif);”>Obsah</div>
text …
text …
text …
background-repeat
U této vlastnosti je důležité pochopit její “sílu”, která na první pohled nemusí být patrná. Když je dobře použita, výsledkem může být působivý design. Dnes tuto vlastnost využívá naprostá většina webů. Způsobuje opakování pozadí, takže když máte obrázek menší než prvek, pro který je určen, obrázek “vydláždí” i zbytku jeho obsahu (implicitně). Možné hodnoty jsou:
- repeat – opakování ve vodorovném i svislém směru,
- repeat-x – opakování v horizontálním směru,
- repeat-y – opakování ve svislém směru
- no-repeat – bez opakování.
V další ukázce je použit tento obrázek o výšce 1px – Velikost tohoto obrázku je téměř nulová, tzn. nároky na rychlost zobrazení jsou minimální.
background-position
Definuje, kam bude obrázek na pozadí umístěn. Jeho hodnoty jsou: left, right, top, bottom, center, jejich kombinace oddělené mezerou, např.: left top, right bottom, atd.
V případě, že obrázek (opakující se obrázky) nevyplní celé pozadí bloku, zůstává zbytek pozadí bloku nevyplněn a je možné jej např. vyplnit barvou.
Při vhodně zvolené kombinaci opakujícího se obrázku na pozadí a barvy není jejich vzájemný přechod vůbec patrný.
background
Společná vlastnost pro souhrn předchozích vlastností. Uvádí se v pořadí, barva, URI, repeat a position (není ale podmínkou funkčnosti).
Podobně lze sdružovat i některé další CSS vlastnosti, které budou uvedeny v dalším textu.
Písmo a texty
Pomocí CSS lze definovat mnoho vlastností, které ovlivní vzhled písma a textu. Pokud je hodnotou vlastnosti nějaká míra, je vhodné používat jednotky em, které odpovídají typografickým čtverčíkům.
color
= barva písma
font-family
Určuje rodinu písma (font). Hodnotou této vlastnosti je seznam rodin písem oddělených čárkou. Proč zadávat více písem? Důvodem je instalace různých písem v různých operačních systémech. Např. typické písmo ve windows nemůsí být v linuxu. Ale i ve verzích windows jsou rozdíly, proto je vhodné definovat více písem. Pokud je hodnotou této vlastností více písem, prohlížeč se pokusí zobrazit daný text prvním fontem z definice, v případě, že první font není k dispozici, použije následující atd. Definice by měla být zakončena obecnou rodinou písma.
<p style=”font-family: Verdana, Tahoma, sans-serif;”>bezpatkové – abcdefghijklmnopqrstuvwxyz</p>
<p style=”font-family: ?Courier New CE’, ?Courier CE’, ?Courier New’, courier, monospace;”>bezpatkové – abcdefghijklmnopqrstuvwxyz</p>
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
Jednotlivé obecné rodiny písma:
serif
Patková (proporcionální) písma neboli anktiva. Typickým příkladem patkového písma je písmo používané v knihách či novinách, patky vytváří linku vedoucí zrak, proto jsou tato písma vhodná pro tištěnou formu. Pro obrazovky není příliš ideální. Hlavními zástupci ve windows jsou Times New Roman, Georgia, Garamond.
sans-serif
Bezpatková (neproporcionální) písma neboli grotesk. Jednotlivé znaky nemají patky, jsou tak více kontrastní oproti pozadí. V tištěné formě se využívají pro nadpisy a krátké texty. Pro obrazovky jsou vhodné, dobře se vykreslí i při nižším rozlišení. Základní windows písma tohoto typu jsou Arial, Verdana a Tahoma.
Rodiny těchto písem lze používat na obrazovkách prakticky na vše. Nadpisy i texty.
monospace
Písma napodobující styl psacího stroje. Používají se především pro ukázky programového kódu. Každý znak je stejně široký jako ostatní. Takže písmeno “m” je stejně široké jako “i”.
font-size
Velikost písma je nejčastěji zadána číselnou hodnotou s jednotkou. Lze použít i slovní určení hodnoty, příliš se ale nepoužívají. Doporučuji používat čislo s jednotkou em případně px.
text-align
Horizontální zarovnání textu. Hodnoty left, center, right a justify (do bloku). Pro bězný text je nejlepší (nejlépe čitelné) zarovnání vlevo nebo do bloku. V případě zarovnání do bloku pozor na velikost písma a vlastní vzhled textu, mohou vzniknout mezery, které jsou nepříjemné při čtení.
text-decoration
Dekorace písma. Hodnoty podtržení underline, přeškrtnutí line-through, čára nad overline a blikání písma blink. Použití této vlastnosti důkladně zvažte, často může návštěvníka stránky zmást.
line-height
Výška řádku. Při delších textech je často užitečné tuto hodnotu zvýšit kvůli přehlednosti a lepší čitelnosti.
letter-spacing
Název vlastnost je složen ze dvou slov. Letter a spacing. V českém jazyce to znamená písmeno a mezera. Z toho vyplývá, že definuje velikost mezer mezi jednotlivými písmeny, neboli proklad. V obyčejném textu téměř nepoužitelné, může se ale hodit v některých nadpisech.
Okraje a rámečky prvků
Kromě rozměrů blokových prvků jsou často používanými vlastnostmi margin, border a padding.
margin
Vnější okraj, odsazení od okolního obsahu. Okraj lze určit od všech stran nebo pouze od jedné. Jednotlivé vlastnosti jsou margin (všechny strany), margin-left, margin-right, margin-top a margin-bottom.
Prvek je odsazen od všech stran o 40 pixelů. Za zmínku stojí vlastnost slučování okrajů. To znamená, že pokud máme dva prvky nad sebou, horní má margin-bottom 20 px a dolní má margin-top 30px, budou vzájemně odsazeny o 30px.
border
Definuje vlastnosti ohraničení bloku. Skládá se z definice tloušťky, stylu a barvy ohraničení.
<div style=”width:20px; height:20px; border:1px blue solid”>2</div>
<div style=”width:20px; height:20px; border:1px #ff0000 solid”>3</div>
<div style=”width:20px; height:20px; border:5px blue dotted”>4</div>
<div style=”width:20px; height:20px; border:1px double”>5</div>
<div style=”width:20px; height:20px; border:1px gray solid”>6</div>
<div style=”width:20px; height:20px; border:2px blue inset”>7</div>
Podobně jako u margin je možné definovat i jednotlivé strany bloku samostatně (např. border-left ap.).
padding
Vzdálenost obsahu od okraje neboli vnitřní okraj. Opět lze definovat každou stranu zvlášť.
Vliv okrajů a rámečků na rozměry bloku
Dle specifikacích CSS se rozměry prvků dané vlastnostmi width a height počítají jen do obsahu prvku. Rozměry margin, border a padding se nezapočítávají a jsou ” jaksi navíc” … To znamená, že pokud budeme mít blokový prvek široký 200 pixelů (width:200px) a použijeme u něj rámeček (border:solid 5px red) a vnější okraj (margin:20px), celková šířka bloku tak vzroste (200 + 2*5 + 2*20) na 250 pixelů.
Zejména při práci na rozvržení stránky může být tento způsob výpočtu rozměrů probllematiký. V CSS je možné nastavit výpočet rozměrů tak, aby uvedené vlastnosti rozměry nezvyšovaly, ale aby rozměry bloku odpovídaly hodnotám vlastností height a width i při použítí vlastností margin, padding a border.
Toto lze nastavit v CSS pomocí vlastnosti box-sizing:border-box.
TVORBA WEBOVÝCH STRÁNEK
ODKAZY
- CSS generátor písem
- CSS Pie – podpora CSS3 v IE
- CSS reset
- CSS3 generátor kódu
- Emulace starších verzí IE
- generátor barevných schémat
- generátor CSS spritů
- generátor CSS tlačítek
- generátor šablon 1
- generátor šablon 2
- generátor šablon 3
- generátor pozadí
- komprimace CSS souborů
- konsorcium W3C
- Lazy loading
- lorem ipsum generator
- obtékání komplikovaných objektů
- optimalizace CSS
- Podpora CSS3 a HTML5
- Podpora CSS3 v prohlížečích
- regulární výrazy
- Simulace pomalého připojení
- tabulky s kulatými rohy
- test barev z hlediska přístupnosti
- Testování webu na mobilních zařízeních
- W3C validátor XHTML
- w3schools – vše o tvorbě webu
- www.tvorba-webu.cz
- XHTML –> HTML 5
- získání palety barev
- změna barev v CSS souboru