CSS kaskádové styly

$HD_DaDo_Ts

Dobrý den, dnes vám chci představit CSS styl (kaskádové styly)

Co je to CSS styl?
» CSS styl nám umozňuje definovat vlastnosti stránky a to např: barvy, velikost písma, pozadí, šířku, výšku, zarovnávání a mnoho dalších věcí.
» Pro tvorbu css stylu potřebujeme umět aspoň základ HTML!.

Čím mohu tvořít css styl?
» Pro tvorbu css stylu vám stačí normallni textový editor např: Pspad, Adobe Dreamweaver CS4 a další…

Jak spojit CSS styl s html?
» Do záhlaví stránky <head></head> přidáme tento kód:

Kód: Vybrať všetko

<link rel="stylesheet" type="text/css" href="styl.css">

Práce s css stylem?
» CSS styl je celkem jednoduchý, css styl se skláda ze dvou častí a to selektor a deklarace. Selektora deklaraci musíme vždy { otevřít a zavžít }.
» Ted si to vyzkoušíme na <p></p>

Kód: Vybrať všetko

p {
color: #000; /* barva písma "černá" */
font-size: 12px; /*  velikost písma "12pixelu" */
}

CSS styl (class, id)
» Class a id dovoluje to, pokud potřebujete např: jeden sloupec šedivý a druhý zelený.
» v HTML - použijeme CLASS

Kód: Vybrať všetko

<div class="test">Text</div>

» v CSS style - použijeme pro class . (tečku)

Kód: Vybrať všetko

.test {
color: green; /* barva písma */
}

» Jak mužete sami vidět „text“ bude zelený, protože jsme použily zelenou barvu v css style.
» Uplně samim zpusobem jde použit ID.
» v html se píše ID

Kód: Vybrať všetko

<div id="test">Text</div>

» u ID se píše dvojkřížek #

Kód: Vybrať všetko

#test {
color: green; /* barva písma */
}

» V čem je vlastně ID jiný než class?. ID se chová v css style uplně stejně jako class, rozdíl je ve scriptech a v parsování dokumentu.

+ Poznámky v CSS style
» Ještě jedna maličkost a to ta, že css styl podporuje i poznámky kterými si mužeme popisovat jednotlive časti css style např:
» /* vaše poznámka */

Kód: Vybrať všetko

.neco {
color: green; /* vaše poznámka */
}