CSS
Kaskádové styly
Přehled CSS vlastností a hodnot
Abecední seznam CSS vlastností
Základní kurz CSS
Úvod do CSS stylů, proč a k čemu používat styly
Strukturování textů je nutný předpoklad pro efektivní stylování (možno přeskočit)
CSS prakticky, různý zápis stylopisů, tag <style>, příklad tagu link:
<link rel="stylesheet" href="soubor.css">
Kaskádové styly, přehled vlastností CSS, klíčová stránka s vyčerpávajícím přehledem. Tabulky s příklady, informace o podpoře v prohlížečích.
Třídy a identifikátory, odlišení různých prvků dokumentu - class a id
Délkové jednotky v CSS - px, pt, em, ex, in, cm, procenta, vw
Proměnné a výpočty v CSS - proměnné var() a výpočty calc().
Zápis všech stran najednou pro vlastnosti border, margin a padding
Módy prohlížečů už většinou nemusíte studovat. Stačí, když na začátek souboru napíšete <!doctype html> a zbytek není třeba řešit.
@media pravidla v CSS umožní zobrazit stránku různým způsobem na základě vlastností prohlížeče nebo zařízení, takže se třeba dá udělat styl stránky pro telefon. Zmiňuji i podmínkování podle podpory @supports.
Pro pokročilé
CSS pozicování umožňuje na stránce umístit cokoliv kamkoliv - position, left, top, bottom, right, z-index
Ořez a skrollování využívají vlastnosti overflow a clip na skrolování a skrývání moc velkých věcí.
Sloupce pomocí pozicování, praktický příklad pozicování - position, left, top, z-index
Různé barvy odkazů pomocí CSS, praktické použití tříd (class)
Různý styl v různých prohlížečích využívá chyb prohlížečů
Odlišné formátování tisku pomocí media=print a @media print
Dynamické (načítané) fonty - @font face, eot soubory
Pravidla kaskádování, kdy je která vlastnost silnější
Vše o pozadí - velmi obsáhlý rozbor problematiky
Vertikální centrování v CSS - Yuhůovo definitivní řešení + totéž anglicky
Další nové CSS vlastnosti, které teprve zkoumám
http://jecas.cz/css-selektory Je nejlepší přehled pokročilých selektorů.
Pseudotřídy v CSS, zápisy selektorů oddělované dvojtečkou
Tabulky a testy CSS
Použitelná písma - font-family
Uživatelská písma - font
Barvy v HTML - color, background-color
Změna kurzoru pomocí CSS v MSIE - cursor
Stylování seznamů - ul, ol, li
Internet Explorer 3 - podporované CSS vlastnosti - prehistorická stránka ukazující CSS vlastnosti, které fungovaly vždycky a všude.
Další stránky s použitím CSS
Div a span, neutrální html tagy, důležité tagy pro CSS
Základy Dynamického HTML, jak stylované stránky rozhýbat po jejich načtení javascriptem
Okraje objektů - margin a padding
Definice v HTML - dd, dt, dl
CSS vlastnosti, hodnoty a příklady
Na této stránce jsou v pravém sloupečku odkazy na všechny rozumně použitelné CSS vlastnosti. Jsou tam místy možná chyby a nepřesnosti, prosím opravte mne.
Kaskádové styly, přehled vlastností CSS je starší stránka, na kterou se časem už všechno nevešlo.
Seznam CSS vlastností - abecední přehled s vysvětlením a odkazy
CSS příklady, neuspořádaný seznam zde použitých CSS příkladů (css example).
Častý překlep: CCS je čerpací karta, CSS jsou kaskádové styly (Cascading Style Sheets).
Slovníček moderních pojmů
| zaklínadlo | význam |
|---|---|
| polyfil | Skript, typicky přilinkovaný javascript, který do prohlížečů nepodporujících konkrétní vlastnost dodá takovou funkčnost, že tam ta CSS vlastnost začne fungovat. Díky tomu skriptu. Ne vždycky to funguje dobře a většinou to zpomaluje načítání. |
| fallback | Zpětná kompatibilita. Metoda, jak nepodporovanou vlastnost doplnit ještě nějakou jinou vlastností, která je podporovaná, aby to v nepodporujícím prohlížeči nedopadlo nějakou katastrofou. Například CSS gradienty nejsou podporovány všude, a tak je doporučeno je zachránit (fallback) jednoduchým barevným pozadím. |
| prefix | V prohlížečích se nové vlastnosti vyvíjejí (nebo spíše vyvíjely)
tak, že se nedělá hned podpora vlastnosti. Napřed se vytvoří podpora
vlastnosti s prefixem. Prefix je jakási předpona vlastnosti, každý velký
prohlížeč má svou. Prohlížeče postavené na jádře Webkit (Chrome, Safari,
Opera) mají prefix -webkit-, Firefox má -moz- a Edge má -ms-. Opera
mívala -o-, dokud měla vlastní vykreslovací jádro (teď už má Webkit).
Protože někdy se plná, neprefixová verze vlastnosti nepěkně zdrží, weboví autoři často používají vlastnosti s prefixem, typicky -webkit-. Na to navazují výrobci prohlížečů a začínají implementovat vlastnosti i s cizími prefixy. Bordel. Já prefixy nemám rád a snažím se jim v těchto návodech vyhýbat, pokud to jde. Podle mě je lepší si počkat na plnou podporu než si zaprasit styly prefixy. |
| preprocesor | Programy, které ze zápisů stylu v jiných jazycích než CSS umí vygenerovat CSS. Preprocesory se používají kvůli tomu, aby si autoři zjednodušili práci s CSS, vyhnuli se chybám a nemuseli se učit, které vlastnosti se musejí prefixovat a které ne. Usnadňují výpočty rozměrů prvků, zavádějí proměnné a funkce. Já osobně žádný CSS preprocesor nepoužívám, proto o nich nepíšu. |
Reklama
