Tipy a triky k vlastnostem
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.