Przewodnik po formatowaniu tekstu w CSS

Podczas projektowania strony internetowej formatowanie tekstu jest ważnym aspektem tworzenia atrakcyjnego i czytelnego interfejsu.

CSS zapewnia kilka właściwości, które pozwalają dostosować różne elementy tekstu, w tym kolor czcionki, rozmiar, rodzinę, wyrównanie, odstępy i inne.

Poniżej znajduje się szczegółowy przewodnik po każdej właściwości formatowania tekstu wraz z przykładami dla każdej właściwości.

 

Kolor czcionki

Parametr: wartość koloru, która może być nazwą koloru(np. red), kodem szesnastkowym(np. „#FF0000”), wartością RGB(np. „rgb(255, 0, 0)”) lub wartością RGBA(np., "rgba(255, 0, 0, 0,5)").

p {  
  color: blue;  
}  

 

Rozmiar czcionki

Parametr: Wartość rozmiaru, która może być w pikselach(np. „16px”), jednostkach em(np. „1em”), jednostkach rem(np. „1.2rem”), jednostkach szerokości widocznego obszaru(np. „10vw”), jednostki wysokości rzutni(np. „5vh”) lub inne jednostki.

h1 {  
  font-size: 24px;  
}  

 

Rodzina czcionek

Parametr: lista rodzin czcionek, określona w preferowanej kolejności. Możesz określić nazwę czcionki(np. Arial) lub umieścić nazwy czcionek zawierające znaki specjalne w cudzysłowach(np. " Times New Roman).

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

 

Grubość i styl czcionki

Parametr font-weight: normal(default), bold, , lub wartości numeryczne od 100 do 900 bolder. lighter

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

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

 

Dekoracja tekstu

Parametr: "none"(default), "underline", "overline", "line-through"  lub kombinacja wartości oddzielonych spacjami.

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

 

Wyrównanie tekstu

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

p {  
  text-align: center;  
}  

 

Wysokość linii i marginesy

Parametr line-height: Wartość liczbowa lub procent bieżącego rozmiaru czcionki.

Margines parametru: Wartość pomiaru, taka jak piksele(px), jednostki em(em), jednostki rem(rem) itp.

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

 

Wielokolumnowy układ tekstu

Parametr: Dodatnia liczba całkowita lub "auto"(default).

.container {  
  column-count: 2;  
}  

 

Zmiana koloru tekstu po najechaniu myszką

Brak określonego parametru, użyj tylko pseudoklasy :hover.

a:hover {  
  color: red;  
}  

 

Zmiana koloru tekstu w stanie(aktywny, odwiedzony)

Brak określonego parametru, używaj tylko pseudoklas :active  i :visited.

a:visited {  
  color: purple;  
}  

 

Mamy nadzieję, że powyższe wyjaśnienia i przykłady pomogły Ci zrozumieć, jak używać i dostosowywać właściwości formatowania tekstu w CSS, aby stworzyć atrakcyjny wizualnie i wciągający interfejs tekstowy w Twojej witrynie.