Odporúčané preddefinované štýly

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	prečiarknuté
^	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	dvojité počiarknutie

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.

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);
}

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);
}

table.blocks tr th,
table.blocks tr td
{
	padding: 2px 4px;
	vertical-align: top;
}

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;
}

table.notes
{
	width: 100%;
}

table.notes tr th,
table.notes tr td
{
	font-size: 12px;
	padding: 0px 4px;
	color: gray;
}

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;
}

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.

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.

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;
}