CSS svojstva

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