Odkazy už bys měl/a umět, tak jedeme dál!
Jak psát styly?
Styl elementu můžeme změnit různými způsoby:
- Pomocí HTML - třeba použitím značek
<b>nebo<i>, ale toho se teď snažíme vyvarovat... - Atributem
style- tzv. přímý styl - taky není úplně vhodné, ale používá se - Elementem
stylev hlavičce - obsahuje styl pro celý soubor - Externím souborem
.css- obsahuje styly pro jeden nebo více stránek
Jak na CSS?
CSS neboli kaskádové styly jsou od zbytku webových stránek velmi odlišné. Zapisujeme je takto:
%vlastnost%: %hodnota%;A jaké vlastnosti lze použít? Je jich nesčetně mnoho a neustále budeš muset hledat nové. Pro přehled tu máš tabulku těch pár základních:
| Vlastnost | Název, popis | Příklad |
|---|---|---|
color |
Barva textu | |
background-color |
Barva pozadí | |
font-family |
Písmo (jeho název) | |
font-style |
Styl písma (např. kurzíva) | |
font-size |
Velikost písma | |
font-weight |
Tloušťka písma (Pozor! ne každé písmo tuto možnost podporuje) | |
text-decoration |
„Dekorace“ textu (např. podtržení, nadtržení, čára skrz) | |
text-align |
Zarovnání textu (vpravo, střed, vlevo, odstavec) | |
height |
Výška | |
width |
Šířka | |
opacity |
Průhlednost (mezi 0 a 1) | |
cursor |
Styl kurzoru (více třeba tady) | |
Barvy lze zapisovat několika možnostmi. Nejjednodušší je použít anglický název, lze ale použít třeba šestnáctkovou soustavu (#ffffff) nebo RGB (rgb(255, 255, 255)).
Desetinná čísla začínající na nulu nemusíme v CSS psát celá (tj. místo 0.85 stačí napsat .85 apod.).
U velikosti, výšky a šířky můžu použít různé jednotky. O pixelech jsem se už zmiňoval, když jsem řešil obrázky ve druhém článku. Další jednotky jsou často složité, můžeš si o nich přečíst tady.
Znovu zdůrazňuji, že je zbytečné se vlastnosti učit. Ty důležité si časem zapamatuješ, zbytek vždy dohledáš.
Jedna vlastnost, více hodnot
Předešlé vlastnosti byly vždy ve stylu vlastnost-hodnota. Některé vlastnosti ale mohou mít hodnot více. Patří mezi ně třeba border (ohraničení), které má celkem 3 hodnoty - tloušťku, styl a barvu.
border: 1px solid black;nebo
border: 6px dotted red;Atribut style=""
Použiju-li atribut style, k elementu poté kaskádový styl zařadím takhle:
<pstyle="color:green;">Tento text bude zelený.</p>
Jednotlivé vlastnosti vždy odděluji středníkem ;.
Tahle metoda nám ale moc od HTML nepomohla. Styl musím stále psát ke každému elementu, a je to tak poměrně zdlouhavé.
Element <style>
S tím nám může pomoci „stylopis“. Jinými slovy styl píšu mimo zbytek dokumentu, HTML mám tak zvlášť, a je tedy přehlednější.
Samotný element style se pak musí nacházet v hlavičce. Navíc, tím, že máme všechny vlastnosti na jednom místě, musím vždy přidat i název tagu, jehož vlastnosti upravuji:
<head><!-- Zde může být titulek, vlastnosti dokumentu --><style>%tag%{%vlastnost1%:%hodnota%;%vlastnost2%:%hodnota%;/* A podobně... */}</style></head><body><!-- Obsah stránky --></body>
Ano, komentáře v CSS se zapisují jinak! Už víš jak?
Tento způsob zapisování kaskádových stylů nám tedy zjednoduší práci a zpřehlední HTML. Taky nemusíme styly psát několikrát za sebou. Když totiž chci, aby všechny odstavce měly červený text a žluté pozadí, stačí mi jedno pravidlo:
p{color:red;background-color:yellow; }
Možná si ale říkáš, že potřebuješ kombinovat zmíněné 2 možnosti zápisu stylů - chceš změnit 10 vlastností jen některých elementů, ale nechceš se se všemi tolikrát vypisovat. Použiješ třídy (atribut class) - věnuji jim další článek.
Externí .css soubor
Abychom úplně oddělili CSS a HTML, můžeme je rozdělit do rozdílných dokumentů. Jedná se o nejpoužívanější způsob na většině webů. Jeden CSS soubor potom může používat více stránek najednou, což se hodí při větších projektech.
Do takového CSS souboru potom zapisuješ styly stejně, jako bys psal/a do elementu <style>.
Hlavička tvé webovky ale musí obsahovat cestu k souboru se styly:
<head><!-- Zde může být titulek, vlastnosti dokumentu --><linkrel="stylesheet"href="cesta/k/souboru/nazev.css"></head>
Kombinace
Všechny zmíněné metody samozřejmě můžeš kombinovat. Stejná pravidla můžeš psát i několikrát za sebou (ale neměl/a bys!). Pamatuj ale, že přednost má vždy to poslední.
body{color:brown;/* Barva textu bude hnědá */background-color:yellow;/* Neplatí, dole je přepsáno */}body{background-color:blue;/* Pozadí bude modré, přepsal jsem původní hodnotu */}
Děkuju stránce Jak psát web za pomoc s překladem mých znalostí do češtiny.
Chápeš to? Super! Můžeme pokračovat něčím složitějším.