CSS Tutoriál XIII. – Selektory Selektory v CSS jsou značky pomocí nichž vybíráme různé prvky nebo skupiny prvků na stránce. Můžeme pro toto používat třídy a identifikátory, ale občas potřebujeme jednodušší selekci prvků nebo naopak pro komplikovanější prvky komplikovanější deklarace. Kromě složených deklarací pomocí tříd a identifikátorů, které jsme si ukazovali v tutoriálu třídy a…

CSS Tutoriál XII. – Přeměny prvků Tentokrát se podíváme na to, jak můžeme změnit nějaký prvek, případně jak můžeme vytvořit nějaký přechod, přeměnu. Vlastně takovou animaci. Při těchto vlastnostech opět potřebujeme předponu -webkit- Pomocí vlastnosti transition nastavujeme jaké vlastnosti se změní a kdy. Toto je užitečné, pokud chceme aby se nám změnil prvek pouze specificky…

CSS Tutoriál XI. – Animace V tomto díle se podíváme na novou záležitost CSS 3, a to animace, od kterých si tvůrci slibují nahrazení některých skriptů či dokonce obsahů, které by musely být přehrány pomocí nějakých pluginů. Tyto vlastnosti nejsou plnně podporovány Chrome a Safari, potřebují proto předponu -webkit- . Animaci tvoříme pomocí vlastnosti @keyframes. Tato…

CSS Tutoriál X. – Sekce V tomto dílu si povíme něco víc o sekcích a vlastnostech, kterým jim můžeme přiřadit. Nejdříve tedy – co je to sekce. Sekce je oblast na stránce, která má typicky čtvercový/obdélníkový tvar. Nejčastěji jí poznáme podle tagu <div> ale HTML 5 nám přináší mnoho nových tagů, např <section>. Obsahem těchto…

CSS Tutoriál IX. – Výška a šířka V tomto díle se podíváme podrobněji na nastavení výšky a šířky objektu. Jak je ovlivňuje padding a border a jak si můžeme ulehčit práci. Jak už víme, šířku objektu nastavujeme vlastností width, kterou buď zadáváme v pixelech nebo v procentech. Stejně tak výšku zadáváme vlastností height, také v…

CSS Tutoriál VIII – Tabulky V osmém díle se budeme více zabývat tabulkami – ať už slouží jako navigace nebo cokoli jiného. Jak nastavit výplň, styl buněk a další. Začněme od základů – okrajů tabulky. Okraje nastavujeme vlastností border. Ta má opět mnoho nastavení – mezi nimi například border-color, border-width, border-style. Jakýkoli objekt u kterého…

CSS Tutoriál VII. – Pozadí stránky V tomto dílu se podíváme na různé způsoby úpravy pozadí stránky pomocí CSS. Nejjednoduší vlastnost background-color nám udává barvu pozadí. Syntax pro ní je velmi jednoduchý: body {background-color: #C8C8C8;} Jejími hodnotami jsou barvy buďto hexadecimálně zapsané (#FFFFFF) nebo pomocí slov (red), pomocí rgb (255,0, 255) nebo rgba (specifikovaný alfa…

CSS Tutoriál VI. – Úprava textu V šestém díle našeho tutoriálu se podíváme na další praktické uplatnění všech teoretických znalostí CSS o kterých jsme si říkali v prvních dílech. Tentokrát se zaměříme na vlastnosti, které použijeme při úpravě textu. S textem se v CSS dá vyhrát skoro nejvíc, můžeme nastavit téměř všechno, od fontu po…

CSS Tutoriál V. – Pozicování v CSS V tomto díle se již nebudeme tolik zabývat teorií jako v dílech předchozích, ale spíš praktickým využitím v jedné z nejdůležitějších věcí, které potřebujeme nastavit – a to pozici prvku na stránce. HTML pozicování se již nepoužívá, protože vše se dá udělat jednoduše v CSS stylu. Možností jak…

CSS Tutoriál I. – Úvod do CSS Vítejte v CSS Tutoriál, ve kterém se dozvíte základní věci o CSS, jeho pravidlech, zápisu a důležitých vlastností. V prvním díle se podíváme na základy, co to vlastně CSS je a jak ho použijeme. CSS neboli Cascading Style Sheets je jazyk, kterým popisujeme styl zobrazení HTML  (xHTML) dokumentů. Hlavním…