Veronika Dropčová
veronika.dropcova(at)gmail.com

   nika.blog.matfyz.sk

09 – pokračovanie CSS

Selektor triedy

  • poslúžia na nastavenie rovnakého štýlu rôznym objektom (farebné texty, riadky tabuľky, a pod.)
  • meno triedy uvádzame s bodkou pred menom triedy, napr. .nazov, .zvyrazni, …
  • triedy priraďujeme HTML elementom cez atribút class

 

Definícia triedy kaskádového štýlu

.zvyrazni{

font-size: 1.2em;

color: #FF0000;

}

V html kóde zapíšeme napr.:

<li class=“zvyrazni“>Text</li> (teraz sa to nastavenie bude vzťahovať na tento konkrétny element li, teda na tento jeden riadok zoznamu)

alebo aj

<span class=“zvyrazni“>Text</span> (tu sa zas zvýraznenie bude vzťahovať na úsek textu, ktorý je ohraničný elementom span)

 

 

 

Tabuľky

vlastnosť hodnoty popis, význam
border-collapse collapse | separate definuje správanie orámovania tabuľky
border-spacing length length | length určuje vzdialenosť medzi orámovaním susedných buniek, prvá hodnota určuje vzdialenosť v horizontálnom a druhá vo vertikálnom smere. Ak je zadaná iba jedna hodnota, je použitá pre oba smery.
caption-side top | bottom určuje polohu legendy vzhľadom k tabuľke

Orámovanie tabuľky nestačí definovať len pre tabuľku (element table), musí sa definovať aj pre jednotlivé bunky (elementy th, td)!

 

Pomenovanie elementov v HTML

  • ľubovoľný prvok stránky môžeme pomenovať pomocou atribútu id
  • napr. <div id=“reklama“>, <p id=“navigacia“>, <td id=“pata“> …
  • hodnoty atribútov id musia byť jedinečné v rámci celej stránky!
  • v CSS sa selektor id zapisuje pomocou mriežky, napr.:

#reklama{

text-align: center;

padding: 1em;

}

 

Teraz vypracujte toto zadanie.

Pridaj komentár

Vaša e-mailová adresa nebude zverejnená. Vyžadované polia sú označené *