krouzek:css_2023 [Kroužek Javascriptu]

S použitím předchozích znalostí o 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?

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

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.

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.

Nyní si představme jednoduchý příklad CSS pravidla:

/* 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ě (<h1>) na stránce a nastaví jejich textovou barvu na modrou a velikost písma na 24 pixelů.

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:

p {
    color: blue;
}

HTML v <body> stránky:

<p>Toto je odstavec s modrým textem.</p>

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

#header {
    background-color: lightgray;
}

HTML kód

<div id="header">Toto je záhlaví s pozadím v barvě lightgray.</div>

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

.button {
    background-color: green;
    color: white;
}

HTML kód

<button class="button">Klikněte zde</button>

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ří datovou strukturu strom.

CSS pravidlo

ul li {
    list-style-type: square;
}

HTML kód

<ul>
    <li>První položka seznamu</li>
    <li>Druhá položka seznamu</li>
</ul>

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

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é).