LAB04 - nvbach91/4IZ268-2022-2023-ZS GitHub Wiki
- GitHub usernames
- Doplnění cv03
- CSS - kaskádové styly
- Syntaxe CSS pravidel
- Jak aplikovat styly do HTML dokumentu
- Selektory
- Kaskádovost a priorita stylů
- Vlastnosti pro aplikování barev
- Barvy
- Jednotky měření
- CSS vlastnosti - písmo, text, pozadí
- CSS vnitřní okraj, ohraničení a vnější okraj
- CSS Box model
- Zobrazení, pozicování
- Pseudo třídy a pseudo elementy
- Domácí úkol
- jazyk pro definování vzhledu webové stránky,
- tj. jak se které elementy na jakém zařízení mají zobrazit (nebo tisknout)
- cílem CSS je efektivní design vzhledu stránky
- možnost animace prvků
- V CSS souboru se nacházejí pravidla
-
Pravidlo se skládá z
- selektoru - tj. co, kde, který, jaký
- deklarace stylů - tj. jak, čím
- syntaxe:
selektor {
vlastnost-1: hodnota-1;
vlastnost-2: hodnota-2;
...
}
- anatomie CSS pravidla
-
inline - přímo v atributu
style
nějakého elementu - !! nepoužívat !! -
internal - v
<head>
pomocí tagu<style>
- !! nepoužívat !! -
external - pomocí odkazu na styly v samostatném
.css
souboru pomocí<link>
- cílem je oddělit veškeré styly od HTML obsahu
- typy selektorů https://www.w3schools.com/cssref/css_selectors.asp
-
tag selektor - např.
div
-
class selektor - např.
.post
-
id selektor - např.
#menu
-
attribute selektor - např.
[type="button"]
-
pseudo selektor - např.
button:hover
- selektor potomka - např.
div p
- selektor dítěte - např.
div > p
- selektor sourozence - např.
div + p
adiv ~ p
-
kombinace selektorů - např.
div.post > p
-
skupina selektorů - např.
div, p > a, img:hover, .post + #menu
-
tag selektor - např.
- styly se přepisují u shodných vlastností - viz Developer Tools
-
inline
>internal
>external
>browser-default
- podle pořadí zápisu
- podle specifičnosti
- barva textu - vlastnost
color
např.p { color: red; }
- barva pozadí - vlastnost
background-color
např.div { background-color: green; }
- barva ohraničení - vlastnost
border-color
např.div { border-color: blue; }
- pojmenované -
black
,white
,red
,green
,blue
,violet
,orange
, ... - hexadecimální:
-
#000000
, -
#ffffff
, -
#ff0000
, -
#00ff00
, -
#0000ff
, -
#abcdef
, ...
-
- RGB:
-
rgb(0, 0, 0)
, -
rgb(255, 255, 255)
, -
rgb(255, 0, 0)
, -
rgb(0, 255 ,0)
, ...
-
- RGBa:
-
rgba(0, 0, 0, 0.5)
, -
rgba(255, 255, 255, 0.6)
, -
rgba(255, 0, 0, 0.7)
, ...
-
- HSL:
-
hsl(0, 0, 0)
, -
hsl(100%, 100%, 100%)
, -
hsl(100%, 0, 0)
, ...
-
- HSLa:
-
hsla(0, 0, 0, 0.5)
, -
hsla(100%, 100%, 100%, 0.6)
, ...
-
- je jich ještě víc
- Přehled všech vlastností - https://www.w3schools.com/cssref/default.asp
- Přehled browser-default vlastností a jejich hodnot - https://www.w3schools.com/cssref/css_default_values.asp
- https://www.w3schools.com/css/css_pseudo_classes.asp
- Pseudo třídy definují speciální stavy elementů, např. když je myš nad elementem
- Pseudo elementy se používají ke stylování specifických částí elementu
- Vyzkoušejte uvedené CSS vlastnosti na následujícím HTML dokumentu
- https://github.com/nvbach91/4IZ268-2022-2023-ZS/blob/master/www/nguv03/cv04x/pokemons/index.html
- Barva textu (color)
- Typ a velikost písma (font-family, font-weight, font-style, font-size, ...)
- Odřádkování (line-height)
- Zarovnání (text-align)
- Pozadí (background-color, background-image, background-size, background-repeat, background-position)
- Vnitřní okraje (padding, ...)
- Ohraničení (border, ...)
- Vnější okraje (margin, ...)
- Pozicování (position: absolute, relative, fixed, ...)
- Stavy elementů: visited, hover, focus, ...
- Termín odevzdání příští Čt 23:59:59
- používejte pouze HTML5 a externí CSS, bez JS!
- nastylujte následující HTML dokument tak, aby byly splněny všechny dílčí požadavky, které jsou v něm uvedené, používejte
class
selektory a kombinujte je, kde to dává smysl. - nahrát úkol na server eso.vse.cz tak, aby byl dostupný jako https://eso.vse.cz/~xname/cv04/
- odkaz na tuto stránku napište do k tomu vyhrazehéno vlákna v Issues https://github.com/nvbach91/4IZ268-2022-2023-ZS/issues
- transition,
- transformation,
- pseudo classes,
- pseudo elements,
- layout
- @media,
- responzivní design,
- flexbox,