Útmutató a szöveg formázásához CSS-ben

A weboldal tervezése során a szöveg formázása fontos szempont a vonzó és olvasható felület létrehozásához.

A CSS számos olyan tulajdonságot biztosít, amelyek lehetővé teszik a szöveg különböző elemeinek testreszabását, beleértve a betűtípus színét, méretét, családját, igazítását, térközét és még sok mást.

Az alábbiakban részletes útmutató található az egyes szövegformázási tulajdonságokról, valamint az egyes tulajdonságokra vonatkozó példák.

 

Betű szín

Paraméter: Színérték, amely lehet színnév(pl. red), hexadecimális kód(pl. "#FF0000"), RGB érték(pl. "rgb(255, 0, 0)") vagy RGBA érték(pl., "rgba(255, 0, 0, 0,5)").

p {  
  color: blue;  
}  

 

Betűméret

Paraméter: Méretérték, amely lehet képpontban(pl. "16px"), em egységben(pl. "1em"), rem egységben(pl. "1.2rem"), nézetablak szélességében(pl. "10vw"), nézetablak magassági mértékegységei(pl. „5vh”) vagy egyéb mértékegységek.

h1 {  
  font-size: 24px;  
}  

 

Betűtípus család

Paraméter: Betűtípuscsaládok listája, az előnyben részesített sorrendben. Megadhatja a betűtípus nevét(pl. Arial), vagy a speciális karaktereket tartalmazó betűtípusneveket dupla idézőjelbe helyezheti(pl. " Times New Roman).

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

 

A betűtípus súlya és stílusa

Paraméter font-weight: normal(default), bold, bolder, lighter, vagy numerikus értékek 100 és 900 között.

Paraméter font-style: normal(default), italic.

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

 

Szöveg dekoráció

Paraméter: "none"(default), "underline", "overline", "line-through"  vagy szóközzel elválasztott értékek kombinációja.

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

 

Szöveg igazítása

Paraméter: "left"(default), "right", "center" or "justify".

p {  
  text-align: center;  
}  

 

Vonalmagasság és margók

Paraméter sormagasság: numerikus érték vagy az aktuális betűméret százaléka.

Paraméter margó: Mérési érték, például képpontok(px), em-egységek(em), rem-egységek(rem) stb.

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

 

Többoszlopos szövegelrendezés

Paraméter: Pozitív egész szám vagy "auto"(default).

.container {  
  column-count: 2;  
}  

 

Szöveg színének megváltoztatása az egérrel

Nincs konkrét paraméter, csak a pszeudoosztályt használja :hover.

a:hover {  
  color: red;  
}  

 

Szöveg színének változása állapotba(aktív, látogatott)

Nincs konkrét paraméter, csak a pszeudoosztályokat :active  és a :visited.

a:visited {  
  color: purple;  
}  

 

Reméljük, hogy a fenti magyarázatok és példák segítettek megérteni, hogyan használhatja és testreszabhatja a szöveg formázási tulajdonságait a CSS-ben, hogy vizuálisan vonzó és vonzó szöveges felületet hozzon létre webhelyén.