13.10.2015 aneta.bartuskova@uhk.cz
Úvod do CSS 13.10.2015 aneta.bartuskova@uhk.cz
Výchozí styly prohlížeče Pokud nepřiřadíme elementům žádný styl v CSS, formátují se výchozími hodnotami prohlížeče (v CSS je pak přepisujeme ) Např. barva textu je defaultně černá, existují nějaké výchozí okraje odstavců apod. Výchozí styly a interpretace CSS stylů se mohou v různých prohlížečích lišit, především Internet Explorer od ostatních (Firefox,Chrome,Opera,..) 3
Blokové a řádkové elementy Blokový element je umístěn v obdélníku a vyplňuje celou šířku rodičovského elementu. Zobrazuje se tedy pod předchozími prvky a následující prvky se zobrazují pod ním. (např. <p>, <h2>, <section>) - udělají za sebou konec řádku, můžeme definovat margin a padding Řádkový element se umisťuje do řádků (např. <a>, <img>, <strong>) 4
CSS shrnutí z přednášky Viz jiristepanek.cz přednáška 4 Obsah x Forma Obsah - text odstavce, data v tabulce, Forma - rozvržení, grafika, formátování, fonty,
Oddělení obsahu a formy Obsah HTML, Forma CSS Znovupoužitelnost, přehlednost, udržitelnost, jednoduchá změna vzhledu, čistota kódu, V minulosti se před CSS používal tabulkový layout (layout = vizuální rozvržení stránky) dnes už ne! Tabulku jen na tabulková data!
Ukázka CSS stylování Selektor p { } font-family: Verdana; font-size: 12px; color: red; Seznam definic = všechny odstavce budou psány písmem Verdana o velikosti 12px a budou červené
Navázání CSS na HTML 1 Inline stylování elementu - nepoužívejte <p style="color:blue; font-weight:bold;">text</p> žádná znovupoužitelnost, obsah a forma je smíchaná do sebe Deklarace v tagu <style> - používejte jen pro zvláštní případy (např. styl na jeden řádek pro nějaký plugin) <style type="text/css" media="screen"> p {color: blue; font-family: Tahoma;} </style> styly jsou znovupoužitelné, ale tak že se musí ručně kopírovat - neefektivní při změně, jinak platí jen pro tu jednu stránku 8
Navázání CSS na HTML 2 Deklarace v externím souboru - používejte vždy v HTML souboru (do hlavičky (tj. mezi <head> a </head>), pozor na správnou cestu k css souboru v atributu href) <link rel="stylesheet" type="text/css" href="style.css" media="screen" /> v CSS souboru: p {color: blue; font-family: Tahoma;} Nejčistší způsob, nemísí se forma a obsah celý CSS soubor lze nalinkovat do jiné stránky tím jedním řádkem 9
Pokračování CSS 13.10.2015 aneta.bartuskova@uhk.cz
Stylování elementů Element - jakýkoli HTML element, řádkový nebo blokový, např. <p>, <ul>, <img>, <header>, atd atd. Pokud chceme ostylovat všechny zástupce jednoho elementu, syntaxe: element { vlastnost:hodnota; } Např. všechny odstavce: p { color:red; } Pokud chceme ostylovat jen některé vybrané elementy, musíme je označit v HTML a adekvátně upravit selektor v CSS, k tomu používáme třídu nebo identifikátor 11
Třída Třída se může použít na libovolné množství různých elementů pro označení těch elementů Syntaxe v HTML: <element class="trida">... </element> Syntaxe v CSS: element.trida { } NEBO.trida { } Příklad: <p class="odsazeni"> blablabla </p> HTML <h2 class="odsazeni"> nadpis </h2> p.odsazeni { margin-top:20px; } h2.odsazeni {margin-top:40px; } NEBO pro oba:. odsazeni { margin-top:20px; } CSS 12
Identifikátor Slouží pro jednoznačnou identifikaci elementu, použít jen jednou na jedné stránce!!! Syntaxe v HTML: <element id="identifikator">... </element> Syntaxe v CSS: #identifikator{ } Příklad: <p id="uvodni_odstavec"> blablabla </p> HTML # uvodni_odstavec { font-size:20px; } CSS 13
Možnosti stylování barvy: color, background-color písmo a odstavce: font-size, font-weight, fontfamily, text-align, line-height, text-decoration okraje: margin, padding, border, border-radius... http://www.jakpsatweb.cz/css/cssvlastnosti-hodnoty-prehled.html
Způsob zápisu hodnot Zápis čísel v CSS (u velikosti fontu, šířky/výšky elementu atd.) celá i reálná čísla (s tečkou) Nejvíce používané jednotky: px, em, % Zápis barev klíčovými slovy (blue), číselně (rgb(80, 50,255)), hexadecimálně (#0000FF) Komentáře, poznámky - vkládají se mezi /* a */
Vnořené zápisy stylů element element { } p span { } element.trida { } p.pozor { } element.trida element { } p.clanek span { }.trida.trida { }.clanek.pozor{ }... <p class="clanek"> blabla <span class="pozor"> pozor! </span> blabla blabla </p> 16
Bodovaný úkol 13.10.2015 aneta.bartuskova@uhk.cz
TNPW1 Cvičení 3 Úkol za 2 body Vytvořte HTML5 validní stránku, na kterou bude externě napojen CSS soubor: s definicemi stylů pro alespoň dva různé HTML elementy, jednu třídu a jeden identifikátor + použijte vnořený zápis pro libovolnou kombinaci v CSS souboru přitom použijte dohromady alespoň 5 různých vlastností (color, font-size, border,...) Pozn.: při stylování podle třídy/id v CSS souboru musíte nejdříve přiřadit třídu/id k vybraným elementům v HTML souboru, aby se ostylovaly, tj. nestačí jen definice ale i skutečný efekt na stránce
TNPW1 Cvičení 3 Odevzdání úkolu Kdo má prezentaci na lide.uhk.cz stačí poslat odkaz na stránku s úkolem Kdo tvořil jinde pošlete soubory / ZIP archiv Na můj email aneta.bartuskova@uhk.cz Nejpozději v pátek 16.10.