Priručnik CSS - Lekcija 3 - Svojstva background-color, font-style, font-weight, text-align, text-decoration, text-transform.

26/05/2025, by Ivan

Tokom postojanja HTML-a stvoreno je mnogo tagova i sada sa širokom primenom css-a neke od njih ćemo morati napustiti, među takvim tagovima su , , , <center>. Kasnije ćemo razmotriti i druge "zabranjene" tagove. Takođe, ova svojstva će vam pomoći da izbegnete suvišan kod u HTML kodu stranice i da ga izdvojite u css fajlove.

U prethodnoj lekciji smo videli kako dodavati css svojstva i birati boje za ta svojstva. U ovoj lekciji ćemo razmotriti niz svojstava koja ste možda koristili u HTML-u, ali možda ste ih ranije dodavali pomoću tagova, a sada ćemo to raditi preko css-a, što je ispravniji način.

Prvo svojstvo u ovoj lekciji je background-color.

Background-color

Ovo svojstvo možemo koristiti ne samo za pozadinu blokova, već i za običan tekst i linkove. Na primer ovako:

span{
  background-color: yellow;
}

Ili za link:

a{
  background-color: blue;
}

Background color

Boje, kao i u svojstvu color, mogu se zadavati i numerički, na primer #ff0000 (što je crvena boja).

Font-style

Moguće je da ste već koristili tagove ili (za podebljani tekst), (kurziv), font ("zli" tag koji menja izgled teksta). Da ne bismo koristili mnoštvo ovih i drugih tagova, uvedeno je css svojstvo font-style. Među najčešćim vrednostima ovog svojstva su:

p{
  font-style: italic; /* kurziv */
}

Na ovaj način zamenjujemo tag sa svojstvom font-style vrednosti italic.

font-style

Font-weight

Među zastarelim tagovima je i koji čini tekst podebljanim. Sada je dovoljno koristiti svojstvo font-weight:

body{
  font-weight: normal; /* običan tekst */
}
 
p{
 font-weight: 400; /* običan tekst */
}
 
span{
  font-weight: 700; /* podebljani tekst */
}
 
a{
  font-weight: bold; /* podebljani tekst */
}

Za svojstvo font-weight moguće su vrednosti 400 ili normal za običan tekst i 700 ili bold za podebljani tekst.

CSS font-weight

Text-align

Svojstvo text-align zamenjuje tag <center> i HTML atribut align. Koristi se na sledeći način:

body{
  text-align: left; /* levo poravnanje */
}
 
p{
  text-align: center; /* centrirano */
}
 
span{
  text-align: right; /* desno poravnanje */
}
 
div{
  text-align: center; /* centrirano */
}

Jasno je šta ovo svojstvo radi, kao što pokazuje i slika ispod:

CSS text-align

Text-decoration

Umesto tagova <strike> (precrtano), (podvučeno) sada možemo koristiti css svojstvo text-decoration:

.underline{
  text-decoration: underline; /* podvlačenje */
}
 
.line-through{
  text-decoration: line-through; /* precrtano */
}

CSS text-decoration

Text-transform

Još jedno korisno css svojstvo text-transform omogućava da sav tekst bude velikim ili malim slovima.

CSS text-transform

Ne pokušavajte odmah da zapamtite sva css svojstva, ako povremeno budete vraćali ove lekcije, vremenom ćete zapamtiti najvažnija i najčešće korišćena svojstva, dok će ostala biti lako dostupna po potrebi.

Dodatni tipovi blokova (EBT) - Novo iskustvo rada sa Layout Builder-om❗

❗Dodatni tipovi pasusa (EPT) – Novo iskustvo rada sa pasusima