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.

<link rel=”stylesheet” type=”text/css” href=”styl.css” />

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.

<style type=”text/css”>
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.

<nazev_elementu style=”definice CSS pravidel”>

V CSS se používá jiný typ komentářů než v HTML. Je stejný jako například v PHP.

/* toto je komentář*/

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.

selektor {vlastnost: hodnota}

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:

<element id=”jmenoid”>Obsah</element>

V CSS:

#jmenoid {vlastnost:hodnota;}

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:

<element class=”jmenotridy”>Obsah</element><jinyelement class=”jmenotridy”>Obsah</element>

V CSS:

.jmenotridy {vlastnost:hodnota;}

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:

<p>Obsah</p>

V CSS:

p {vlastnost:hodnota;}

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 pdiv, které mají stejnou třídu. A zárove? je třída použita ještě jinde.

V CSS:

.trida {barva-pozadí:černá;}p.trida {barva-pozadí:bílá;}

div.trida {barva-pozadí:tmavě červená;}

V kódu HTML:

<span class=”trida”>černé pozadí</span><p class=”trida”>bílé pozadí</p>

<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?.

h1, h2, h3, p, .trida, #id {vlastnost:hodnota;}

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á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.

url(http://www.adresa.cz/obrazky/obrazek.gif);url(obrazky/obrazek.gif);

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.

<div style=”width: 150px;background:red;”>Obsah</div>
Obsah

height

Určuje výšku prvku.

<div style=”height: 50px;background:#662625;”>Obsah</div>
Obsah

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.

<div style=”width: 200px; height: 50px;background: #662625;”>Obsah</div>
Obsah

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.

text …
<div style=”width: 45px; height: 50px;background-image:url(smile.gif);”>Obsah</div>
text …

text …

Obsah

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 – pozadi Velikost tohoto obrázku je téměř nulová, tzn. nároky na rychlost zobrazení jsou minimální.

<div style=”width: 150px; height: 50px; background-image: url(pozadi.gif); background-repeat: repeat-y;”></div>

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.

<div style=”width: 200px; height: 50px; background-color: #990000; background-image: url(pozadi.gif); background-repeat: repeat-y; background-position: left top;” /></div>

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).

<div style=”background: #990000 url(pozadi.gif) repeat-y scroll left top; width: 200px; height: 50px;”>

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

<div style=”color:red;”>červená</div>
červená

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: ?Times New Roman’, Georgia, serif;”>patkové – abcdefghijklmnopqrstuvwxyz</p>
<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.

Ukázka patkového písma.

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.

Toto je bezpatkové písmo.

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”.

Písmo typu monospace

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.

písmo o velikosti 0.6em
písmo o velikosti 0.8em
písmo o velikosti 1em
písmo o velikosti 1.2em
písmo o velikosti 1.4em

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.

Dekorace textu podtržením.
Dekorace textu přeškrtnutím.
Dekorace textu čarou nad.
Dekorace textu blikáním.

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.

Výška řádku 1em.
Výška řádku 1.4em.
Výška řádku 1.8em.
Výška řádku 2em.

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.

Letter-spacing -0.1em.
Letter-spacing -0.05em.
Letter-spacing 0em.
Letter-spacing 0.05em.
Letter-spacing 0.1em.
Letter-spacing 0.3em.
Letter-spacing 0.5em.
Letter-spacing 0.8em.

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.

<div style=”width:150px; height:50px; margin:40px;”>Odsazený blok</div>
Odsazený blok

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:2px black solid”>1</div>
<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>
1
2
3
4
5
6
7

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ášť.

<div style=”width:150px; height:50px; padding:20px;border:solid 1px #000;”>Obsah</div>
Obsah

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.

Blokový prvek style=”width:200px;padding:20px;border:5px solid red;”
Blokový prvek style=”position:relative;box-sizing:border-box;width:200px;padding:20px;border:5px solid red;margin:10px;”

KONTAKTNÍ FORMULÁŘ

Jméno:

E-mail:

Váš vzkaz:

sedm plus pět =

VYHLEDÁVÁNÍ

PODĚKOVÁNÍ

Logo projektu