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 | Úprava štýlov « Úprava štýlov | Automatická typografia »
Funkčnosť jadra RS Rheia nie je priamo závislá na definícii kaskádových štýlov (CSS ), ale viaceré vizuálne výsledky je možné získať len s ich pomocou a niektoré prvky formátovania priamo súvisia so spôsobom ich definície v súbore kaskádového štýlu. V tejto kapitole sú zhrnuté odporúčané definície tých tried štýlov, ktoré sú súčasťou predvolenej konfigurácie RS Rheia.
Základné spôsoby formátovania
Väčšina základných spôsobov formátovania textu (opísaných v kapitole Základné formátovanie textu) používa pôvodný štandard W3C. , no definícia niektorých prvkov formátovania musela byť pozmenená v súbore kaskádového štýlu. Pôvodného štandardu sa držia tieto prvky:
Znak | Význam | Element HTML | Ukážky |
---|---|---|---|
* | tučné písmo | b |
tučné |
/ | kurzíva | i |
kurzíva |
_ | podčiarknuté písmo | ins |
podčiarknuté |
‑ | prečiarknuté písmo | del |
|
^ | horný index | sup |
indexhorný, a2 |
ˇ | dolný index | sub |
indexdolný, a0 |
` | ukážka kódu | code |
Let a = 10 |
Vzhľad nasledujúcich základných spôsobov formátovania textu je upravený v súbore s definíciou kaskádového štýlu:
Znak | Význam | Element HTML | Ukážka |
---|---|---|---|
| | špeciálne zvýraznenie (malé šedé písmo) | em |
malé šedé písmo |
~ | špeciálne zvýraznenie (červené písmo) | strong |
červené písmo |
≈ | zvýraznenie definície (modré písmo) | dfn |
modré písmo |
‗ | dvojité podčiarknutie | ins.double‑strike |
Ich predvolená CSS definícia by mohla vyzerať takto:
em { font-size: 85%; font-style: inherit; color: gray; } strong { font-weight: inherit; color: #A00; } strong em { color: #A66; } dfn { font-style: inherit; color: #00A; } dfn em { color: #66A; } ins.double-underline { text-decoration: inherit; border-bottom: 3px double; }
Plávajúce obrázky
V kapitole Vlastnosti obrázkov je uvedené, že obrázky môžu mať priradenú vlastnosť plávania. Plávajúci obrázok je obtekaný textom odseku spôsobom, na aký sme zvyknutí v novinách. Predvolený spôsob použitia tejto vlastnosti je priamo závislý na definícii nasledujúcej dvojice tried štýlov:
img.floatLeft { float: left; margin: 10px; } img.floatRight { float: right; margin: 10px; }
Ich definícia by sa mala vyskytnúť v súbore kaskádových štýlov každej konfigurácie RS Rheia. V prípade potreby je možné použiť alternatívny spôsob vloženia plávajúceho obrázka, ktorý je opísaný v kapitole Štýly obrázkov.
Viacúrovňové zoznamy
Tvorbou viacúrovňových zoznamov sa zaoberá kapitola Viacúrovňové zoznamy. Predvolený spôsob ich vytvorenia je závislý na prislúchajúcich definíciách kaskádových štýlov.
Jestvujú dva základné typy zoznamov – číslované a nečíslované (odrážkové). Vytváranie vyšších úrovní takýchto zoznamov sú prirodzenou súčasťou špecifikácie jazyka HTML . Rheia ich však nepodporuje. Namiesto toho sa spolieha na definíciu vzhľadu vyššej úrovne zoznamu pomocou kaskádových štýlov. Predvolená definícia môže vyzerať napríklad takto:
ul.level-2 { padding-left: 65px; list-style: circle; } ol.level-2 { padding-left: 65px; } ul.level-3 { padding-left: 90px; list-style: square; } ol.level-3 { padding-left: 90px; }
Tieto triedy štýlov by mali byť definované v každej konfigurácii RS Rheia, inak by bola predvolená funkčnosť systému obmedzená. (V prípade potreby je vždy možné definovať na jednotlivých stránkach vlastný štýl. Podobne ako je to opísané napríklad v kapitole Štýly obrázkov alebo v kapitole Zarovnanie obsahu buniek v sekcii Vertikálne zarovnanie obsahu buniek.)
Zmena štýlu tabuliek
V kapitole Štýly tabuliek sú vymenované preddefinované triedy štýlov tabuliek RS Rheia. Bez ich korektnej definície v CSS súbore aktívnej konfigurácie RS Rheia by ani jeden zo štýlov nebol použiteľný.
Ide o nasledujúce preddefinované triedy: shaded
, framed
, blocks
, signatures
, notes
, documentList
a innerLines
. Ich definície sú značne komplexné, preto sme ich rozdelili do samostatných kariet.
Poznámka: | V predvolenej konfigurácii RS Rheia tvorí jadro stránky komponent adresovateľný selektorom div.page‑content . Tento selektor bol z dôvodu zvýšenia prehľadnosti zdrojových kódov kaskádových štýlov z ukážkových definícií publikovaných v rámci tejto kapitoly odstránený. |
---|
Toto je predvolený štýl tabuliek.
Ukážka:
Hlavička | Hlavička | Hlavička |
---|---|---|
Bunka | Bunka | Bunka |
Bunka | Bunka | Bunka |
Bunka | Bunka | Bunka |
Definícia štýlu:
table.shaded { border-collapse: collapse; margin-right: auto; margin-left: auto; margin-bottom: 14px; } table.shaded tr th, table.shaded tr td { border: 1.5px solid rgba(238, 238, 238, 0.5); padding: 3px 12px; font-size: 12px; background-color: rgba(255, 255, 255, 0.1); } table.shaded tr th ul li, table.shaded tr td ul li, table.shaded tr td code { font-size: 12px; } table.shaded tr td em code { font-size: 85%; } table.shaded tr th { background-color: rgba(0, 0, 0, 0.1); } table.shaded thead tr:nth-child(odd) td, table.shaded tbody tr:nth-child(even) td { background-color: rgba(128, 128, 128, 0.1); border-left: 1.5px solid rgba(221, 221, 221, 0.5); border-right: 1.5px solid rgba(221, 221, 221, 0.5); }
Ukážka:
Hlavička | Hlavička | Hlavička |
---|---|---|
Bunka | Bunka | Bunka |
Bunka | Bunka | Bunka |
Bunka | Bunka | Bunka |
Definícia štýlu:
table.framed { border-collapse: collapse; margin-right: auto; margin-left: auto; margin-bottom: 14px; } table.framed tr th, table.framed tr td { border: 1.5px solid rgba(53, 53, 53, 0.25); padding: 3px 12px; font-size: 12px; background-color: rgba(255, 255, 255, 0.05); } table.framed tr th ul li, table.framed tr td ul li, table.framed tr td code { font-size: 12px; } table.framed tr td em code { font-size: 85%; } table.framed tr th { background-color: rgba(0, 0, 0, 0.05); } table.framed, table.framed thead, table.framed tbody { border: 2.0px solid rgba(53, 53, 53, 0.25); }
Ukážka:
Hlavička | Hlavička | Hlavička |
---|---|---|
Bunka | Bunka | Bunka |
Bunka | Bunka | Bunka |
Bunka | Bunka | Bunka |
Definícia štýlu:
table.blocks tr th, table.blocks tr td { padding: 2px 4px; vertical-align: top; }
Ukážka:
Hlavička | Hlavička | Hlavička |
---|---|---|
Bunka | Bunka | Bunka |
Bunka | Bunka | Bunka |
Bunka | Bunka | Bunka |
Definícia štýlu:
table.signatures { table-layout: fixed; margin-top: 44px; width: 100%; } table.signatures tr th, table.signatures tr td { padding: 2px 4px; vertical-align: top; text-align: center; } table.signatures tr th em, table.signatures tr td em { font-style: italic; }
Túto triedu je vhodné skombinovať s inou z tried. Najlepšie s triedou blocks
.
Ukážka:
Hlavička | Hlavička | Hlavička |
---|---|---|
Bunka | Bunka | Bunka |
Bunka | Bunka | Bunka |
Bunka | Bunka | Bunka |
Definícia štýlu:
table.notes { width: 100%; } table.notes tr th, table.notes tr td { font-size: 12px; padding: 0px 4px; color: gray; }
Túto triedu je vhodné skombinovať s inou z tried. Napríklad s triedou shaded
.
Ukážka:
Hlavička | Hlavička | Hlavička |
---|---|---|
Bunka | Bunka | Bunka |
Bunka | Bunka | Bunka |
Bunka | Bunka | Bunka |
Definícia štýlu:
table.documentList { width: 100%; } table.documentList tr td:nth-child(1) ul li, table.documentList tr th:nth-child(1) ul li { text-align: left; } table.documentList tr td:nth-child(2), table.documentList tr th:nth-child(2) { width: 120px; text-align: right; } table.documentList tr td:nth-child(3), table.documentList tr th:nth-child(3) { width: 60px; text-align: right; }
Ukážka:
Hlavička | Hlavička | Hlavička |
---|---|---|
Bunka | Bunka | Bunka |
Bunka | Bunka | Bunka |
Bunka | Bunka | Bunka |
Sekcia hlavičky nie je predvolene oddelená čiarou od tela tabuľky. V prípade potreby sa dá definícia štýlu vhodne upraviť (pozri nadradenú kapitolu – Úprava štýlov) alebo definíciu sekcie hlavičky nahradiť riadkom pozostávajúcim z hlavičkových buniek (pozri kapitolu Hlavičky tabuliek):
Hlavička | Hlavička | Hlavička |
---|---|---|
Bunka | Bunka | Bunka |
Bunka | Bunka | Bunka |
Bunka | Bunka | Bunka |
Definícia štýlu:
table.innerLines { border-collapse: collapse; margin-bottom: 14px; } table.innerLines tr th, table.innerLines tr td { border: 1.5px solid black; padding: 3px 12px; } table.innerLines tr:first-child th, table.innerLines tr:first-child td { border-top: none; } table.innerLines tr:last-child th, table.innerLines tr:last-child td { border-bottom: none; } table.innerLines tr th:first-child, table.innerLines tr td:first-child { border-left: none; } table.innerLines tr th:last-child, table.innerLines tr td:last-child { border-right: none; }
Zarovnanie tabuliek
V kapitole Štýly tabuliek je uvedená informácia o kombinovaní predchádzajúcich preddefinovaných tried štýlov tabuliek (shaded
, framed
, blocks
…) s trojicou ďalších štýlov, ktoré slúžia na horizontálne zarovnanie celej tabuľky na stránke (doľava, na stred, doprava). Ukážka ich definície je uvedená nižšie.
Poznámka: | V predvolenej konfigurácii RS Rheia tvorí jadro stránky komponent adresovateľný selektorom div.page‑content . Tento selektor bol z dôvodu zvýšenia prehľadnosti zdrojových kódov kaskádových štýlov z ukážkových definícií publikovaných v rámci tejto kapitoly odstránený. |
---|
table.left { margin-left: initial; margin-right: initial; } table.center { margin-left: auto; margin-right: auto; } table.right { margin-left: auto; margin-right: initial; }
Tieto triedy štýlov by mali byť definované v každej konfigurácii RS Rheia, inak by bola predvolená funkčnosť systému obmedzená. (V prípade potreby je vždy možné definovať na jednotlivých stránkach vlastný štýl. Podobne ako je to opísané v kapitole Zarovnanie obsahu buniek v sekcii Vertikálne zarovnanie obsahu buniek.)
Vertikálne zarovnanie obsahu buniek tabuliek
V kapitole Zarovnanie obsahu buniek v sekcii Vertikálne zarovnanie obsahu buniek je uvedený predvolený spôsob vertikálneho zarovnania obsahu buniek tabuľky. Tento spôsob je závislý na prislúchajúcich definíciách v súbore kaskádových štýlov. Ukážkové definície sú uvedené nižšie.
Poznámka: | V predvolenej konfigurácii RS Rheia tvorí jadro stránky komponent adresovateľný selektorom div.page‑content . Tento selektor bol z dôvodu zvýšenia prehľadnosti zdrojových kódov kaskádových štýlov z ukážkových definícií publikovaných v rámci tejto kapitoly odstránený. |
---|
table tr td.top, table tr th.top { vertical-align: top; } table tr td.middle, table tr th.middle { vertical-align: middle; } table tr td.bottom, table tr th.bottom { vertical-align: bottom; }
Tieto triedy štýlov by mali byť definované v každej konfigurácii RS Rheia, inak by bola predvolená funkčnosť systému obmedzená. (V prípade potreby je vždy možné definovať na jednotlivých stránkach vlastný štýl. Podrobne je to opísané v kapitole Zarovnanie obsahu buniek v sekcii Vertikálne zarovnanie obsahu buniek.)
Prispôsobenie veľkosti písma v bunkách tabuliek
Nasledujúca definícia štýlu ukazuje predvolený spôsob zmenšenia písma v bunkách tabuľky s pomocou kombinovateľnej triedy štýlov. Hodnota 150%
v skutočnosti písmo zväčšuje, pretože v dôsledku dedičnosti kaskádových štýlov je v predvolenej konfigurácii hodnota veľkosti písma 100%
príliš malá.
div.page-content table.small tr th, div.page-content table.small tr td { font-size: 150%; }
Tlačidlá
V kapitole Vloženie príkazu JavaScriptu je uvedená aj možnosť využitia vlastných tlačidiel vykonávajúcich príkazy JavaScriptu . Na vloženie tlačidiel do toku textu stránky slúžia triedy štýlov button
a fakebutton
, ktoré sú použiteľné prostredníctvom vlastného formátovania textu (pozri význam symbolu dvojitej zvislej čiary (‖
) v kapitole Základné formátovanie textu). Tieto triedy štýlov tiež musia byť definované v súbore obsahujúcom definície kaskádových štýlov.
Nasledujúci príklad ukazuje jeden z možných spôsobov definície vzhľadu tlačidiel:
span.button, span.fakebutton { background-color: #ededed; background: linear-gradient(#ededed, #ededed, #dfdfdf); box-shadow: inset 0px 1px 0px 0px #ffffff; border: 1px solid #dcdcdc; border-radius: 8px; padding: 2px 8px; color: #444444; font-size: 14px; font-family: "Arial", "Tahoma", sans-serif; text-shadow: 1px 1px 0px #ffffff; } span.button { text-decoration: none; cursor: default; } span.button:hover { background-color: #dfdfdf; background: linear-gradient(#dfdfdf, #dfdfdf, #ededed); } span.button:active { position: relative; top: 1px; }