css3

Kaskádové styly (CSS) - stylování dokumentů

Připojení stylů do stránky:

Přímý styl - přímo u formátovaného elementu pomocí atributu style="..."
<p style="color:red" >Tento odstavec bude červený.</p>
Hlavička stránky ("stylopis"/"stylesheet") - mezi tagy <style> a </style>.
Hlavička:
</style>
p {color: red}
<style type="text/css">
Tělo:
<p>Tento odstavec bude červený.</p>
<p >Tento odstavec bude také červený.</p>
Externí stylopis
Soubor *.css, na který se stránka odkazuje tagem <link>.
V souboru je umístěný stylopis. Na jeden takový soubor se dá nalinkovat mnoho stránek.
soubor styly.css:
p {color: red}
Hlavička: <link rel="stylesheet" type="text/css" href="styly.css">
<p>Tento odstavec bude červený.</p>
<p>Tento odstavec bude také červený.</p>

Přiřazení definic prvkům stránky:

Prvky, pro které má definice platit, popisují selektory.

Selektorem může být:

Název prvku
Třída
Identifikátor

Název prvku

např. p, body, h1, atd.
pravidlo se pak vztahuje na všechny prvky tohoto typu

Třída (class)

zapisuje se tečkou za jménem prvku
např. h1.nadpis nebo p.poznamka

v html: ...<h1 class="nadpis">nadpis</h1>

v CSS: ... h1.nadpis { color: red}

Identifikátor (id)

pozor, id stejné hodnoty se může na stránce vyskytovat pouze jednou
CSS: div#zahlavi
html: <div>záhlaví</div>

Pravidla kaskády

Přednost mají přesnější, konkrétnější pravidla před pravidly obecnějšími
p { color: blue}
p.poznamka { color: red}
p#pozn1 { color: green}

Stejné definice téže vlastnosti - použije se ta, která je zapsaná později

Styly definované přímo ve značkách prvků mají nejvyšší prioritu - přednost před definicemi v hlavičce nebo ve stylopisu

Formátování textu

Typ písma ...... font-family

CSS definuje pět obecných typů písma. Jsou to:

fantasy - dekorativní písmo
mono-space - neproporční písmo
cursive - kurzíva
sans-serif - bezpatkové písmo
serif - patkové písmo

font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;

Velikost písma ...... font-size

velikost písma se nastavuje:

klíčovými slovy
číselně s jednotkou (font-size: 12px;)
procenty (font-size: 75%;)

Barva písma ...... color

Klíčovým slovem - red, green, yellow,...
Hexadecimálním kódem barvy - #336633,...

Řez písma ...... font-style, font-weight

Sklon písma: normal, italic,obligue, inherit
Síla písma: normal, bold, bolder, lighter, inherit

Dekorace písma ...... text-decoration

podtržení - underline
nadtržení - overline
přeškrtnutí - underline
blikající text - blink
žádný efekt - none

Zarovnávání textu ...... text-align

left - vlevo
right - vpravo
center - na střed
justify - do bloku

Formátování bloků stránky

Blokové prvky jsou například: <p>, <div>, <h1>-<h6>, <ul>,<body>

Blokové vlastnosti CSS umožňují definovat

odstupy mezi bloky
rozměry
pozadí
rámečky
pozicování na stránce

Blokové vlastnosti se nedědí!

Oblasti blokových prvků

Rozměry bloku ..... width

Pokud není určeno jinak, bloky zabírají vodorovně celý prostor, který mají k dispozici.
Určíme-li jejich šířku (width), zbylý prostor se rozdělí mezi postranní okraje
Definujeme-li menší rozměr a shodné okraje, zajistíme si tak vystředění prvku
Nulový okraj na jedné straně pak způsobí zarovnání vpravo nebo vlevo

Raměčky ...... border

Definujeme :

barvu
sílu
typ čáry rámečku

Definujeme buď

zvlášť pro každou stranu (border-top, border-right, border-bottom, border-left)
nebo jeden parametr pro všechny strany ( např. border-style, border-color, border-width)
anebo použijeme sdružených definic např: border: 1px solid black

Odstup od rámečku ....... padding

Definujeme buď zvlášť pro každou stranu

padding-top
padding-right
padding-bottom
padding-left

Anebo ve sdružené definici:

padding: 1px 2px 3px 4px;
( = odstup postupně nahoře, vpravo, dole, vlevo)
padding: 1px 2px 3px;
( = hodnota pro chybějící směr se určí jako stejná, pro směr protější)
padding: 1px 2px;
( nahoře, dole 1px, vpravo a vlevo 2px)
padding: 1px;
( všude stejná hodnota)

Okraje ...... margin

Stejně jako u definice odstupu od rámečku

Buď definujeme každou stranu zvláš

margin-top
margin-right
margin-bottom
margin-left)

Nebo pomocí sdružené definice

margin: (4,3,2 nebo 1 číselná hodnota)

Styl pozadí ........ background

Můžeme definovat barvu pozadí, obrázek na pozadí, jeho opakování ve směru vodorovném nebo svislém a jeho pozici
Definujeme buď po jednotlivých vlastnostech (backround-color, background-image,..)
Nebo ve sdružené definici (dílčí vlastnosti se mohou uvádět v libovolném pořadí oddělené mezerami
Např: background: white url("logo.gif") no-repeat fixed top right

Plovoucí prvky ..... float

Vlastnost float ( má hodnotu left, right nebo none) zajistí, že se z prvku stane plovoucí prvek
Plovoucí prvek se přesune k levému (resp. pravému) okraji nadřazeného prvku a všechny další prvky budou zobrazeny ve zbývajícím prostoru vpravo (resp. vlevo) od něj.
Má-li být prvek obtékán, musí být jeho šířka definovaná užší, aby se vedle něj ještě další obsah vešel.

příklad

Vlastnost ..... clear (17)

Float - prvek bude plovoucí a bude moci být obtékán okolním obsahem
Clear - určuje, zda obsah takové plaváčky bude obtékat, nebo ne.
Výchozí hodnotou je none, s níž budou všechny plovoucí prvky obtékány.
Další možné hodnoty už ale umožnují nastavit, že se nebudou obtékat prvky plovoucí vlevo (clear:left), vpravo (clear:right) nebo dokonce vůbec žádné (clear:both).

Vztah plaváčků k neplavcům a naopak (18)

Vynucené včlenění plaváčka dovnitř rodičovského bloku (19)

Pokud potřebujeme, aby rodičovský blok skončil, teprve až skončí i všechny plovoucí prvky uvnitř něj (např. aby nepřesahovaly jeho rámeček, nebo aby sám neměl nulovou výšku), postačí za poslední plovoucí prvek umístit jakýkoli (neplovoucí) prvek s příslušnou hodnotou clear. Ten se pak zobrazí až za předchozími plaváčky a teprve potom se ukončí rodičovský blok. Tento prvek nemusí být ani viditelný (dáme-li mu visibility:hidden) a dokonce nemusí ani zabírat moc prostoru na výšku (nastavíme-li mu např. záporný margin-top). Řešení pak může vypadat třeba takto:

.boxik { padding: 1em; background: yellow; border: 1px solid black; }
.imgvlevo { float: left; margin: 0 1em 0 0; }
hr.cistic { clear: both; height: 1px; border: none; margin: -1em 0 0 0; visibility: hidden; }

Úplně stejně můžeme vyřešit problém v sazbě, máme-li sloupce tvořeny dvěma floaty a jejich rodičovský blok má zobrazit pozadí pod nimi:

Hodnoty a jednotky (20, 21)

klíčová slova:

obvykle zastupují jinou hodnotu, nepíšou se do uvozovek
např: yellow, red, green, none,...

čísla:
celá - pomocí číslic 0-9 a znaménka + nebo -
desetinná - desetinná část se odděluje tečkou, nikoli des.čárkou
(0.9 i .9 nulu je možné vynechat)
relativní jednotky:
em - velikost písma právě používaného prvku
ex - výška malého písmene x u použitého fontu, věšina prohlížečů jej ale interpretuje jako polovinu em
px - jeden bod obrazu (záleží na výstupním zařízení)
absolutní jednotky:
mm, cm, in (25,4mm)
pt - typografický bod (point) 1/72 palce ( =0,3528mm)
pc - typografická jednotka pica 1 pc = 12 pt
URL adresa:
pomocí funkce url(adresa), url("adresa"), url('adresa')
absolutně - včetně protokolu (https://...)
relativně - v rámci adresářové struktury
(např.: obr.gif, img/obr.gif, ../obr.gif)
barva:
klíčovým slovem
hexadecimálním kódem - #rrggbb (#ff6633) nebo i #rgb (#f63)
dekadické a procentní hodnoty - rgb(127,0,255) nebo rgb(50%,0,100%)

Příklad použití vlastnosti clear: (23)

Český CSS 3 manuál

Kaskády_CSS_2.pptx (Desktop)