Úvod do CSS (Cascading Style Sheets)

Toto je starší verze dokumentu!

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?

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

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