CSS – Stiliziranje teksta

Svojstva teksta i odlomaka

WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević 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

2013. /2014.

WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević 3

Svojstva fontova

Svojstva znakova primjenjiva na pojedine znakove u tekstu

2013. / 2014.

WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević 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

2013. /2014.

WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević 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; }

2013. / 2014.

WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević 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; }

2013. / 2014.

WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević 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)

2013. / 2014.

WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević 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, inheritnapomena 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

2013. / 2014.

WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević 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 (xx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller, %, ems) nego u apsolutnim jedinicama (pixelima [px], pointima [pt], milimetrima [mm]) jer korisnici lakše mogu prilagoditi veličinu teksta svojim potrebama

2013. / 2014.

WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević 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

2013. / 2014.

WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević 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

2013. / 2014.

WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević 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); }

2013. / 2014.

WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević 13

Svojstva fontova – font-variant

Omogućuje prikaz velikim slovima koja su veličine malih slova.moguće vrijednosti: small-caps, none

2013. / 2014.

WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević 14

Svojstva fontova - font-stretch

Omogućuje izbor i zadavanje uže ili šire varijante fonta.

moguće vrijednosti: normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded, inherit

Ovo neće raditi ukoliko odabrani font nema svoje uže i šire varijante, zato oprez!

2013. / 2014.

WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević 15

Svojstva teksta

Svojstva koja odabiremo za neki dio teksta, tzv. blok teksta

2013. / 2014.

WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević 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.

2013. / 2014.

WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević 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

2013. / 2014.

WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević 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

2013. / 2014.

WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević 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

2013. / 2014.

WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević 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

2013. / 2014.

WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević 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.

2013. / 2014.

WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević 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; }

2013. / 2014.

WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević 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

2013. / 2014.

WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević 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

2013. / 2014.

WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević 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

2013. / 2014.