CSS Formatowanie tekstu · Technik informatyk egzamin zawodowy

Programowanie / CSS

CSS Formatowanie tekstu

Odpowiednie formatowanie tekstu przy użyciu CSS to jeden z kluczowych aspektów tworzenia czytelnej, atrakcyjnej wizualnie i profesjonalnej strony internetowej. Warto znać podstawowe właściwości, które pozwalają na precyzyjne dostosowanie prezentacji tekstu do potrzeb Twojej witryny.

Najważniejsze właściwości CSS do formatowania tekstu

Wyrównanie tekstu (text-align)

Ustawia sposób wyrównania tekstu w elemencie:

  • left – wyrównanie do lewej (domyślne)

  • center – wyśrodkowanie tekstu

  • right – wyrównanie do prawej

  • justify – wyjustowanie tekstu

p { text-align: justify; }

 

Wyrównanie ostatniej linii (text-align-last)

Pozwala na oddzielne formatowanie ostatniej linii w paragrafie:

p { text-align-last: right; }

 

Transformacja tekstu (text-transform)

Zmienianie wielkości liter w tekście:

  • uppercase – wszystkie litery wielkie

  • lowercase – wszystkie litery małe

  • capitalize – pierwsza litera każdego słowa wielka

h2 { text-transform: uppercase; }

 

Dekoracje tekstu (text-decoration)

Dodaje dekorację do tekstu:

  • none – brak dekoracji (domyślne)

  • underline – podkreślenie

  • overline – nadkreślenie

  • line-through – przekreślenie

a { text-decoration: underline; }

 

Kolor i styl dekoracji (text-decoration-color, text-decoration-style)

Pozwalają ustawić kolor oraz styl dekoracji tekstu (linie mogą być ciągłe, przerywane, faliste, itp.):

a {
  text-decoration: underline;
  text-decoration-color: red;
  text-decoration-style: dashed;
}

 

Wcięcie pierwszego wiersza (text-indent)

Tworzy wcięcie pierwszej linii paragrafu:

p { text-indent: 30px; }

 

Cień tekstu (text-shadow)

Pozwala nadać efekt cienia tekstowi:

h1 { text-shadow: 2px 2px 5px gray; }

Parametry to kolejno: przesunięcie w poziomie, przesunięcie w pionie, rozmycie oraz kolor cienia.

 

Odstępy między literami (letter-spacing)

Umożliwia kontrolowanie odstępów między poszczególnymi literami:

span { letter-spacing: 2px; }

 

Odstępy między wyrazami (word-spacing)

Zmienia odstęp między wyrazami:

p { word-spacing: 5px; }

 

Łamanie słów (word-break)

Określa sposób łamania wyrazów na końcu linii:

  • normal – standardowe łamanie

  • break-all – łamanie na każdym znaku

  • keep-all – brak łamania

p { word-break: break-all; }

 

Białe znaki (white-space)

Decyduje, jak traktowane są białe znaki (spacje, tabulatory, przejścia do nowej linii):

  • normal – standardowe traktowanie białych znaków (domyślne)

  • nowrap – brak zawijania tekstu

  • pre – zachowanie wszystkich białych znaków i przerw

  • pre-wrap – zachowanie białych znaków z zawijaniem tekstu

  • pre-line – usuwanie nadmiaru białych znaków, zachowanie przejść do nowej linii

pre { white-space: pre-wrap; }

 

Nadmiar tekstu (overflow, text-overflow)

Pozwala na zarządzanie zawartością przekraczającą dostępny obszar:

div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

 

Podobne wpisy