Prezentacija za dodatnu nastavu u Tehničkoj školi, Požega

1. CSS – Stiliziranje teksta
Svojstva teksta i odlomaka

2. CSS – stiliziranje teksta
 Iz ove prezentacije bismo trebali naučiti različite
načine oblikovanja teksta.
 Da bismo mogli uspješno oblikovati tekst (ili bilo
koje druge elemente) na stranici potrebno je
naučiti koja svojstva se mogu oblikovati i koje
vrijednosti se mogu zadati za pojedina svojstva.
 Nakon što proĎemo najvažnija svojstva i
vrijednosti prikazat ćemo neke tipične načine
oblikovanja teksta na stranici
WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević
2013. /2014.
2

3. Svojstva fontova
Svojstva znakova primjenjiva na pojedine
znakove u tekstu
WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević
2013. / 2014.
3

4. Svojstva fontova
 To su svojstva koja se odnose na izgled
pojedinih znakova
 Sva svojstva fontova su nasljedna – to znači da
kad zadamo svojstvo fonta za neki vanjski
element, onda to svojstvo vrijedi i za sve
elemente koji su sadržani unutar tog elementa
WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević
2013. /2014.
4

5. Svojstva fontova - font-family
 OdreĎuje grupu fontova pomoću kojih se
prikazuje zadani tekst.
 Tekst prikazuje zadanim fontom samo ako je on
instaliran na računalu korisnika koji stranice
pregledava.
 Zato se u principu zadaje grupa fontova, tekst se
prikazuje prvim fontom iz grupe, a ako on nije
instaliran, nastupa slijedeći iz zadane grupe itd.
 Primjer:
p{ font-family: Verdana, Geneva, sans-serif; }
WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević
2013. / 2014.
5

6. Svojstva fontova - font-family
 Moguće vrijednosti:
» imena fontova odvojena zarezima, generički font
(obično na zadnjem mjestu)
 Napomena: Ako font ili grupa fontova u nazivu
ima više riječi, obavezno ih treba staviti unutar
navodnika ili apostrofa, npr:
p { font-family: "Times New Roman", serif; }
WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević
2013. / 2014.
6

7. Svojstva fontova - font-style
 OdreĎuje da li je font ukošen ili ne
 moguće vrijednosti:
» normal (nije ukošen),
» italic (ukošen) ili
» oblique (ukošen)
WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević
2013. / 2014.
7

8. Svojstva fontova - font-weight
 OdreĎuje debljinu teksta.
 Moguće vrijednosti:
normal, bold, bolder, lighter, 100, 200, 300, 400,
500, 600, 700, 800, 900, inherit
napomena 1: zadavanje brojkom često nema
efekta jer korisnik nema takvog fonta na
računalu. U tom se slučaju prikazuje najbliži po
debljini.
napomena 2: 400 je isto što i normal, 700 je isto
što i bold
WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević
2013. / 2014.
8

9. Svojstva fontova - font-size
 OdreĎuje veličinu slova. Veličina se može zadati
na nekoliko različitih načina i izraziti veličinu u
različitim jedinicama.
 Bolje je zadavanje u relativnim jedinicama (xxsmall, x-small, small, medium, large, x-large, xxlarge, larger, smaller, %, ems) nego u
apsolutnim jedinicama (pixelima [px], pointima
[pt], milimetrima [mm]) jer korisnici lakše mogu
prilagoditi veličinu teksta svojim potrebama
WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević
2013. / 2014.
9

10. Svojstva fontova - font-size
 Veličina se za glavninu teksta na stranici zadaje
relativnim veličinama:
» Postoci: 100% znači standardnu, normalnu
veličinu, npr. 200% su dvostruko veća slova,...
» Em: 1em=100%, 1.4em=140%,....
 Zadavanje veličine u pikselima (px) se prije
izbjegavalo, no danas dolazi u obzir i to
 Napomena: Standardna veličina fonta u svim
preglednicima je 16px, dakle ako ne zadamo
drugačije 100%=1em=16px
WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević
2013. / 2014.
10

11. Svojstva fontova - color
 OdreĎuje boju teksta
 Boja se najčešće zadaje heksadekadski
pomoću tri ili 6 znamenaka koje predstavljaju
udjele crvene, zelene i plave:
» #RRGGBB ili #RGB
 Primjer: .plavi{color: #069;}
 Boje se mogu zadavati i dekadskim udjelima
(RGB ili RGBA model), npr. na slijedeći način:
color: rgb(0,102,153) – ista boja kao i gore
WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević
2013. / 2014.
11

12. Svojstva fontova - color
 rgba model osim boje omogućuje i zadavanje
prozirnosti. Dodatni četvrti parametar s
vrijednostima od 0.0 (potpuno neprozirno) do 1.0
(potpuno prozirno) omogućuje da zadamo
djelomičnu prozirnost fonta npr:
.prozirni{ color: rgba(0,102,153, 0.5); }
WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević
2013. / 2014.
12

13. Svojstva fontova – font-variant
 Omogućuje prikaz velikim slovima koja su
veličine malih slova.
moguće vrijednosti: small-caps, none
WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević
2013. / 2014.
13

14. Svojstva fontova - font-stretch
 Omogućuje izbor i zadavanje uže ili šire
varijante fonta.
 moguće vrijednosti:
normal, wider, narrower, ultra-condensed, extracondensed, condensed, semi-condensed, semiexpanded, expanded, extra-expanded, ultraexpanded, inherit
 Ovo neće raditi ukoliko odabrani font nema
svoje uže i šire varijante, zato oprez!
WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević
2013. / 2014.
14

15. Svojstva teksta
Svojstva koja odabiremo za neki dio teksta, tzv.
blok teksta
WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević
2013. / 2014.
15

16. Svojstva teksta - text-align
 Omogućava kontrolu horizontalnog poravnanja
teksta. Tekst možemo poravnati s lijeve strane
(left), s desne strane (right), centrirati na stranici
(center), poravnati s obje strane (justify)
 moguće vrijednosti: left, right, center, justify,
inherit
 Napomena: treba izbjegavati justify u
situacijama gdje prostor za tekst nije dovoljno
širok. Da bi poravnanje s obje strane izgledalo
smisleno, moramo imati dovoljnu širinu.
WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević
2013. / 2014.
16

17. Svojstva teksta - text-indent
 Omogućuje uvlačenje prvog reda teksta u
odlomku ili nekom dijelu teksta.
 moguće vrijednosti: fiksna veličina u bilo kojim
jedinicama, %, inherit
WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević
2013. / 2014.
17

18. Svojstva teksta - text-decoration
 Omogućuje "ukrašavanje" teksta različitim
dodacima. Moguće su i kombinacije,
jednostavno navedemo vrste ukrašavanja
odvojene razmacima.
moguće vrijednosti: none, underline, overline,
line-through, blink
 Napomena: treba izbjegavati potcrtavanje
“običnog” teksta jer bi korisnici mogli pomisliti da
je to link
WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević
2013. / 2014.
18

19. Svojstva teksta - text-transform
 Daje mogućnost kontrole nekih varijanti velikih i
malih slova u tekstu.
 moguće vrijednosti:
»
»
»
»
capitalize - svaku riječ piše velikim početnim slovom,
uppercase - cijeli tekst piše velikim slovima,
lowercase - cijeli tekst piše malim slovima,
none, inherit
WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević
2013. / 2014.
19

20. Svojstva teksta - letter-spacing
 OdreĎuje razmak izmeĎu slova.
 Veličina je relativna - zadaje se za koliko želimo
povećati ili smanjiti uobičajeni razmak.
 Moguće vrijednosti: Može se zadati u
apsolutnim (px, mm,..) i relativnim (%, em)
jedinicama ili postaviti normal ili inherit.
 Napomena: ne funkcionira uvijek i u svim
preglednicima idealno, najbolje koristiti px ili em
WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević
2013. / 2014.
20

21. Svojstva teksta - word-spacing
 OdreĎuje razmak izmeĎu riječi u tekstu.
 Kao i kod letter-spacing zadaje se za koliko
želimo povećati ili smanjiti uobičajeni razmak.
 Moguće vrijednosti: Može se zadati u
apsolutnim (px, mm,..) i relativnim (%, em)
jedinicama ili postaviti normal ili inherit.
WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević
2013. / 2014.
21

22. Svojstva teksta - line-height
 OdreĎuje visinu retka kojom se regulira i prividni
razmak izmeĎu redova.
 Razmak se zadaje apsolutno, a ne u odnosu na
neku početnu vrijednost.
 Moguće vrijednosti: sve apsolutne i relativne
jedinice (%, em, px, normal, inherit…)
 Napomena: za uobičajeni tekst u pregledniku
najčešće je potrebno malo povećati line-height
radi lakšeg čitanja, npr:
p{ line-height: 1.5em; }
WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević
2013. / 2014.
22

23. Svojstva teksta - vertical-align
 OdreĎuje kako je element na kojeg je primjenjen stil
vertikalno poravnat u odnosu na ostale elemente u redu ili
u odnosu na stanje zadano nasljeĎivanjem.
 moguće vrijednosti:
» baseline - osnovna vrijednost, element se poravnava na "osnovnu
crtu“
» middle - vertikalnu sredinu elementa poravnava s vertikalnom
sredinom roditelja (teksta)
» sub - element smiješta ispod teksta
» super - element smiješta iznad teksta
» text-top - gornji rub elementa poravnava s gornjim rubom teksta
unutar roditelja
» text-bottom - donji rub elementa poravnava s donjim rubom teksta
unutar roditelja
» top - gornji rub elementa poravnava s gornjim rubom roditelja
» bottom - donji rub elementa poravnava s donjim rubom roditelja
WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević
2013. / 2014.
23

24. Najčešća praksa i napomene
 Osnovnu veličinu teksta, osnovni font i visinu
retka (prored) najbolje je zadati odmah na
početku oblikovanja dokumenta. Često se to radi
za cijeli dokument – redefiniranjem oznake body:
body{ font-family: Arial, Helvetica, sans-serif;
color: #222; font-size: 0.87em; line-height: 1.5em}
 Prilikom zadavanja boja teksta pazite da je on
dovoljno različit od okoline (pozadine) i lako čitljiv
WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević
2013. / 2014.
24

25. Najčešća praksa i napomene
 Pomoću text-decoration možete isključiti
potcrtavanje linkova, ali pri tome pazite da oni
budu dovoljno uočljivi i razlikuju se od ostalog
teksta
WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević
2013. / 2014.
25