Zobrazit stránkuStarší verzeZpětné odkazyNahoru Tato stránka je pouze pro čtení. Můžete si pouze prohlédnout zdrojový kód, ale ne ho měnit. Zeptejte se správce, pokud si myslíte, že něco není v pořádku. ==== Opakování z minula ==== S použitím předchozích znalostí o [[krouzek:html|HTML]]: * Najděte svoji html stránku z minula * Vytvořte druhý html soubor s jiným obsahem * Propojte oba soubory navzájem prostřednictvím odkazů ''%%<a href="druha.htm">Druhá stránka</a>%%'' Pokud by to byly dvě stránky webové prezentace školy, například "O nás" a "Kontakt", akorát bychom odkazy dali pěkně k sobě, barevně je odlišili - a vzniklo by menu, na které jste asi zvyklí z webů a aplikací. Čistě s html si tedy můžete vytvořit a publikovat vlastní web! Jaké je ale omezení samostatných html souborů? Co když potřebujete změnit něco "společného", například přidat položku do menu? ----- ===== CSS ===== Jeho syntaxe se výrazně liší od HTML. Slouží také k jinému účelu. Zatímco HTML se snaží zachytit **význam**, CSS se soustředí na **vzhled**. 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 ''%%<style>%%'' a ''%%</style>%%''. Ten se musí nacházet v hlavičce (''%%<head>%%'') stránky * Do atributu ''%%style=%%'' libovolného tagu * Do externího souboru (třeba //vzhled.css//), který se dá do stránky připojit v hlavičce tagem ''%%<link href="vzhled.css" rel="stylesheet" />%%'' //Následuje ChatGPT, rozšířeno a upraveno// ==== Ú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:** CSS vám umožňuje vybrat konkrétní části HTML dokumentu, na které chcete aplikovat styly. Selektory jsou způsoby, jak definovat, které elementy budou ovlivněny CSS pravidly. * **Vlastnosti:** CSS definuje různé vlastnosti, jako je barva textu, velikost písma, pozadí, odsazení a mnoho dalších, které mohou být upraveny. * **Hodnoty:** K vlastnostem přiřazujete hodnoty. Například barvu textu můžete nastavit na "červenou" nebo pozadí na "#FFFFFF" (bílou). * **Pravidla:** CSS pravidla spojují selektory s vlastnostmi a hodnotami. Tato pravidla určují, jak se vybrané elementy budou zobrazovat. * **Kaskáda:** Termín "cascading" ve jméně "Cascading Style Sheets" znamená, že CSS pravidla mohou být děděna a přepsána. To umožňuje vytvořit hierarchii stylů a věnovat se obecným a specifickým pravidlům. ==== 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; } </code> 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ů. ---- ==== CSS Selektory ==== === Typový selektor === Aplikuje se na typy tagů - může třeba ovlivnit všechny odstavce, všechny odkazy ''%%<a>%%'', všechny obrázky v dokumentu. CSS uvnitř <style>, nebo v externím souboru: <code css> p { color: blue; } </code> HTML v <body> stránky: <code html> <p>Toto je odstavec s modrým textem.</p> </code> === ID selektor === Každý HTML tag může mít atribut ''%%id=%%'' obsahující jeho identifikátor. Ten by měl být na stránce unikátní. CSS pravidlo <code css> #header { background-color: lightgray; } </code> HTML kód <code html> <div id="header">Toto je záhlaví s pozadím v barvě lightgray.</div> </code> === Třídní selektor === Každý tag může mít atribut ''%%class%%'' ve kterém je jedna či více názvů tříd, oddělené mezerami. Můžete si tak vytvořit třídu na nějak související prvky - například všechny externí odkazy (vedoucí na jiné weby) chcete ukázat jinou barvou. Nebo v knížce vysvětlující rámeček - může jich být víc, ale vzhled je třeba nastavit pouze jednou. CSS pravidlo <code css> .button { background-color: green; color: white; } </code> HTML kód <code html> <button class="button">Klikněte zde</button> </code> === Selektor potomka (Descendant Selector) === Využívá se hierarchie HTML - každý tag (krom kořenového ''%%<html>%%'') má svého jednoho rodiče (parent). Některé tagy mají potomky (children). HTML tedy tvoří [[https://cs.wikipedia.org/wiki/Strom_(datov%C3%A1_struktura)|datovou strukturu strom]]. CSS pravidlo <code css> ul li { list-style-type: square; } </code> HTML kód <code html> <ul> <li>První položka seznamu</li> <li>Druhá položka seznamu</li> </ul> </code> To jsou nejdůležitější druhy selektorů v CSS. Dají se i kombinovat, například: * ''%%p.pink%%'' cílí všechny odstavce s třídou pink * ''%%table#infotabulka td%%'' ovlivní všechny buňky v tabulce s id infotabulka ---- ==== CSS Vlastnosti ==== Tady jsou ty nejpoužívanější: * **color**: Barva textu; hodnoty jsou jména barev (např. "red") nebo kódové hodnoty (např. "#FF0000"). * **background-color**: Barva pozadí; hodnoty jsou stejné jako u `color`. * **background-image**: Obrázek použitý jako pozadí prvku; hodnota obsahuje URL obrázku, např. ''%%url('pozadi.png')%%''3. **background-repeat**: Opakování obrázku v pozadí; hodnoty zahrnují "repeat", "repeat-x", "repeat-y", "no-repeat". * **background-size**: Velikost pozadí; hodnoty mohou být délky (px, em) nebo "cover", "contain". * **background-position**: Pozice obrázku v pozadí; hodnoty zahrnují konkrétní pozice (např. "top left") nebo procentuální hodnoty. * **background-attachment**: Chování pozadí vůči prvku; hodnoty zahrnují "scroll" a "fixed". * **font-size**: Velikost písma; hodnoty jsou v px, em, %, atd. * **font-family**: Rodina písma; hodnoty jsou jména fontů nebo "generic font families" (např. "Arial", "serif", "sans-serif"). * **font-weight**: Tučnost písma; hodnoty jsou čísla (100 - 900), "normal" nebo "bold". * **font-style**: Styl písma; hodnoty jsou "normal", "italic", "oblique" atd. * **text-align**: Zarovnání textu; hodnoty jsou "left", "right", "center", "justify". * **text-decoration**: Ozdobení textu; hodnoty jsou "none", "underline", "overline", "line-through". * **line-height**: Výška řádku; hodnoty jsou čísla nebo procenta. * **letter-spacing**: Šířka mezery mezi písmeny; hodnoty jsou v px, em, %. * **word-spacing**: Šířka mezery mezi slovy; hodnoty jsou v px, em, %. * **text-transform**: Transformace textu; hodnoty jsou "uppercase", "lowercase", "capitalize". * **text-indent**: Odsazení prvního řádku; hodnoty jsou v px, em, %. * **white-space**: Ovlivňuje zpracování mezer a konečků řádků; hodnoty jsou "normal", "nowrap", "pre". * **padding**: Vnitřní odsazení prvku; hodnoty jsou čísla nebo procenta pro všechny čtyři strany. * **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**: Způsob zobrazování prvku; hodnoty zahrnují "block", "inline", "inline-block". * **position**: Způsob pozicování prvku vůči jeho rodiči; hodnoty zahrnují "relative", "absolute", "fixed". * **float**: Umisťuje prvek do proudu textu; hodnoty jsou "left", "right". * **clear**: Zamezuje obklopení plovoucích prvků; hodnoty jsou "left", "right", "both". * **z-index**: Vrstva zobrazování prvků; hodnoty jsou celá čísla. * **opacity**: Průhlednost prvku; hodnoty jsou desetinná čísla od 0 (úplně průhledné) do 1 (neprůhledné). krouzek/css_2023.txt Poslední úprava: 2023/11/15 20:54autor: 127.0.0.1