Kaskádové štýly CSS

1. Ing. Bačová 2011 Kaskádové štýly CSS

2. Východie hodnoty • Každý prvok HTML má nastavené východzie hodnoty niektorých vlastností (napr. farba textu, veľkosť písma,...). • Tie se použijú vždy, ak ich v štýlopise nezmeníme. • Preto nie je potrebné definovať pre každý prvok všetky vlastnosti.

3. Selektory selektor {vlastnosť: hodnota;} h1 {color: #ff0000;}

4. Selektory typu elementu • body • h1 • table • li • body {background: #c0c0c0;} • h1 {color: #red; text-align:center;} • table {border-collapse: collapse} • li {list-style-type: disc} Univerzálny selektor * • páruje sa so všetkými prvkami • bude sa aplikovať na všetky prvky, u ktorých je to možné • * • * { line-height: 140% } • platí pre všetky prvky • všetky texty budú mať výšku riadku 140 % základnej výšky (napr.<p>,<div>,<table>, ..., môžu mať definovanú triedu, identifikátor

5. Selektory typup {background: yelow;}

6. Univerzálny selektor* {background: green;}

7. Selektory triedyp.modry {background: blue;}

8. Násobné triedy • CSS • .cervena {color: red;} • .cen{text-align: center;} • .bgseda {background: gray;}

9. Selektory ID • CSS • #obsah {padding: 10px; background: yellow;} • XHTML • <div id=“obsah”>oblasť s obsahom</div> oblasť s obsahom

10. Selektory atribútu CSS • [atribut] • [atribut=“hodnota”] • [atribut~=“hodnota”](~= ... obsahuje hodnotu) • input[type=“hodnota”] XHTML • <znacka title =“…”> • <znacka href=“http://www.spsepn.edu.sk”> • <znacka href~=“spsepn”> • <inputtype=“submit” />

11. Selektory následníkov selektorA selektorB {...} všetky elementy selektorB, ktoré sú kdekoľvek vnútri elementu selektorA (môžu byť vnorené aj v ďalšom prvku) • div.obsah ul{...} • table.prehlad th{...} <div class=“obsah”> <ul> ... </ul> <div> <ul>...</ul> </div> </div> <table class=“prehlad”> <tr> <th>...</th><th>...</th> • </tr> • <tr> • <td>...</td><td>...</td> • </tr> • </table>

12. Selektory potomkov selektorA >selektorB {...} všetky elementy selektorB, ktoré sú vnútri elementu selektorA, pričom musia byť len priamym potomkom (nesmú byť v ďalšom vnorenom prvku) <a> je potomok<p> <b> je potomok <a> <b> už nie je potomok <p> ale je stále je následník <p> div.obsah>ul {...} <div class=“obsah”> <ul> ... </ul> <div> <ul>...</ul> </div> </div> <p> Toto je <a href=„abc“><b>dôležitý odkaz </b></a> v tomto texte</p>

13. Selektor súrodencov selektorA + selektorB {...} vyberie všetky elementy selektorB, ktoré majú rovnakého rodiča ako selektorA a ktoré po ňom priamo nasledujú. • h1+h2{...} vyberie h2 nasledujúce po h1 <div><h1>nadpis</h1><h2>podnadpis</h2><p>text odstavca...</p> </div> • li+li{...} <ul><li>prvá</li><li>druhá</li> <li>tretia</li> </ul>

14. Pseudotriedy • :link • :visited • :hover • :focus • :active • nenavštívený odkaz • navštívený odkaz • pri prejdení myšou • zameranie na vstupný prvok • pri kliknutí myšou (enterom) a {color: blue;} a:hover {color:red;} a:hover:visited {color:green}

15. Pseudotriedy • :first-child • :first-line • :first-letter • prvý potomok iného prvkuul li:first-child {...} • prvý riadok textu • prvé písmeno textu

16. Dedičnosť • skôr, ako sa pre prvok použijú jeho východzie hodnoty, tak sa pokúsia „zdediť“ ich od svojho rodičovského prvku • niektoré vlastnosti sa môžu dediť z rodičov na potomkov (tie, ktoré popisujú štýl obsahu – farba, typ a veľkosť písma, výška riadkov...) • ak vlastnosť nie je dedičná, použije sa východzia hodnota (tie, ktoré popisujú štýl blokov - pozadie, okraje, rámčeky)

17. Dedičnosť • .blok {font-size:12px; color: #0000ff;} • .blok a { color: #0000ff; text-decoration: underline;} • .blok a:hover { color: # 00ff00; text-decoration: none;} • font-size sa zdedí aj do odkazov • ostatné vlastnosti sú nededičné, pretože odkaz a text sú od seba zásadne odlišné

18. Priorita • Najvyššiu prioritu má posledná definícia • pozadie odseku bude zelené • p {background: red; color: white;background: green; }

19. Tipy a triky • #id_divu {vlastnosti} //pre všetky prehliadače div[id]#id_divu {vlastnosti} //pre všetky okrem IE • .class_divu {vlastnosti} //pre všetky prehliadače div[class].class_divu {vlastnosti}//pre všetky okrem IE

20. Ďakujem za pozornosť