Stránky neboli dlhú dobu aktualizované. Môžu obsahovať nepresné alebo neaktuálne informácie.
Používaním tejto stránky súhlasíte s používaním cookies.
Hľadanie
Rozšírené vyhľadávanie
TOP 7 - stránky
Napaľovacie programy - 104 969x
Free Pascal - Úvod - 59 080x
Free Pascal - Začiatky - 38 813x
Lazarus - Kreslenie - 36 781x
Internetové prehliadače - 32 371x
3D grafické programy - 31 652x
Free Pascal - Podmienky - 30 305x
Nové v diskusii
Free Pascal - Cykly - štvrtok 31.3.
Lazarus - Začíname - piatok 25.3.
Anketa - streda 2.3.
Navigácia: Tvorba Webu > CSS - Selektor, trieda, ID

CSS - Selektor, trieda, ID

Selektor, trieda a identifikátor sú tri základné možnosti vkladania štýlov CSS na webové stránky. Zapisujeme ich do deklarácie CSS.

Selektor

Najviac sa hodí, ak potrebujeme, aby mal každý tag na stránke rovnaký vzhľad. Ak chceme, aby mal odstavec zelenú farbu písma, zapíšeme to v tvare: názov_tagu {vlastnosť: hodnota}.

p {color: green}

Odteraz bude mať každý odstavec na stránke zelené písmo.

Aby ste mali jasnejšiu predstavu o zdrojovom kóde, uvediem kompletný príklad, kde použijem deklaráciu priamo v dokumente.

<html>
 <head>
  <title>Stránka so štýlmi</title>
  <style>
   p {color: green}
  </style>
 </head>
 <body>
  <p>
   Odstavec
  </p>
 </body>
</html>

A výsledok?

Odstavec

Trieda

Pokiaľ chceme, aby viaceré (nie však všetky) prvky na stránke mali podobný výzor, je najlepšie použiť tzv. triedu. Do deklarácie CSS uvedieme text v tvare: .názov_triedy {vlastnosť: hodnota}. K vybranému tagu potom priradíme atribút CLASS. Ukážka:

<html>
 <head>
  <title>Stránka so štýlmi</title>
  <style>
   .cervene {color: red}
  </style>
 </head>
 <body>
  <div class="cervene">
   Nejeký text
  </div>
 </body>
</html>

Text bude červený:

Nejaký text

Identifikátor

Identifikátor (skrátene ho nazývam ID) je veľmi podobný triede. Je medzi nimi zopár odlišností (použitie v JavaScripte), ale ak chcete mať validnú stránku, odporúčam vám triedu. Na validnej stránke sa smie jeden identifikátor nachádzať len raz.

ID pridelíme tagu pomocou rovnomenného atribútu a v deklarácii CSS uvedieme miesto bodky (ako pri triede) mriežku.

<html>
 <head>
  <title>Stránka so štýlmi</title>
  <style>
   #cervene {color: red}
  </style>
 </head>
 <body>
  <div id="cervene">
   Nejeký text
  </div>
 </body>
</html>

Výsledok je v tomto prípade rovnaký ako pri použití triedy.

Vlastnosť

Určuje, čo konkrétne chceme na vzhľade prvku meniť. Napr. vlastnosť color mení farbu písma, background-color farbu pozadia, cursor zas kurzor. Ak máme napríklad selektoru priradiť len jednu vlastnosť, postup je už známy:

a {color: orange}

Pri priradení viacerých vlastností jednému selektoru/triede/ID oddeľujeme jednotlivé vlastnosti bodkočiarkou. Teraz bude mať odstavec zelené písmo a žlté pozadie:

p {color: green; background-color: yellow}

Ešte si ukážeme konkrétny príklad na deklaráciu pre jeden prvok (nasledujúci text je už v tele HTML dokumentu):

<div style="color: blue">Modrý text</div>

Ak elementu neurčíme danú vlastnosť, bude mať tzv. predvolenú hodnotu.

Na záver príklad

Takto nejako môže vyzerať zdrojový text stránky so štýlmi:

<html>
 <head>
  <title>Stránka so štýlmi</title>
  <style>
   span {color: #FF0000}
   .modre {color: blue}
   .zlte-pozadie {background-color: yellow}
  </style>
 </head>
 <body>
  <span class="zlte-pozadie">
   Červené na žltom
  </span>
  <h4 class="modre">Nadpis</h4>
 </body>
</html>

Nezabudnime na ukážku:

Červené na žltom
Nadpis
Hodnotenie
1 2 3 4 5 (ako v škole)
Priemerná známka: 2,77
Diskusia k tejto stránke pekne dakujem  ...
Prejsť do diskusie»
2005-2012, Matúš Sulír, matus.sulir (zav) gmail bodka com. Gen.: 0,0609 s. Valid XHTML, CSS.