Otisni ovo poglavljeOtisni ovo poglavlje

CSS svojstva

Ostala svojstva

Od niza svojstava CSS-a, ovdje smo napravili izbor još nekolicine atraktivnih i češće upotrebljavanih.

cursor

Definira vrstu pokazivača kada se on nađe iznad elementa. Može poprimiti vrijednosti: auto, crosshair, default, help, move, pointer, text, wait...

div {
  cursor: crosshair;
}
Prijeđite pokazivačem miša iznad ovog sloja.
  • Budući da korisnici često podsvjesno reagiraju na oblik pokazivača miša, pazite da ih ne zbunite promjenom oblika. Za provjeru odgovorite na pitanje: što ste očekivali od gornjeg primjera kad vam se pokazivač miša promijenio u crosshair?

overflow

Definira kako će se prikazati sadržaj koji je veći od CSS kutije. Može poprimiti vrijednosti: visible, hidden, scroll i auto. Primjerice, oznaka <div> definirane visine, ali s viškom teksta, kao u sljedećem primjeru, bit će prikazana s trakom za pomicanje.

div {
  width: 180px;
  height: 50px;
  overflow: auto;
  border: 1px solid #000;
  margin: 0 0 0 20px;
}
<div>
Lorem ipsum dolor sit amet
consectetur adipisicing elit
sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.

</div>
Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

visibility

Definira vidljivost elementa. Može poprimiti vrijednosti visible – vidljiv, ili hidden – skriven.

Ako se pitate zašto biste skrivali element na stranici, odgovor leži u JavaScriptu – skriptnom jeziku koji u kombinaciji s CSS-om nudi neizmjerne mogućnosti uljepšavanja stranica dinamičkim efektima, što uključuje i skrivanje i otkrivanje elemenata. Neka vam to bude motivacija za pohađanje CARNetovih tečajeva „JavaScript” i „Napredne web tehnologije”.

display

Svojstvo koje omogućava promjenu predefiniranog načina prikaza različitih tipova elemenata. Može poprimiti vrijednosti block, inline, list-item i none. Koristi se kad želimo, primjerice, blok element prikazati kao linijski. Ovdje je primjer kako elemente popisa prikazati u liniji:

li {
  display: inline;
}
<ul>
  <li>Lorem</li>
  <li>ipsum</li>
  <li>dolor</li>
  <li>sit</li>
  <li>amet</li>
</ul>
  • Lorem
  • ipsum
  • dolor
  • sit
  • amet
   
CARNet