CSS – pro pokročilé

Úvod

• CSS vs. ostatní technologie (HTML, JavaScript)
• historie, verze CSS (2.1 a 3), specifikace, podpora v prohlížečích
• nástroje pro tvorbu a analýzu CSS

Blokové a řádkové prvky

• vlastnost display (block, inline, inline-block, table-cell, none aj.)
• rozměry prvků a jejich obsahu (vlastnost width, height, overflow)
• vodorovné a svislé centrování
• sémanticky neutrální značky v html
• rozměry a zarovnání řádkových prvků

Změna polohy blokových prvků

• vlastnost float a clear
• vlastnost margin, použití záporných hodnot
• vlastnost position (absolute, relative), vytvoření vlastního systému souřadnic, vlastnosti top, left
• vlastnost z-index

Media query

• tiskový styl
• nové možnosti v CSS3 (nejen) pro mobilní přizpůsobivý web

Praktické použití

• sloupcový layout stránky - strategie a možnosti
• navigace, rozbalovací menu, vodorovné vysouvací menu aj.
• fotogalerie a jiné detaily stránek

Nové možnosti CSS3

• selektory
• font-face (použití vlastního fontu)
• border-radius, barva rgba, box-shadow, text-shadow
• transforms, transitions, animations
• box-sizing
• multi-column layout
• Flexbox (CSS Flexible Box Model)
• nové možnosti práce s pozadím - linear gradient, multiple-backgrounds, background-size

Vzhled webu pro mobilní zařízení

• speciální stránky pro smartphony a tablety, nebo
• jedna verze webu - responsivní webdesign
• přizpůsobivé obrázky, alternativní obrázky
• grafika pro vysoké rozlišení (např. retina displej)
• optimalizace grafiky a rychlosti stránek, data uri, LESS aj.
• použití svg formátu

Předchozí kurzy

CSS – základní kurz [INTCS]

Navazující kurzy

PHP – skriptovací jazyk [INTPH1]

Adobe Photoshop – design webu a aplikací [PHSH4]