Prezentace ke stažení

Transkript

TNPW1 Cvičení 4
13.10.2015
[email protected]
Úvod do CSS
13.10.2015
[email protected]
TNPW1 Cvičení 4
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
TNPW1 Cvičení 4
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
TNPW1 Cvičení 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, …
TNPW1 Cvičení 4
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!
TNPW1 Cvičení 4
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é
TNPW1 Cvičení 4
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
TNPW1 Cvičení 4
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
[email protected]
TNPW1 Cvičení 4
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
TNPW1 Cvičení 4
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>
<h2 class="odsazeni"> nadpis </h2>
HTML
p.odsazeni { margin-top:20px; }
h2.odsazeni {margin-top:40px; }
NEBO pro oba:
. odsazeni { margin-top:20px; }
CSS
12
TNPW1 Cvičení 4
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
TNPW1 Cvičení 4
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
TNPW1 Cvičení 4
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 */
TNPW1 Cvičení 4
Vnořené zápisy stylů
element element { … }
element .trida { … }
element.trida element { … }
.trida .trida { … }
p span { … }
p .pozor { … }
p.clanek span { … }
.clanek .pozor{ … }
...
<p class="clanek"> blabla
<span class="pozor"> pozor! </span>
blabla blabla </p>
16
Bodovaný úkol
13.10.2015
[email protected]
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 [email protected]
• Nejpozději v pátek 16.10.

Prezentace ke stažení

Transkript

Podobné dokumenty

Publikace příspěvků ve sborníku Wittgenstein (Sborník bude vydán

barvy

čtvrtý - šestý týden