Rozdíly
Zde můžete vidět rozdíly mezi vybranou verzí a aktuální verzí dané stránky.
Následující verze | Předchozí verze | ||
krouzek:css_2023 [2023/10/25 07:01] – vytvořeno admin | krouzek:css_2023 [2023/11/15 20:54] (aktuální) – upraveno mimo DokuWiki 127.0.0.1 | ||
---|---|---|---|
Řádek 8: | Řádek 8: | ||
----- | ----- | ||
- | === CSS === | + | ===== CSS ===== |
- | //(ChatGPT, upraveno)// | + | 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. | ||
+ | |||
+ | CSS se zapisuje | ||
+ | * Dovnitř tagu style, mezi '' | ||
+ | * Do atributu '' | ||
+ | * Do externího souboru (třeba // | ||
+ | |||
+ | // | ||
+ | |||
+ | ==== Ú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. | ||
+ | |||
+ | ==== Co je CSS? ==== | ||
+ | vlastností CSS: | ||
+ | |||
+ | * **Selektory: | ||
+ | * **Vlastnosti: | ||
+ | * **Hodnoty: | ||
+ | * **Pravidla: | ||
+ | * **Kaskáda: | ||
+ | |||
+ | |||
+ | ==== Příklad CSS pravidla ==== | ||
+ | |||
+ | Nyní si představme jednoduchý příklad CSS pravidla: | ||
+ | |||
+ | <code css> | ||
+ | /* Selektor - vybere všechny nadpisy <h1> na stránce */ | ||
+ | h1 { | ||
+ | /* Vlastnost - nastaví barvu textu na modrou */ | ||
+ | color: blue; | ||
+ | /* Vlastnost - nastaví velikost písma na 24px */ | ||
+ | font-size: 24px; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | 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> | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | 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**: | ||