8 7 - CSS - Basics

Zavod za industrijsko inženjerstvo INFORMACIJSKI SUSTAVI
Katedra za upravljanje proizvodnjom
CSS osnove
Cascading Style Sheets
Nositelj kolegija: Prof. dr. sc. Dragutin Lisjak

Asistenti: Dr.sc. Davor Kolar
ver. 1.0
Sažetak
 Cilj vježbi: usvojiti sintaksu CSS-a i načine dodavanja CSS
stilova, primijeniti stilsko oblikovanje na HTML kodu
 Sadržaj:
 Uvod – CSS
 CSS sintaksa
 CSS deklariranje / CSS komentari / CSS id i class oznake
 CSS umetanje dokumenata
 CSS pozadine / CSS tekst / CSS poveznice (linkovi) / CSS liste /
CSS tablice
 CSS "box" model
 CSS margine / granice / obris / padding
2 / 51 Informacijski sustavi Fakultet strojarstva i brodogradnje

Zavod za industrijsko inženjerstvo
Uvod - CSS
 CSS (eng. cascading style sheets) definira kako
prikazati HTML elemente
 radi se o stilskom jeziku koji se koristi za opis
prezentacije dokumenata napisanog pomoću markup
(HTML) jezika
 prvotno su u HTML ubacivani elementi za definiciju
prezentacije (npr. <font>), ali je dovoljno brzo uočena
potreba za stilskim jezikom koji će HTML osloboditi
potrebe prikazivanja sadržaja (što je prvenstvena
namjena HTML-a) i njegovog oblikovanja (čemu danas
služi CSS)

CSS sintaksa
 CSS ima 2 glavna dijela: selektor + jednu ili više deklaraciju
Selektor
Deklaracija Deklaracija
h1 {color:blue; font-size:12px;}
Svojstvo Vrijednost Svojstvo Vrijednost
 selektor je HTML element koji želimo "oblikovati"

 svaka deklaracija se sastoji od svojstva i vrijednosti
 svako svojstvo je stilski atribut koji želimo promijeniti i ima
svoju vrijednost

CSS deklariranje
 CSS deklaracija uvijek završava sa znakom ";", dok su
deklaracijske grupe okružene vitičastim zagradama ("{}")
 kako bi se CSS mogao lakše iščitati, obično se svaka
deklaracija stavlja u novi red:
p
{
color:red;
text-align:center;
}

CSS komentari…
 CSS komentari se koriste za objašnjavanje koda, te mogu
pomoći kod naknadnog uređivanja koda
 browser ignorira komentare, tj. ne prikazuje ih na web stranici
 započinju sa znakom "/*" i završavaju sa znakom "*/":
/*Ovo je komentar*/
p
{
text-align:center;
/*Ovo je drugi komentar*/
color:black;
font-family:arial;
}

CSS id i class oznake
CSS id
 id selektor se koristi za specifikaciju jednog, jedinstvenog
elementa
 id selektor koristi id atribut HTML-ovog elementa te se definira

sa znakom "#"

Primjer 1. CSS id

CSS class
 class selektor se koristi za specifikaciju stila za grupu

elemenata
 za razliku od id selektora, class selektor se koristi na više
elemenata
 to omogućava namještanje posebnih stilova za više
HTML elemenata koji se nalaze u istom class-u
 class selektor koristi HTML class atribut te se definira pomoću

znaka "."

Primjer 2. CSS class

CSS – umetanje dokumenata
 tri moguća načina za umetanje CSS

dokumenata:
a.) vanjski dokument za stil
b.) unutarnji dokument za stil
c.) ispisivanje stilova u razini koda (HTML-a)

Vanjski dokument za stil
▪ idealan kada se stil primjenjuje na više stranica
▪ s njime se može promijeniti izgled cijele web stranice
promjenom samo jednog file-a
▪ svaka stranica mora biti povezana sa stilskim file-om koristeći
<link> tag koji ide u <head> dio
• sintaksa:
<link href="StyleSheet1.css" rel="stylesheet" type="text/css" />
Naziv .css dokumenta Definira odnos koji

povezani izvor ima na Specificira tip tekstualnog
dokument iz kojeg se dokumenta
poziva → objašnjava da
je referencirani dokument
stilski

Primjer 3. Vanjski dokument za stil

Primjer 3. Vanjski dokument za stil

Unutarnji dokument za stil
 treba se koristiti kada jedinstveni dokument (web

stranica) ima jedinstveni stil
 definira se u <head> dijelu HTML stranice koristeći
<style> tagove

Primjer 4. Unutarnji file za stil

Ispisivanje stilova u razini koda
 za upotrebu stila u razini koda koriste se stilski

atributi s odgovarajućim HTML tagom
 stil u kodu gubi mnoge prednosti stilskih file-ova
miješajući sadržaj s prezentacijom → zbog toga se
ovaj način dodavanja stilova rijetko koristi

Primjer 5. Ispisivanje stilova u razini koda

CSS pozadine
 pozadinska boja stranice je definirana u <body> dijelu

HTML koda
 CSS svojstva koja se koriste za pozadinske efekte:
▪ background-color
▪ background-image
▪ background-repeat
▪ background-attachment
▪ background-position

Primjer 6. CSS pozadine

Primjer 7. CSS pozadine

CSS tekst
Boja teksta…
 svojstvo boje se kristi za namještanje boje teksta
 boja je većinom specificirana na jedan od sljedeća tri
načina:
a. HEX vrijednost – kao "#ff0000" (LINK)
b. RGB vrijednost - kao "rgb(255,0,0)"
c. ime boje- kao "green"

Primjer 8. CSS tekst

CSS tekst
Poravnanje teksta…
 svojstvo poravnanja teksta se koristi za namještanje
horizontalnog poravnanja teksta
 tekst može biti centriran, poravnat prema lijevo, prema
desno ili obostrano poravnat
 kada je odabrano obostrano poravnanje, rečenica ima
razmake jednake širine te su desne i lijeve margine
jednake

Primjer 9. Poravnanje teksta

CSS tekst
Dekoracija teksta…
 svojstvo dekoriranje teksta se kristi za namještanje ili
micanje deklaracija iz teksta
 većinom se koristi za micanje oznake podcrtavanja s
linkova ( <a href="URL"> Link</a> )

Primjer 10. Dekoracija teksta

CSS tekst
Transformacija teksta…
 transformacija teksta je svojstvo koje se koristi za
naglašavanje velikih i malih slova u tekstu
 može se koristiti za pretvorbu cijelog teksta u velika ili
mala slova, kao i kapitalizaciju početnog slova svake riječi

Primjer 11. Transformacija teksta

CSS tekst
Uvlačenje teksta…
 svojstvo uvlačenja teksta se koristi za specificiranje
razmaka udaljenosti od prve linije teksta

CSS poveznice (linkovi)
- linkovi mogu biti stilizirani pomoću bilo kojeg CSS svojstva
(npr. boje, familije fonta, pozadine, itd…)
- linkovi također mogu biti stilizirani ovisno o kojem se
stanju nalaze
- 4 stanja linkova su:
a.) a:link – uobičajeni link, koji još nitko nije "posjetio"
b.) a:visit – link koji je korisnik "posjetio"
c.) a:hover – link kada korisnik prelazi mišem preko njega
d.) a:active – link u trenutku kada je označen (kliknut)

Primjer 12. CSS poveznice (linkovi)

CSS liste
 dvije glavne vrste lista u HTML-u su:
a.) nesortirana lista (eng. unordered list) – lista je označena
znakovima kao što su krug, kvadrati, strelica, itd. (eng. bullets)
b.) sortirana lista (eng. ordered list) – lista je označena sa
slovima ili brojevima

Primjer 13. CSS liste

Primjer 14. CSS tablice

Primjer 14. CSS tablice

CSS "box" model
 kod CSS-a, "box" model se koristi kada se radi o dizajnu i

rasporedu HTML elemenata na web stranici
 CSS "box" model je zapravo kutija koja omata HTML
elemente te se sastoji od:
 margina
 obrub / granica
 padding-a
 stvarnog sadržaja

CSS "box" model

CSS "box" model
 margine – područje oko granica ostavljaju čistim; nemaju
pozadinske boje i potpuno su transparentne
 Granice / obrubi – idu oko padding-a i sadržaja; obrub je
naslijeđen od svojstva boje (eng. color property) "kutije"
 padding – područje oko sadržaja ostavlja čistim; na njega
utječe pozadinska boja "kutije"
 sadržaj – sadržaj "kutije" gdje se pojavljuje tekst i slike (tj.
HTML elementi)

CSS margine
 margine čiste područje oko elemenata (izvan
granice)
 margine nemaju pozadinsku boju i u potpunosti
su transparentne
 gornja, desna, donja i lijeva margina mogu biti
podešene različitim svojstvima; može se koristi i
"skraćena" vrijednost margina, tj. da se sve
margine promijene odjednom

CSS margine
Moguće vrijednosti margina
VRIJEDNOST OPIS
auto Preglednik kalkulira margine.
length Specificira margine u px, pt, cm, etc. Standardna vrijednost je 0px.
% Specificira margine u odnosu na postotke širine elementa kojeg
sadržava.
inherit Upućuje da margine trebaju biti naslijeđene od elementa "roditelj".

CSS margine

CSS granica / obrub
 stil obruba specificira koji tip obruba će se prikazati
na stranici
 tipovi:
▪ nema obruba (eng. none)
▪ točkasta (eng. dotted )
▪ isprekidana (eng. dashed )
▪ 1 linija (eng. solid )
▪ dvostruka linija (eng. double )
▪ eng. groove (definira 3D "užlijebljenu" liniju; efekt varira ovisno
o vrijednosti boje linije)
▪ eng. ridge (definira 3D "grebenastu" liniju; efekt varira ovisno o
vrijednosti boje linije)
…
Primjer 15. CSS granica / obrub

Primjer 15. CSS granica

CSS obris (eng. outline)
 obris je linija nacrtana oko elemenata (izvan
obruba); omogućuje istupanje elemenata
 svojstvo obrisa je drugačije od svojstva granice
 obris nije dio dimenzija elementa; ukupna širina i
visina obrisa ne utječe na širinu i visinu elementa

Primjer 16. CSS obris

CSS padding
 padding čisti područje oko sadržaja (unutar

granice) elementa; na njega utječe pozadinska
boja elementa
 gornji, desni, donji i lijevi padding mogu biti
promijenjeni nezavisno koristeći različita svojstva;
može se koristi i skraćenica za padding, tj. da se
svi promijene odjednom

Primjer 17. CSS padding

Primjer 18. CSS box model

Primjer 18. CSS box model
Ukupna širina elementa je 250 px-a:
width: 220px; (širina)
padding: 10px; (ukupno 20 px-a →
lijevi+desni padding)
border: 5px solid gray; (ukupno 10 px-a →
lijeva+desna granica)
margin: 0px; (ukupno 0 px-a →
lijeva+desna margina)
Ukupna širina elementa je 360 px-a:

width: 250px; (širina)
padding: 30px; (ukupno 60 px-a →
lijevi+desni padding)
border: 10px solid blue; (ukupno 20 px-a
→ lijeva+desna granica)
margin: 15px; (ukupno 30 px-a →
lijeva+desna margina)

8 7 - CSS - Basics

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

8 7 - CSS - Basics

Uploaded by

Copyright:

Available Formats

Zavod za industrijsko inženjerstvo INFORMACIJSKI SUSTAVI

Katedra za upravljanje proizvodnjom

Nositelj kolegija: Prof. dr. sc. Dragutin Lisjak

2 / 51 Informacijski sustavi Fakultet strojarstva i brodogradnje

3 / 51 Informacijski sustavi Fakultet strojarstva i brodogradnje

 selektor je HTML element koji želimo "oblikovati"

4 / 51 Informacijski sustavi Fakultet strojarstva i brodogradnje

5 / 51 Informacijski sustavi Fakultet strojarstva i brodogradnje

6 / 51 Informacijski sustavi Fakultet strojarstva i brodogradnje

 id selektor koristi id atribut HTML-ovog elementa te se definira

7 / 51 Informacijski sustavi Fakultet strojarstva i brodogradnje

8 / 51 Informacijski sustavi Fakultet strojarstva i brodogradnje

 class selektor se koristi za specifikaciju stila za grupu

 class selektor koristi HTML class atribut te se definira pomoću

9 / 51 Informacijski sustavi Fakultet strojarstva i brodogradnje

10 / 51 Informacijski sustavi Fakultet strojarstva i brodogradnje

 tri moguća načina za umetanje CSS

11 / 51 Informacijski sustavi Fakultet strojarstva i brodogradnje

Naziv .css dokumenta Definira odnos koji

12 / 51 Informacijski sustavi Fakultet strojarstva i brodogradnje

13 / 51 Informacijski sustavi Fakultet strojarstva i brodogradnje

14 / 51 Informacijski sustavi Fakultet strojarstva i brodogradnje

 treba se koristiti kada jedinstveni dokument (web

15 / 51 Informacijski sustavi Fakultet strojarstva i brodogradnje

16 / 51 Informacijski sustavi Fakultet strojarstva i brodogradnje

 za upotrebu stila u razini koda koriste se stilski

17 / 51 Informacijski sustavi Fakultet strojarstva i brodogradnje

18 / 51 Informacijski sustavi Fakultet strojarstva i brodogradnje

 pozadinska boja stranice je definirana u <body> dijelu

19 / 51 Informacijski sustavi Fakultet strojarstva i brodogradnje

20 / 51 Informacijski sustavi Fakultet strojarstva i brodogradnje

21 / 51 Informacijski sustavi Fakultet strojarstva i brodogradnje

22 / 51 Informacijski sustavi Fakultet strojarstva i brodogradnje

23 / 51 Informacijski sustavi Fakultet strojarstva i brodogradnje

24 / 51 Informacijski sustavi Fakultet strojarstva i brodogradnje

25 / 51 Informacijski sustavi Fakultet strojarstva i brodogradnje

26 / 51 Informacijski sustavi Fakultet strojarstva i brodogradnje

27 / 51 Informacijski sustavi Fakultet strojarstva i brodogradnje

28 / 51 Informacijski sustavi Fakultet strojarstva i brodogradnje

29 / 51 Informacijski sustavi Fakultet strojarstva i brodogradnje

30 / 51 Informacijski sustavi Fakultet strojarstva i brodogradnje

31 / 51 Informacijski sustavi Fakultet strojarstva i brodogradnje

32 / 51 Informacijski sustavi Fakultet strojarstva i brodogradnje

33 / 51 Informacijski sustavi Fakultet strojarstva i brodogradnje

34 / 51 Informacijski sustavi Fakultet strojarstva i brodogradnje

35 / 51 Informacijski sustavi Fakultet strojarstva i brodogradnje

36 / 51 Informacijski sustavi Fakultet strojarstva i brodogradnje

 kod CSS-a, "box" model se koristi kada se radi o dizajnu i

37 / 51 Informacijski sustavi Fakultet strojarstva i brodogradnje

38 / 51 Informacijski sustavi Fakultet strojarstva i brodogradnje

39 / 51 Informacijski sustavi Fakultet strojarstva i brodogradnje

40 / 51 Informacijski sustavi Fakultet strojarstva i brodogradnje

41 / 51 Informacijski sustavi Fakultet strojarstva i brodogradnje

42 / 51 Informacijski sustavi Fakultet strojarstva i brodogradnje

44 / 51 Informacijski sustavi Fakultet strojarstva i brodogradnje

45 / 51 Informacijski sustavi Fakultet strojarstva i brodogradnje

46 / 51 Informacijski sustavi Fakultet strojarstva i brodogradnje

47 / 51 Informacijski sustavi Fakultet strojarstva i brodogradnje

 padding čisti područje oko sadržaja (unutar

48 / 51 Informacijski sustavi Fakultet strojarstva i brodogradnje

49 / 51 Informacijski sustavi Fakultet strojarstva i brodogradnje

50 / 51 Informacijski sustavi Fakultet strojarstva i brodogradnje

Ukupna širina elementa je 360 px-a: