CSS

C++, PHP, Delphi, SQL, HTML, CSS, x51, AVR ASM

Vítejte na osobních stránkách Martina Poláška

Elektrotechnika, fyzika, programování

Úvod

CSS vznikly přibližně kolek roku 1997. V podstatě se jedná o soubor metod sloužících pro formátování textů a grafiky na webových stránkách. Zkratka CSS znamená v originále Cascading Style Sheets, česky tedy kaskádové styly. Velkou výhodou kaskádových stylů je možnsot definovat velké množství podobných prvků jedním zápisem, přičemž u konkrátního výskytu měníme už jen rozdílné detaily. Stímto úzce souvisí pojmem dědičnost, o nemž se však zmínim později.

Proč kaskádové styly vlastně vzniklky? Důvod je prostý. Někdy kolem roku 1996 formátovací možnosti jazyka HTML přestávaly stačit a hledala se proto nová cesta, která by jednak umožnila nové, oproti HTML daleko širší a nevídané možnosti, a na druhá straně byla stoprocentně zpetně kompatibilní s formátem HTML. Technologie, která by nědělala neděla problámy se zobrazením textu ve prohlížečích bez podpory její podpory. No a práve tohle otevřelo kaskádovým stylům cestu do nynější doby. V podstě lze říci, že kaskádové styly dnes tvoří základ prakticky všech modernídh webových stránek.

Co nám tedy CSS nabízí?

Co nám tedy CSS nabízí? Jednodiše vše co umí jazyk HTML plus spostu dalších věcí navíc. Formátovací možnosti CSS jsou takřka stejné jako například vám všem jistě známé možnosti textovehého editoru M$ Word. Další, již zníněnou výhodou je možnost hromadně preddefinovat na stránce často používané prvky, jako jsou nadpisy, odkazy, buňky tabulek, samotné tabulky, odstavce textu, obrázky, odrážky, atd., v podtatě můžeme předdefinovat libovolný HTML tag.

Syntaxe CSS

Syntaxe kaskádových stylů je následující: jako první napíšeme název dané vlastnosti, oddělíme dvojtečkou, a uvedeme jeho hodnotu. Celou definici pak ukončíme středníkem a postup opakujeme, dokud nenadefinujeme všechny vlastnosti

Použití a implementace do stránky

V podsatě jsou tři možností, jak kaskádový styl do stránky implementovat. První, asi nejjednodušší z nich, je tzv. inline zápis, kdy kaskádový styl vkládáme přímo do tagu, jehož vlastnosti chceme měnit. Styl zapisujeme jako hodnotu atributu style, jež má implementovnán každý HTML tag. Takto nastavené vlastnosti mají přednost před původními a atributy nastavenými vlastnostmi tagu.
nepř.:

<d style="color: red; font-size: 20px; text-align: center;">nějaký text</td>

Tento zápis změní barvu, velikost a zarovnání písma uvnitř buňky tabulky.

Další metodouu je zápis v hlavičce stránky. Ten se provádí mezi do párové tagy <style></style>. Zde můžeme předdefinovat vlastnosti jednotlivých tagů, hromadně deklarovat třídy, nebo predefinovat jeden konkrétní prvek na stránce.
nepř.:

Pokud budeme chtít předdefinovat vlastnosti jednotlivých tagů, napíšeme jeho název a do složených závorek potom hodnoty daných vlastností. To se může hodit napříhlad pro hromadnou definici nadpisů, odtavců, nebo odkazů.
Dále můžeme definoavat trídy. To uděláme tak, že napíšeme tečku a název definované třídy. Do složených závorek potom zapíšeme hodnoty jednotlivých vlastností. Takto nadefinovanou třídu lze s pomocí atributu class příradit k libovolnému tagu. K třídě lze v dokumentu přiřadit libovolný počet prvků.
nepř.:

<p class="odstavec">nějaký text</p>

V hlavičce lze preddefinovat i jeden konkrátní prvek. Delá se to tak, že napíšeme mřížku a název prvku. Do složených závorek potom zapíšeme hodnoty jednotlivých vlastností. Takto nadefinovaný prvek můžeme potom připojit k tagu s pomocí atributu id. Rozdíl oproti třídě je v tom, že takovýto prvek se může v dokumentu vyskytnout pouze jednou.
nepř.:

<p id="hlavicka">nějaký text</p>

Poslední metodou je zápis v externím souboru. Ten se provádí s pomocí nepárového tagu <link>, v jehoz atrubutu href udevedeme cestu k souboru.
nepř.: