Rozdíly
Zde můžete vidět rozdíly mezi vybranou verzí a aktuální verzí dané stránky.
Obě strany předchozí revize Předchozí verze Následující verze | Předchozí verze | ||
krouzek:css_2023 [2023/10/25 07:10] – admin | krouzek:css_2023 [2023/11/15 20:54] (aktuální) – upraveno mimo DokuWiki 127.0.0.1 | ||
---|---|---|---|
Řádek 8: | Řádek 8: | ||
----- | ----- | ||
- | === CSS === | + | ===== CSS ===== |
Jeho syntaxe se výrazně liší od HTML. Slouží také k jinému účelu. Zatímco HTML se snaží zachytit **význam**, | Jeho syntaxe se výrazně liší od HTML. Slouží také k jinému účelu. Zatímco HTML se snaží zachytit **význam**, | ||
Když CSS vepíšete jen tak do stránky, udělá z něj prohlížeč čistě text. | Když CSS vepíšete jen tak do stránky, udělá z něj prohlížeč čistě text. | ||
CSS se zapisuje | CSS se zapisuje | ||
- | * Dovnitř tagu style, mezi '' | + | |
- | * Do atributu '' | + | * Do atributu '' |
- | * Do externího souboru (třeba // | + | * Do externího souboru (třeba // |
- | // | + | // |
- | ====== Úvod do CSS (Cascading Style Sheets) | + | ==== Úvod do CSS (Cascading Style Sheets) ==== |
CSS (Cascading Style Sheets) je jazyk, který slouží k definování vizuálního stylu a formátování webových stránek. Tento nástroj umožňuje oddělit obsah stránky (použitím HTML) od jeho vizuální prezentace. V této úvodní lekci se zaměříme na základní koncepty CSS, jeho syntaxi a způsoby, jak můžete používat CSS k úpravě vzhledu vašich webových stránek. | CSS (Cascading Style Sheets) je jazyk, který slouží k definování vizuálního stylu a formátování webových stránek. Tento nástroj umožňuje oddělit obsah stránky (použitím HTML) od jeho vizuální prezentace. V této úvodní lekci se zaměříme na základní koncepty CSS, jeho syntaxi a způsoby, jak můžete používat CSS k úpravě vzhledu vašich webových stránek. | ||
- | ===== Co je CSS? ===== | + | ==== Co je CSS? ==== |
vlastností CSS: | vlastností CSS: | ||
Řádek 33: | Řádek 33: | ||
- | ===== Příklad CSS pravidla | + | ==== Příklad CSS pravidla ==== |
Nyní si představme jednoduchý příklad CSS pravidla: | Nyní si představme jednoduchý příklad CSS pravidla: | ||
Řádek 47: | Řádek 47: | ||
</ | </ | ||
- | Toto pravidlo vybere všechny nadpisy první úrovně (`<h1>`) na stránce a nastaví jejich textovou barvu na modrou a velikost písma na 24 pixelů. | + | Toto pravidlo vybere všechny nadpisy první úrovně ('' |
---- | ---- | ||
+ | ==== CSS Selektory ==== | ||
+ | === Typový selektor === | ||
+ | Aplikuje se na typy tagů - může třeba ovlivnit všechny odstavce, všechny odkazy '' | ||
+ | CSS uvnitř < | ||
+ | <code css> | ||
+ | p { | ||
+ | color: blue; | ||
+ | } | ||
+ | </ | ||
+ | HTML v < | ||
+ | <code html> | ||
+ | < | ||
+ | </ | ||
+ | === ID selektor === | ||
+ | Každý HTML tag může mít atribut '' | ||
+ | CSS pravidlo | ||
+ | <code css> | ||
+ | #header { | ||
+ | background-color: | ||
+ | } | ||
+ | </ | ||
+ | HTML kód | ||
+ | <code html> | ||
+ | <div id=" | ||
+ | </ | ||
+ | |||
+ | === Třídní selektor === | ||
+ | Každý tag může mít atribut '' | ||
+ | |||
+ | CSS pravidlo | ||
+ | <code css> | ||
+ | .button { | ||
+ | background-color: | ||
+ | color: white; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | HTML kód | ||
+ | <code html> | ||
+ | <button class=" | ||
+ | </ | ||
+ | |||
+ | === Selektor potomka (Descendant Selector) === | ||
+ | Využívá se hierarchie HTML - každý tag (krom kořenového '' | ||
+ | |||
+ | CSS pravidlo | ||
+ | <code css> | ||
+ | ul li { | ||
+ | list-style-type: | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | HTML kód | ||
+ | <code html> | ||
+ | <ul> | ||
+ | < | ||
+ | < | ||
+ | </ul> | ||
+ | </ | ||
+ | |||
+ | To jsou nejdůležitější druhy selektorů v CSS. Dají se i kombinovat, například: | ||
+ | * '' | ||
+ | * '' | ||
+ | |||
+ | ---- | ||
+ | ==== CSS Vlastnosti ==== | ||
+ | Tady jsou ty nejpoužívanější: | ||
+ | * **color**: Barva textu; hodnoty jsou jména barev (např. " | ||
+ | * **background-color**: | ||
+ | * **background-image**: | ||
+ | * **background-size**: | ||
+ | * **background-position**: | ||
+ | * **background-attachment**: | ||
+ | * **font-size**: | ||
+ | * **font-family**: | ||
+ | * **font-weight**: | ||
+ | * **font-style**: | ||
+ | * **text-align**: | ||
+ | * **text-decoration**: | ||
+ | * **line-height**: | ||
+ | * **letter-spacing**: | ||
+ | * **word-spacing**: | ||
+ | * **text-transform**: | ||
+ | * **text-indent**: | ||
+ | * **white-space**: | ||
+ | * **padding**: | ||
+ | * **margin**: Okolní mezera prvku; hodnoty jsou čísla nebo procenta pro všechny čtyři strany. | ||
+ | * **border**: Ohraničení prvku; hodnoty zahrnují tloušťku, styl a barvu ohraničení. | ||
+ | * **width**: Šířka prvku; hodnoty jsou v px, em, %. | ||
+ | * **height**: Výška prvku; hodnoty jsou v px, em, %. | ||
+ | * **display**: | ||
+ | * **position**: | ||
+ | * **float**: Umisťuje prvek do proudu textu; hodnoty jsou " | ||
+ | * **clear**: Zamezuje obklopení plovoucích prvků; hodnoty jsou " | ||
+ | * **z-index**: | ||
+ | * **opacity**: | ||