CSS

Kaskádové styly

Podsekce:

Přehled CSS vlastností a hodnot

Abecední seznam CSS vlastností

Příklady na CSS

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, výpočty calc() a proměnné var().

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

Obtékání v HTML a CSS

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

Obrázky na webu

Jak upravit odkazy

Okraje objektů - margin a padding

Různé webové prohlížeče

Definice v HTML - dd, dt, dl

Odkazy na kotvy

Sloupcovaný příklad

Vylepšení formulářů

Odkaz jako tlačítko

HTML tahák

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.

CSS kaskádové styly

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

www.webhosting-c4.cz, extra rychlý SSD webhosting s doménou v ceně
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.