- přiřažení formy HTML obsahu
- umožňuje jednotlivým HTML prvkům měnit jejich vzhled, od barvy písma,
přes rámeček až po umístění na stránce či animace
- vložení do webové stránky
- samostatný soubor
.css
<link href="styl.css" rel="stylesheet" type="text/css" />
- v rámci hlavičky
<style type="text/css"> ... </style>
- přímo u prvku
- jednotlivé vlastnosti se zapisují následujícím způsobem
- všimněte si středníků, závorek, dvojteček
H1 {
color: blue;
font-size: 200%;
border-bottom: 2px solid blue;
}
- formátování prvků kontextově
- odlišné formátování podle nadřazeného prvku
- prvky
<strong> budou modře, ale v rámci nadpisů červeně
STRONG { color: blue; }
H1 STRONG { color: red; }
- blokové (block) a řádkové (inline) prvky
- blokové jsou tpyicky široké na celou šířku nadřazeného prvku
- řádkové jsou jeden za druhým v rámci nadřazeného prvku
Jednotlivé vlastnosti
- barva písma:
color
- velikost písma:
font-size
- font (rodina písma):
font-family
- řez (tloušťka) písma:
font-weight
- zarovnání:
text-align
- šířka (blokové prvky):
width
- pozadí:
background a podvlastnosti (color, image, ...)
- ...
Box model
- každý prvek může mít rámeček a prostor okolo sebe
-
padding je vzdálenost mezi textem a rámečkem
-
border je rámeček jako takový
-
margin je vzdálenost okolo rámečku a znamená minimum k nejbližšímu dalšímu
rámečku (i v případě, že není zobrazen)
-
padding a margin tvoří 4 čísla pro jednotlivé strany
(od shora ve směru hodinových ručiček)
padding: 1em 2em 1em 4em- funguje i pro méně hodnot, některé jsou pak sdíleny
(např. jediná hodnota znamená stejný okraj na všech stranách)
- lze určit i specificky
padding-top (-left, -right, -bottom)
- hodí se v kaskádě, pokud přepisujeme jedinou hodnotu oproti rodičovi
-
border má šířku, styl a barvu
- buď se určí pro všechny strany
border: 2px solid blue
- nebo pro každou stranu zvlášť
border-left: 8px dashed green
- nebo samostatně
border-color: red;, border-left-width: 1ex
- pokud má blokový prvek menší šířku než 100%, lze ho vycentrovat pomocí
margin-left: auto; margin-right: auto
Jednotky
- prohlížeč může většinu jednotek škálovat pomocí Lupy
-
px jsou obrazovkové body
-
em je šířka písmene M, ex je výška písmene x
- hodí se např. pro okraje velké relativně vůči velikosti písma
-
cm, mm
-
% se typicky určují podle velikosti nadřazeného prvku
- tj.
H1 {font-size: 200%;} bude znamenat, že nadpis bude
dvojnásobnou velikostí oproti základní velikosti
Zadávání barev
- RGB notace
- pro každou složku RGB číslo v rozmezí 0-255
- zápis
rgb()
-
rgb(128, 128, 128) vytvoří šedivou
- hexadecimální zápis (též používaný v (prehistorickém) HTML)
- složky v šestnáctkové soustavě
-
#FF0000 je modrá barva
- lze přidat 4. složku pro průhlednost (transparency)
Třídy
- občas potřebujeme rozlišit různé odstavce nebo nadpisy
(tj. stejnou HTML značku formátovat odlišně)
<p>Tohle je obyčejný odstavec psaný modře.</p>
<p class="dulezite">Tenhle odstavec bude tučně, ale také modře.</p>
P { color: blue; }
P.dulezite { font-weight: bold; }
- název třídy je téměř libovolný, měl by popisovat účel, nikoliv vzhled
- pouze písmena anglické abecedy, pomlčka, potržítko, číslice
-
info-dialog je lepší název než modry-s-rameckem
Pravidla kaskády
- vnořený prvek (např.
<p><span>...</span> ... </p>) má vlastnosti vnějšího,
pokud nejsou explicitně přepsány
- tj. např. nastavení řezu písma pro celou stránku stačí udělat u
BODY
- prvek s určenou třídou přebírá i atributy prvku bez třídy (pokud nejsou
přepsány)
- později uvedená pravidla mají přednost
- specifičtější pravidla mají přednost
Pseudotřídy
- další rozlišení prvků (podobně jako třídy), ale přiřazení ke konkrétním HTML
značkám je v režii prohlížeče
- v CSS se zapisují pomocí dvojtečky
Pro odkazy
-
A:link
- obyčejný hypertextový odkaz
-
A:visited
- již navštívený hypertextový odkaz
-
A:hover
- odkaz, nad kterém je právě uživatel myší
-
A:active
- odkaz, na který uživatel právě kliknul
- pseudotřídy lze i kombinovat, např.
A:visited:hover
- pořadí je důležité (LVHA, pomůcka love-hate)
(Nejen) pro tabulky
- umožňuje odlišit jednotlivé řádky
- pseudotřída
:nth-child()
- ukázka:
TR:nth-child(2n) { background-color: white; }
TR:nth-child(2n+1) { background-color: #c0c0c0; }
Při najetí myši
- s výjimkou prehistorických prohlížečů funguje pseudotřída
:hover
pro libovolné prvky
- takže lze např. vysvítit celý řádek tabulky, nad kterým je kurzor myši
