CSS – kaskadni opis stilova
Kako je XHTML strukturni jezik web stranice i njegova namjena nije bila ciljana na izgled stranice, pojavio se
CSS. CSS(kaskadni opis stilova) jest skup pravila pomoću kojih upravljamo rasporedom i izgledom
stranice.
U srcu CSS-a je stil. Stil je skup određenih svojstava koja imaju neku vrijednost.
h1 { font-size: 24px; color: #23a8b4;}
selector (ime)
svojstvo
vrijednost
Ubacivanje CSS stilova u Html stranicu
Stilovi se mogu primjeniti na dva načina:
1. direktno u kodu i
2. pomoću lista.
1. U kodu (unutar oznaka body) imamo definirati svojstva i vrijednosti stila za pojedine HTML naredbe.
Ova svojstva i vrijednosti CSS stila odnose se samo na dotičnu HTML oznaku.
<body>
<h1 style="font-size:18px; color:#000099; font-family:Arial, Helvetica, sans-serif">Naslov</h1>
<h1>Naslov1 </h1>
</body>
Izgled u pregledniku
Izgled naslova promijenjen pomoću CSS-a
definiranog u kodu
Iz primjera se vidi da smo CSS stil sa svojim svojstvima i vrijednostima primijenili samo na naslov, dok kod
naslov1 nije primijenjen CSS stil.
2.Liste u pravilu sadrže više stilova i mogu biti:
a) unutrašnje i
b) vanjske.
a) Unutrašnje liste se nalaze u dotičnoj html datoteci i to unutar oznaka <head> … </head> . Svojstva i
vrijednosti stilova se primjenjuju samo na dotičnu html datoteku i ne utječu na ostale datoteke.
Unutrašnje liste započinju s <style type ="text/css">, a završavaju s </style>. Unutar naredbe <style> nalazi
se ime jednog ili više stilova s svojstvima i vrijednostima
Unutrašnja lista sa samo jednim
stilom h1 s ogovarajućim
svojstvima i vrijednostima
U ovom slučaju CSS stil primijeniti će se na sve naslove u jednoj web stranici koja ima HTML naredbu h1
c) Vanjske liste se nalaze unutar posebne datoteke koja ima proizvoljno ime i ekstenziju .css (npr.
tomo.css).
Svojstva i vrijednosti stilova se primjenjuju na sve datoteke (web stranice) u koje je uvezena datoteka s
ekstenzijom css. Da bismo uvezli CSS datoteku potrebno je unutar oznaka <head> … </head> napisati
<link href=“tomo.css“ rel=“stylesheet“ type=“text/css“ />
Kod koji poziva vanjsku CSS
datoteku tomo. css. Ime
datoteke može biti proizvoljno.
U ovom slučaju CSS stil primijeniti će se na sve naslove koje imaju HTML naredbu h1 u više web stranica u
koje je pozvana vanjska css datoteka.
CSS selektori –tipovi css stilova
1. Naredbe ili Tag
Svaka HTML naredba može se koristiti kao ime stila. Takav stil automatski se primjenjuje se na one elemente
web stranice koje su pod tom naredbom.
Primjer:
p{
color:#ffffff;
background: #000000;
}
Ovaj tip css stila primjenjuje se samo na dijelove teksta koji su u HTML kodu obuhvaćeni naredbom
<p>....</p>
Takoder možemo imenovati više HTML naredbi koje imaju ista svojstva i vrijednosti.
Primjer:
p, h2, ul {
color:ffffff;
background: #000000;}
2. Klase
Ako ne želimo promijeniti npr.veličinu teksta svakom odlomku na web stranici, već samo jednom ili nekima
tada su nam naredbe ili tagovi kao tip css stila ograničavajući jer se automatski primjenjuju na sve elemente pod
tom naredbom. U ovakvim slučajevima možemo koristiti klase koje možemo proizvoljno primijeniti na
pojedine elemente na web stranici. Svaka klasa započinje točkom i koristimo proizvoljno asocijativno ime.
Primjer:
.tekst {
color:ffffff;
background: #000000;
}
Ovaj tip stila se ne primjenjuje automatski već ga moramo pozvati za svaki elemente na koji želimo da se
primjeni.
3. ID oznake
Svaka ID oznaka započinje # i koristimo proizvoljno asocijativno ime. Veoma su slični klasama i glavna razlika
je što istu klasu ne možemo primijeniti više puta. Istu ID oznaku možemo primijeniti samo jedanput na web
stranici.
Primjer:
#tekst {
color:white;
background: #000000;
}
4. Kontekstualni selektori
Primjena kontekstualnih selektora jest da određuje elemente stranice, ovisno u kojem se kontekstu nalaze i koje
ih naredbe okružuju. Oni služe za selektiranje nekih elemenata koji se nalaze unutar nekih drugih elemenata.
Primjer:
p strong {
color:white;
background: #000000;
}
Ovaj stil djeluje samo na <strong> naredbe unutar <p> naredbe
Primjer:
.tekst strong {
color:white;
background: #000000;
}
Ovaj stil djeluje samo na <strong> naredbe unutar sadržaja na koji se primjenjuje klasa tekst.
5. Pseudo selektori
Pseudo selektori vam omogućuju da definirate izgled pojedinih HTML tagova u određenim stanjima. Pseudoklase se (umjesto točkom) od HTML taga odvajaju dvotočkom.
Razlikujemo
o pseudo elementi i
o pseudo klase
Pseudo elementi
html tag:first-line - kontrolira izgled prve linije teksta
html tag:first-letter - kontrolira izgled prvog slova teksta
html tag:after – pozicionira sadržaj iza elementa
html tag:before- pozicionira sadržaj ispred elementa
Primjer:
p:first-letter{
color:#ff0000;
font-size:xx-large;
}
p:first-line
{
color:#0000ff;
font-variant:small-caps;
}
h1:before
{
content:url(smiley.gif);
}
h1:after
{
content:url(smiley.gif);
}
Pseudo element možemo koristiti s klasom
Primjer:
p.tekst:first-letter {
color:#ff0000
}
Pseudo-klase
a:link - određuje izgled neposjećenog linka
a:visited - određuje izgled linka kojeg smo već posjetili
a:hover- određuje izgled linka kada smo nad njim
a:active - određuje izgled aktivnog linka
Primjer:
a:link {
color:#FF0000
}
a:visited {
color:#00FF00
}
a:hover {
color:#FF00FF
}
a:active {
color:#0000FF
}
Svojstva i vrijednosti CSS stila - tekst
Vrsta pisma – font
U CSS definiramo vrstu pisma pomoću svojstva
{
font-family: Verdana, Arial, Helvetica, sans-serif;
}
Na većini web stranica koriste se dvije skupine pisama:
1. Serifni fontovi – kao što su Times, Garamond, Georgia,…
2. Bez serifa fontovi (sans serif)- kao što su Arial, Helvetika, Verdana
Problem kod definiranja fontova je taj što font kojim smo izabrali za web stranicu, se neće prikazati ako
korisnik na svom računalu nema taj font.
Zbog toga se uvijek definira veći broj fontova i na kraju se navede sans-serif ili serif da se kaže računalu da ako
korisnik nema niti jedan od prije navedenih fontova, prikaži bilo koji bez serifni ili serifni fonti koji postoji na
računalu.
Npr: font-family: Verdana, Arial, Helvetica, sans serif; govori nam prikaži Verdanu, a ako ne postoji u
računalu prikaži Arial, ako Arial ne postoji prikaži Helvetiku, a ako ne postoji Helevetika prikaži bilo koji bez
serifni font koji postoji na računalu.
Isto tako font-family: Georgia, "Times New Roman", Times, serif; govori nam prikaži Georgia, a ako ne
postoji u računalu prikaži Times New Roman, ako Times New Roman ne postoji prikaži Times, a ako ne
postoji Times prikaži bilo koji serifni font koji postoji na računalu.
Veličina pisma
U CSS definiramo veličinu pisma pomoću svojstva
{
font-size: 10px;
}
Veličina se može zadavati u pikselima(px), tipografskim točkama(pt) gdje je 1pt = 0,376mm, (na staru
HTML oznaku font size ="3" koja kad se preračuna iznosi 12pt ili 16px) inčima (in) gdje je 1in=2,54cm,
centimetrima(cm), milimetrima (mm), postocima(%)emovima (em), exovima(ex) gdje veličina odgovara
veličini malog slova x dotičnog fonta
Veličine pisama možemo zadavati i u vrijednostima koje se u pretraživačima mogu mijenjati.( xx-small, xsmall, small, medium, large, x-large,
xx-large) Ovakve vrijednosti su i standard koji W3Ckonzorcij preporuča, jer omogućava slabovidnim
(hendikepiranim) osobama pomoć prilikom čitanja
Stil pisma
U CSS definiramo stil pisma pomoću svojstva
{
font-style: normal;
}
Vrijednosti mogu biti normal, italic(različiti verzija fonta koji postoji) i oblique(normalni font koje je računalo
ukosilo).
Razmak između redova
U CSS definiramo razmak između redova pomoću svojstva
{
line-height: 20px;
}
Vrijednosti se zadaju brojčanim vrijednostima, a veličine mogu biti isto kao kod veličine pisama(px, pt, in, cm,
mm, %, em, ex ). Razmak između redova treba biti veći od veličine pisama.
Položaj crte i teksta
U CSS definiramo različit položaj crte u odnosu na tekst pomoću svojstva
{
text-decoration: underline;
}
Vrijednosti mogu biti underline(podcrtan tekst), overline (crta iznad teksta), line-through (precrtan tekst),
blink (blinkanje teksta), none(nema crte)
Debljina slova
U CSS definiramo debljinu slova pomoću svojstva
{
font-weight: bold;
}
Vrijednosti mogu biti bold(podebljan tekst), a također vrijednosti se mogu zadavati 100, 200, 300, 400, 500,
600, 700, 800, 900, gdje je 900 najdeblje slovo
Zamjena slova velikim umanjenim
U CSS definiramo zamjenu slova velikim, ali umanjenim pomoću svojstva
{
font-variant: small-caps;
}
Vrijednosti mogu biti normal
Zamjena slova velikim ili malima
U CSS definiramo zamjenu slova pomoću svojstva
{
text-transform: lowercase;
}
Vrijednosti mogu biti capitalize (prvo slovo u riječi veliko), uppercase (sva slova velika) lowercase (sva
slova mala)
Boja
U CSS definiramo boja slova pomoću svojstva
{
color: #006666;
}
Boje na ekranu se definiraju s tri boje:crvenom, zelenom i plavom. Tako definirane boje nazivaju se RGB od
red, green i blue. Naziva se i aditivni sistem miješanja boja, jer se boje zbrajaju i miješanjem svih tri boja u
punom intenzitetu dobivamo bijelu boju.
Svaka od te tri boje može imati 256 različitih nijansi tj. tonova. Ukupno boja koje RGB model može
reproducirati je 256 x 256 x 256 = 16 777 216 nijansi. Ako neke boje nema njezina vrijednost je 0, ako je u
punom tonu njezina vrijednost je 255.
Bijelu boju dobijemo kada imamo sve tri boje u punom tonu.
(255 255 255)
red green blu
Crnu boju dobijemo kada nemamo sve tri boje.
(0
0
0)
red green blu
Da biste neku RGB vrijednost mogli koristiti na HTML stranicama , morat ćemo je pretvoriti u
heksadecimalnu vrijednost. Heksadecimalni brojevi za razliku od dekadskog sustava sa bazom 10 imaju bazu
16. Tako s jednom znamenkom imamo od 0 do 15 i to:
0123456789abcdef
dekadski
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
heksadecimalni
0
1
2
3
4
5
6
7
8
9
A
B
C
D
E
F
10
11
12
13
14
15
16
17
18
dekadski
25
26
27
28
29
30
31
32
33
255
heksadecimalni
19
1a
1b
1c
1d
1e
1f
20
21
ff
Za sve heksadecimalne boje u HTML koristimo šest znamenki s prefiksom „ # “. Prve dvije znamenke su
heksadecimalna vrijednost crvene boje, druge dvije su za zelenu boju i zadnje dvije za plavu boju.
Bijelu boju dobijemo u heksadecimalnom sustavu
(ff
ff
ff)
red green blu
U HTML pišemo je #ffffff
Crnu boju dobijemo u heksadecimalnom sustavu
(00
00
00)
red green blu
U HTML pišemo je #000000
Razmak između riječi
U CSS definiramo razmak između riječi pomoću svojstva
{
word-spacing: 20px;
}
Vrijednosti se zadaju brojčanim vrijednostima, a veličine mogu biti isto kao kod veličine pisama(px, pt, in, cm,
mm, %, em, ex ).
Razmak između slova
U CSS definiramo razmak između slova pomoću svojstva
{
letter-spacing: 20px;
}
Vrijednosti se zadaju brojčanim vrijednostima, a veličine mogu biti isto kao kod veličine pisama(px, pt, in, cm,
mm, %, em, ex ).
Poravnanje teksta
U CSS definiramo poravnanje teksta pomoću svojstva
{
text-align: left;
}
Vrijednosti mogu biti left (lijevo poravnanje), center (centralno), right (desno) i justify (obostrano)
Uvlaka
U CSS definiramo uvlaku između slova pomoću svojstva
{
text-indent: 20px;
}
Vrijednosti se zadaju brojčanim vrijednostima, a veličine mogu biti isto kao kod veličine pisama(px, pt, in, cm,
mm, %, em, ex ).
Svojstva i vrijednosti CSS stila - pozadina
Preko CSS-a možemo ubaciti pozadinu svakom elementu u bloku. To znači da svaki pasus, naslov, tablica ili
neki drugi element ima svoj stil za pozadinu. Ako želio pozadinu primijeniti na cijelu stranicu , tada je
zadajemo uz oznaku body.
Boja pozadine
U CSS definiramo boju pozadine pomoću svojstva
{
background-color: #0066CC;
}
Da biste neku RGB vrijednost mogli koristiti na HTML stranicama , morat ćemo je pretvoriti u
heksadecimalnu vrijednost. Za sve heksadecimalne boje u HTML koristimo šest znamenki s prefiksom „ # “.
Prve dvije znamenke su heksadecimalna vrijednost crvene boje, druge dvije su za zelenu boju i zadnje dvije za
plavu boju.
Slika u pozadini
U CSS definiramo sliku u pozadini pomoću svojstva
{
background-image: url(grupa_a/slike/bgON.gif);
}
Prvi dio url je putanja (grupa_a/slike), a drugi dio je naziv slike i format slike (bgON.gif)
Ponavljanje pojavljivanja slike
U CSS definiramo ponavljanje slike pomoću svojstva
{
background-repeat: repeat-x;
}
Slika se ponavlja u vidu pločica, ako je manja od dimenzija pozadine koju popunjava. Vrijednosti mogu biti
repeat( po horizontali i vertikali), repeat-x (samo po horizontali) i repeat-y (samo po vertikali) i non repeat
(bez ponavljanja)
Statičnost slike
U CSS definiramo statičnost slike pomoću svojstva
{
background-attachment: scroll;
}
Ova opcija određuje da li je slika u pozadini statična, tako da stranica prelazi preko nje ili se pozadina kreće
zajedno sa stranom. Vrijednosti mogu biti scroll (pozadina se zajedno kreće sa stranicom), fixed (pozadina se
ne kreće sa stranicom).
Horizontalna pozicija slike
U CSS definiramo horizontalna poziciju slike pomoću svojstva
{
background-position: center;
}
Postoji mogućnost relativnog postavljanja u odnosu na element na koji se postavlja. Vrijednosti mogu biti
left(lijevo), right(desno) i center (centralno), a također vrijednosti se mogu zadavati apsolutno (brojčana
vrijednost) u odnosu na gornji lijevi vrh elementa na koji se postavlja.
Brojčana vrijednost se može zadavati u pikselima(px), tipografskim točkama(pt) gdje je 1pt = 0,376mm, (na
staru HTML oznaku font size ="3" koja kad se preračuna iznosi 12pt ili 16px) inčima (in) gdje je 1in=2,54cm,
centimetrima(cm), milimetrima (mm), postocima(%)emovima (em), exovima(ex) gdje veličina odgovara
veličini malog slova x dotičnog fonta
Vertikalna pozicija slike
U CSS definiramo vertikalnu poziciju slike pomoću svojstva
{
background-position: top;
}
Postoji mogućnost relativnog postavljanja u odnosu na element na koji se postavlja. Vrijednosti mogu biti
top(vrh), bottom(dno) i center (centralno), a također vrijednosti se mogu zadavati apsolutno (brojčana
vrijednost) u odnosu na gornji lijevi vrh elementa na koji se postavlja.
Brojčana vrijednost se može zadavati u pikselima(px), tipografskim točkama(pt) gdje je 1pt = 0,376mm, (na
staru HTML oznaku font size ="3" koja kad se preračuna iznosi 12pt ili 16px) inčima (in) gdje je 1in=2,54cm,
centimetrima(cm), milimetrima (mm), postocima(%)emovima (em), exovima(ex) gdje veličina odgovara
veličini malog slova x dotičnog fonta
U većini slučajeva zadaju se obje vrijednosti i za horizontalno i za vertikalno pozicioniranje. Prva vrijednost je
horizontalno pozicioniranje, a druga vertikalno pozicioniranje.
{
background-position: left top;
}
ili apsolutno
{
background-position: 20px 50px;
}
Svojstva i vrijednosti CSS stila - blok
Svaki element koji može biti blok, kao što je paragraf, naslov, slika itd.., postoji u svom pravokutnom okviru,
koji se može podešavati preko CSS-a.
Širina – width
U CSS definiramo širinu pomoću svojstva
{
width: 500px
}
Veličina se može zadavati u pikselima(px), tipografskim točkama(pt) gdje je 1pt = 0,376mm, (na staru
HTML oznaku font size ="3" koja kad se preračuna iznosi 12pt ili 16px) inčima (in) gdje je 1in=2,54cm,
centimetrima(cm), milimetrima (mm), postocima(%)emovima (em), exovima(ex) gdje veličina odgovara
veličini malog slova x dotičnog fonta
Visina –height
U CSS definiramo veličinu pisma pomoću svojstva
{
height: 500px
}
Veličina se može zadavati u pikselima(px), tipografskim točkama(pt) gdje je 1pt = 0,376mm, (na staru
HTML oznaku font size ="3" koja kad se preračuna iznosi 12pt ili 16px) inčima (in) gdje je 1in=2,54cm,
centimetrima(cm), milimetrima (mm), postocima(%)emovima (em), exovima(ex) gdje veličina odgovara
veličini malog slova x dotičnog fonta
Float
Float – koristi se za odvajanje elemenata od ostatka strane. Ostali elementi mogu teći preko ovog elementa ili
da se prekidaju oko njega
{
float: left;
}
Vrijednosti mogu biti left (lijevo) i right(desno).
Clear
Koristi se za definiranje područja u kojem se ne dozvoljava preklapanje elemenata
{
clear:left;
}
Vrijednosti mogu biti left (lijevo), right(desno) i both(odostrano).
Padding
Definira rastojanje od sadržaja elementa i njegovog ruba
{
padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 7px;
}
Možemo zadavati padding posebno za vrh(top),lijevo(lijevo), desno(right) i noge(bottom)
{
padding: 5px;
}
U ovom slučaju vrijednosti su iste za vrh, lijevo, desno i noge.
Margin
Definira rastojanje od ruba dva elementa
{
margin-top: 5px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 20px;
}
Možemo zadavati margin posebno za vrh(top),lijevo(lijevo), desno(right) i noge(bottom)
{
margin: 5px;
}
U ovom slučaju vrijednosti su iste za vrh, lijevo, desno i noge.
Svojstva i vrijednosti CSS stila - okvir
Preko CSS-a možemo ubaciti okvir svakom elementu u bloku. To znači da svaki pasus, naslov, tablica ili neki
drugi element ima svoj okvir.
Okvir možemo zadavati za :
o Top(vrh)
o Right(desno)
o Bottom(dno)
o Left(lijevo)
Vrsta okvira
U CSS definiramo vrstu okvira pomoću svojstva
{
border-top-style: dashed;
border-right-style: dashed;
border-bottom-style: dashed;
border-left-style: dashed;
}
Vrijednosti mogu biti solid(obična), dotted (točkasta), dashed (crta) i double (dvije → tanja i deblja), grouve
(siva i bijela) itd .
Debljina okvira
U CSS definiramo debljinu okvira pomoću svojstva
{
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
}
Brojčana vrijednost se može zadavati u pikselima(px), tipografskim točkama(pt) gdje je 1pt = 0,376mm, (na
staru HTML oznaku font size ="3" koja kad se preračuna iznosi 12pt ili 16px) inčima (in) gdje je 1in=2,54cm,
centimetrima(cm), milimetrima (mm), postocima(%)emovima (em), exovima(ex) gdje veličina odgovara
veličini malog slova x dotičnog fonta
Boja okvira
U CSS definiramo boju okvira pomoću svojstva
{
border-top-color: #0099CC;
border-right-color: #0099CC;
border-bottom-color: #0099CC;
border-left-color: #0099CC;
}
Da biste neku RGB vrijednost mogli koristiti na HTML stranicama , morat ćemo je pretvoriti u
heksadecimalnu vrijednost. Za sve heksadecimalne boje u HTML koristimo šest znamenki s prefiksom „ # “.
Prve dvije znamenke su heksadecimalna vrijednost crvene boje, druge dvije su za zelenu boju i zadnje dvije za
plavu boju.
Ako želimo zadati okvir oko sve četiri strane elementu u bloku jednostavno pišemo
{
border:solid 1px #993300
}
© Copyright 2024 Paperzz
