NEDSCHOOLDEV

view_headline menu
yt yt yt

CSS

CSS CSS Uvod CSS Upotreba CSS Boje CSS Pozadine CSS Borders CSS Margine CSS Padding CSS Height/Width CSS Float CSS Tekst CSS Font CSS Poravnanje CSS Linkovi CSS Liste CSS Tabele CSS Ikone








CSS Liste

<< >>



Šta CSS može sa Listama?


U HTML dijelu smo već naučili dosta o listama, ali CSS omogućuje još neke korisne postavke.

CSS postavke omogućuju sljedeće:


 Postavljanje različitih oznaka za neodređene liste,

 Postavljanje različitih oznaka za određene liste,

 Postavljanje slike umjesto već postojećih oznaka,

 Promjena boje pozadine liste,

 Promjena pozicije oznake za liste,

 Uklanjanje default-nih postavki.



Oznake neodređenih lista


Oznake neodređenih lista se dodaju pomoću parametra list-style-type.

Vrijednosti parametra neodređenih lista mogu biti:


circle predstavlja prazan kružić

square predstavlja kockicu

disc predstavlja popunjen kružić (defoult)



  • Audi
  • BMW
  • Volkswagen
  • Audi
  • BMW
  • Volkswagen

ul {
     list-style-type: square;
}

ul {
     list-style-type: circle;
}



Oznake određenih lista


Oznake određenih lista se također dodaju pomoću parametra list-style-type.

Vrijednosti parametra određenih lista mogu biti:


upper-alpha predstavlja velika slova

lower-alpha predstavlja mala slova

upper-roman predstavlja velika rimska

lower-roman predstavlja mala rimska

lower-greek predstavlja grčki alfabet



  1. Audi
  2. BMW
  3. Volkswagen
  1. Audi
  2. BMW
  3. Volkswagen


ol {
     list-style-type: upper-alpha;
}

ol {
     list-style-type: lower-roman;
}



Slika kao oznaka liste


Postavljanje slike kao oznake neodređene liste se određuje parametrom list-style-image.

U vrijednost parametra se dodaje URL slike koja se treba postaviti.




  1. Audi
  2. BMW
  3. Volkswagen


ul {
     list-style-image: url(Basketball.png);
}



Boja pozadine liste


CSS također omogućuava dodavanje boja listama, background-color za pozadinu i color za boju teksta.

Možete dodijeliti boju cijeloj listi, tako se što parametar background-color doda za ol ili ul element, a ako parametar background-color postavite u li element, onda će boja biti samo na individualnim članovima liste, odnosno li elementima.




  1. Audi
  2. BMW
  3. Volkswagen


ol {
     background-color: #4F94CD;
     padding: 20px 40px;
}

ol li {
     background-color: #A4D3EE;
     margin: 5px;
}



Pozicija oznake


Pozicija oznake može biti postavljena inside ili outsite, a određuje se parametrom list-style-position.


Parametar outside označava da će oznaka liste biti postavljena izvan same liste, tj početak svake linije će se poravnati vertikalno ispred oznake za listu. Ovo je default vrijednost.


  • Audi: njemački proizvođač auta
  • BMW
  • Volkswagen

Parametar inside označava da će oznaka liste biti postavljena unutar same liste. Na ovaj način će oznaka postaviti dio samog teksta, pa će početak teksta piti malo pomjeren unutra, kako bi se napravilo mjesta za oznaku liste.


  • Audi: njemački proizvođač auta
  • BMW
  • Volkswagen


ul {
     list-style-position: outside;
}

ul {
     list-style-position: inside;
}



Uklanjanje defalut postavki


Na web stranicama se često koriste liste za razne menije i slično, ali pri tom nisu potrebne oznake ili margine i sl.


S obzirom da po default-u sve liste dobiju određene postavke, a to su margine, padding i oznaka liste (disk), pomoću CSS je moguće ukolniti sve te postavke, a da pri tom sadržaj ne gubi svoje svojstvo liste .

Primjer default liste:


  • Audi
  • BMW
  • Volkswagen

Primjer iste liste nakon uklonjenih default postavki


  • Audi
  • BMW
  • Volkswagen


ul {
     list-style-type: none;
     margin: 0px;
     padding: 0px;
}



<< >>



© Copyright 2018. nedschool.com