CSS
(Osamostatnění stránky, revize a doplnění.)
Porovnání s novější verzí →
Verze z 7. 1. 2015, 11:25
Jazyk HTML by dnes měl popisovat pouze strukturu dokumentu (co je nadpis, co tabulka,...), nikoli vzhled prvků (barvy, ohraničení, uspořádání,...). Grafický vzhled prvků stránky by měl být popsán pomocí kaskádových stylů!
Obsah |
Základní použití
Připojení souboru se styly ke stránce
- V HTML souboru
- Do hlavičky HTML souboru (element
<head>
) doplníme odkaz na soubor se styly:
<link rel="stylesheet" type="text/css" href="nazev_souboru.css" />
- V souboru se styly (
.css
)
- (Jedná se o textový soubor s příponou
.css
) - Popíšeme, jaké grafické vlastnosti mají mít jednotlivé elementy a další prvky. Vždy uvádíme:
- název elementu, kterému vlastnost přiřazujeme,
- a pak do složených závorek názvy vlastností a jejich hodnoty.
Příklad: Tímto zápisem nastavíme všem nadpisům ve stránce zelenou barvu:
h1 { color: green; }
Základní vlastnosti
Stylu můžeme nastavovat různé vlastnosti. Jejich výčet najdete na webu, nejběžnější uvádíme:
-
color
: barva textu -
background-color
: barva pozadí -
border
: orámování textu či bloku -
margin
,padding
: vlastnosti okrajů odstavce, obrázku atd. -
font-weight
: tučné písmo -
font-style
: kurzíva -
text-align
: zarovnání textu (na střed, do bloku, vlevo, vpravo) -
text-indent
: odsazení prvního řádku odstavce
Příklad:
h2 { color: blue; background-color: lightblue; border: solid 2px blue; text-align: center; }
Vlastní styly
Pomocí kaskádových stylů můžeme přiřadit vzhled existujícímu elementu HTML (třeba všem nadpisům), ale můžeme také vytvořit vlastní styl a ten použít kdekoli ve stránce.
- Vytvoření vlastního stylu (v CSS)
- Stejně jako přiřazení vzhledu existujícímu elementu, ale místo názvu elementu uvedeme název stylu.
- Název vlastního stylu uvozujeme tečkou.
- Název nemůže obsahovat mezeru!
Soubor se styly: styly.css
h1 { color: blue; } .OdbornyTermin { font-style: italic; color: blue; }
- Použití stylu na vybraný text (v HTML)
- Text ohraničíme značkami
span
nebodiv
:-
div
vytvoří samostatný odstavec z označeného textu -
span
pouze aplikuje styl na označený text.
-
- V otvírací značce doplníme atribut
class
s název stylu jako hodnotou.
HTML soubor: index.html
<h1>Obyčejný nadpis</h1> <p> Text, ve kterém je <span class="OdbornyTermin">odborný termín</span>. A druhý <span class="OdbornyTermin">pojem</span> je také odborný termín. </p>
- Výsledek
Výsledek (v prohlížeči):
Text, ve kterém je odborný termín. A druhý pojem je také odborný termín.
Další způsoby připojení stylů
Snazší popis více stylů
Pokud je více stylů podobných, můžeme jejich popis kombinovat.
- Vnoření elementů
- Můžeme říci, že se vlastnosti uplatní pouze pokud je element vnořen v jiném elementu.
- Zapíšeme to tak, že napíšeme nejprve název „obalujícího“ elementu a pak název vnořeného elementu. Styl se uplatní na vnořený element.
V následujícím případě se velikost písma uplatní na nadpis pouze pokud je v buňce tabulky:
td h1 { font-size: bigger; }
- Společný vzhled
- Můžeme nastavit vlastnosti více stylům zároveň.
- Zapíšeme to tak, že názvy stylů oddělíme čárkou.
V následujícím případě se ohraničení uplatní na vlastní styl .Poznamka i na elementy table:
.Poznamka, table { border: 1px blue; }
- Následně můžeme ještě popis stylů doplňovat.
V následujícím případě se barva nastaví nadpisům úrovně 1 i 2, ale velikost textu jen na nadpisy úrovně 1:
h1, h2 { color: indigo; } h1 { font-size: bigger; }
Rozdělení stránky na oddíly
Vlastnosti v kaskádových stylech
-
float
: plovoucí objekt: vlevo, vpravo, na středu -
width
: šířka bloku -
height
: výška bloku
Vlastnosti přiřazujeme speciálním stylům, uvozeným znakem #
.
Na tyto styly se odkazujeme pomocí atributu id
.
HTML soubor: index.html
<div id="Menu"> Položka 1
Položka 2 </div> <p>Text text text...</p>
CSS soubor: styl.css
#Menu { float: left; width: 100px; background-color: yellow; }
Výsledek (v prohlížeči):
Položka 2
Související stránky
- Základy jazyka HTML, nástroje
- Testování webových stránek (při vývoji stránky)
- Publikování hotové stránky
- Cvičení na HTML a CSS:
Podrobnější zdroje
- GRIMMICH, Šimon. Tvorba webu [online]. c2003, c2008 [cit. 2010-10-06]. Dostupné z WWW: <http://www.tvorba-webu.cz/css>.
- Seznam vlastností CSS
- Učebnice
- Webové pomůcky — Somacon.com