CSS - Cascading Style Sheets - kaskádové styly
deklarativní jazyk pro definování vzhledu webové stránky, tj. jak se které elementy na jakém zařízení mají zobrazovat (nebo i tisknout)
cílem CSS je efektivní design vzhledu a vizuální struktury webových stránek
CSS efektivně umožňuje přepoužívání společných stylů a omezit tím opakování psaní kódu
v CSS souboru píšeme tzv. pravidla
Pravidlo se skládá z
selektoru
deklarace stylů (název CSS vlastnosti a její hodnota)
syntaxe:
selektor {
vlastnost-1 : hodnota-1;
vlastnost-2 : hodnota-2;
...
}
anatomie CSS pravidel
selektorem vybíráme elementy, na které chceme aplikovat dané CSS vlastnosti (styly)
elementy vybíráme většinou podle CSS tříd, např. .page, .card, .panel, které přiřrazujeme HTML elementům
Jak aplikovat CSS styly do HTML dokumentu
inline - přímo v atributu style nějakého elementu - !! nepoužívat !!
internal - v <head> pomocí tagu <style> - !! nepoužívat !!
external - pomocí odkazu na styly v samostatném .css souboru pomocí <link>
je potřeba oddělit veškeré styly od HTML obsahu, tzn. nepíšeme styly do HTML tagů
typy selektorů https://www.w3schools.com/cssref/css_selectors.asp
tag selektor - např. div
class selektor - např. .post
id selektor - např. #menu
attribute selektor - např. [type="button"]
pseudo selektor - např. button:hover
selektor potomka - např. div p
selektor dítěte - např. div > p
selektor sourozence - např. div + p a div ~ p
kombinace selektorů - např. div.post > p
skupina selektorů - např. div, p > a, img:hover, .post + #menu
CSS Vlastnosti pro aplikování barev
barva textu - vlastnost color např. p { color: red; }
barva pozadí - vlastnost background-color např. div { background-color: green; }
barva ohraničení - vlastnost border-color např. div { border-color: blue; }
pojmenované - black, white, red, green, blue, violet, orange, ...
hexadecimální:
#000000,
#ffffff,
#ff0000,
#00ff00,
#0000ff,
#abcdef, ...
RGB:
rgb(0, 0, 0),
rgb(255, 255, 255),
rgb(255, 0, 0),
rgb(0, 255 ,0), ...
RGBa:
rgba(0, 0, 0, 0.5),
rgba(255, 255, 255, 0.6),
rgba(255, 0, 0, 0.7), ...
HSL:
hsl(0, 0, 0),
hsl(100%, 100%, 100%),
hsl(100%, 0, 0), ...
HSLa:
hsla(0, 0, 0, 0.5),
hsla(100%, 100%, 100%, 0.6), ...
CSS vlastnosti - písmo, text, pozadí
Vytvořte domovskou stránku / s záhlavím a zápatím a nastylujte je
Tuto stránku zkopírujte 2x a pojmenujte je /about/ a /contact/
Pomocí Live Server otevřete všechny 3 stránky ve 3 oknech prohlížeče
Změňte styl CSS pro zápatí a záhlaví a sledujte změnu na všech stránkách
Nyní přidávejte obsah do jednotlivých stránek a nastylujte je zvlášť pomocí nových CSS pravidel
Kaskádovost a priorita CSS stylů
styly se přepisují u shodných vlastností - viz Developer Tools
inline > internal > external > browser-default
podle pořadí zápisu
podle specifičnosti
CSS vnitřní okraj, ohraničení a vnější okraj
Pseudo třídy a pseudo elementy
Vyzkoušejte uvedené CSS vlastnosti na tomto HTML dokumentu
Barva textu (color)
Typ a velikost písma (font-family, font-weight, font-style, font-size, ...)
Odřádkování (line-height)
Zarovnání (text-align)
Pozadí (background-color, background-image, background-size, background-repeat, background-position)
Vnitřní okraje (padding, ...)
Ohraničení (border, ...)
Vnější okraje (margin, ...)
Pozicování (position: absolute, relative, fixed, ...)
Stavy elementů: visited, hover, focus, ...
Náhled řešení 1 Náhled řešení 2 Náhled řešení 2
nastylujte následující HTML dokument tak, aby byly splněny všechny dílčí požadavky, které jsou v něm uvedené, používejte class selektory a kombinujte je, kde to dává smysl.
nastylujte následující HTML blog tak, aby výsledek vypadal co nejpodobněji náhledu řešení
23:59:59 před dalším cvičením
