CSS – Články – Programujte.com

Pro mnoho intranetových aplikací či backendových záležitostí se nám hodí základní UI. To se nesmí rychle okoukat, musí být pro uživatele standardní a přitom by mělo být na oko pohledné. Dovolím si za příklad vzít standardní vzhled prvků z Windows 7. Tento design si dnes nakódujeme pouze pomocí CSS3 (s trochou JavaScriptu), ale kompletně bez obrázků, tedy „vektorově“.

Určitě jste již slyšeli o připravovaných a žhavých technologiích CSS3 a HTML5. V tomto článku se pokusím představit hlavní a nové vlastnosti, které vám aktuálně CSS3 nabízí.

Tvorba stylového a profesionálně vypadajícího formuláře typicky vyžaduje použití nějakých obrázků (a možná i JavaScriptu). Nicméně s CSS3 je nyní mnohem snazší vytvořit pěkné efekty, které nevyžadují použití obrázků a přitom vypadají čistě a elegantně.

Spousta lidí je fascinována tím, kolik zajímavých věcí se dá udělat jen za přispění CSS3. Mnohé prvky uživatelského rozhraní, které vyžadují obrázky proto, aby měly přijatelný vzhled, mohou být nyní stylizovány pouze technologií CSS3. Důkaz? Předvedeme si, jak jednoduše udělat menu podobné nabídce Start ve Windows 7 jen s malým využitím CSS3 a několika ikonek.

Základní kámen úrazu začínajícího kodéra či webdesignéra: jak dosáhnout toho, aby každý element měl stanovenou (a dobře vypočtenou) velikost a jak ji vůbec spočítat, aby byl daný element správně vykreslen? Víte, že na vině v chybné interpretaci box modelu je W3 konsorcium samo? Jak dosáhnout téměř stejných výsledků napříč prohlížeči?

V dnešním článku se blíže podíváme na nejčastější chyby, kterých se kodéři dopouštějí při tvorbě webu za pomocí kaskádových stylů. Tento jazyk je sice velmi mocný, na druhou stranu nijak neomezuje tvůrce webu v jeho používání, což vede k častým chybám. Přináším vám tedy soupis deseti nejčastějších chyb, které lze v CSS udělat.

Možná si někdo z vás pokládal otázku, zda lze pomocí CSS zprůhlednit obrázek, nebo text. Možná už se to někomu podařilo, možná ne. My se proletíme od základů CSS transparentnosti přes moře příkladů až po využití v praxi.

4.1 ⋅ Čo je layout a prečo práve pomocou CSS
4.2 ⋅ Tvorba layoutu
   4.2.1 ⋅ Úvod
   4.2.2 ⋅ Kontajner
   4.2.3 ⋅ Hlava
   4.2.4 ⋅ Menu
   4.2.5 ⋅ Textbox
   4.2.6 ⋅ Reklama
   4.2.7 ⋅ Textbox bez odsadenia
   4.2.8 ⋅ Päta
4.3 ⋅ Záver

3.1 ⋅ Class selektor
3.2 ⋅ ID selektor
3.3 ⋅ Viacnásobné štýlové hárky
3.4 ⋅ Záver

2.1 ⋅ Ako na stránku umiestniť štýlový hárok
2.2 ⋅ Základná syntax
2.3 ⋅ Spájanie do skupín
2.4 ⋅ Komentáre
2.5 ⋅ Záver

1.1 ⋅ Čo by ste už mali vedieť
1.2 ⋅ CSS v bodoch
1.3 ⋅ Štýly riešia všeobecný problém
1.4 ⋅ Štýlové hárky ušetria mnoho práce
1.5 ⋅ Možnosti použitia CSS
1.6 ⋅ Záver

Hackovat se dá i legálně.

Začíná nový seriál na téma CSS. Co ta zkratka vlastně znamená? Proč CSS používat? Na tyto a další otázky najdete odpověď v dnešním úvodním dílu seriálu.

6.1 - Slovo úvodem
6.2 - Pokračujeme v přehledu
6.3 - Domácí úkol..

5.1 - Pokračujeme v přehledu
5.2 - Domácí úkol..

4.1 - Na co si dát pozor
4.2 - Úvod k přehledu vlastností CSS
4.3 - Domácí úkol..

Příkladová lekce - nejlepší způsob, jak vyzkoušet svoje znalosti v praxi a ještě více vylepšit svůj CSS skill. Tak na co ještě čekáte?..

2.1 - Malá rozcvička
2.2 - Úvod do TopStyle a definice externího CSS souboru
2.3 - Domácí úkol

Co to je CSS? Proč je lepší je používat? ..