Opas tekstin muotoiluun CSS:ssä

Web-sivustoa suunniteltaessa tekstin muotoilu on tärkeä osa houkuttelevan ja luettavan käyttöliittymän luomista.

CSS tarjoaa useita ominaisuuksia, joiden avulla voit mukauttaa tekstin eri elementtejä, kuten fontin väriä, kokoa, perhettä, tasausta, väliä ja paljon muuta.

Alla on yksityiskohtainen opas jokaisesta tekstin muotoiluominaisuudesta sekä esimerkkejä jokaisesta ominaisuudesta.

 

Fontin väri

Parametri: Väriarvo, joka voi olla värin nimi(esim. red), heksadesimaalikoodi(esim. "#FF0000"), RGB-arvo(esim. "rgb(255, 0, 0)") tai RGBA-arvo(esim., "rgba(255, 0, 0, 0,5)").

p {  
  color: blue;  
}  

 

Fonttikoko

Parametri: Kokoarvo, joka voi olla pikseleinä(esim. "16px"), em-yksiköinä(esim. "1em"), rem-yksiköinä(esim. "1.2rem"), näkymän leveyden yksikköinä(esim. "10vw")., näkymän korkeusyksiköt(esim. "5vh") tai muut yksiköt.

h1 {  
  font-size: 24px;  
}  

 

Fonttiperhe

Parametri: Kirjasinperheluettelo, joka on määritetty ensisijaisessa järjestyksessä. Voit määrittää fontin nimen(esim. Arial) tai liittää erikoismerkkejä sisältävät kirjasinten nimet lainausmerkkeihin(esim. " Times New Roman).

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

 

Fontin paino ja tyyli

Parametri font-weight: normal(default), bold, bolder, lighter, tai numeeriset arvot 100- 900.

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

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

 

Tekstin koristelu

Parametri: "none"(default), "underline", "overline", "line-through"  tai välilyönnillä eroteltujen arvojen yhdistelmä.

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

 

Tekstin tasaus

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

p {  
  text-align: center;  
}  

 

Viivan korkeus ja marginaalit

Parametrin rivinkorkeus: Numeerinen arvo tai prosenttiosuus nykyisestä kirjasinkoosta.

Parametrin marginaali: Mittausarvo, kuten pikselit(px), em-yksiköt(em), rem-yksiköt(rem) jne.

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

 

Monisaraketekstin asettelu

Parametri: Positiivinen kokonaisluku tai "auto"(default).

.container {  
  column-count: 2;  
}  

 

Tekstin värin vaihto osoitin

Ei erityistä parametria, käytä vain pseudoluokkaa :hover.

a:hover {  
  color: red;  
}  

 

Tekstin värin muutos tilalla(aktiivinen, vierailtu)

Ei erityistä parametria, käytä vain pseudo-luokkia :active  ja :visited.

a:visited {  
  color: purple;  
}  

 

Toivomme, että yllä olevat selitykset ja esimerkit ovat auttaneet sinua ymmärtämään, kuinka voit käyttää ja mukauttaa tekstin muotoiluominaisuuksia CSS:ssä luodaksesi visuaalisesti houkuttelevan ja mukaansatempaavan tekstikäyttöliittymän verkkosivustollesi.