Pomoću CSS-a možemo relativno lako izmijeniti naèin na koji se naš tekst prikazuje u web pretraživaču. Za razliku od standardnog HTML-a CSS nam omogućava puno veću fleksibilnost i kontrolu nad tekstom.
Šta sve možemo urediti sa CSS-om?
Možemo uređivati sljedeće atribute:
1. color
2. font-weight
3. font-family
4. font-size
5. font-variant
6. font-style
7. text-decoration
8. text-transform
Smatramo da je ovaj dio CSS-a koji uređuje font najvažniji pa ćemo u kratkim crtama proći svaki atribut teksta. Kombiniranjem ovih atributa možete postići veoma dobar efekt, pogotovo ako napravite klase koje ćete koristiti u dijelovima vaše web stranice (opisi, reklame, naslovi, linkovi itd.).
Color
Pomoću ovog atributa podešavamo boju teksta kojeg ispisujemo. Predefinirana boja teksta ovisi o web pregledniku zato je preporučljivo istaknuti boju teksta ako nam je važno u kojoj će se boji ispisati.
Font-weight
Font-weight određuje koliko tekst treba biti podebljan tj. "težak" pri prikazu. Za vrijednosti možemo zadati numeričke vrijednosti ili ključne riječi. Ključne rije#269;i mogu biti normal, bold, bolder, lighter. Bolder i lighter kažu pretraživaču da tekst mora biti tamniji odnosno svjetliji za nijansu od teksa u parent elementu.
Numeričke vrijednosti mogu biti 100, 200, 300 .... 900 s tim da je normalna vrijednost 400, a bold ima vrijednost 700.
Font-family
Ovaj element predstavlja listu fontova koje preglednik mora ispisati. Preglednik najprije traži prvi font iz liste i pokušava ga postaviti za ispis, a onda hijararhijski ostale u listi.
Kao vrijednost atribut uzima ime fonta koje mora koristiti. Svako ime u listi se odvaja zarezom.
Predefinirana vrijednost fonta također zavisi od preglednika do preglednika i ne postoji standardni font za sve preglednike.
Font-size
Font-size određuje koliku veličinu fonta preglednik mora prikazati. U HTML-u smo ograničeni samo na 7 predefiniranih vrijednosti, ali nam zato CSS dopušta puno ve#263;u fleksibilnost. Ne samo da možemo određivati veličinu numerički nego još možemo odrediti i mjerne jedinice. Mjerne jedinice koje možemo koristiti su sljedeće:
1. point
2. ems
3. exs
4. picas
5. pixels
6. inches
7. millimeters
8. centimeters
Također možemo koristiti i relativne ključne riječi za podešavanje fonta - larger i smaller, kao i apsolutne ključne riječi:
1. xx-small
2. x-small
3. medium
4. large
5. x-large
6. xx-large
Zapamtimo da predefinirana vrijednost zavisi od preglednika do preglednika.
Font-variant
Ovdje možemo birati dva načina prikaza teksta, a to su normal ili small-caps. Normal će prikazati tekst onakav kakav je u originalu dok small-caps prikazuje tekst ispisan malim slovima kao umanjena velika slova.
Font-style
Tradicionalno imamo nekoliko stilova koje možemo primijeniti na tekst. CSS nam upravo to omogućava sa ovom opcijom. Možemo koristiti tri stila: normal, italic i oblique. Koristeći italic i oblique vizualno dobijemo isti stil.
Font-decoration
U ovom dijelu možemo primijeniti efekte na tekst koji prikazujemo. Ti efekti mogu biti: none, underline, overline, line-through, blink. Efekte možemo zapisati kao listu ako koristimo više od jednoga i tada ih odvajamo zarezom.
Text-transform
Text-transform omogućava transformaciju cijelog teksta u velika, mala slova ili da prvo slovo svake riječi bude veliko. Vrijednosti koje se mogu staviti su:
1. capitalize
2. uppercase
3. lowercase
Osim ovih opcija možete text-transform postaviti na none da se osigurate da tekst neće imati nikakve efekte.
Primjeri korištenja
Idemo vidjeti kako u praksi rade svi ovi tekstualni efekti kroz nekoliko primjera.
<font style="color: #ff0000; font-weight: 900;
font-family: Arial"> Kako koristiti CSS na tekstu!</font>
Kako koristiti CSS na tekstu!
<a href=# style="text-decoration: overline; font-size:10px">
Ovo je link
</a>
Ovo je link
<font style="text-transform:capitalize">
Ovo je primjer upotrebe capitalize text-transform</font>
Ovo je primjer upotrebe capitalize text-transform
Šta sve možemo urediti sa CSS-om?
Možemo uređivati sljedeće atribute:
1. color
2. font-weight
3. font-family
4. font-size
5. font-variant
6. font-style
7. text-decoration
8. text-transform
Smatramo da je ovaj dio CSS-a koji uređuje font najvažniji pa ćemo u kratkim crtama proći svaki atribut teksta. Kombiniranjem ovih atributa možete postići veoma dobar efekt, pogotovo ako napravite klase koje ćete koristiti u dijelovima vaše web stranice (opisi, reklame, naslovi, linkovi itd.).
Color
Pomoću ovog atributa podešavamo boju teksta kojeg ispisujemo. Predefinirana boja teksta ovisi o web pregledniku zato je preporučljivo istaknuti boju teksta ako nam je važno u kojoj će se boji ispisati.
Font-weight
Font-weight određuje koliko tekst treba biti podebljan tj. "težak" pri prikazu. Za vrijednosti možemo zadati numeričke vrijednosti ili ključne riječi. Ključne rije#269;i mogu biti normal, bold, bolder, lighter. Bolder i lighter kažu pretraživaču da tekst mora biti tamniji odnosno svjetliji za nijansu od teksa u parent elementu.
Numeričke vrijednosti mogu biti 100, 200, 300 .... 900 s tim da je normalna vrijednost 400, a bold ima vrijednost 700.
Font-family
Ovaj element predstavlja listu fontova koje preglednik mora ispisati. Preglednik najprije traži prvi font iz liste i pokušava ga postaviti za ispis, a onda hijararhijski ostale u listi.
Kao vrijednost atribut uzima ime fonta koje mora koristiti. Svako ime u listi se odvaja zarezom.
Predefinirana vrijednost fonta također zavisi od preglednika do preglednika i ne postoji standardni font za sve preglednike.
Font-size
Font-size određuje koliku veličinu fonta preglednik mora prikazati. U HTML-u smo ograničeni samo na 7 predefiniranih vrijednosti, ali nam zato CSS dopušta puno ve#263;u fleksibilnost. Ne samo da možemo određivati veličinu numerički nego još možemo odrediti i mjerne jedinice. Mjerne jedinice koje možemo koristiti su sljedeće:
1. point
2. ems
3. exs
4. picas
5. pixels
6. inches
7. millimeters
8. centimeters
Također možemo koristiti i relativne ključne riječi za podešavanje fonta - larger i smaller, kao i apsolutne ključne riječi:
1. xx-small
2. x-small
3. medium
4. large
5. x-large
6. xx-large
Zapamtimo da predefinirana vrijednost zavisi od preglednika do preglednika.
Font-variant
Ovdje možemo birati dva načina prikaza teksta, a to su normal ili small-caps. Normal će prikazati tekst onakav kakav je u originalu dok small-caps prikazuje tekst ispisan malim slovima kao umanjena velika slova.
Font-style
Tradicionalno imamo nekoliko stilova koje možemo primijeniti na tekst. CSS nam upravo to omogućava sa ovom opcijom. Možemo koristiti tri stila: normal, italic i oblique. Koristeći italic i oblique vizualno dobijemo isti stil.
Font-decoration
U ovom dijelu možemo primijeniti efekte na tekst koji prikazujemo. Ti efekti mogu biti: none, underline, overline, line-through, blink. Efekte možemo zapisati kao listu ako koristimo više od jednoga i tada ih odvajamo zarezom.
Text-transform
Text-transform omogućava transformaciju cijelog teksta u velika, mala slova ili da prvo slovo svake riječi bude veliko. Vrijednosti koje se mogu staviti su:
1. capitalize
2. uppercase
3. lowercase
Osim ovih opcija možete text-transform postaviti na none da se osigurate da tekst neće imati nikakve efekte.
Primjeri korištenja
Idemo vidjeti kako u praksi rade svi ovi tekstualni efekti kroz nekoliko primjera.
<font style="color: #ff0000; font-weight: 900;
font-family: Arial"> Kako koristiti CSS na tekstu!</font>
Kako koristiti CSS na tekstu!
<a href=# style="text-decoration: overline; font-size:10px">
Ovo je link
</a>
Ovo je link
<font style="text-transform:capitalize">
Ovo je primjer upotrebe capitalize text-transform</font>
Ovo je primjer upotrebe capitalize text-transform
No comments:
Post a Comment