Co je CSS?
CSS je zkratka pro C ascading S tyle S sheets
CSS popisuje, jak mají být prvky HTML zobrazeny
Příklad CSS
<style>
body
{background-color:lightblue; text-align:center;}
h1
{color:blue; font-size:40px;}
p
{font-family:verdana;
font-size:20px;}
</style>
Klikněte na tlačítko „Vyzkoušejte si to sami“ a uvidíte, jak to funguje.
Syntaxe CSS
Pravidlo CSS se skládá ze selektoru a deklaračního bloku:
Selektor ukazuje na prvek HTML ke stylu (h1).
Blok deklarací (ve složených závorkách) obsahuje jednu nebo více deklarací oddělených středníkem.
Každá deklarace obsahuje název vlastnosti CSS a hodnotu oddělené dvojtečkou.
V následujícím příkladu budou všechny prvky <p> zarovnány na střed, červené a budou mít velikost písma 32 pixelů:
Příklad
<style>
p
{font-size:32px; color:red;
text-align:center;}
</style>
Stejný příklad lze také napsat takto:
<style>
p
{
font-size: 32px;
color: red;
text-align: center;
}
</style>
Externí šablona stylů
Šablonu stylů CSS lze uložit do externího souboru:
mystyle.css
body {background-color: orange; font-family:verdana}
h1 {color: white;}
p {font-size: 20px;}
Externí šablony stylů jsou propojeny se stránkami HTML pomocí značek <link> :
Příklad
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="mystyle.css">
<body>
<h1>My First CSS Example</h1>
<p>This is
a paragraph.</p>
</body>
</html>
Inline styl
Příklad
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="mystyle.css">
<body>
<h1>My First CSS Example</h1>
<p>This is
a paragraph.</p>
<p style="font-size:25px">This is a paragraph.</p>
<p style="font-size:30px">This is a paragraph.</p>
</body>
</html>
Kaskádové pořadí
Pokud jsou pro prvky HTML zadány různé styly, styly budou kaskádovitě převedeny do nových stylů s následující prioritou:
- Priorita 1: Inline styly
- Priorita 2: Externí a interní šablony stylů
- Priorita 3: Výchozí prohlížeč
- Pokud jsou různé styly definovány na stejné úrovni priority, poslední má nejvyšší prioritu.
Příklad
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="mystyle.css">
<style>
body {background-color:
lightblue;}
</style>
<body style="background-color: olivedrab">
<h1>Multiple
Styles Cascades into One</h1>
<p>Try experimenting by removing styles to see how the cascading stylesheets
work.</p>
<p>Try removing the inline first, then the internal, then the
external.</p>
</body>
</html>
CSS Demo - Jedna HTML stránka - Více stylů!
Zde ukážeme jednu HTML stránku zobrazenou se 4 různými styly.
Kliknutím na tlačítka šablony stylů (1-4) zobrazíte stránku zobrazenou s různými styly.
Kompletní návod CSS
Toto byl krátký popis CSS.
Úplný návod CSS najdete na W3Schools CSS Tutorial .
Úplnou referenci CSS najdete na W3Schools CSS Reference .