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 | Tvorba odkazov | Vkladanie obrázkov « Vlastnosti obrázkov | Obrázok s odkazom »
Každému obrázku môžete nastaviť samostatný zoznam tried štýlov a to pomocou klauzuly class:
. Zoznam tried štýlov je možné definovať alebo upraviť podľa informácií, ktoré sú uvedené v kapitole Úprava štýlov.
(Zoznam tried je zoznamom identifikátorov tried štýlov oddeľovaných medzerami. Samozrejme, že takýto zoznam smie obsahovať aj jedinú položku a často zoznam aj pozostáva z jedinej položky.)
Príklad:
#style: .myImageClass { border: 3px dashed gold; padding: 2px; ↩ background-color: snow; } {class:myImageClass|img:manual/obrazok.png}
Výsledok:
RS Rheia umožňuje upraviť predvolené zoznamy tried štýlov plávajúcich obrázkov. Tak je možné úplne zmeniť správanie sa vlastnosti float
, ktorá je opísaná v kapitole Vlastnosti obrázkov. K dispozícii sú dva predvolené zoznamy, ktoré je možné upraviť pomocou direktív: #floatLeft:
«zoznam tried» a #floatRight:
«zoznam tried».
Príklad:
#floatLeft:myFloatClass
Tieto zoznamy sú predvolene jednoprvkové, pričom ich prvky (predvolené triedy plávajúcich obrázkov) majú rovnaký názov ako samotné zoznamy, čiže: floatLeft
pre obrázky plávajúce vľavo a floatRight
pre obrázky plávajúce vpravo. Za štandardných okolností by nemalo byť potrebné s direktívami zoznamov tried plávajúcich obrázkov manipulovať.
Upozornenie: | Triedy štýlov floatLeft a floatRight sú definované v CSS predvolenej konfigurácie RS Rheia a považujeme za nevyhnutné ich definovať v každej konfigurácii RS Rheia, inak bude funkčnosť systému v tomto smere obmedzená. |
---|
Nasledujúci príklad využíva informácie z kapitoly Úprava štýlov na definovanie vlastnej triedy štýlov v súčinnosti s nahradením predvoleného zoznamu štýlov floatRight
vlastným zoznamom (s jediným prvkom myFloatRight
; použité v prvom odseku) a priamu úpravu predvolenej triedy štýlu floatLeft
(použité v druhom odseku):
#style: .myFloatRight { float: right; margin: 10px 20px; border: 3px dotted blue; } #floatRight:myFloatRight {float,right|img:manual/obrazok.png} Lorem Ipsum dolor sit amet, consectetuer nulla, sed a purus vulputate, pellentesque tincidunt odio lobortis conubia eu, iaculis eleifend vivamus ultrices pede praesent, nulla convallis vel amet libero proin. Sit in eget mauris at wisi, purus nec, urna vestibulum nulla vivamus justo, commodo lorem parturient tortor. Vivamus nec cras quam pellentesque massa odio, wisi et vestibulum magna bibendum, elementum sagittis venenatis turpis massa tincidunt, sed tellus tortor, at vel. Lectus dis, phasellus lectus orci etiam, pulvinar augue tincidunt justo id integer ipsum. #style: .floatLeft { border: 3px dotted red; } {float,left|img:manual/obrazok.png} Integer in elit a maecenas ante, feugiat ut pellentesque elementum pede cursus tellus, ut magna cras provident pede eu dolor. Quis odio accumsan vitae in aut cras. Nec ultrices, suscipit nostra ac in, quisque nec rhoncus convallis, vehicula odit purus ante, dolor pharetra. Sagittis nibh sit vel fringilla fames quam. Libero turpis phasellus. Enim at id magna cursus, placerat vivamus suscipit sapien ligula. Vel consectetuer tellus sit, ac velit amet sed nulla in, arcu vel justo est nunc rutrum, id consectetuer lectus suspendisse magna, eu maecenas orci pharetra fermentum cras in. Integer nec praesent arcu, felis duis vestibulum quis.
Výsledok:
Lorem Ipsum, text pri obrázku, dolor sit amet, consectetuer nulla, sed a purus vulputate, pellentesque tincidunt odio lobortis conubia eu, iaculis eleifend vivamus ultrices pede praesent, nulla convallis vel amet libero proin. Sit in eget mauris at wisi, purus nec, urna vestibulum nulla vivamus justo, commodo lorem parturient tortor. Vivamus nec cras quam pellentesque massa odio, wisi et vestibulum magna bibendum, elementum sagittis venenatis turpis massa tincidunt, sed tellus tortor, at vel. Lectus dis, phasellus lectus orci etiam, pulvinar augue tincidunt justo id integer ipsum.
Integer in elit a maecenas ante, feugiat ut pellentesque elementum pede cursus tellus, ut magna cras provident pede eu dolor. Quis odio accumsan vitae in aut cras. Nec ultrices, suscipit nostra ac in, quisque nec rhoncus convallis, vehicula odit purus ante, dolor pharetra. Sagittis nibh sit vel fringilla fames quam. Libero turpis phasellus. Enim at id magna cursus, placerat vivamus suscipit sapien ligula. Vel consectetuer tellus sit, ac velit amet sed nulla in, arcu vel justo est nunc rutrum, id consectetuer lectus suspendisse magna, eu maecenas orci pharetra fermentum cras in. Integer nec praesent arcu, felis duis vestibulum quis.
Poznámka: | Latinský text „Lorem Ipsum…“ je často používaný v úvodných fázach vývoja webovej stránky v prípade, že nemáme k dispozícii obsah, ale potrebujeme vidieť navrhnutý dizajn a aspoň navodiť dojem prítomnosti obsahu (textu) stránky. (Pozri aj: Lorem Ipsum Generator. ) |
---|
Súvisiace kapitoly:
Otázky a úlohy:
- Na čo sa používa v RS Rheia klauzula
class:
? - Čo je to zoznam tried (štýlov)?
- Koľko položiek smie obsahovať zoznam tried?
- Čo je možné upraviť pomocou direktív
#floatLeft:
«zoznam tried» a#floatRight:
«zoznam tried»?