Guide för att formatera text i CSS

När du designar en webbplats är formatering av text en viktig aspekt för att skapa ett tilltalande och läsbart gränssnitt.

CSS tillhandahåller flera egenskaper som låter dig anpassa olika delar av text, inklusive teckensnittsfärg, storlek, familj, justering, avstånd och mer.

Nedan finns en detaljerad guide om varje textformateringsegenskap, tillsammans med exempel för varje egenskap.

 

Fontfärg

Parameter: Ett färgvärde, som kan vara ett färgnamn(t.ex. red), hex-kod(t.ex. "#FF0000"), RGB-värde(t.ex. "rgb(255, 0, 0)") eller RGBA-värde(t.ex., "rgba(255, 0, 0, 0,5)").

p {  
  color: blue;  
}  

 

Textstorlek

Parameter: Ett storleksvärde som kan vara i pixlar(t.ex. "16px"), em-enheter(t.ex. "1em"), rem-enheter(t.ex. "1.2rem"), visningsportbreddenheter(t.ex. "10vw"), visningsporthöjdsenheter(t.ex. "5vh") eller andra enheter.

h1 {  
  font-size: 24px;  
}  

 

Typsnittsfamilj

Parameter: En teckensnittsfamiljlista, specificerad i önskad ordning. Du kan ange teckensnittsnamnet(t.ex. Arial) eller omge teckensnittsnamn som innehåller specialtecken inom dubbla citattecken(t.ex. ") Times New Roman.

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

 

Teckensnittsvikt och stil

Parameter font-weight: normal(default), bold, bolder, lighter, eller numeriska värden från 100 till 900.

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

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

 

Text dekoration

Parameter: "none"(default), "underline", "overline", "line-through"  eller en kombination av värden separerade med mellanslag.

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

 

Textjustering

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

p {  
  text-align: center;  
}  

 

Linjehöjd och marginaler

Parameter linjehöjd: Ett numeriskt värde eller en procentandel av den aktuella teckenstorleken.

Parametermarginal: Ett mätvärde, som pixlar(px), em-enheter(em), rem-enheter(rem), etc.

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

 

Textlayout med flera kolumner

Parameter: Ett positivt heltal eller "auto"(default).

.container {  
  column-count: 2;  
}  

 

Ändra textfärg vid muspekaren

Ingen specifik parameter, använd bara pseudoklassen :hover.

a:hover {  
  color: red;  
}  

 

Textfärgförändring på tillstånd(aktiv, besökt)

Ingen specifik parameter, använd bara pseudoklasserna :active  och :visited.

a:visited {  
  color: purple;  
}  

 

Vi hoppas att ovanstående förklaringar och exempel har hjälpt dig att förstå hur du använder och anpassar textformateringsegenskaper i CSS för att skapa ett visuellt tilltalande och engagerande textgränssnitt på din webbplats.