HOME    SKRIPTY
3. díl seriálu o CSS - Tipy a triky
Alpin | 31. května 2007

Komentáře
Aby byl kód css přehlednější, někdy se do něj hodí přidat nějaká poznámka či dodatek, abychom se pak v kódu vyznali i za delší dobu. Tato věc se řeší pomocí komentářů.
Zapisují se:
/* komentář */ .

Nepokoušejte se dělat něco jako vnořené komentáře:
/* jeden komentář /* vnořený komentář */ a tak to nejde */

Je to špatně, máte kvůli tomu nevalidní CSS a může vám to poškodit zobrazení stránky v různých prohlížečích.

Zakomentování kódu

Další věcí, která se v CSS používá, je zakomentování kódu, pokud ho vkládáte přímo do hlavičky a ne do externího CSS souboru. Použijí se normální komentářové značky z HTML.

<style type="text/css">
<!--

.test {
        background-image:  url(smil3dbd4e4c2e742.gif);
        background-position: 50px 50px;
        background-color: #00FF66;
        background-repeat: no-repeat;
        background-attachment: fixed;
}
-->
</style>

Je to z toho důvodu, aby nějaké starší prohlížeče neznalé CSS nezobrazily omylem CSS kód na stránce.

Přehlednost kódu:
VCSS platí stejná zákonitost o white spaces (bílé znaky - souhrnné označení pro skupinu znaků, která není vidět, ale také formátuje text -> mezery, konce řádků, tabulátory atd.) jako v HTML. Takže nějaký ten konec řádku či mezera navíc neuškodí. Pokud jsou white spaces použity cíleně, mohou skvěle zpřehlednit jinak velice zamotaný CSS kód.

a {background-color: blue; background-image: url(obrazek.gif); background-attachment: fixed; text-decoration: none; color: #009966;}

je to samé jako:

a {
        background-color: blue;
        background-image: url(obrazek.gif);
        background-attachment: fixed;
        text-decoration: none;
        color: #009966;
}

A teď mi řekněte, který ztěchto téměř identických zápisů se vám lépe čte?

Vícenásobná a cílená aplikace stylů:
Proč nevytvořit pro více elementů stejný styl?

a, h4, span {…}

jednoduše od sebe oddělíme názvy elementů čárkou a stejný styl se aplikuje na všechny.

div a {…}
Tak tohle je trošku zvláštnější příklad. Zvolený styl se aplikuj na všechny elementy „a" které se nacházejí vnějakém tagu div. Z tohoto příkladu se může zdát použití takového způsobu troch nepraktické, ale časem při složitějším používání spolu skaskádováním poznáte výhody tohoto způsobu.
Více tříd:
Jak aplikovat více tříd na jeden element? Bude se to zdát až příliš jednoduché, ale je to tak:
.nadpis {
        color: red;
        font-face: Arial;
        font-size: 16px;
        font-weight: bold;
}

.pozadi {
        background-image:  url(smil3dbd4e4c2e742.gif);
        background-repeat: no-repeat;
        background-attachment: fixed;
}

<span class="nadpis pozadi">blabla</span>

Stačí vatributu class oddělit názvy jednotlivých tříd mezerou a použijí se všechny.

Použití CSS vXML:
Teď jenom taková malá zmínka stranou. Možná jste si při práci s nějakým dokumentem ve formátu XML všimli, že k němu byl přiřazen i CSS soubor. Ano je to tak, i XML jde formátovat pomocí CSS skoro stejně jako HTML. Rozebírání jazyka XML je však nad rámec tohoto kurzu.