Lekcije:
Na ovoj stranici:
Wikipedia o CSSu
O povijesti CSSa, te o osnovama kako CSS funkcionira na enciklopedijski način.W3C o CSSu
Službeni standardi i preporuke (ali i poneki tutoriali...) se nalaze ovdje.W3Schools tutoriali
Super škola CSSa u par jednostavnih lekcija.Validacija CSS uradaka
Napravili ste stranicu i zanima vas da li ste poštovali postojeće standarde i preporuke? Provjerite ovdje.
Stiliziranje CSSom
Ako smo prošli osnovne načine zadavanja, spremanja i sintakse CSSa, spremni smo i za malo konkretnije stvari. U ovom tutorialu bismo trebali naučiti kako se može kontrolirati izgled teksta, i kakve je sve efekte moguće postići. Kao referenca služit će nam standardi W3Ca o fontovima iformatiranju teksta.Svojstva Fontova
Sva svojstva fontova su nasljedna. To nam omogućuje da napišemo stilove kojima kontroliramo font i da ih primjenimo na bilo koji element stranice koji može sadržavati tekst. Tekst unutar takvog elementa bit će formatiran u skladu s zadanim stilom.font-family
Određuje grupu fontova pomoću kojih se prikazuje zadani tekst. Znamo da se 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.napomena1: Ako font ili grupa fontova u nazivu ima više riječi, obavezno je treba staviti unutar navodnika ili apostrofa.
napomena2: Sam Font se može odrediti i tagom "font" no ovaj način je preporučljiviji.
moguće vrijednosti: imena fontova odvojena zarezima, generički font (obično na zadnjem mjestu)
font-style
Određuje da li je font ukošen ili ne.moguće vrijednosti: normal (nije ukošen), italic (ukošen) i oblique (ukošen)
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
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.Preporuča se izbjegavanje zadavanja fiksne veličine fonta (u pixelima [px], pointima [pt], milimetrima [mm], itd.).
Bolje je zadavanje relativnih veličina ( xx-small, x-small, small, medium, large, x-large, xx-large,larger, smaller, %, ems) jer tada korisnici mogu prilagoditi veličinu slova na stranici svojim potrebama.
Naročito često se koristi zadavanje veličina u postocima (100% znači standardnu, normalnu veličinu, npr 200% su dvostruko veća slova,...), ili u ems(1ems=100%, 2ems=200%,....).
Zadavanje apsolutne veličine slova dolazi u obzir jedno za osjetljive dijelove stranice (izbornike,..) koji bi se mogli "raspasti" ukoliko bi korisnik mijenjao veličinu slova.
font-variant:
Omogućuje prikaz velikim slovima koja su veličine malih slova.moguće vrijednosti: small-caps, none
font-stretch
Omogućuje mijenjanje razmaka između slova.moguće vrijednosti: normal, wider, narrower, ultra-condensed, extra-condensed, condensed,semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded, inherit
color
Određuje boju teksta. Boje se zadaju heksadecimalno npr. "#006699"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
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
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
text-transform
Daje mogućnost kontrole 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
letter-spacing
Određuje razmak između slova. Može se zadati u apsolutnim (px, mm,..) i relativnim (%, ems) jedinicama ili postaviti "normal" ili "inherit".word-spacing
Određuje razmak između riječi. Vrijedi sve što i za letter-spacing.line-height
Određuje razmak između redova. Vrijedi sve što i za letter-spacingvertical-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 - defaultna 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
Primjeri
Evo i par primjera, da ne ostane sve na pustoj teoriji. U primjerima su stilovi zadani ili kao klase koje primjenjujemo na određeni element ili inline.Pokušajte mijenjati veličinu prikaza teksta u svom pretraživaču (u IE6: View > Text Size > ..., u Firefoxu CTRL + ili CTRL -) . Primjetite da se oupće ne mijenjaju oni tekstovi na koje je primjenjen font fiksne veličine, dok se oni čija je veličina zadana relativno mijenjaju u skladu s naredbom.
Ako veličinu teksta zadate apsolutno tada i ostale veličine najbolje zadajte apsolutno i obrnuto, inače će pri koriničkoj promjeni veličine teksta doći do promjene odnosa veličina što sigurno ne želite!
:: primjer 1:
.primjer1 {
font-family: "Times New Roman", Times, serif;
line-height: 2em;
text-transform: capitalize;
color: #990000;
font-size: 1.6em;
letter-spacing: 0.2em;
word-spacing: 2em;
font-style: italic;
}
font-family: "Times New Roman", Times, serif;
line-height: 2em;
text-transform: capitalize;
color: #990000;
font-size: 1.6em;
letter-spacing: 0.2em;
word-spacing: 2em;
font-style: italic;
}
Lorem Ipsum Dolor Sit Amet, Consectetur Adipisicing Elit...
:: primjer 2:
.primjer2 {
font-family: "Courier New", Courier, mono;
line-height: 16px;
color: #666666;
font-size: 12px;
text-align: justify;
text-indent: 50px;
}
font-family: "Courier New", Courier, mono;
line-height: 16px;
color: #666666;
font-size: 12px;
text-align: justify;
text-indent: 50px;
}
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
primjer 3:
primjer3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
line-height:1.5em;
color: #FF6600;
font-size: 80%;
text-align: right;
font-weight: bolder;
text-transform: lowercase;
text-decoration: underline overline;
letter-spacing: 0.6em;
}
font-family: Verdana, Arial, Helvetica, sans-serif;
line-height:1.5em;
color: #FF6600;
font-size: 80%;
text-align: right;
font-weight: bolder;
text-transform: lowercase;
text-decoration: underline overline;
letter-spacing: 0.6em;
}
lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...
:: primjer 4:
.primjer4 {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: 900;
text-align: center;
}
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: 900;
text-align: center;
}
u HTML dokumentu:
<span class="primjer4">
E<span style="vertical-align: sub; font-size:14px">a</span>
=mc<span style="vertical-align: super; font-size:14px">2</span>
- cool za potencije i indekse!</span>
Ea =mc2 - cool za potencije i indekse!<span class="primjer4">
E<span style="vertical-align: sub; font-size:14px">a</span>
=mc<span style="vertical-align: super; font-size:14px">2</span>
- cool za potencije i indekse!</span>
:: primjer 5:
Evo i malo kompliciranijeg primjera [klikni za otvaranje primjera] u kojem kombiniramo nekoliko stilova. Stilom je redefiniran tag body, i njime je određen osnovni izgled teksta. Na drugi odlomak primjenjena je klasa .drugi. Primjetite da i link u drugom odlomku izgleda drugačije, to je stoga što smo napravili stil sa složenim selektorom .drugi a kojim je definiran njegov izgled.HTML si najbolje spremite na svoje računalo pa malo proanalizirajte CSS i HTML elemente.
i na kraju...
Na kraju da ponovimo uz par savjeta i preporuka:- kad god je to moguće koristite relativne veličine fontova kao i ostalih veličina vezanih uz tekst (proredi, razmaci između slova i riječi,...). Na taj način će i oni korisnici koji imaju podešenu veću veličinu fonta u svom web pregledniku imati pregledno i smisleno raspoređen tekst na stranici.
- apsolutne veličine fontova koristite samo ondje gdje bi korisnička promjena veličine fonta opasno narušila funkcionalnost stranice (izbornici, obrasci za upis podataka i slično), ali i to samo ako baš morate.
- kombinirajte stilove i imajte na umu da se oni nasljeđuju preko "roditeljskih elemenata" na stranici.
