Print bookPrint book

CSS svojstva

Svojstva kojima se mogu odrediti izgled teksta. Slijede svojstva kojima se određuju boje raznih dijelova elemenata te dodaju slike u pozadinu elemenata, a završava se s nizom svojstava namijenjenih preciznom postavljanju sadržaja na stranicu. Ne sasvim očekivano, ali relativno mali broj svojstava iz ovog poglavlja dovoljna su za izradu vrlo atraktivnih stranica.

Site: Nacionalni portal za učenje na daljinu "Nikola Tesla"
Course: Osnove CSS-a
Book: CSS svojstva
Printed by: Guest user
Date: Friday, 22 November 2019, 7:25 PM

Općenito o svojstvima

Podsjetimo se kako radi CSS. Svaki se stil sastoji od selektora i njima pridruženih parova svojstva i vrijednosti:

p { /* p je selektor */
  font-family: "Courier New", Courier, mono;
}
.naglaseno {
  color: #9b5c98/* color je svojstvo */
  font-size: 24px; /* 24px je vrijednost */
  font-weight: bold;
}

Specifikacijom CSS-a definira se niz svojstava i njihovih vrijednosti. Svojstva se po svom djelovanju mogu grupirati u cjeline. U ovom ćemo tečaju detaljnije razmotriti sljedeće kategorije:

  • svojstva fonta
  • svojstva teksta
  • svojstva boja i pozadina
  • svojstva CSS kutije
  • svojstva popisa
  • pozicioniranje (smještanje).

Osim navedenih kategorija, u lekciji Ostala svojstva predstavit ćemo vam još neka korisna svojstva CSS-a.

   
CARNet

Svojstva fonta

Svojstva fonta obuhvaćaju oblikovanje pojedinih znakova u tekstu. To su, vjerojatno, najčešće upotrebljavana svojstva, jer se bez obzira na dizajn i namjenu stranice tekst zasigurno nalazi na većini od njih.

font-family

Ovo svojstvo sugerira pregledniku kojim fontom će se prikazivati tekst u dokumentu. Problem nastaje ako korisnik na računalu nema instaliran potreban font. CSS definira pet generičkih obitelji fontova – serif, sans-serif, cursive, monospace i fantasy iz kojih preglednik bira font koji će upotrijebiti. Pri definiranju možemo koristiti neke od njih:

body {
  font-family: monospace;
}

ili, što je preporučljivo, možemo koristiti stvarna imena fontova:

body {
  font-family: "Courier New", Courier,
               monospace;

}

U ovom će slučaju preglednik prvo pokušati prikazati tekst fontom Courier New, a ako njega nema, onda fontom Courier i tek onda, ako prva dva fonta nisu instalirana, prikazati će tekst fontom iz obitelji monospace.

  • Preporučljivo je upotrebljavati samo fontove koje možemo očekivati na većini računala, odnosno operacijskih sustava. To su tzv. web safe fontovi.
  • Pozivamo vas da pretraživanjem weba ustanovite možete li očekivati da će svi posjetitelji vaših stranica imati na računalu font koji ste vi zamislili na stranicama ili ne, tj. je li font koji namjeravate upotrebljavati web safe

font-weight

Svojstvo koje definira debljinu znakova. Može poprimiti sljedeće vrijednosti: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900. Vrijednost bolder daje uočljivo deblje znakove od debljine postavljene za taj element (ako je znakove moguće još podebljati), a vrijednost lighter tanje od inače postavljene vrijednosti.

Najčešće se koriste vrijednosti normal i bold. Bolder, lighter i brojčane definicije debljine fonta nisu sigurne za korištenje jer ih preglednici različito prikazuju i ovise o fontovima instaliranim na računalu posjetitelja – najčešće do 500 za normalne, a 600, 700, 800 i 900 za deblje fontove.

font-size

Definira veličinu fonta. Može poprimiti bilo koju definiranu vrijednost veličine (12px, 10pt, 2em...) ili neku od ključnih riječi (xx-small, x-small, small, medium, large, x-large, xx-large). Budući da se svojstvo nasljeđuje, možemo pisati sljedeće:

body {
  font-size: 10pt;
}
p {
  font-size: 150%;
}

U ovom primjeru paragraf nasljeđuje veličinu definiranu selektorom body, pa bi tekst u paragrafu bio prikazan fontom veličine 15pt.

  • Stvarna veličina znakova u pregledniku ovisi i o veličini prikaza koju je izabrao korisnik (tj. o zumiranju, jednostavno dostupno kombinacijom ctrl+mišji kotačić).

font-style

Sugerira pregledniku da prikaže tekst kao normal ili kao italic. Postoji još i vrijednost oblique, ali nju preglednici prikazuju isto kao italic.

font-variant

Može poprimiti vrijednosti normal ili small-caps. Korištenjem small-caps dobije se efekt teksta pisanog velikim slovima, ali fontovima različitih veličina. Primjerice, u sljedećoj su rečenici prva slova svih riječi pisana velikim slovima:

p {
  font-variant: small-caps;
}
<p>Lorem Ipsum Dolor Sit Amet</p>

Lorem Ipsum Dolor Sit Amet

Skraćeni selektor – font

Sva se ova svojstva mogu navesti preko skraćenog svojstva font na sljedeći način:

p {
  font: italic small-caps 12px Verdana,
        Helvetica, sans-serif;

}
   
CARNet

Svojstva teksta


Ova svojstva definiraju razmještaj teksta u dokumentu te još neke detalje koji su nadgradnja izbora izgleda pojedinih znakova, opisanih u prethodnoj lekciji.

letter-spacing

Ovo svojstvo definira razmak između pojedinih znakova u tekstu.

p {
letter-spacing: 0.5em;
}
<p>Lorem ipsum dolor sit amet</p>

Lorem ipsum dolor sit amet

line-height

Definira razmak između dva reda teksta u istom odlomku (eng. baseline).

p {
font-size: 9pt;
line-height: 26pt;
}
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

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

  • Pri definiranju visine redova teksta treba paziti na veličinu znakova da se redovi ne bi preklapali.

text-decoration

Opisuje dekoracije koje se dodaju tekstu. Može poprimiti vrijednosti: none, underline, overline, line-through i blink. Boje dekoracija pojavljuju se u boji teksta.

Vrlo često se koristi kod definiranja efekata na linkovima, kako ste to mogli vidjeti u lekciji Pseudoklase.

text-transform

Pretvara slova iz teksta u velika ili mala, ovisno o izabranoj vrijednosti svojstva. Moguće vrijednosti su capitalize, uppercase, lowercase. Capitalize postavlja početno slovo u svakoj riječi u veliko slovo. Uppercase postavlja sva slova u velika, a lowercase u mala, bez obzira na izvorno slovo u HTML kôdu.

p {
text-transform: capitalize;
}
<p>Lorem ipsum dolor sit amet</p>

Lorem ipsum dolor sit amet

text-align

Vodoravno poravnanje teksta. Može se primijeniti samo na blok elemente, a moguće vrijednosti su: left, right, center i justify.

p {
text-align: center;
}
<p>Lorem ipsum dolor sit amet,<br>
consectetur adipisicing elit,
<br>
sed do eiusmod tempor incididunt
<br>
ut labore et dolore magna aliqua.
</p>

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

text-indent

Prvi redak lijevo ili obostrano poravnatog paragrafa je često uvučen za određenu vrijednost.

p {
text-indent: 45px;
}
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>

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




CARNet

Svojstva boja i pozadina

Pravi izbor boja i pozadine je nešto što će, zasigurno, svako web sjedište učiniti atraktivnijim. Dok je izbor navedenih elemenata pri izradi web sjedišta prepušten vašem osobnom odabiru, ovdje ćemo vam pokazati kako postupak izbora učiniti lakšim. Naime, postavljanje ovih parametara u CSS datoteku daje vam mogućnost da s jednog mjesta, gotovo trenutno, promijenite izgled čitavog web sjedišta.

color

Postavlja boju teksta u zadanom elementu.

p {
  color: green;
}
<p>Lorem ipsum dolor sit amet</p>

Lorem ipsum dolor sit amet

background-color

Definira boju pozadine za zadani element. Boja pozadine se proteže do granice elementa – uključujući odmak.

div.primjer {
  background-color: #3C6;
  color: #000;
  padding: 6px;
  border: 1px solid #000;
}
<div class="primjer">Lorem ipsum dolor sit amet</div>
Lorem ipsum dolor sit amet

Atribut background-color kod oznake <hr> vidimo kao boju elementa.

background-image

Postavlja pozadinsku sliku u element. Ukoliko se primjenjuje s niže navedenim svojstvima, može se definirati fiksni položaj pozadinske slike ili ponavljanje po jednom od pravila.

background-repeat

Ponavljanje pozadinske slike. Može poprimiti sljedeće vrijednosti: repeat – ponavlja sliku; no-repeat – ne ponavlja sliku; repeat-x – ponavlja sliku samo po vodoravnoj osi; repeat-y – ponavlja sliku samo po uspravnoj osi.

div.pozadina {
  background-image: url("css.gif");
  background-repeat: repeat-x;
  border: 1px solid #000;
  height: 150px;
  color: green;
}
<div class="pozadina">Lorem ipsum dolor sit amet</div>
Lorem ipsum dolor sit amet

background-attachment

Ovo svojstvo definira pomiče li se pozadinska slika s elementom ili ne. Može poprimiti vrijednost scroll – pomiče se, ili fixed – ne pomiče se. Primjerice, ukoliko želimo u tijelu dokumenta postaviti fiksnu pozadinu, možemo to napraviti sljedećim kôdom:

body {
  background-image: url("css.gif");
  background-repeat: no-repeat;
  background-attachment: fixed;
}

Efekt na stranici sličan je efektu u sljedećem okviru:

 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consectetur urna eu nulla fermentum elementum. Proin malesuada enim et lacus elementum et lacinia lectus cursus. Fusce urna felis, blandit a consectetur ac, accumsan eget magna. Phasellus scelerisque viverra congue. Duis aliquam nulla pulvinar augue consectetur consectetur. In vel arcu orci, vel varius lacus. Phasellus mollis sem eu purus tempor ut sollicitudin ante bibendum. Maecenas auctor, velit vel porttitor imperdiet, justo libero eleifend justo, in tristique eros purus eget ante. Donec pretium elit vitae diam tempus mollis. Donec sit amet turpis ut nisi suscipit cursus. Sed at dolor libero.

Nullam accumsan gravida dapibus. Curabitur augue nibh, lobortis ac tempus a, mattis sed tortor. Duis et diam mauris. Nunc eu diam dictum enim tempor mattis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent posuere bibendum pulvinar. Aenean et massa ligula. Nulla a suscipit nulla. Maecenas consectetur pulvinar erat, id dapibus felis porta in. Sed rutrum ipsum sit amet odio adipiscing eu ullamcorper purus accumsan. Nunc tellus dolor, vestibulum eget fermentum sed, feugiat eget libero. Nunc ligula lorem, viverra dapibus malesuada interdum, commodo id velit.

background-position

Pozadinska slika predefinirano se postavlja u gornji lijevi kut dokumenta. Background-position je svojstvo koje omogućava postavljanje početnog položaja od kojeg će se postaviti slika. U pravilu se postavljaju dvije vrijednosti – jedna za vodoravni, a druga za okomiti položaj. Vrijednosti su right, center, left za vodoravni položaj, zatim top, center, bottom za vertikalni ili postotci, odnosno udaljenost od gornjeg lijevog kuta.

body {
  background-image: url("css.gif");
  background-repeat: no-repeat;
  background-position: right top;
}

Efekt na stranici sličan je efektu u sljedećem okviru:

Lorem ipsum dolor sit amet 

Skraćeni selektor – background

Skraćeno svojstvo. Mogu se navesti sva navedena svojstva bez zadanog redoslijeda navođenja:

body {
  background: url("css.gif") no-repeat
    right top fixed;

}
   
CARNet

Svojstva CSS kutije


U lekciji CSS model kutije vidjeli smo kako preglednik slaže elemente CSS-a na stranicu koristeći model kutije.

kutija, odmaci, rubovi i margine CSS model kutije.

Svojstva kutije možemo podijeliti u četiri cjeline:

  • margine (rubnice)
  • odmaci
  • granice
  • dimenzije.

U sljedećim lekcijama upoznat ćemo svaku od njih.




CARNet

Margine

 

Margine (rubnice) određuju udaljenost CSS kutije, odnosno elementa, od ostalih elemenata na stranici. Ova svojstva su duljine koje mogu biti izražene u bilo kojoj dopuštenoj mjernoj jedinici. Margine se mogu definirati ili sa sve četiri strane pojedinačno, ili skraćenim svojstvom.

margin-top

Gornja margina – udaljenost od gornjeg elementa.

margin-right

Desna margina – udaljenost od desnog elementa.

margin-bottom

Donja margina – udaljenost od donjeg elementa.

margin-left

Lijeva margina – udaljenost od lijevog elementa.

 

Ukoliko, primjerice, imamo element div, koji želimo odmaknuti od rubova kutije u kojoj se nalazi, možemo to napraviti koristeći margine:

div {
margin-top: 15px;
margin-right: 70px;
margin-bottom: 5px;
margin-left: 40px;

border: 1px solid #000;
background-color: #99CCFF;
}
<div>Lorem ipsum dolor sit amet</div>
Lorem ipsum dolor sit amet
  • Nula se piše bez oznake mjerne jedinice, na primjer: margin-right: 0;

Skraćeni selektor – margin

Četiri pojedinačne margine mogu se zamijeniti skraćenim svojstvom, koje bi se tada, za prethodni slučaj, definiralo na sljedeći način.

div {
margin: 15px 70px 5px 40px;
}
Redoslijed navođenja margina
Redoslijed navođenja margina:
gore, desno, dolje, lijevo.

Ukoliko želimo jednaku marginu za sve strane elementa, možemo pisati:

div {
margin: 5px;
}
CARNet

Odmaci

 

Odmak je udaljenost od granice CSS kutije do sadržaja. Slično kao i kod margina, postoje četiri odmaka i skraćeno svojstvo. Ukoliko nije eksplicitno definirana, predefinirana vrijednost odmaka je 0.

padding-top

Odmak od gornje granice.

padding-right

Odmak od desne granice.

padding-bottom

Odmak od donje granice.

padding-left

Odmak od lijeve granice.

 

Razmotrimo opet element div iz prethodne lekcije, pa mu uz postojeće margine dodajmo i odmak:

div {
padding-top: 15px;
padding-right: 65px;
padding-bottom: 35px;
padding-left: 65px;

margin-top: 15px;
margin-right: 70px;
margin-bottom: 5px;
margin-left: 40px;
border: 1px solid #000;
background-color: #99CCFF;
}
<div>Lorem ipsum dolor sit amet</div>
Lorem ipsum dolor sit amet

Vidljivo je da tekst zbog odmaka prelazi u nov red, ali se boja pozadine, bez obzira na odmak, proteže do granice elementa.

Skraćeni selektor – padding

Kao i kod margina, i ovdje se može definirati odmak na drugi način:

div {
padding:5px 10px 15px 20px;
}

Odnosno, ukoliko je odmak sa svih strana jednak:

div {
padding:5px;
}
CARNet

Granice

 

CSS standard definira niz svojstava kojima je moguće opisati granicu elementa. Moguće ih je podijeliti u tri grupe: širina granice, boja granice i izgled granice.

Svojstva širine granice

Slično kao i kod prethodnih svojstava, i ovo se svojstvo dijeli na četiri položaja – gore, desno, dolje i lijevo.

div {
border-top-width: 2px;
border-right-width: 4px;
border-bottom-width: 6px;
border-left-width: 8px;

border-style: solid;
border-color: #000;
background-color: #99CCFF;
}
<div>Lorem ipsum dolor sit amet</div>
Lorem ipsum dolor sit amet

Ili za jednaku širinu svih četiriju granica:

div {
border-width: 2px;
}

Svojstva boje granice

Boja granice također se može definirati zasebno za svaku od četiri granice.

div {
border-top-color: red;
border-right-color: green;
border-bottom-color: blue;
border-left-color: yellow;

border-width: 6px;
border-style: solid;
background-color: #99CCFF;
}
<div>Lorem ipsum dolor sit amet</div>
Lorem ipsum dolor sit amet

Ili za istu boju svih četiriju granica:

div {
border-color: red;
}

Svojstva izgleda granice

Svojstvo izgleda granice može poprimiti sljedeće vrijednosti: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset. Ponovno imamo mogućnost definicije za svaku od granica zasebno:

div {
border-top-style: none;
border-right-style: dotted;
border-bottom-style: dashed;
border-left-style: solid;

border-width: 6px;
border-color: #000;
background-color: #99CCFF;
}
<div>Lorem ipsum dolor sit amet</div>
Lorem ipsum dolor sit amet

Ili zajedničko svojstvo za sve četiri granice:

div {
border-style: dotted;
}

Skraćena svojstva granice

Sva navedena svojstva možemo postaviti skraćeno za pojedinačnu granicu:

div {
border-top: 2px solid #000;
border-right: 4px dotted red;
border-bottom: 6px dashed #fc0;
border-left: 6px groove #0c0;
}
<div>Lorem ipsum dolor sit amet</div>
Lorem ipsum dolor sit amet

Ili jednako za sve četiri granice u jednoj definiciji:

div {
border: 2px dotted #000;
}
CARNet

Dimenzije

 

Dimenzije CSS kutije definirane su širinom i visinom sadržaja:

kutija s odmacima, rubovima i marginama CSS model kutije.

width

Definira širinu sadržaja.

height

Definira visinu sadržaja.

 

Širina i visina sadržaja mogu biti postavljene na bilo koji blok element, bez obzira na dimenzije koje bi taj element inače zauzeo. Širina i visina se mogu postaviti i za slike, pa u slučaju CSS ikonice imamo:

img.ikona {
height: 165px;
width: 120px;
}
<img src="css.gif" alt="CSS ikona">
<img src="css.gif" class="ikona"
alt=
"izobličena CSS ikona">
CSS - ikona CSS - ikona
CARNet

Svojstva popisa

Ukoliko uz oznaku <div> možemo navesti još poneku HTML oznaku kojoj se dolaskom CSS-a znatno povećala uporaba, onda su to sigurno popisi. Mogućnost formatiranja koje je donio CSS omogućile su da se popisi, od običnog elementa za nizanje teksta, pretvore u moćan alat.

Popisi se sastoje od <ul>, odnosno <ol> oznake, koje ustvari čine blok element, te od jedne ili više <li> oznaka koje predstavljaju označavaju elemente popisa. Svaku od ovih oznaka možemo zasebno formatirati.

list-style-type

Definira tip grafičkih oznaka koji će biti prikazan ispred pojedinog elementa popisa. Može poprimiti sljedeće vrijednosti: disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none.

ul {
  list-style-type: square;
}
<ul>
  <li>Lorem ipsum dolor sit amet</li>
  <li>consectetur adipisicing elit</li>
  <li>sed do eiusmod tempor incididunt</li>
  <li>ut labore et dolore magna aliqua.</li>
</ul>
  • Lorem ipsum dolor sit amet
  • consectetur adipisicing elit
  • sed do eiusmod tempor incididunt
  • ut labore et dolore magna aliqua.

list-style-image

Ovo nam svojstvo omogućava da popisu umjesto uobičajene grafičke oznake dodamo sliku. Primjerice:

ul {
  list-style-image: url("arrows.gif");
}
li {
  padding: 4px;
}
<ul>
  <li>Lorem ipsum dolor sit amet</li>
  <li>consectetur adipisicing elit</li>
  <li>sed do eiusmod tempor incididunt</li>
  <li>ut labore et dolore magna aliqua.</li>
</ul>
  • Lorem ipsum dolor sit amet
  • consectetur adipisicing elit
  • sed do eiusmod tempor incididunt
  • ut labore et dolore magna aliqua.

list-style-position

Definira uvlačenje elemenata popisa. Može poprimiti vrijednosti inside ili outside. Pretpostavljena vrijednost je outside.

ul {
  list-style-position: inside;
}
<ul>
  <li>Lorem ipsum dolor sit amet, consectetur   adipiscing elit. Donec in elit non orci
  sollicitudin dignissim.
</li>
  <li>Sed eu lectus ac leo varius faucibus.
  Aliquam erat volutpat. Aliquam erat
  volutpat.
</li>
  <li>Duis orci mauris, lacinia faucibus
  dictum consectetur, aliquam a nibh.
</li>
</ul>
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Donec in elit non orci sollicitudin dignissim.
  • Sed eu lectus ac leo varius faucibus. Aliquam erat volutpat. Aliquam erat volutpat.
  • Duis orci mauris, lacinia faucibus dictum consectetur, aliquam a nibh.

Skraćeni selektor – list-style

Skraćeno svojstvo za istovremen prikaz svih svojstava popisa. U ovom primjeru, ukoliko je slika nedostupna, prikazuje se circle:

ul {
  list-style: circle url("arrows.gif")
              outside;

}
   
CARNet

Pozicioniranje (smještanje)

Jedan od najvećih nedostataka HTML-a je nemogućnost pozicioniranja (smještanja) elemenata na stranici. Precizno smještanje elemenata može se u HTML-u izvesti isključivo tablicama i prozirnim sličicama. CSS omogućava precizno smještanje elemenata korištenjem nekoliko za to predviđenih shema.

Sheme smještanja definirane su svojstvom position, koje može poprimiti sljedeće vrijednosti: static, relative, absolute i fixed, pa shodno tome možemo govoriti o sljedećim shemama:

Statičko smještanje – (vrijednost static) – predefinirana vrijednost. Ovo je uobičajeno smještanje elemenata, pri čemu svojstva smještanja, koja ćemo upoznati u sljedećoj lekciji, ne funkcioniraju.

Relativno smještanje – (vrijednost relative) – element smještamo relativno u odnosu na mjesto na kojem je trebao biti.

Apsolutno smještanje – (vrijednost absolute) – smještanje elementa u odnosu na roditeljsku oznaku – element koji ga okružuje.

Fiksno smještanje – (vrijednost fixed) – apsolutno smještanje u odnosu na prozor preglednika.

  • Nemojte miješati pojmove i smisao fiksnog i apsolutnog smještanja. Fiksno smještanje definira se u odnosu na prozor preglednika, što znači da se, pri pomicanju stranice gore-dolje, fiksno smješteni element uvijek zadržava na istom mjestu.

    Microsoft Internet Explorer do inačice 6.0 ne podržava vrijednost fixed, a kasnije inačice (u trenutku pisanja tečaja IE7-IE9) zahtijevaju podatak o upotrijebljenom standardu (!DOCTYPE) na početku dokumenta da bi fiksno pozicionirane elemente prikazao ispravno.
   
CARNet

Svojstva pozicioniranja (smještanja)


Pri korištenju apsolutnog, relativnog ili fiksnog pozicioniranja (smještanja), možemo koristiti niže navedena svojstva.

left

Udaljenost od lijeve referentne točke – elementa ili prozora preglednika. Može poprimiti vrijednost dužine ili postotka dužine.

top

Udaljenost od gornje referentne točke – elementa ili prozora preglednika. Može poprimiti vrijednost dužine ili postotka dužine.

div {
position: relative;
top: 20px;
left: 50px;
border: 1px solid #000;
}
<div>Lorem ipsum dolor sit amet</div>
Lorem ipsum dolor sit amet
  • Svojstva čije vrijednosti poprimaju jedinice dužina često dopuštaju i negativne vrijednosti. Primjerice, left:-10px uz relativno smještavanje znači da se element prikaže 10 piksela lijevo od mjesta na kojem bi se inače prikazao.

z-index

Ukoliko se dva elementa prekrivaju, vrijednost ovog svojstva definira koji će element biti iznad, a koji ispod. Element s većom vrijednošću uvijek se nalazi iznad.

z-index – primjer
Tri sloja s različitim vrijednostima svojstva z-index.
  • Ovaj primjer sa zadatkom pomoći će vam da bolje razumijete pozicioniranje (smještanje).
  • Zadatak :: Rješenje



CARNet

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