Stránky neboli dlhú dobu aktualizované. Môžu obsahovať nepresné alebo neaktuálne informácie.
Hľadanie
Rozšírené vyhľadávanie
TOP 7 - stránky
Napaľovacie programy - 108 615x
Free Pascal - Úvod - 66 143x
Lazarus - Kreslenie - 47 662x
Free Pascal - Začiatky - 44 971x
Free Pascal - Podmienky - 37 292x
Free Pascal - Cykly - 36 534x
Internetové prehliadače - 36 454x
Nové v diskusii
Free Pascal - Cykly - štvrtok 31.3.
Lazarus - Začíname - piatok 25.3.
Anketa - streda 2.3.
Navigácia: Tvorba Webu > CSS - Rozšírená deklarácia

CSS - Rozšírená deklarácia

V jazyku CSS máme veľa možností, ako určovať vzhľad prvkov. Tie, ktoré nepatria medzi najzákladnejšie, si teraz ukážeme.

Pseudotriedy

Pri niektorých tagoch, napr. A, môžeme používať tzv. pseudotriedy. Tie určujú, za akých podmienok bude mať tag dané vlastnosti. Od názvu tagu ich oddeľujeme dvojbodkou bez medzery.

Pseudotrieda hover tagu A určuje, že prvok (v tomto prípade odkaz) má mať dané vlastnosti, ak sa nad ním nachádza kurzor myši. Takto to vyzerá v praxi:

<html>
 <head>
  <title>Stránka so štýlmi</title>
  <style>
   a:hover {color: green}
  </style>
 </head>
 <body>
  <a href="nieco.html">Dajte tu kurzor</a>
 </body>
</html>

Ak by ste na danej stránke dali kurzor na akýkoľvek odkaz, sfarbil by sa na zeleno.

Poznáme aj iné pseudotriedy tagu A, a to link - bežný odkaz, active - aktívny (teda naňho práve klikáme) a visited - navštívený odkaz.

/* bezne odkazy */
a:link {color: red}

/* aktivne odkazy */
a:active {background-color: lime}

/* navstivene odkazy */
a:visited {color: blue}

Pseudoelementy

Tento hrôzostrašný názov udáva, aká časť textu bude mať dané vlastnosti. Dva bežne používané pseudoelementy sú first-letter a first-line. Pri použití prvého z nich sa určené vlastnosti aplikujú na prvé písmeno textu, v druhom zas na prvý riadok. V uvedenom príklade bude mať prvé písmeno odstavca oranžovú farbu:

p:first-letter {color: orange}

Selektor a trieda spolu

Selektor a triedu možno použiť i zároveň. V našom príklade bude mať modré písmo len odstavec triedy „modry“:

<html>
 <head>
  <title>Stránka so štýlmi</title>
  <style>
   p.modry {color: blue}
  </style>
 </head>
 <body>
  <p class="modry">
   Modrý odstavec
  </p>
  <div class="modry">
   Bežný text
  </div>
 </body>
</html>

Zobrazme si aj ukážku:

Modrý odstavec

Bežný text

Kontextuálne selektory

Sú dosť zaujímavé. Určujú, že ak sa daný tag nachádza vo vnútri iného tagu, má mať špecifické vlastnosti. Napríklad kontextuálny selektor div em znamená, že pokiaľ bude tag EM obkolesený tagom DIV, získa určené vlastnosti. Možno to pochopíte z príkladu:

<html>
 <head>
  <title>Stránka so štýlmi</title>
  <style>
   div em {color: green}
  </style>
 </head>
 <body>
  <em>
   Čierny text
  </em>
  <div>
   <em>
    Zelený text
   </em>
  </div>
 </body>
</html>

Hromadná deklarácia

Zíde sa nám, ak chceme deklarovať viacero selektorov, tried alebo identifikátorov naraz. Hromadná deklarácia prakticky nepridáva žiadne nové možnosti. Dokáže nám však zjednodušiť prácu a trochu zmenšiť veľkosť súboru so štýlmi. Podstatou je, že vymenujeme napr. veľa selektorov a oddelíme ich čiarkami.

V uvedenom príklade budú mať všetky odstavce (P), SPANy a DIVy žltú farbu písma:

p, span, div {color: yellow}

Je to vlastne skrátený zápis nasledujúceho kódu:

p {color: yellow}
span {color: yellow}
div {color: yellow}
Hodnotenie
1 2 3 4 5 (ako v škole)
Priemerná známka: 2,33
Diskusia k tejto stránke To sa zvyčajne rieši pomocou JavaScriptu; http://w...
Prejsť do diskusie»
2005-2012, Matúš Sulír, matus.sulir (zav) gmail bodka com. Gen.: 0,0399 s. Valid XHTML, CSS.