Rozdíly

Zde můžete vidět rozdíly mezi vybranou verzí a aktuální verzí dané stránky.

--- 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**, 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
+  * 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 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" />%%''
+  * 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, upraveno//
+//Následuje ChatGPT, rozšířeno a upraveno//
-====== Ú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.
-===== Co je CSS? =====
+==== Co je CSS? ====
 vlastností CSS:
@@ Řádek 33: / Řádek 33: @@
-===== Příklad CSS pravidla =====
+==== Příklad CSS pravidla ====
 Nyní si představme jednoduchý příklad CSS pravidla:
@@ Řádek 47: / Řádek 47: @@
 </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ů.
+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é).