Vodnik za oblikovanje besedila v CSS

Pri oblikovanju spletnega mesta je oblikovanje besedila pomemben vidik ustvarjanja privlačnega in berljivega vmesnika.

CSS ponuja več lastnosti, ki vam omogočajo prilagajanje različnih elementov besedila, vključno z barvo pisave, velikostjo, družino, poravnavo, razmiki in še več.

Spodaj je podroben vodnik za vsako lastnost oblikovanja besedila skupaj s primeri za vsako lastnost.

Barva pisave

Parameter: vrednost barve, ki je lahko ime barve(npr. red), šestnajstiška koda(npr. "#FF0000"), vrednost RGB(npr. "rgb(255, 0, 0)") ali vrednost RGBA(npr., "rgba(255, 0, 0, 0,5)").

p {  
  color: blue;  
}  

Velikost pisave

Parameter: vrednost velikosti, ki je lahko v slikovnih pikah(npr. "16px"), enotah em(npr. "1em"), enotah rem(npr. "1,2rem"), enotah širine vidnega polja(npr. "10vw"), višinske enote vidnega polja(npr. "5vh") ali druge enote.

h1 {  
  font-size: 24px;  
}  

Družina pisav

Parameter: seznam družine pisav, določen v želenem vrstnem redu. Določite lahko ime pisave(npr. Arial) ali imena pisav, ki vsebujejo posebne znake, stavite v dvojne narekovaje(npr. " Times New Roman).

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

Teža in slog pisave

Parameter font-weight: normal(default), bold, bolder, lighter ali številske vrednosti od 100 do 900.

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

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

Okras besedila

Parameter: "none"(default), "underline", "overline", "line-through"  ali kombinacija vrednosti, ločenih s presledki.

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

Poravnava besedila

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

p {  
  text-align: center;  
}  

Višina vrstice in robovi

Parameter line-height: A numeric value or a percentage of the current font size.

Parameter margin: A measurement value, such as pixels(px), em units(em), rem units(rem), etc.

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

Multicolumn Text Layout

Parameter: A positive integer or "auto"(default).

.container {  
  column-count: 2;  
}  

Text Color Change on Hover

No specific parameter, only use the pseudo-class :hover.

a:hover {  
  color: red;  
}  

Text Color Change on State(active, visited)

No specific parameter, only use the pseudo-classes :active and :visited.

a:visited {  
  color: purple;  
}  

We hope that the above explanations and examples have helped you understand how to use and customize text formatting properties in CSS to create a visually appealing and engaging text interface on your website.