Articles
Introduktion til CSS
Tekst-relaterede CSS-egenskaber

Tekst-relaterede CSS-egenskaber

Denne artikel forklarer tekst-relaterede CSS-egenskaber.

Du kan lære om brugen og hvordan man skriver egenskaberne text-align, text-decoration og text-transform.

YouTube Video

Oprettelse af HTML til forhåndsvisning

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>

Typografi (Tekst-relateret)

text-align egenskab 

 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 er en egenskab i CSS, der bruges til at angive den horisontale justering af tekst og inline-elementer. Den bruges typisk til at justere tekst i afsnit eller overskrifter til venstre, højre eller center. Den spiller en vigtig rolle i layout af websider og tekstformatering.

Hovedværdier for text-align

left (venstrejusteret) 
1p {
2    text-align: left;
3}
  • left justerer teksten til venstre (dette er standardjusteringen for mange sprog).
right (højrejusteret) 
1p {
2    text-align: right;
3}
  • right justerer teksten til højre. Det er især effektivt for sprog, der skrives fra højre mod venstre, som arabisk og hebraisk.
center (centerjusteret) 
1p {
2    text-align: center;
3}
  • center justerer teksten til midten. Det bruges ofte til titler og overskrifter.
justify (justeret) 
1p {
2    text-align: justify;
3}
  • justify justerer venstre og højre kant af linjer ensartet, hvilket giver et pænt justeret indtryk. Det bruges i layouts som aviser og magasiner.
start (startjusteret) 
1p {
2    text-align: start;
3}
  • start justerer teksten baseret på startpositionen. For sprog skrevet fra venstre til højre fungerer det på samme måde som venstrejustering.
end (slutjusteret) 
1p {
2    text-align: end;
3}
  • end justerer teksten baseret på slutpositionen. I sprog skrevet fra venstre til højre fungerer det på samme måde som højrejustering.

text-align brug og eksempler

Titel med centerjustering
  • Centerjustering bruges ofte til titler på websider og dokumenter. Det ser godt ud og resulterer i et visuelt balanceret design.
Venstre- eller højrejustering til afsnit
  • Tekstafsnit er som standard venstrejusteret, men højrejustering eller centerjustering kan bruges til specifikke designs.
Juster teksten jævnt
  • Når teksten er justeret med justify, er hver linje jævnt justeret med både venstre og højre kant. Det er nyttigt til layouter i avis- eller magasin-stil.

Sammendrag

  • text-align er en CSS-egenskab, der bruges til horisontalt at justere tekst eller inline-elementer.
  • Det kan håndtere forskellige layouts som venstrejustering, højrejustering, centerjustering og justering.
  • At vælge den passende justering baseret på layout og designmål er nøglen til at opnå et læseligt og smukt design.

Lad os effektivt bruge tekstjustering som en del af dit design med text-align.

text-decoration egenskaben 

 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 er en CSS-egenskab, der bruges til at tilføje understregninger, overstregninger, gennemstregninger eller brugerdefinerede linjer til tekst. Ved at bruge denne egenskab kan du gøre tekststilen mere dekorativ eller visuelt fremhævet.

Forklaring:

  • Klassen text-decoration-underline viser en understregning på teksten.
  • Klassen text-decoration-overline tegner en linje over teksten.
  • Klassen text-decoration-line-through anvender en gennemstregning på teksten.
  • text-decoration-custom-underline-klassen er et eksempel på at tilpasse understregningens farve, stil og tykkelse.

Værdier for text-decoration

none 
1p {
2    text-decoration: none;
3}
  • Angivelse af none vil fjerne alle dekorationer fra teksten. Bruges, når du for eksempel vil fjerne understregningen fra links.
underline 
1p {
2    text-decoration: underline;
3}
  • Angivelse af underline vil tegne en understregning under teksten. Kan bruges til links eller dele, du vil fremhæve.
overline 
1p {
2    text-decoration: overline;
3}
  • Angivelse af overline vil tegne en streg over teksten. Bruges til at ændre udseendet eller til speciel dekoration.
line-through 
1p {
2    text-decoration: line-through;
3}
  • Angivelse af line-through vil tegne en gennemstregning hen over teksten. Bruges til at angive rettelser.
blink（点滅）
  • blink er en værdi, der får teksten til at blinke, men den bruges ikke længere, da de fleste browsere ikke længere understøtter den.

Avancerede indstillinger for text-decoration

text-decoration muliggør detaljerede indstillinger som følger:

text-decoration-color 
1p {
2    text-decoration: underline;
3    text-decoration-color: red;
4}
  • text-decoration-color-egenskaben giver dig mulighed for at specificere farven på understregninger eller gennemstregninger. Som standard matcher den tekstfarven, men du kan tilføje en visuel effekt ved at vælge en anden farve.
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}
  • text-decoration-style-egenskaben giver dig mulighed for at specificere stilen på dekorative streger. Værdierne inkluderer følgende:.
    • solid (Standard, solid streg)
    • double (dobbelt streg)
    • dotted (prikket streg)
    • dashed (stiplede linjer)
    • wavy (bølget streg)
**text-decoration-thickness 
1p {
2    text-decoration: underline;
3    text-decoration-thickness: 2px;
4}
  • text-decoration-thickness-egenskaben giver dig mulighed for at specificere tykkelsen på dekorative streger. Du kan justere den ved hjælp af enheder som 2px eller 0.1em, for eksempel.

Opsummering:

  • text-decoration er en egenskab til at tilføje dekorative linjer til tekst, såsom understregning eller gennemstregning.
  • Med text-decoration-color, text-decoration-style og text-decoration-thickness er mere detaljeret tilpasning mulig.
  • Det bruges ofte til at fremhæve links eller vigtig tekst, eller som et designelement.

Ved at bruge text-decoration kan du tilføje subtile accenter eller fremhæve tekst.

text-transform egenskab 

 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 er en CSS-egenskab til at transformere tekstens store og små bogstaver. Denne egenskab giver dig mulighed for at kontrollere visningsformatet for tekst specificeret i HTML og automatisk konvertere tekstens store og små bogstaver, uanset om den er brugerindtastet eller eksisterende.

Forklaring:

  • text-transform-none klassen viser teksten uden at ændre den fra den oprindelige.
  • text-transform-capitalize klassen konverterer det første bogstav i hvert ord til stort.
  • text-transform-uppercase klassen konverterer hele teksten til store bogstaver.
  • text-transform-lowercase klassen konverterer hele teksten til små bogstaver.

Hovedværdier for text-transform

none 
1p {
2    text-transform: none;
3}
  • Ved at specificere none forbliver teksten uændret.
capitalize 
1/* "this is a sentence" -> "This Is A Sentence" */
2p {
3    text-transform: capitalize;
4}
  • Ved at specificere capitalize konverteres det første bogstav i hvert ord til stort. Ordgrænser genkendes af mellemrum eller tegnsætning.
uppercase 
1/* "hello world" -> "HELLO WORLD" */
2p {
3    text-transform: uppercase;
4}
  • Ved at specificere uppercase konverteres hele teksten til store bogstaver.
lowercase 
1/* "HELLO WORLD" -> "hello world" */
2p {
3    text-transform: lowercase;
4}
  • Ved at specificere lowercase konverteres hele teksten til små bogstaver.
full-width
  • Ved at specificere full-width konverteres tekst til fuld bredde-tegn. Dette bruges typisk som en speciel stil, når man håndterer Kanji eller Kana, men få browsere understøtter det.

Opsummering:

  • text-transform er en praktisk CSS-egenskab til at ændre tekstens store og små bogstaver.
  • Det bruges ofte til at skabe visuel konsekvens for overskrifter, navigationsmenuer og formulartekst.
  • Det er nyttigt, når du vil vise tekst i en bestemt stil, uanset brugerinput.

Ved at bruge denne egenskab kan du nemt manipulere tekst, samtidig med at du bevarer visuel konsekvens.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video

Skrifttype-relaterede CSS-egenskaberCSS-egenskaber relateret til tekstafstand