Articles
Wprowadzenie do CSS
Właściwości CSS związane z tekstem

Właściwości CSS związane z tekstem

Ten artykuł wyjaśnia właściwości CSS związane z tekstem.

Możesz dowiedzieć się, jak korzystać i jak pisać właściwości text-align, text-decoration oraz text-transform.

YouTube Video

Tworzenie HTML do podglądu

css-text.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>Text-Related CSS Properties</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-text.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>Text-Related CSS Properties</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>Typography (Text-Related)</h2>
20        </header>
21        <article>
22            <h3>text-align</h3>
23            <section>
24                <header><h4>text-align: left</h4></header>
25                <section class="sample-view">
26                    <p class="text-align-left">This is left-aligned text.</p>
27                </section>
28                <header><h4>text-align: center</h4></header>
29                <section class="sample-view">
30                    <p class="text-align-center">This is center-aligned text.</p>
31                </section>
32                <header><h4>text-align: right</h4></header>
33                <section class="sample-view">
34                    <p class="text-align-right">This is right-aligned text.</p>
35                </section>
36                <header><h4>text-align: justify</h4></header>
37                <section class="sample-view">
38                    <p class="text-align-justify">This is justified text, meaning it will be spaced so that the left and right edges are aligned evenly.</p>
39                </section>
40            </section>
41        </article>
42        <article>
43            <h3>text-decoration</h3>
44            <section>
45                <header><h4>text-decoration: underline</h4></header>
46                <section class="sample-view">
47                    <p class="text-decoration-underline">This text has an underline.</p>
48                </section>
49                <header><h4>text-decoration: overline</h4></header>
50                <section class="sample-view">
51                    <p class="text-decoration-overline">This text has an overline.</p>
52                </section>
53                <header><h4>text-decoration: line-through</h4></header>
54                <section class="sample-view">
55                    <p class="text-decoration-line-through">This text has a line-through.</p>
56                </section>
57                <header><h4>text-decoration: underline; text-decoration-color: red; text-decoration-style: wavy; text-decoration-thickness: 2px;</h4></header>
58                <section class="sample-view">
59                    <p class="text-decoration-custom-underline">This text has a custom underline (color and style).</p>
60                </section>
61            </section>
62        </article>
63        <article>
64            <h3>text-transform</h3>
65            <section>
66                <header><h4>text-transform: none</h4></header>
67                <section class="sample-view">
68                    <p class="text-transform-none">This is no transformation applied.</p>
69                </section>
70                <header><h4>text-transform: capitalize</h4></header>
71                <section class="sample-view">
72                    <p class="text-transform-capitalize">this is a sentence in lowercase but will be capitalized.</p>
73                </section>
74                <header><h4>text-transform: uppercase</h4></header>
75                <section class="sample-view">
76                    <p class="text-transform-uppercase">This text will be transformed to uppercase.</p>
77                </section>
78                <header><h4>text-transform: lowercase</h4></header>
79                <section class="sample-view">
80                    <p class="text-transform-lowercase">THIS TEXT WILL BE TRANSFORMED TO LOWERCASE.</p>
81                </section>
82            </section>
83        </article>
84    </main>
85</body>
86</html>

Typografia (związana z tekstem)

Właściwość text-align 

 1/* Text align examples */
 2.text-align-left {
 3    text-align: left; /* Align text to the left */
 4}
 5
 6.text-align-center {
 7    text-align: center; /* Center align text */
 8}
 9
10.text-align-right {
11    text-align: right; /* Align text to the right */
12}
13
14.text-align-justify {
15    text-align: justify; /* Justify text (aligns text to both left and right edges) */
16}

text-align to właściwość w CSS używana do określania poziomego wyrównania tekstu i elementów liniowych. Jest zazwyczaj używana do wyrównywania tekstu akapitu lub nagłówka do lewej, prawej lub środka. Odgrywa ważną rolę w układzie strony internetowej i formatowaniu tekstu.

Główne wartości dla text-align

left (wyrównane do lewej) 
1p {
2    text-align: left;
3}
  • left wyrównuje tekst do lewej (jest to domyślny sposób wyrównania dla wielu języków).
right (wyrównane do prawej) 
1p {
2    text-align: right;
3}
  • right wyrównuje tekst do prawej. Jest szczególnie skuteczna dla języków pisanych od prawej do lewej, takich jak arabski i hebrajski.
center (wyrównane do środka) 
1p {
2    text-align: center;
3}
  • center wyrównuje tekst do środka. Jest często używane do tytułów i nagłówków.
justify (wyjustowane) 
1p {
2    text-align: justify;
3}
  • justify wyrównuje lewe i prawe krawędzie wierszy równo, dając wrażenie schludnego wyrównania. Jest używane w układach takich jak gazety i czasopisma.
start (wyrównane do początku) 
1p {
2    text-align: start;
3}
  • start wyrównuje tekst w oparciu o pozycję początkową. Dla języków pisanych od lewej do prawej działa tak samo jak wyrównanie do lewej.
end (wyrównane do końca) 
1p {
2    text-align: end;
3}
  • end wyrównuje tekst w oparciu o pozycję końcową. Dla języków pisanych od lewej do prawej działa tak samo jak wyrównanie do prawej.

Zastosowanie i przykłady text-align

Tytuł wyrównany do środka
  • Wyrównanie do środka jest często używane dla tytułów stron internetowych i dokumentów. Wygląda estetycznie i daje w efekcie wizualnie zrównoważony projekt.
Wyrównanie do lewej lub prawej dla akapitów
  • Akapity tekstu są zazwyczaj domyślnie wyrównane do lewej, ale wyrównanie do prawej lub do środka może być używane w określonych projektach.
Równe wyrównanie tekstu
  • Gdy używamy justify, każda linia tekstu jest równomiernie wyrównana do obu krawędzi, lewej i prawej. Jest to przydatne w układach w stylu gazet lub magazynów.

Podsumowanie

  • text-align to właściwość CSS używana do poziomego wyrównywania tekstu lub elementów inline.
  • Może obsługiwać różne układy, takie jak wyrównanie do lewej, do prawej, do środka i justowanie.
  • Wybór odpowiedniego wyrównania w oparciu o układ i cele projektowe jest kluczowy dla osiągnięcia czytelnego i estetycznego projektu.

Wykorzystajmy skutecznie wyrównywanie tekstu jako część projektu przy użyciu text-align.

Właściwość text-decoration 

 1/* Text decoration examples */
 2.text-decoration-underline {
 3    text-decoration: underline;
 4}
 5
 6.text-decoration-overline {
 7    text-decoration: overline;
 8}
 9
10.text-decoration-line-through {
11    text-decoration: line-through;
12}
13
14.text-decoration-custom-underline {
15    text-decoration: underline;
16    text-decoration-color: red;
17    text-decoration-style: wavy;
18    text-decoration-thickness: 2px;
19}

text-decoration to właściwość CSS używana do stosowania podkreśleń, linii nad tekstem, przekreśleń lub niestandardowych linii stylizowanych na tekście. Używając tej właściwości, możesz uczynić styl tekstu bardziej dekoracyjnym lub wizualnie podkreślonym.

Wyjaśnienie:

  • Klasa text-decoration-underline wyświetla podkreślenie tekstu.
  • Klasa text-decoration-overline rysuje linię nad tekstem.
  • Klasa text-decoration-line-through stosuje przekreślenie tekstu.
  • Klasa text-decoration-custom-underline to przykład dostosowywania koloru, stylu i grubości podkreślenia.

Kluczowe wartości text-decoration

none 
1p {
2    text-decoration: none;
3}
  • Określenie none usunie wszelkie dekoracje z tekstu. Używane, gdy chcesz usunąć podkreślenie z linków, na przykład.
underline 
1p {
2    text-decoration: underline;
3}
  • Określenie underline narysuje podkreślenie pod tekstem. Może być używane dla linków lub części, które chcesz podkreślić.
overline 
1p {
2    text-decoration: overline;
3}
  • Określenie overline narysuje linię nad tekstem. Używane do zmiany wyglądu lub do specjalnych dekoracji.
line-through 
1p {
2    text-decoration: line-through;
3}
  • Określenie line-through narysuje linię przekreślającą tekst. Używane do wskazywania poprawek.
blink（点滅）
  • blink to wartość powodująca miganie tekstu, ale w praktyce nie jest używana, ponieważ większość przeglądarek jej już nie obsługuje.

Zaawansowane ustawienia text-decoration

text-decoration umożliwia szczegółowe ustawienia w następujący sposób:

text-decoration-color 
1p {
2    text-decoration: underline;
3    text-decoration-color: red;
4}
  • Właściwość text-decoration-color pozwala określić kolor podkreśleń lub przekreśleń. Domyślnie odpowiada kolorowi tekstu, ale możesz dodać wizualny akcent, wybierając inny kolor.
text-decoration-style 
 1p.dshed {
 2    text-decoration: underline;
 3    text-decoration-style: solid;
 4}
 5p.double {
 6    text-decoration: underline;
 7    text-decoration-style: double;
 8}
 9p.dotted {
10    text-decoration: underline;
11    text-decoration-style: dotted;
12}
13p.dashed {
14    text-decoration: underline;
15    text-decoration-style: dashed;
16}
17p.wavy {
18    text-decoration: underline;
19    text-decoration-style: wavy;
20}
  • Właściwość text-decoration-style pozwala określić styl linii dekoracyjnych. Dostępne wartości to:.
    • solid (Domyślny, linia ciągła)
    • double (Podwójna linia)
    • dotted (Linia kropkowana)
    • dashed (Linia przerywana)
    • wavy (Linia falista)
**text-decoration-thickness 
1p {
2    text-decoration: underline;
3    text-decoration-thickness: 2px;
4}
  • Właściwość text-decoration-thickness umożliwia określenie grubości linii dekoracyjnych. Możesz ją dostosować, używając jednostek takich jak 2px lub 0.1em, na przykład.

Podsumowanie:

  • text-decoration to właściwość służąca do dodawania dekoracyjnych linii do tekstu, takich jak podkreślenia lub przekreślenia.
  • Dzięki text-decoration-color, text-decoration-style i text-decoration-thickness możliwa jest bardziej szczegółowa personalizacja.
  • Jest często używana do podkreślania linków lub ważnego tekstu, lub jako element projektu.

Używając text-decoration, możesz dodać subtelne akcenty lub podkreślenie do tekstu.

Właściwość text-transform 

 1/* Text transform examples */
 2.text-transform-none {
 3    text-transform: none;
 4}
 5
 6.text-transform-capitalize {
 7    text-transform: capitalize;
 8}
 9
10.text-transform-uppercase {
11    text-transform: uppercase;
12}
13
14.text-transform-lowercase {
15    text-transform: lowercase;
16}

text-transform to właściwość CSS służąca do przekształcania wielkości liter w tekście. Ta właściwość pozwala kontrolować format wyświetlania tekstu określonego w HTML, automatycznie zmieniając wielkość liter wprowadzonych przez użytkownika lub istniejących tekstów.

Wyjaśnienie:

  • Klasa text-transform-none wyświetla tekst bez zmian względem oryginału.
  • Klasa text-transform-capitalize zamienia pierwszą literę każdego słowa na wielką.
  • Klasa text-transform-uppercase zamienia cały tekst na wielkie litery.
  • Klasa text-transform-lowercase zamienia cały tekst na małe litery.

Główne wartości text-transform

none 
1p {
2    text-transform: none;
3}
  • Określenie none pozostawia tekst bez zmian.
capitalize 
1/* "this is a sentence" -> "This Is A Sentence" */
2p {
3    text-transform: capitalize;
4}
  • Określenie capitalize zamienia pierwszą literę każdego słowa na wielką. Granice słów są rozpoznawane przez spacje lub znaki interpunkcyjne.
uppercase 
1/* "hello world" -> "HELLO WORLD" */
2p {
3    text-transform: uppercase;
4}
  • Określenie uppercase zamienia cały tekst na wielkie litery.
lowercase 
1/* "HELLO WORLD" -> "hello world" */
2p {
3    text-transform: lowercase;
4}
  • Określenie lowercase zamienia cały tekst na małe litery.
full-width
  • Określenie full-width zamienia tekst na znaki pełnej szerokości. Zwykle jest to stosowane jako specjalny styl w przypadku Kanji lub Kana, ale tylko nieliczne przeglądarki to obsługują.

Podsumowanie:

  • text-transform to wygodna właściwość CSS do zmiany wielkości liter w tekście.
  • Często jest używana do zapewnienia spójności wizualnej nagłówków, menu nawigacyjnych i tekstu formularzy.
  • Jest przydatna, gdy chcesz wyświetlać tekst w określonym stylu, niezależnie od danych wprowadzonych przez użytkownika.

Korzystając z tej właściwości, możesz łatwo manipulować tekstem, zachowując spójność wizualną.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video

Właściwości CSS związane z czcionkamiWłaściwości CSS związane z odstępami tekstu