Obsah stránky sa číta, prosím čakajte…
Tvorba webových stránok – Manuál k redakčnému systému Rheia 1.0, Roman Horváth, © 2015, powered by Rheia
TWS – Manuál k RS Rheia 1.0 – Obsah | Formátovanie obsahu « Bežné konflikty formátovania textu | Odporúčané preddefinované štýly »
Štýl prvkov webovej stránky sa dá ovplyvniť pomocou takzvaných triedy kaskádových štýlov (CSS 
). Podrobnosti o kaskádových štýloch môžete nájsť v rozsiahlej on‑line dokumentácii o CSS na CSS Tutorial alebo na Cascading Style Sheets .
Na úpravu lokálneho štýlu (t. j. definovanie vlastných tried CSS štýlov) slúži v RS Rheia direktíva #style:.
Príklad:
#style: ol.myAlphaList { list-style-type: lower-alpha; }
#orderedList:myAlphaList
1. prvý,
2. druhý,
3. tretí.
Výsledok:
- prvý,
- druhý,
- tretí.
Výsledkom príkladu je nastavenie triedy štýlov zotriedeného (číslovaného) zoznamu tak, aby bol zoznam zobrazený s abecedným „číslovaním“ položiek.
| Poznámka: | Vlastné triedy štýlov sú skombinovateľné s preddefinovanými triedami štýlov, napríklad s triedami určenými na vytvorenie viacúrovňových zoznamov – pozri kapitolu Viacúrovňové zoznamy. Musia byť v prislúchajúcej direktíve oddelené medzerou. Podobne ako sú skombinované preddefinované triedy štýlov tabuliek v kapitole Štýly tabuliek. |
|---|
Vkladanie definície štýlov na viacero riadkov
Pri vkladaní viacerých riadkov definície štýlu je vhodné použiť zachytávanie riadkov systémom Rheia. Nasledujúca ukážka kódu je príkladom použitia zachytávania. Ukazuje na viacero riadkov rozpísanú vyšie uvedenú definíciu triedy štýlov myAlphaList:
#style:#openCapture
ol.myAlphaList
{
list-style-type: lower-alpha;
}
#closeCapture
Klauzula !important
V literatúre o kaskádových štýloch sa môžete dočítať o klauzule !important, ktorej účelom je prekrytie priorít kaskádovania. Slúži na to, aby definícia vlastností štýlu s nižšou prioritou v kaskáde prekryla ostatné definície. Pri jej používaní treba byť obozretný. Je lepšie sa jej použitiu vyhnúť.
Ak sa chcete vyhnúť použitiu CSS klauzuly !important, tak musíte na prekrytie niektorých vlastností preddefinovaného štýlu portálu dodržať presné poradie a hierarchiu prvkov preddefinovaného štýlu. (Aby sa prehliadač dopracoval k rovnakej priorite v kaskáde a mohol prekryť staršiu definíciu novšou.) Inak zostane zachovaný pôvodný formát, podľa pravidiel určovania priority pri kaskádovaní v CSS . (Pre podrobnosti pozri: Jak psát web. Kaskádování v CSS .)
| Poznámka: | Na zistenie presnej hierarchie prvkov preddefinovaného štýlu je potrebné vyhľadať želaný štýl v zdrojovom kóde CSS v individuálnej konfigurácii portálu. Napríklad zdrojový kód CSS portálu PdF TU je uložený na tejto adrese: http://pdf.truni.sk/design/style.css . |
|---|
Príklad:
#style:#openCapture
div.page-content table.innerLines tr td
{
border-color: silver;
}
div.page-content table.innerLines tr th
{
border-color: silver;
font-weight: normal;
color: red;
}
#closeCapture
#tables:innerLines
*X → O → ∘
O → *X → O
O → X → *X
Výsledok:
| X | O | |
|---|---|---|
| O | X | O |
| O | X | X |
Niekedy je jednoduchšie použiť CSS klauzulu !important, tak ako v príklade s podfarbením buniek tabuľky na konci kapitoly Štýly tabuliek. Pravidlo znie: Čím menší rozsah vplyvu bude mať použitie klauzuly !important (t. j. čím menší vplyv bude mať na celkový vzhľad stránky a systém kaskádových štýlov v nej použitej), tým je jej použitie vhodnejšie.
Podkapitoly:
Súvisiace kapitoly:
- Štýly obrázkov
- Zmena štýlu odsekov
- Viacúrovňové zoznamy
- Zarovnanie obsahu buniek
- Štýly tabuliek
- Preddefinované kódy, definícia vlastných kódov a ďalšie direktívy
Otázky a úlohy:
- Čo je to trieda štýlov?
- Ako je možné triedy štýlov kombinovať?
- Na čo slúži direktíva
#style:? - Čo je vhodné pouziť pri vkladaní viacerých riadkov definície štýlu?
- Aký účel plní klauzula
!important? - Ako je možné vyhnúť sa použitiu klauzuly
!important? - Aké pravidlo je potrebné dodržiavať pri použití klauzuly
!important?