Formatowanie tekstu

Formatowanie tekstu w CSS to zbiór właściwości, które pozwalają na kontrolowanie wyglądu tekstu na stronie internetowej. Aby sformatować tekst w CSS, należy użyć odpowiednich właściwości, takich jak:

Aby sformatować tekst, należy użyć właściwości, takich jak:

								
.formatted-text {

  font-size: 18px;
  font-family: "Arial Black", sans-serif;
  color: purple;
  text-align: justify;
  text-decoration: underline;
  line-height: 1.5;
  letter-spacing: 2px;
  word-spacing: 10px;

}

Te właściwości pozwalają na kontrolowanie takich cech tekstu jak rodzaj i rozmiar czcionki, styl i grubość, kolor, wyrównanie, wysokość linii, odstęp między literami.

Font-Size

font-size Ustawienie rozmiaru w pikselach:

font-size Ustawienie rozmiaru w procentach:

										
.font-size-px {
  font-size: 16px;
}
------------------------------------------------

.font-size-percent {
  font-size: 120%;
}

Font-Family

font-family Użycie jednej czcionki:

font-family Użycie kilku czcionek:

										
.one-font {
  font-family: Arial, sans-serif;
}
------------------------------------------------

.multiple-fonts {
  font-family: Times New Roman, serif;
}

Color

color Ustawienie koloru nazwanego:

color Ustawienie koloru w formacie szesnastkowym:

										
.color-name {
  color: red;
}
------------------------------------------------

.color-hex {
  color: #FF0000;
}

Text-Align

text-align Wyrównanie tekstu do lewej:

text-align Wycentrowanie tekstu:

										
.left {
  text-align: left;
}
------------------------------------------------

.center {
  text-align: center;
}

Text-Decoration

text-decoration Ustawienie podkreślenia tekstu:

text-decoration Ustawienie przekreślenia tekstu:

										
.text-decoration-underline {
  text-decoration: underline;
}
------------------------------------------------

.text-decoration-line-through {
  text-decoration: line-through;
}

Text-Transform

text-transform Zmiana wszystkich liter na duże:

text-transform Kapitalizacja pierwszej litery każdego słowa:

										
.uppercase {
  text-transform: uppercase;
}
------------------------------------------------

.capitalize {
  text-transform: capitalize;
}

Line-Height

line-height Ustawienie wysokości linii na 1.5:

line-height Ustawienie wysokości linii na 20 pikseli:

										
.line-height-1-5 {
  line-height: 1.5;
}
------------------------------------------------

.line-height-20px {
  line-height: 20px;
}

Letter-Spacing

letter-spacing Ustawienie odstępu między literami na 0.1 em:

letter-spacing Ustawienie odstępu między literami na 2 piksele:

										
.letter-spacing-0-1em {
  letter-spacing: 0.1em;
}
------------------------------------------------

.letter-spacing-2px {
  letter-spacing: 2px;
}

Word-Spacing

word-spacing Ustawienie odstępu między słowami na 20 pikseli:

word-spacing Ustawienie odstępu między słowami na 0.5 em:

										
.word-spacing-20px {
  word-spacing: 20px;
}
------------------------------------------------

.word-spacing-0-5em {
  word-spacing: 0.5em;
}

Notatka

Pamiętaj, że CSS oferuje wiele innych właściwości do formatowania tekstu, ale powyższe są podstawowymi, które powinieneś znać i stosować w swoich stylach CSS.