NEDSCHOOLDEV

view_headline menu
yt yt yt

CSS

CSS CSS Uvod CSS Upotreba CSS Boje CSS Pozadine CSS Borders CSS Margine CSS Padding CSS Height/Width CSS Float CSS Tekst CSS Font CSS Poravnanje CSS Linkovi CSS Liste CSS Tabele CSS Ikone








CSS Tekst

<< >>



Š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

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.

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.

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.

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.

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

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.

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

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.

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

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.

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

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



<< >>



© Copyright 2018. nedschool.com