Articles
Introductie tot CSS
Tekstgerelateerde CSS-eigenschappen

Tekstgerelateerde CSS-eigenschappen

Dit artikel legt de tekstgerelateerde CSS-eigenschappen uit.

Je kunt leren hoe je de eigenschappen text-align, text-decoration en text-transform gebruikt en schrijft.

YouTube Video

HTML maken voor voorbeeldweergave

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>

Typografie (Tekstgerelateerd)

text-align-eigenschap 

 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 is een eigenschap in CSS die wordt gebruikt om de horizontale uitlijning van tekst en inline-elementen te specificeren. Het wordt meestal gebruikt om alinea's of kopteksten links, rechts of in het midden uit te lijnen. Het speelt een belangrijke rol in de indeling en tekstopmaak van webpagina's.

Belangrijkste waarden van text-align

left (links uitgelijnd) 
1p {
2    text-align: left;
3}
  • left lijnt de tekst links uit (dit is de standaard uitlijningsmethode voor veel talen).
right (rechts uitgelijnd) 
1p {
2    text-align: right;
3}
  • right lijnt de tekst rechts uit. Het is vooral effectief voor talen die van rechts naar links worden geschreven, zoals Arabisch en Hebreeuws.
center (gecentreerd) 
1p {
2    text-align: center;
3}
  • center lijnt de tekst in het midden uit. Het wordt vaak gebruikt voor titels en koppen.
justify (uitgevuld) 
1p {
2    text-align: justify;
3}
  • justify lijnt de linker- en rechterranden van regels gelijkmatig uit, wat een nette uitgelijnde indruk geeft. Het wordt gebruikt in opmaak zoals kranten en tijdschriften.
start (start-uitgelijnd) 
1p {
2    text-align: start;
3}
  • start lijnt tekst uit op basis van de beginpositie. Voor talen die van links naar rechts worden geschreven, gedraagt het zich hetzelfde als links uitlijnen.
einde (uitgelijnd op het einde) 
1p {
2    text-align: end;
3}
  • einde lijnt tekst uit op basis van de eindpositie. In talen die van links naar rechts worden geschreven, gedraagt het zich hetzelfde als rechts uitlijnen.

Gebruik en voorbeelden van text-align

Titel uitgelijnd in het midden
  • Het uitlijnen in het midden wordt vaak gebruikt voor titels van webpagina's en documenten. Het ziet er goed uit en resulteert in een visueel uitgebalanceerd ontwerp.
Links of rechts uitlijning voor paragrafen
  • Tekstparagrafen zijn meestal standaard links uitgelijnd, maar rechts uitlijnen of midden uitlijnen kan worden gebruikt voor specifieke ontwerpen.
Tekst gelijkmatig uitvullen
  • Wanneer de tekst uitgelijnd wordt met justify, wordt elke regel tekst gelijkmatig uitgelijnd met zowel de linker- als rechterrand. Dit is handig voor lay-outs in kranten- of tijdschriftstijl.

Samenvatting

  • text-align is een CSS-eigenschap die wordt gebruikt om tekst of inline elementen horizontaal uit te lijnen.
  • Het kan omgaan met verschillende lay-outs, zoals links uitlijnen, rechts uitlijnen, midden uitlijnen en uitvullen.
  • Het kiezen van de juiste uitlijning op basis van de lay-out en ontwerpdoelen is essentieel voor een leesbaar en mooi ontwerp.

Laten we tekstuitlijning effectief gebruiken als onderdeel van je ontwerp met text-align.

De eigenschap 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 is een CSS-eigenschap die wordt gebruikt om onderstrepingen, overstrepingen, doorhalingen of speciaal gestileerde lijnen toe te passen op tekst. Door deze eigenschap te gebruiken, kun je tekststyling decoratiever of visueel meer benadrukt maken.

Uitleg:

  • De klasse text-decoration-underline geeft een onderstreping weer op de tekst.
  • De klasse text-decoration-overline tekent een lijn boven de tekst.
  • De klasse text-decoration-line-through past een doorhaling toe op de tekst.
  • De text-decoration-custom-underline klasse is een voorbeeld van het aanpassen van de kleur, stijl en dikte van de onderstreping.

Belangrijke waarden van text-decoration

none 
1p {
2    text-decoration: none;
3}
  • Het specificeren van none verwijdert alle decoraties van de tekst. Wordt gebruikt wanneer u bijvoorbeeld de onderstreping van links wilt verwijderen.
underline 
1p {
2    text-decoration: underline;
3}
  • Het specificeren van underline tekent een onderstreping onder de tekst. Het kan worden gebruikt voor links of delen die u wilt benadrukken.
overline 
1p {
2    text-decoration: overline;
3}
  • Het specificeren van overline tekent een lijn boven de tekst. Wordt gebruikt om het uiterlijk te veranderen of voor speciale decoratie.
line-through 
1p {
2    text-decoration: line-through;
3}
  • Het specificeren van line-through tekent een doorstreping door de tekst. Het wordt gebruikt om correcties aan te geven.
blink（点滅）
  • blink is een waarde die de tekst laat knipperen, maar wordt in de praktijk niet gebruikt omdat het niet door de meeste browsers wordt ondersteund.

Geavanceerde instellingen van text-decoration

text-decoration staat gedetailleerde instellingen toe zoals volgt:

text-decoration-color 
1p {
2    text-decoration: underline;
3    text-decoration-color: red;
4}
  • Met de eigenschap text-decoration-color kunt u de kleur van onderstreping of doorstreping specificeren. Standaard komt de kleur overeen met de tekstkleur, maar u kunt een visueel accent toevoegen door een andere kleur te kiezen.
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}
  • Met de eigenschap text-decoration-style kunt u de stijl van decoratieve lijnen specificeren. De waarden omvatten het volgende:.
    • solid (Standaard, doorlopende lijn)
    • double (Dubbele lijn)
    • dotted (Gestippelde lijn)
    • dashed (Streepjeslijn)
    • wavy (Golfvormige lijn)
**text-decoration-thickness 
1p {
2    text-decoration: underline;
3    text-decoration-thickness: 2px;
4}
  • Met de eigenschap text-decoration-thickness kunt u de dikte van decoratieve lijnen specificeren. U kunt het aanpassen met eenheden zoals 2px of 0.1em, bijvoorbeeld.

Samenvatting:

  • text-decoration is een eigenschap om decoratieve lijnen toe te voegen aan tekst, zoals onderstrepen of doorhalen.
  • Met text-decoration-color, text-decoration-style en text-decoration-thickness is meer gedetailleerde aanpassing mogelijk.
  • Het wordt vaak gebruikt om links of belangrijke tekst te benadrukken, of als een ontwerpelement.

Met text-decoration kunt u subtiele accenten of nadruk aan tekst toevoegen.

text-transform-eigenschap 

 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 is een CSS-eigenschap voor het wijzigen van de kapitalisatie van tekst. Met deze eigenschap kunt u het weergaveformaat van in HTML gespecificeerde tekst regelen, waarbij de kapitalisatie van door de gebruiker ingevoerde of bestaande tekst automatisch wordt aangepast.

Uitleg:

  • De text-transform-none-klasse toont tekst zonder deze te veranderen ten opzichte van het origineel.
  • De text-transform-capitalize-klasse zet de eerste letter van elk woord om in hoofdletters.
  • De text-transform-uppercase-klasse zet de gehele tekst om in hoofdletters.
  • De text-transform-lowercase-klasse zet de gehele tekst om in kleine letters.

Belangrijkste waarden van text-transform

none 
1p {
2    text-transform: none;
3}
  • Het specificeren van none laat de tekst ongewijzigd.
capitalize 
1/* "this is a sentence" -> "This Is A Sentence" */
2p {
3    text-transform: capitalize;
4}
  • Het specificeren van capitalize zet de eerste letter van elk woord om in hoofdletters. Woorden worden afgebakend door spaties of interpunctie.
uppercase 
1/* "hello world" -> "HELLO WORLD" */
2p {
3    text-transform: uppercase;
4}
  • Het specificeren van uppercase zet de volledige tekst om in hoofdletters.
lowercase 
1/* "HELLO WORLD" -> "hello world" */
2p {
3    text-transform: lowercase;
4}
  • Het specificeren van lowercase zet de volledige tekst om in kleine letters.
full-width
  • Het specificeren van full-width zet de tekst om in tekens met volledige breedte. Dit wordt typisch gebruikt als een speciale stijl bij het omgaan met Kanji of Kana, maar slechts enkele browsers ondersteunen het.

Samenvatting:

  • text-transform is een handige CSS-eigenschap voor het wijzigen van de kapitalisatie van tekst.
  • Het wordt vaak gebruikt om een visuele consistentie te creëren voor koppen, navigatiemenu's en formuliertekst.
  • Het is handig wanneer u tekst in een specifieke stijl wilt weergeven, ongeacht de invoer van de gebruiker.

Door deze eigenschap te gebruiken, kunt u tekst eenvoudig manipuleren terwijl u visuele consistentie behoudt.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video

Lettertype-gerelateerde CSS-eigenschappenCSS-eigenschappen met betrekking tot tekstafstand