Vodič za oblikovanje teksta u CSS-u

Kada dizajnirate web stranicu, oblikovanje teksta važan je aspekt stvaranja privlačnog i čitljivog sučelja.

CSS nudi nekoliko svojstava koja vam omogućuju da prilagodite različite elemente teksta, uključujući boju fonta, veličinu, obitelj, poravnanje, razmake i još mnogo toga.

Ispod je detaljan vodič za svako svojstvo oblikovanja teksta, zajedno s primjerima za svako svojstvo.

 

Boja fonta

Parametar: vrijednost boje, koja može biti naziv boje(npr. red), heksadecimalni kod(npr. "#FF0000"), RGB vrijednost(npr. "rgb(255, 0, 0)") ili RGBA vrijednost(npr., "rgba(255, 0, 0, 0,5)").

p {  
  color: blue;  
}  

 

Veličina fonta

Parametar: vrijednost veličine, koja može biti u pikselima(npr. "16px"), jedinicama em(npr. "1em"), jedinicama rem(npr. "1.2rem"), jedinicama širine okvira za prikaz(npr. "10vw"), jedinice visine prozora(npr. "5vh") ili druge jedinice.

h1 {  
  font-size: 24px;  
}  

 

Obitelj fontova

Parametar: popis obitelji fontova, naveden željenim redoslijedom. Možete navesti naziv fonta(npr. Arial) ili nazive fontova koji sadrže posebne znakove staviti u dvostruke navodnike(npr. " Times New Roman).

body {  
  font-family: Arial, sans-serif;  
}  

 

Težina i stil fonta

Parametar font-weight: normal(default), bold, bolder, lighter ili numeričke vrijednosti od 100 do 900.

Parametar font-style: normal(default), italic.

em {  
  font-style: italic;  
}  
  
strong {  
  font-weight: bold;  
}  

 

Dekoracija teksta

Parametar: "none"(default), "underline", "overline", "line-through"  ili kombinacija vrijednosti odvojenih razmacima.

a {  
  text-decoration: underline;  
}  
  
del {  
  text-decoration: line-through;  
}  

 

Poravnanje teksta

Parametar: "left"(default), "right", "center" or "justify".

p {  
  text-align: center;  
}  

 

Visina retka i margine

Parametar line-height: numerička vrijednost ili postotak trenutne veličine fonta.

Margina parametra: mjerna vrijednost, kao što su pikseli(px), em jedinice(em), rem jedinice(rem), itd.

p {  
  line-height: 1.5;  
  margin-bottom: 10px;  
}  

 

Izgled teksta u više stupaca

Parametar: pozitivan cijeli broj ili "auto"(default).

.container {  
  column-count: 2;  
}  

 

Promjena boje teksta pri lebdenju

Nema specifičnog parametra, koristite samo pseudo-klasu :hover.

a:hover {  
  color: red;  
}  

 

Promjena boje teksta u stanju(aktivno, posjećeno)

Nema specifičnog parametra, koristite samo pseudoklase :active  i :visited.

a:visited {  
  color: purple;  
}  

 

Nadamo se da su vam gornja objašnjenja i primjeri pomogli razumjeti kako koristiti i prilagoditi svojstva oblikovanja teksta u CSS-u da biste stvorili vizualno privlačno i privlačno tekstualno sučelje na vašoj web stranici.