|
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
|
