Rodičia a ich potomkovia

Transkript

1 Predmet Elektronické publikovanie 1 Rodičia a ich potomkovia Takáto štruktúra (rodičia, potomkovia) je kľúčovou vlastnosťou kódu (x)html a umožňuje prideľovať CSS štýly elementom a aplikovať na ne efekty jazyka JavaScriptu. Keď element obsahuje iný element, je považovaný za rodiča elementu, ktorý uzatvára, teda potomka. Akékoľvek elementy, ktoré obsahuje potomok, sú považované zároveň vzdialené potomky vonkajšieho, rodičovského elementu. Takto môžeme vytvoriť stromovú štruktúru (rodokmeň) webovej stránky, ktorá ukazuje hierarchické vzťahy medzi elementmi na stránke a jedinečne označuje každý element. Príklad: máme zdrojový kód: <div> <img src= kvety.jpg /> <p>všetky tieto<em> zaujímavosti</em> nie sú pre nás podstatné <p>ale všetko je to trochu ináč. </div> kde: element div je rodičom elementu img a oboch elementov p. Naopak, element img a obe elementy p sú potomkami elementu div. ďalej: prvý element p je rodičom elementu em a naopak, element em je potomkom prvého elementu p. Zároveň, element em je okrem toho aj vzdialeným potomkom elementu div (v žiadnom prípade nie priamym potomkom!!!).

2 Predmet Elektronické publikovanie 2 Konštrukcia selektoru SELEKTOR určuje, na ktoré elementy sa pravidlo štýlu použije. Selektor môžeme nadefinovať až piatimi kritériami, aby sme vybrali tie elementy, ktoré by sa mali nadefinovať: 1) typ alebo názov elementu h1 {color: red;} 2) kontext, v ktorom sa element nachádza h1 em {color: red;} tento selektor používa kontext. Štýl sa použije na elementy em obsiahnuté v elemente h1. Elementy em nachádzajúce sa kdekoľvek inde nie sú týmto pravidlom ovplyvnené. 3) triedu alebo identifikátor elementu em.very {color: red;} div#nieco {color: red;} - prvý selektor vyberá všetky elementy em s triedou very. - druhý selektor vyberá elementy div s identifikátorom nieco. 4) pseudotriedu elementu alebo pseudoelement samotný a:link {color: red;} - v tomto prípade selektor vyberá elementy, ktoré patria pseudotriede link 5) parametre a ich hodnoty a [hodnota] {color: red;} - môžeme použiť hranaté zátvorky, aby sme selektoru dodali informáciu o parametri požadovaného elementu, alebo jeho hodnote.

3 Predmet Elektronické publikovanie 3 Vyberanie selektoru podľa názvu Najdôležitejším kritériom pre výber elementov k formátovaniu je názov elementu a jeho typ. Napr. môžeme chcieť vytvoriť všetky elementy h1 veľkým, tučným písmom a formátovať všetky elementy p bezpätkovým písmom. PRÍKLAD: Máme nadefinovaný selektor h2 takto: h2 {color: blue;} Gaudího práca bola znamenitá. La Casa Milá je obytná budova, kde skutočne žijú ľudia. Výsledok: všetko to, čo bude v zdrojovom kóde napísané medzi <h2></h2>, bude vyfarbené na modro, pretože je to tak nadefinované h2 {color: blue;}. Vyberanie elementu pomocou triedy alebo identifikátoru a) pomocou identifikátoru elementy k formátovaniu na základe identifikátoru vyberieme týmto spôsobom: 1. napíšeme # (znak mriežky) 2. ďalej (bez medzery) napíšeme názov identifikátoru, kde identifikátor je jedinečným názvom elementu, ktorému chceme štýl priradiť.

4 Predmet Elektronické publikovanie 4 Napr.: div#gaudi {color: red;} <div id="gaudi"> <p>mnoho turistov sa vydáva do Barcelóny, aby sa pozreli na súčasnú Gaudího architektúru.</br></br> V roku 2002 <a href=" Barcelóna 150. výročie Gaudího narodenín. Gaudího práca bola znamenitá. La Casa Milá je obytná budova, kde skutočne žijú ľudia. <div/> Výsledok: všetko to, čo bude v zdrojovom kóde napísané medzi <div id= gaudi ></div>, bude vyfarbené na červeno, pretože je to tak nadefinované okrem toho, čo je písané medzi h2. h2 bolo nadefinované ako modré písmo. Vyberanie elementu podľa kontextu V CSS je možné určovať elementy v závislosti na ich predkoch, rodičoch alebo súrodencoch a to takto: 1) Elementy vybrané k formátovaniu podľa ich predkov: predok potomok {color: red;} založený na jeho predkovi sa nazýva selektor nasledovníka. - napíšeme predka, medzeru a nasledovníka. Selektor

5 Predmet Elektronické publikovanie 5 div#gaudi p {color: green;} kde div#gaudi je predok a p je potomok a to znamená, že element div#gaudi bude hľadať všetky elementy p, ktoré sú potomkom elementu div identifikátorom gaudi označeného <div id="gaudi"> <p>mnoho turistov sa vydáva do Barcelony, aby sa pozreli na súčasnú Gaudího architektúru.</br></br> V roku 2002 <a href=" Barcelóna 150. výročie Gaudího narodenín. Gaudího práca bola znamenitá. La Casa Milá je obytná budova, kde skutočne žijú ľudia. Výsledok: takže všetko to, čo sa nachádza medzi elementom <div id= gaudi ></div> a ešte medzi <p> bude zelenej farby. 2) Elementy vybrané k formátovaniu podľa ich rodičov: Rodič je element, ktorý priamo obsahuje požadovaný element (priameho potomka) bez akéhokoľvek prostredníka (ďalšieho vnoreného elementu). rodič > potomok {color: red;} - napíšeme rodiča, znak väčší a potomka. Selektor založený na jeho rodičoch sa nazýva selektor potomka. div#gaudi > p {color: green;} - tento selektor vyberie iba tie elementy p, ktoré sú priamymi potomkami elementu div, označeného identifikátorom gaudi.

6 Predmet Elektronické publikovanie 6!!!!!Niekedy je užitočné vybrať len jedného (prvého potomka) elementu na rozdiel od vybraní všetkých potomkov daného elementu.!!!!! čiže pravidlo štýlu bude vyzerať: div#gaudi p:first-child {color: green;} tento selektor vyberie len tie elementy p, ktoré sú prvým potomkom elementu div označeného identifikátorom gaudi časť selektora first-child sa nazýva pseudotrieda. <div id="gaudi"> <p>mnoho turistov sa vydáva do Barcelóny, aby sa pozreli na súčasnú Gaudího architektúru.</br></br> V roku 2002 <a href=" Barcelona 150. výročie Gaudího narodenín. <p>gaudího práca bola znamenitá. La Casa Milá je obytná budova, kde skutočne žijú ľudia. <div/> výsledok: teraz sa vyfarbí na zeleno len prvý potomok elementu div, čiže to, čo je zapísané medzi prvým p. Na ostatné dve p sa pravidlo štýlu nebude vzťahovať. Kto je súrodenec? Súrodenec je element, ktorý priamo predchádza požadovanému elementu a má toho istého rodiča. 3) Elementy vybrané k formátovaniu podľa ich súrodenca: súrodenec+značka (ktorú chceme formátovať) {color: green;}

7 Predmet Elektronické publikovanie 7 div#gaudi p+p {color: green;} - tento selektor vyberá len tie elementy p, ktoré priamo nasledujú súrodenecký element p. pozn. funguje to, len keď medzi súrodencami nie je iný selektor. Výber časti elementu: Prvý riadok daného elementu vyberieme týmto postupom: div#gaudi p:first-line {color: green;} - stane sa to, že sa toto pravidlo štýlu CSS (farbenie na zeleno)uplatní iba na text medzi elementom p a to iba v prvom riadku. Ako náhle posunieme nejaký text z prvého riadku do druhého riadku, text prestane byť zelený. <p>mnoho turistov sa vydáva do Barcelony, aby sa pozreli na súčasnú </br>gaudího architektúru. V roku 2002 <a href=" Barcelóna 150. výročie Gaudího narodenín. <p>gaudího práca bola znamenitá. La Casa Milá je obytná budova, kde skutočne žijú ľudia. Prvé písmeno daného elementu vyberieme týmto postupom: div#gaudi p:first-letter {color: green;} - stane sa to, že sa toto pravidlo štýlu CSS (farbenie na zeleno )uplatní iba na prvé písmeno medzi elementom p Ostatný text bude mať pôvodnú farbu.

8 Predmet Elektronické publikovanie 8 <p>mnoho turistov sa vydáva do Barcelony, aby sa pozreli na súčasnú </br>gaudího architektúru. V roku 2002 <a href=" Barcelona 150. výročie Gaudího narodenín. <p>gaudího práca bola znamenitá. La Casa Milá je obytná budova, kde skutočne žijú ľudia. Selektory first-letter a first-line sa nazývajú pseudoelementy, lebo odkazujú k aktuálnemu obsahu, ktorý nie je možné označiť ako nezávislý element. Výber elementu na základe ich stavu: CSS umožňuje použiť formátovanie elementu( zvlášť odkazu ) na základe ich aktuálneho stavu podľa toho, či bol odkaz navštívený, alebo cez neho používateľ prešiel myškou a pod. Pravidlo štýlu CSS sa vzťahuje na klasický odkaz <a></a> a vyzerá takto: a:link {color: red;} - nastavenie vzhľadu odkazu na ktorý ešte používateľ neklikol myšou a:visited {color: orange;} používateľ už klikol na odkaz myšou a:focus {color: blue;} vybratie pomocou klávesnice a pripravený na spustenie a:hover {color: green;} prechod myškou cez odkaz a:active {color: yellow;} kliknutie na odkaz (použije sa pri stlačení tlačidla myšky a pri jeho držaní). Výber elementu na základe ich parametrov: Formátovať môžeme použiť tiež na elementy obsahujúce určitý parameter, alebo parameter s určitou hodnotou. element[parameter= hodnota ] {color: green;} div[class] {color: green;} - hranaté zátvorky uzatvárajú názov požadovaného parametru a akúkoľvek požadovanú hodnotu.