Praca z tekstem

CSS (Cascading Style Sheets) jest językiem służącym do opisu prezentacji dokumentów HTML lub XML, w tym sposobów wyświetlania tekstu na stronach internetowych. Stylowanie tekstu to kluczowy aspekt projektowania webowego, umożliwiający twórcom stron nadawanie swoim projektom unikalnego charakteru i czytelności. W tej lekcji skupimy się na różnych właściwościach CSS służących do stylizacji tekstu, takich jak wyrównanie, odstępy między literami i słowami, dekoracje tekstu i wiele innych.

Przykład kodu

Poniżej znajduje się przykład kompletnego pliku HTML z CSS, ilustrujący użycie różnych właściwości stylowania tekstu.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stylowanie tekstu w CSS</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .text-align {
            /* Wyrównanie tekstu: left, right, center, justify */
            text-align: center;
        }
        .letter-spacing {
            /* Odstępy między literami */
            letter-spacing: 2px;
        }
        .word-spacing {
            /* Odstępy między słowami */
            word-spacing: 5px;
        }
        .white-space {
            /* Zarządzanie białymi znakami: nowrap, pre, pre-wrap, pre-line */
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 200px;
            border: 1px solid #000;
        }
        .text-decoration {
            /* Dekoracje tekstu: none, underline, overline, line-through */
            text-decoration: underline;
        }
        .text-transform {
            /* Transformacja tekstu: none, capitalize, uppercase, lowercase */
            text-transform: uppercase;
        }
        .line-break {
            /* Zawijanie tekstu */
            word-wrap: break-word;
            width: 100px;
        }
        .word-break {
            /* Zawijanie słów */
            word-break: break-all;
            width: 100px;
        }
        .text-shadow {
            /* Cień tekstu */
            text-shadow: 2px 2px 4px #000;
        }
    </style>
</head>
<body>
    <div class="text-align">Wyrównanie tekstu</div>
    <div class="letter-spacing">Odstępy między literami</div>
    <div class="word-spacing">Odstępy między słowami</div>
    <div class="white-space">Zarządzanie białymi znakami</div>
    <div class="text-decoration">Dekoracje tekstu</div>
    <div class="text-transform">Transformacja tekstu</div>
    <div class="line-break">Zawijanie tekstu</div>
    <div class="word-break">Zawijanie słów</div>
    <div class="text-shadow">Cień tekstu</div>
</body>
</html>

Każda z klas CSS w tym przykładzie ilustruje użycie różnej właściwości stylowania tekstu. Poniżej znajduje się krótkie omówienie każdej z nich:

  • text-align: Określa wyrównanie tekstu w poziomie. Możliwe wartości to left, right, center, justify.
  • letter-spacing: Umożliwia kontrolę nad odstępami między literami. Może przyjmować wartości liczbowe określające odstęp w pikselach (px).
  • word-spacing: Podobnie jak letter-spacing, ale kontroluje odstępy między słowami.
  • white-space: Określa, jak przeglądarka powinna obsługiwać białe znaki w tekście. Możliwe wartości to nowrap, pre, pre-wrap, pre-line.
  • text-decoration: Umoż
  • liwia dodanie dekoracji do tekstu, takich jak podkreślenie (underline), przekreślenie (line-through) czy linia nad tekstem (overline).
  • text-transform: Pozwala na zmianę wielkości liter tekstu. Możliwe wartości to capitalize (pierwsza litera każdego słowa na wielką), uppercase (wszystkie litery na wielkie) oraz lowercase (wszystkie litery na małe).
  • line-break i word-break: Te dwie właściwości kontrolują, jak tekst powinien być zawijany, gdy nie mieści się w kontenerze. word-wrap: break-word; pozwala na łamanie długich słów, aby pasowały do nowej linii, podczas gdy word-break: break-all; pozwala na łamanie słów na granicy każdego znaku.
  • text-shadow: Dodaje cień do tekstu, co może pomóc w stworzeniu efektu głębi lub po prostu uatrakcyjnić wygląd tekstu. Wartości określają przesunięcie cienia poziomo i pionowo, rozmycie oraz kolor cienia.

Podsumowanie

Stylowanie tekstu jest kluczowym elementem web designu, pozwalającym na poprawę czytelności, estetyki oraz ogólnego wrażenia z użytkowania strony internetowej. CSS oferuje bogaty zestaw właściwości do manipulacji tekstem, umożliwiając projektantom tworzenie zaawansowanych i atrakcyjnych layoutów tekstowych. Właściwości takie jak text-align, letter-spacing, word-spacing, white-space, text-decoration, text-transform, line-break, word-break, oraz text-shadow pozwalają na dokładne dostosowanie prezentacji tekstu do potrzeb projektu. Znajomość tych właściwości jest niezbędna dla każdego, kto chce efektywnie pracować nad wyglądem stron internetowych.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs WebDevelopera od podstaw w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Poprzedni
Następny
Scroll to Top