Upload
hrvoje-mikolcevic
View
413
Download
2
Embed Size (px)
DESCRIPTION
Prezentacija za dodatnu nastavu u Tehničkoj školi, Požega
Citation preview
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.