CSS Tekst

undo redo

Šta omogućava CSS tekst?

CSS Tekst omogućava uređivanje teksta, te određuje način prikazivanja teksta na web stranici.

FORMATIRANJE TEKSTA

U programu HTML, mogli smo vidjeti neke osnovne tagove za formiranje teksta, koji mijenjaju konačan izgled teksta, kao npr. podebljanje teksta itd. Ako ste mislili da je to super, čekajte da vidite šta sve može CSS.

Osnovni parametri CSS Teksta

parametri koji se najčešće koriste u CSS-u su:

color - boja teksta

text-decoration - dekoracija teksta

text-align - poravnanje teksta

text-transform - transformacija teksta

text-indent - uvučenost teksta

letter spacing - razmak između slova

line-height - razmak između redova

text-shadow - sjena teksta

color

Parametar color se koristi za određivanje boje teksta.

Boja se može odrediti prema:

imenu boje - npr. blue

HEX vrijednosti boje - npr. #ff0000

RGB vrijednosti boje - npr. rgb(255 0 255)

Primjer:

Ovo je paragraph kojem je dodijeljena "#0000ff" boja.

ovo je parametar kojem je dodijeljena "tomato" boja

CSS

p { color: #0000ff; }
p { color: tomato; }

text-decoration

Parametar text-decoration se koristi za određivanje dekoracije teksta.

Parametar text-decoration ima sljedeće vrijednosti:

none - tekst nema dekoracije (najčešće se kristi za uklanjanje podvučene linije kod linkova)

overline - postavlja liniju iznad teksta

line-through - postavlja liniju kroz tekst

underline - postavlja liniju ispod teksta

Primjer:

Ovo je paragraph u kojem nema dekoracije teksta.

Ovo je paragraph sa linijom iznad teksta.

Ovo je paragraph sa linijom kroz tekst.

Ovo je paragraph sa linijom ispod teksta.

CSS

p    { text-decoration: none; }
p    { text-decoration: overline; }
p    { text-decoration: through; }
p    { text-decoration: underline; }

text-align

Parametar text-align se koristi za horizontalno poravnanje teksta. Po default-u je tekst poravnat sa lijeve strane.

Parametar text-align ima sljedeće vrijednosti:

right - poravnanje teksta sa desne strane

center - tekst je centriran

justify - poravnanje teksta sa obje strane

Primjer:

Paragraph je poravnat sa desne strane.

Paragraph koji centriran.

Paragraph je poravnat sa obje strane. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor.

CSS

p    { text-align: right; }
p    { text-align: center; }
p    { text-align: justify; }

text-transform

Parametar text-transform se koristi za promjenu malih i velikih slova.

Parametar text-transform ima sljedeće vrijednosti:

uppercase - sva velika slova

lowercase - sva mala slova

capitalize -svako prvo slovo riječi veliko

Primjer:

Paragraph ima sva velika slova.

Paragraph ima sva mala slova.

Paragraph ima sva početna slova velika.

CSS

p    { text-transform: uppercase; }
p    { text-transform: lowercase; }
p    { text-transform: capitalize; }

text-indent

Parametar text-indent se koristi za uvlačenje teksta na početku novog reda. Najčešća upotreba ovog parametra je na početku novog odjeljka na web stranici (npr. novi članak )

Vrijednost pramatra je izražena u pixelima.

Primjer:

U primjeru ispod možemo vidjeti da prvi paragraph počinje normalno na početku reda, ali drugi ima uvučen red za 40px.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor.

CSS

p { text-indent: 0px; }
p { text-indent: 40px; }

letter-spacing

Parametar letter-spacing se koristi za određivanje razmaka između slova.

Vrijednost parametra je izražena u pixelima.

Primjer:

U primjeru ispod možemo vidjeti da prvi paragraph ima razmak između slova 4px, a drugi paragraph -2px.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor.

CSS

p { letter-spacing: 4px; }
p { letter-spacing: -2px; }

line-height

Parametar line-height se koristi za određivanje razmaka između redova (linija teksta) na web stranici.

Primjer:

U primjeru ispod možemo vidjeti da prvi paragraph ima razmak između slova 2, a drugi paragraph 0.5.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor.

CSS

p { line-heightg: 2; }
p { line-height: 0.5; }

text-shadow

Parametar text-shadow se koristi za određivanje sjene teksta.

Text-shadow ima četiri vrijednosti koje se izražavaju u pixelima. "text-shadow: 2px 2px 2px red;"

Prvi parametar označava kretanje sjene po X osi (lijevo desno), drugi po Y osi (gore dolje), treći označava oštrinu sjene, a četvrti boju sjene.

Primjer:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor.

CSS

p { text-shadow: 3px -3px 0px red; }
p { text-shadow: -3px 3px 5px blue; }

undo redo

w3sedic

CSS

CSS Tekst