CSS
Created by Petr Voborník
CSS
- Cascading Style Sheets
- Přidává HTML prvkům vlastnosti určující jejich vzhled, polohu atd.
Reference
Umístění definice stylů
SASS
- Do CSS přidává možnost používání proměnných, podmínek, zanořování, cyklů apod.
- Při publikaci webu se překompiluje na klasické CSS
- https://www.w3schools.com/sass/
Atributy elementů
- Každý vizuální HTML prvek může mít atribut style, do něhož lze určit hodnoty jeho vlastností
- Má vyšší prioritu než definice v CSS
- Zapisují se rovnou vlasnosti oddělené středníkem, např.
<p style="color: red; font-size: 1.2rem;">Ahoj</p>
Externí CSS soubor
<style> v HTML
- Do hlavičky
<head> HTML dokumentu lze přidat emelent podelement <style> - Do něho lze v CSS jazyce zapsat definici stylů stejným způsobem jako do CSS souboru
- Styl je pevně spojen s daným HTML dokumentem, nelze jej tedy sdílet mezi stránkami
- Nevhodné pro rozsáhlejší zápisy
Propojení s HTML
<link rel="stylesheet" href="styles.css" />
atributy:
- href - odkaz na připojovaný zdroj
- rel - vztah k dokumentu, pro: CSS "stylesheet"
- media - určení zařízení, pro která se má styl použít (screen, printer, speech...), default = "all"
- pro tisk např. skrýt menu, bílé pozadí a černý text…
Je-li elementů <link> více, záleží na pořadí (později zapsané, přepíše dříve zapsané.
CSS soubory se mohou importovat navzájem pomocí
@import 'style2.css';
https://www.w3schools.com/tags/tag_link.asp
display
různé pro monitor a pro tiskárnu
CDN
- CDN - Content Delivery Network
- Soubory s obsahem se nestahují z vašeho serveru (hostingu), ale dalšího distributora
- Ten má obvykle rozmístěné servery po světě, takže soubor může potovat kratší cestu
- Používá-li zdroj více webů, nacachuje se pouze 1x
- Vhodné především pro rozšířené knihovny typu Bootstrap, jQuery, Vue, React, Angular...
- Jeho pravost lze ohlídat hashem souboru
CSS
Minimalizace
- Z CSS souboru se odeberou všechny mezery, zalomení řádků, komentáře atd.
- Automaticky vykoná SW při publikaci webu (např. dolněk pro VS Bundler & Minifier)
- Menší velikost souboru - rychlejší načítání stránky, nižší zátěž spojení, menší čerpání dat, rychlejší zpracování
- Konvence pro pojmenování souboru: style.min.css
Jednotky
Každý rozměr (krom nuly) musí mít uvedené jednotky.
- px - pixely
- rem - vztaženo k základní velikosti fontu dokumentu, standardně 1rem = 16px, řeší zoom i různá rozlišení
- em - vztaženo k aktuální velikosti fontu na daném místě dokumentu
- % - relativní vyjádření vzhledem k rodičovskému elementu
- mm, cm, in (palce) - klasické metrické jednotky, vhodné např. při tisku
- vztaženo k velikosti okna prohlížeče
- vw - 1% šířky okna
- vh - 1% výšky okna
- vmin - 1% menšího rozměru okna
- vmax - 1% většího rozměru okna
https://www.w3schools.com/cssref/css_units.php
Priorita definic
- Selektory
- element: nic
- třída (class): .
- ID: #
- Specifičtější určení cesty podelementů, např.
nav .main article ul li a { … } - Při stejné úrovni
- Pořadí zápisu: později (blíže) zapsané, přepíše dříve zapsané
- Definice
<style> v <head> se stejným selektorem má přednost před připojeným CSS souborem - Atribut style
- Dodatek "!important" za hodnotou vlastnosti přebíjí vše, ale lze přebít bližším importantem, nicméně měl by se používat jen výjimečně, ideálně vůbec
Vlastnosti
Barvy
- Barva textu: color
- Barva pozadí: background-color
- Určení barvy
- Barevné přechody:
background: linear-gradient(red 0, blue 100%);background: linear-gradient(white 0, aqua 90%, green 91%);background: radial-gradient(yellow 0, aqua 100%);
Více prvků najednou (čárka)
- Definici vlastností lze aplikovat na více elementů/tříd současně
- Stačí je vypsat oddělené čárkou před začátek definice (před složenou závorku)
p, span, .text, a:hover {
color: blue;
}Proměnné
Umožňuje hromadnou změnu hodnoty používané na různých místech CSS (např. barev).
Definice proměnné
:root {
--cl-text: #404040;
}Použití proměnné
div {
color: var(--cl-text);
}responzivita (@media)
mobile first postup
Selektory
https://www.w3schools.com/cssref/css_selectors.php
Fonty
- font-family - druh písma
- lze definovat i vlastní fonty v souboru
- font-size - velikost písma
- font-weight - tloušťka písma
- text-decoration - podtržení, styl (kurzíva)…
- line-height - výška řádku
- ...
ID (#)
Odkaz na ID elementu:
<div id="hlavni"></div>
#hlavni { backbround-color: red; }
Element s daným ID by měl být v dokumentu jen 1x.
Identifikátor
Určení barvy
- Pojmenované barvy (red, green, blue, ...)
- Hexadecimálně:
#05C1FE - RGB:
rgb(5, 129, 224) - Včetně stupně průhlednosti (alpha kanál)
#CC05C1EFargb(128, 5, 129, 224)
Třída / class (.)
Elementy s danou třídou:
<div class="blok text"></div>
.blok { backbround-color: blue; }Třídu lze používat opakovaně (na více elementů v jednom dokumentu).
Speciální
Bloky
- background - pozadí, barva či obrázek
- color - barva textu
- border - orámování
Element (název elementu)
Definice pod HTML názvem elementu:
div { backbround-color: green; }
Platí pro všchny elementy daného typu, má ale nejnižší prioritu.
Podelementy
Layout
Transformace
- Otoční, posun, zkosení, měřítko, matice...
- Např. pro otočení:
transform: rotate(-90deg); - Origin - bod centra transformace (např. kolem kterého se objekt otáčí)
transform-origin: 20% 40%;
https://www.w3schools.com/cssref/css3_pr_transform.php
Hodnota atributu elementu [...]
input[type=text] { … }a[target=_blank] { … }- …
Zobrazení
display:
- none - neviditelný (skrytý) blok (stále je v HTML kódu)
- block - vykreslovat jako blok
- inline-block - plovoucí blok (nezabere celý řádek)
- flex, grid, table-cell... - má vliv na řazení jeho podelementů
https://www.w3schools.com/cssref/pr_class_display.php
Animace
- Plynulá změna hodnoty vlastnosti ze stávající na novou, během určené doby, při nějaké události
- Často v kombinaci s tranformacemi (např. zvětšení objektu po najetí myši), ale může se týkat i klasicých vlastností
.tlacitko { transition: transform .5s ease-in-out; }
.tlacitko:hover { transform: scale(1.2); }https://www.w3schools.com/cssref/css3_pr_transition.php
Stav elementu (dvojtečka)
- :hover - po najetí myši
a:hover { background-color: red } - :focus - editovaný prvek formuláře
- pořadí elementu
- :first-child - první
- :last-child - poslední
- :nth-child(2) - druhý
- :nth-child(2n-1) - každý druhý
- :not(:last-child) - negace (všechny mimo posledního)
- …
- …
tabulkový
- rozdělení obsahu stránky pomocí prvku
<table> popř. atributů colspan a rowspan - příliš pevné rozložení, téměř nelze řešit responzivitu
- zastaralé, už se nepoužívá, tabulky jsou jen na zobrazení 2D dat
Pozice
- relativní - position: relative;
- absolutní - position: absolute;
- Abolutní pozici lze určovat pouze podlelementu bloku s relativní pozicí.
- Relativní blok se posouvá s textem, absolutní dodržuje přesně zadané souřadnice a rozměry.
- Absolutní pozici lze určit jak zleva a shora, tak i vzdáleností od pravého či spodního okraje.
Všechny podelementy (mezera)
.clanek p { color: red; }
Platí pro všechna <p> v elementu s třídou "clanek", i když jsou vnořeny hlouběji.
<div class="clanek>
<p>Platí</p>
<div><p>Taky platí</p></div>
</div>
Přímý podelement (zobáček)
.clanek > p { color: red; }
Platí pro všechna <p> v elementu s třídou "clanek", která jsou vnořena přímo pod ním (nikoli zanořena hloběji).
<div class="clanek">
<p>Platí</p>
<div><p>Neplatí</p></div>
</div>
float
- elementy
<div> zapouzsdřují jednotlivé části - pomocí CSS vlastnosti float (plování vedle sebe) a margin (odsazení) jsou rozmísťovány po stránce
- není příliš robustní, náchylné k chybám
- již překonaný způsob, float je určen spíše k plování obrázků v textu apod.
flexbox
grid
Víceúrovňové rozevírací menu
Zdrojový kód (HTML+CSS) ukázkového webu s responzivním layoutem
web-html-css.zip
Vlastnosti flexboxu
- display: flex;
- flex-direction
- flex-wrap
- justify-content
- align-items
- align-content
- podprvky
- order
- flex-grow
- align-self
- …
Mezery mezi prvky (gap)
- gap - v obou směrech
- gap-row - mezi řádky
- gap-columne - mezi sloupci
Vlastnosti gridu
- display: grid;
- šablony (smary rozmístění)
- grid-template-columns
- grid-template-rows
- grid-template-areas
- grid-template
- podprvky
- jednotky
