Articles
Introduktion till CSS
Textrelaterade CSS-egenskaper

Textrelaterade CSS-egenskaper

Den här artikeln förklarar textrelaterade CSS-egenskaper.

Du kan lära dig om användningen av och hur man skriver egenskaperna text-align, text-decoration och text-transform.

YouTube Video

Skapa HTML för förhandsgranskning

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 (Textrelaterad)

text-align-egenskapen 

 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 är en egenskap i CSS som används för att ange den horisontella justeringen av text och inline-element. Den används vanligtvis för att justera text i stycken eller rubriker till vänster, höger eller mitten. Den spelar en viktig roll i webbsideutformning och textformatering.

Huvudvärden för text-align

left (vänsterjusterad) 
1p {
2    text-align: left;
3}
  • left justerar texten till vänster (detta är standardjusteringsmetoden för många språk).
right (högerjusterad) 
1p {
2    text-align: right;
3}
  • right justerar texten till höger. Det är särskilt effektivt för språk som skrivs från höger till vänster, såsom arabiska och hebreiska.
center (centrerad justering) 
1p {
2    text-align: center;
3}
  • center justerar texten till mitten. Den används ofta för titlar och rubriker.
justify (justerad) 
1p {
2    text-align: justify;
3}
  • justify justerar radernas vänstra och högra kanter lika, vilket ger ett snyggt justerat intryck. Den används i layouter som tidningar och tidskrifter.
start (börjanjusterad) 
1p {
2    text-align: start;
3}
  • start justerar text baserat på startpositionen. För språk som skrivs från vänster till höger fungerar det på samma sätt som vänsterjustering.
end (slutjusterad) 
1p {
2    text-align: end;
3}
  • end justerar text baserat på slutpositionen. För språk som skrivs från vänster till höger fungerar det på samma sätt som högerjustering.

text-align användning och exempel

Titel med mittcentrering
  • Mittcentrering används ofta för titlar på webbsidor och dokument. Det ser bra ut och ger en visuellt balanserad design.
Vänster- eller högerjustering för stycken
  • Textstycken är vanligtvis vänsterjusterade som standard, men högerjustering eller mittcentrering kan användas för specifika designer.
Justera texten jämt
  • När text justeras med justify justeras varje rad jämt mot både vänster och höger kant. Det är användbart för layout i tidnings- eller magasinsstil.

Sammanfattning

  • text-align är en CSS-egenskap som används för att horisontellt justera text eller inline-element.
  • Det kan hantera olika layouter såsom vänsterjustering, högerjustering, mittcentrering och justering.
  • Att välja rätt justering baserat på layout och designmål är nyckeln till att uppnå en läsbar och snygg design.

Låt oss effektivt använda textjustering som en del av din design 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 är en CSS-egenskap som används för att tillämpa understrykningar, överstrykningar, genomstrykningar eller anpassade linjer på text. Genom att använda denna egenskap kan du göra textstilen mer dekorativ eller visuellt framhävd.

Förklaring:

  • Klassen text-decoration-underline visar en understrykning på texten.
  • Klassen text-decoration-overline ritar en linje ovanför texten.
  • Klassen text-decoration-line-through applicerar en genomstrykning på texten.
  • text-decoration-custom-underline-klassen är ett exempel på att anpassa färg, stil och tjocklek på understrykningen.

Nyckelvärden för text-decoration

none 
1p {
2    text-decoration: none;
3}
  • Att ange none tar bort alla dekorationer från texten. Används till exempel när du vill ta bort understrykningen från länkar.
underline 
1p {
2    text-decoration: underline;
3}
  • Att ange underline ritar en understrykning under texten. Det kan användas för länkar eller delar du vill betona.
overline 
1p {
2    text-decoration: overline;
3}
  • Att ange overline ritar en linje ovanför texten. Används för att ändra utseendet eller för särskild dekoration.
line-through 
1p {
2    text-decoration: line-through;
3}
  • Att ange line-through ritar en genomstrykning över texten. Det används för att indikera korrigeringar.
blink（点滅）
  • blink är ett värde som får texten att blinka, men det används inte längre då det inte stöds av de flesta webbläsare.

Avancerade inställningar för text-decoration

text-decoration tillåter detaljerade inställningar enligt följande:

text-decoration-color 
1p {
2    text-decoration: underline;
3    text-decoration-color: red;
4}
  • Egenskapen text-decoration-color låter dig ange färgen på understrykningar eller genomstrykningar. Som standard matchar det textens färg, men du kan lägga till en visuell accent genom att välja en annan färg.
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}
  • Egenskapen text-decoration-style låter dig ange stilen på dekorativa linjer. Värdena inkluderar följande:.
    • solid (Standard, solid linje)
    • double (dubbel linje)
    • dotted (prickad linje)
    • dashed (streckad linje)
    • wavy (vågig linje)
**text-decoration-thickness 
1p {
2    text-decoration: underline;
3    text-decoration-thickness: 2px;
4}
  • Egenskapen text-decoration-thickness låter dig ange tjockleken på dekorativa linjer. Du kan justera det med enheter som 2px eller 0.1em, till exempel.

Sammanfattning:

  • text-decoration är en egenskap för att lägga till dekorativa linjer till text, som understrykningar eller överstrykningar.
  • Med text-decoration-color, text-decoration-style och text-decoration-thickness är mer detaljerad anpassning möjlig.
  • Det används ofta för att framhäva länkar eller viktig text, eller som ett designelement.

Med hjälp av text-decoration kan du lägga till subtila accenter eller betoning på text.

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 är en CSS-egenskap för att ändra textens skiftläge. Denna egenskap låter dig styra visningsformatet för text som anges i HTML och automatiskt ändra skiftläge för användarens inmatade eller befintlig text.

Förklaring:

  • text-transform-none-klassen visar texten utan att ändra den från originalet.
  • text-transform-capitalize-klassen gör den första bokstaven i varje ord till versal.
  • text-transform-uppercase-klassen gör hela texten till versaler.
  • text-transform-lowercase-klassen gör hela texten till gemener.

Huvudvärden för text-transform

none 
1p {
2    text-transform: none;
3}
  • Att ange none lämnar texten oförändrad.
capitalize 
1/* "this is a sentence" -> "This Is A Sentence" */
2p {
3    text-transform: capitalize;
4}
  • Att ange capitalize gör den första bokstaven i varje ord till versal. Ords gränser känns igen av mellanslag eller skiljetecken.
uppercase 
1/* "hello world" -> "HELLO WORLD" */
2p {
3    text-transform: uppercase;
4}
  • Att ange uppercase gör hela texten till versaler.
lowercase 
1/* "HELLO WORLD" -> "hello world" */
2p {
3    text-transform: lowercase;
4}
  • Att ange lowercase gör hela texten till gemener.
full-width
  • Att ange full-width omvandlar text till helbredds-tecken. Detta används vanligtvis som en speciell stil vid hantering av Kanji eller Kana, men få webbläsare stöder det.

Sammanfattning:

  • text-transform är en praktisk CSS-egenskap för att ändra textens skiftläge.
  • Det används ofta för att skapa en visuell enhetlighet för rubriker, navigeringsmenyer och formulärstexter.
  • Det är användbart när du vill visa text i en specifik stil oavsett användarens inmatning.

Genom att använda denna egenskap kan du enkelt manipulera text samtidigt som du behåller visuell enhetlighet.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video

Typsnittrelaterade CSS-egenskaperCSS-egenskaper relaterade till textavstånd