Základy CSS - kaskádových stylů

CSS je zkratka anglického slova Cascading Style Sheets, což v překladu do češtiny znamená Kaskádové Styly. Autorem prvního návrhu této technologie byl Hakon Wium Lie, vznikl v roce 1997 a používá se na stránkách napsaných v HTML nebo XML.

Hlavní výhodou CSS je to, že jde o formát zcela oddělený od struktury HTML stránky, což znamená zjednodušení následujících úprav a zmenšení objemu přenášených dat.

Trojí použití CSS

1) Přímá definice stylu, je v textu u formátovaného elementu pomocí atributu.

<p style="color: #fff; font-weight: bold;">Text tohoto odstavce bud tučný a barva písma bílá.</p>

2) Tabulka stylů ve zdrojovém kódu mezi tagy <style> a </style>.

<style>
body {
        font-family: arial
        color: #000;
        background-color: #fff;
}

3) Externí tabulka stylů nebo-li soubor s příponou .CSS, na který se stránka odkazuje tagem <link>.

<link rel="stylesheet" href="cesta/k/externimu/souboru/se/styly.css">

Ne, selektor není vikingský bojovník

CSS má opravdu nepřeberné množství možností. Nastavujeme například velikost písma, různé barvy, odsazení, automatické formátování určitých prvků stránky, zvýrazňování odkazů po přejetí myši a mnoho, mnoho dalšího.

Prvek, pro který má nějaká definice platit, se nazývá selektor. Můžeme vytvořit třídy a identifikátory, což zjednodušuje práci. Třídami mohu označit například první a druhý odstavec, které pak budou ve stejné třídě a budou mít jednotný styl, identifikátor se od třídy liší tím, je v rámci stránky je pouze jeden, kdežto třída může být použita u více elementů.

// základní selektor dle tagu
body {
        color: #fff;
}

// zápis selektoru třídy
.trida {
        color: #f00;
}

// zápis selektoru identifikátoru
#identifikator {
        color: #000;
}

Jak je i zvýše uvedených příkladů zřejmé, definici CSS charakterizujeme jako „vlastnost: hodnota;“. Definice se mnohou spojovat do seznamu definic. Dvojtečka musí následovat přímo za názvem vlastnosti, ostatní mezery jsou libovolné. Za poslední definicí nemusí následovat středník, ale důrazně doporučuji jej psát – vyhnete se řadě nepříjemnostem při budoucí úpravě stylopisů.

U některých vlastností se mohou dědit hodnoty z rodiče na potomka. Pokud je vlastnost dědičná a potomek nějakého prvku nemá určenou vlastnost, zdědí tuto vlastnost po jeho rodiči. Například vlastnost color je dědičná a naproti tomu vlastnost border není.

CSS verze 2

CSS2 rozšířila možnosti stylování několika dalšími parametry, např.:

• outline – vnější ohraničení
• max-height, max-width – maximální a minimální výška, šířka
• counter – nástroj pro číslování capitol
• quotes – styly citací
• position – možnost pozicovat element absolutně, relativně či fixně
• overflow – přetékání obsahu elementu přes jeho rozměry

CSS verze 3

Už od roku 2005 o sobě dává tato verze vědět. CSS3 přináší například následující možnosti a není důvod se těchto možností bát, moderní prohlížeče je v drtivé většině již plně podporují.

• animace – CSS3 přímo podporuje animaci elementů (jejich vlastností)
• opacita – míra neprůhlednosti prvků
• 2D a 3D transformace – deformování objektů ve 2/3 rozměrech
• multiple columns
  • column-count rozdělí text v objektu do určitého počtu sloupců, které se řadí vedle sebe
  • column-gap nastaví mezery jednotlivých sloupců
  • column-rulenastaví čáry mezi sloupci

To je jen špetka toho, co nabízí (zatím) poslední verze Kaskádových stylů oproti svému předchůdci. CSS3 dávají webovým vývojářům do ruky mocný nástroj pro zatraktivnění internetových prezentací. Avšak s velkou mocí jde ruku v ruce i velká zodpovědnost.

Kategorie

• Marketing a analytika
• SEO & copywriting
• Webové stránky
• Webové technologie