Articles
Introduksjon til CSS
Tekstrelaterte CSS-egenskaper

Tekstrelaterte CSS-egenskaper

Denne artikkelen forklarer tekstrelaterte CSS-egenskaper.

Du kan lære om hvordan du bruker og skriver text-align, text-decoration og text-transform egenskapene.

YouTube Video

Opprette HTML for 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 (Tekstrelatert)

text-align-egenskap 

 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 egenskap i CSS som brukes til å spesifisere den horisontale justeringen av tekst og inline-elementer. Den brukes vanligvis til å justere avsnitt eller overskriftstekst til venstre, høyre eller midten. Det spiller en viktig rolle i utformingen av nettsider og tekstformatering.

Hovedverdier for text-align

left (venstrejustert) 
1p {
2    text-align: left;
3}
  • left justerer teksten til venstre (dette er standard justeringsmetode for mange språk).
right (høyrejustert) 
1p {
2    text-align: right;
3}
  • right justerer teksten til høyre. Det er spesielt effektivt for språk som skrives fra høyre til venstre, som arabisk og hebraisk.
center (sentrert) 
1p {
2    text-align: center;
3}
  • center justerer teksten til midten. Det brukes ofte til titler og overskrifter.
justify (blokkjustert) 
1p {
2    text-align: justify;
3}
  • justify justerer venstre og høyre kant av linjer likt, og gir et pent justert inntrykk. Det brukes i oppsett som aviser og magasiner.
start (startjustert) 
1p {
2    text-align: start;
3}
  • start justerer tekst basert på startposisjonen. For språk som skrives fra venstre til høyre, oppfører det seg på samme måte som venstrejustering.
end (slutt-justert) 
1p {
2    text-align: end;
3}
  • end justerer tekst basert på sluttposisjonen. I språk som skrives fra venstre til høyre, oppfører det seg på samme måte som høyrejustering.

text-align bruk og eksempler

Tittel med midtjustering
  • Midtjustering brukes ofte for titler på nettsider og dokumenter. Det ser bra ut og gir et visuelt balansert design.
Venstre- eller høyrejustering for avsnitt
  • Tekstavsnitt er vanligvis venstrejustert som standard, men høyrejustering eller midtjustering kan brukes for spesifikke design.
Justerer tekst jevnt
  • Når tekst justeres med justify, er hver linje jevnt justert mot både venstre og høyre kant. Dette er nyttig for layout i avis- eller magasin-stil.

Sammendrag

  • text-align er en CSS-egenskap som brukes til å horisontalt justere tekst eller inline-elementer.
  • Den kan håndtere forskjellige layout, som venstrejustering, høyrejustering, midtjustering og blokkjustering.
  • Å velge riktig justering basert på layout og designmål er nøkkelen til å oppnå et lesbart og vakkert design.

La oss bruke tekstjustering effektivt som en del av designet ditt med text-align.

text-decoration-egenskapen 

 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-egenskap som brukes til å legge til understrekinger, overstrekinger, gjennomstrekninger eller egendefinerte linjer på tekst. Ved å bruke denne egenskapen kan du gjøre tekststilen mer dekorativ eller visuelt fremhevet.

Forklaring:

  • Klassen text-decoration-underline viser en understrekning på tekst.
  • Klassen text-decoration-overline tegner en linje over teksten.
  • Klassen text-decoration-line-through legger til en gjennomstrekning på teksten.
  • Klassen text-decoration-custom-underline er et eksempel på hvordan du kan tilpasse fargen, stilen og tykkelsen på understreken.

Nøkkelverdier for text-decoration

none 
1p {
2    text-decoration: none;
3}
  • Ved å spesifisere none fjernes alle dekorasjoner fra teksten. Brukes for eksempel når du vil fjerne understreken fra lenker.
underline 
1p {
2    text-decoration: underline;
3}
  • Ved å spesifisere underline tegnes en understrek under teksten. Det kan brukes for lenker eller deler du ønsker å fremheve.
overline 
1p {
2    text-decoration: overline;
3}
  • Ved å spesifisere overline tegnes en linje over teksten. Brukes for å endre utseendet eller for spesiell dekorasjon.
line-through 
1p {
2    text-decoration: line-through;
3}
  • Ved å spesifisere line-through tegnes en gjennomstrekning over teksten. Det brukes for å indikere rettelser.
blink（点滅）
  • blink er en verdi som får teksten til å blinke, men det brukes vanligvis ikke siden det ikke støttes av de fleste nettlesere lenger.

Avanserte innstillinger for text-decoration

text-decoration tillater detaljerte innstillinger som følger:

text-decoration-color 
1p {
2    text-decoration: underline;
3    text-decoration-color: red;
4}
  • text-decoration-color-egenskapen lar deg spesifisere fargen på understreker eller gjennomstrekninger. Som standard samsvarer den med tekstfargen, men du kan legge til en visuell aksent ved å velge en annen farge.
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-egenskapen lar deg spesifisere stilen på dekorative linjer. Verdiene inkluderer følgende:.
    • solid (Standard, heltrukket linje)
    • double (dobbel linje)
    • dotted (prikket linje)
    • dashed (stiplet linje)
    • wavy (bølget linje)
**text-decoration-thickness 
1p {
2    text-decoration: underline;
3    text-decoration-thickness: 2px;
4}
  • text-decoration-thickness-egenskapen lar deg spesifisere tykkelsen på dekorative linjer. Du kan justere den ved å bruke enheter som 2px eller 0.1em, for eksempel.

Sammendrag:

  • text-decoration er en egenskap for å legge til dekorative linjer til tekst, som understrek eller gjennomstreking.
  • Med text-decoration-color, text-decoration-style og text-decoration-thickness er mer detaljert tilpasning mulig.
  • Det brukes ofte for å fremheve lenker eller viktig tekst, eller som et designelement.

Ved å bruke text-decoration kan du legge til subtile aksenter eller fremhevinger til tekst.

text-transform-egenskapen 

 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-egenskap for å endre bokstavstørrelsen på tekst. Denne egenskapen lar deg kontrollere visningsformatet på tekst spesifisert i HTML, ved å automatisk endre bokstavstørrelsen på brukeroppgitt eller eksisterende tekst.

Forklaring:

  • Klassen text-transform-none viser teksten uten å endre den fra originalen.
  • Klassen text-transform-capitalize gjør den første bokstaven i hvert ord til store bokstaver.
  • Klassen text-transform-uppercase gjør hele teksten om til store bokstaver.
  • Klassen text-transform-lowercase gjør hele teksten om til små bokstaver.

Hovedverdier for text-transform

none 
1p {
2    text-transform: none;
3}
  • Å spesifisere none etterlater teksten uendret.
capitalize 
1/* "this is a sentence" -> "This Is A Sentence" */
2p {
3    text-transform: capitalize;
4}
  • Å spesifisere capitalize gjør den første bokstaven i hvert ord til store bokstaver. Ordgrenser gjenkjennes av mellomrom eller skilletegn.
uppercase 
1/* "hello world" -> "HELLO WORLD" */
2p {
3    text-transform: uppercase;
4}
  • Å spesifisere uppercase gjør hele teksten om til store bokstaver.
lowercase 
1/* "HELLO WORLD" -> "hello world" */
2p {
3    text-transform: lowercase;
4}
  • Å spesifisere lowercase gjør hele teksten om til små bokstaver.
full-width
  • Å spesifisere full-width gjør teksten om til tegn med full bredde. Dette brukes vanligvis som en spesiell stil for Kanji eller Kana, men få nettlesere støtter det.

Sammendrag:

  • text-transform er en praktisk CSS-egenskap for å endre bokstavstørrelsen på tekst.
  • Det brukes ofte for å skape visuell konsistens for overskrifter, navigasjonsmenyer og formtekster.
  • Den er nyttig når du vil vise teksten i en bestemt stil uavhengig av brukerens innspill.

Ved å bruke denne egenskapen kan du enkelt manipulere tekst samtidig som du opprettholder visuell konsistens.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video

Skriftrelaterte CSS-egenskaperCSS-egenskaper relatert til tekstavstand