CSS teksto formatavimo vadovas

Kuriant svetainę, teksto formatavimas yra svarbus aspektas kuriant patrauklią ir skaitomą sąsają.

CSS suteikia keletą ypatybių, leidžiančių tinkinti įvairius teksto elementus, įskaitant šrifto spalvą, dydį, šeimą, lygiavimą, tarpus ir kt.

Toliau pateikiamas išsamus kiekvienos teksto formatavimo nuosavybės vadovas ir kiekvienos nuosavybės pavyzdžiai.

 

Šrifto spalva

Parametras: spalvos reikšmė, kuri gali būti spalvos pavadinimas(pvz., red), šešioliktainis kodas(pvz., "#FF0000"), RGB reikšmė(pvz., "rgb(255, 0, 0)") arba RGBA reikšmė(pvz.,, "rgba(255, 0, 0, 0,5)").

p {  
  color: blue;  
}  

 

Šrifto dydis

Parametras: dydžio reikšmė, kuri gali būti pikseliais(pvz., "16 pikselių"), em vienetais(pvz., "1em"), rem vienetais(pvz., "1.2rem"), peržiūros srities pločio vienetais(pvz., "10vw")., peržiūros srities aukščio vienetai(pvz., „5vh“) ar kiti vienetai.

h1 {  
  font-size: 24px;  
}  

 

Šrifto šeima

Parametras: šriftų šeimos sąrašas, nurodytas pageidaujama tvarka. Galite nurodyti šrifto pavadinimą(pvz., Arial) arba sudėti šriftų pavadinimus su specialiaisiais simboliais dvigubose kabutėse(pvz., " Times New Roman).

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

 

Šrifto svoris ir stilius

Parametras font-weight: normal(default), bold, bolder, lighter arba skaitinės reikšmės nuo 100 iki 900.

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

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

 

Teksto dekoravimas

Parametras: "none"(default), "underline", "overline", "line-through"  arba tarpais atskirtų reikšmių derinys.

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

 

Teksto lygiavimas

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

p {  
  text-align: center;  
}  

 

Linijos aukštis ir paraštės

Parametras eilutės aukštis: skaitmeninė reikšmė arba dabartinio šrifto dydžio procentas.

Parametrų paraštė: matavimo vertė, pvz., pikseliai(px), em vienetai(em), rem vienetai(rem) ir kt.

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

 

Kelių stulpelių teksto išdėstymas

Parametras: Teigiamas sveikasis skaičius arba "auto"(default).

.container {  
  column-count: 2;  
}  

 

Teksto spalvos keitimas užvedus pelės žymeklį

Nėra konkretaus parametro, naudokite tik pseudoklasę :hover.

a:hover {  
  color: red;  
}  

 

Teksto spalvos pasikeitimas būsenoje(aktyvus, aplankytas)

Nėra konkretaus parametro, naudokite tik pseudoklases :active  ir :visited.

a:visited {  
  color: purple;  
}  

 

Tikimės, kad aukščiau pateikti paaiškinimai ir pavyzdžiai padėjo suprasti, kaip naudoti ir tinkinti teksto formatavimo ypatybes CSS, kad svetainėje būtų sukurta vizualiai patraukli ir įtraukianti teksto sąsaja.