คุณสมบัติ CSS ที่เกี่ยวข้องกับข้อความ

Articles

บทความนี้อธิบายคุณสมบัติ CSS ที่เกี่ยวข้องกับข้อความ

คุณสามารถเรียนรู้เกี่ยวกับวิธีการใช้งานและการเขียนคุณสมบัติ text-align, text-decoration และ text-transform

YouTube Video

สร้าง HTML สำหรับการพรีวิว

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>

การพิมพ์อักษร (เกี่ยวข้องกับข้อความ)

คุณสมบัติ `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 เป็นคุณสมบัติใน CSS ที่ใช้กำหนดการจัดตำแหน่งข้อความและองค์ประกอบแบบอินไลน์ในแนวนอน ปกติแล้วจะใช้เพื่อจัดตำแหน่งข้อความในย่อหน้าหรือหัวข้อไปทางซ้าย ขวา หรือกลาง มันมีบทบาทสำคัญในรูปแบบการจัดหน้าเว็บและการจัดรูปแบบข้อความ

ค่าหลักสำหรับ `text-align`

`left` (จัดแนวซ้าย)

1p {
2    text-align: left;
3}

left จัดข้อความให้อยู่ทางซ้าย (นี่เป็นวิธีการจัดตำแหน่งเริ่มต้นสำหรับหลายภาษา)

`right` (จัดแนวขวา)

1p {
2    text-align: right;
3}

right จัดข้อความให้อยู่ทางขวา มันมีประสิทธิภาพเป็นพิเศษสำหรับภาษาที่เขียนจากขวาไปซ้าย เช่น ภาษาอาหรับและฮีบรู

`center` (จัดแนวกึ่งกลาง)

1p {
2    text-align: center;
3}

center จัดข้อความให้อยู่ตรงกลาง มันมักถูกใช้สำหรับชื่อเรื่องและหัวข้อ

`justify` (จัดแนวเต็มความกว้าง)

1p {
2    text-align: justify;
3}

justify จัดขอบซ้ายและขวาของแต่ละบรรทัดให้เท่ากัน สร้างความประทับใจที่เรียบร้อย มันถูกใช้ในรูปแบบการจัดหน้า เช่น หนังสือพิมพ์และนิตยสาร

`start` (จัดแนวเริ่มต้น)

1p {
2    text-align: start;
3}

start จัดข้อความตามตำแหน่งเริ่มต้น สำหรับภาษาที่เขียนจากซ้ายไปขวา มันจะทำงานเหมือนกับการจัดตำแหน่งซ้าย

`end` (จัดแนวสิ้นสุด)

1p {
2    text-align: end;
3}

end จัดข้อความตามตำแหน่งสิ้นสุด ในภาษาที่เขียนจากซ้ายไปขวา มันจะทำงานเหมือนกับการจัดตำแหน่งขวา

การใช้ `text-align` และตัวอย่าง

หัวข้อที่ใช้การจัดแนวกึ่งกลาง

การจัดตำแหน่งตรงกลางมักใช้สำหรับชื่อเรื่องของหน้าเว็บและเอกสาร มันดูดีและสร้างการออกแบบที่สมดุลทางสายตา

การจัดแนวซ้ายหรือขวาสำหรับย่อหน้า

ย่อข้อความโดยปกติจะถูกจัดตำแหน่งไปทางซ้ายเป็นค่าเริ่มต้น แต่การจัดตำแหน่งไปทางขวาหรือตรงกลางอาจถูกใช้สำหรับการออกแบบเฉพาะ

จัดข้อความให้เท่ากัน

เมื่อใช้การจัดแบบ justify แต่ละบรรทัดของข้อความจะถูกจัดให้สมดุลกับขอบซ้ายและขวา มันมีประโยชน์สำหรับรูปแบบการจัดหน้าแบบหนังสือพิมพ์หรือนิตยสาร

สรุป

text-align เป็นคุณสมบัติ CSS ที่ใช้สำหรับการจัดตำแหน่งข้อความหรือองค์ประกอบแบบอินไลน์ในแนวนอน
มันสามารถจัดการรูปแบบต่าง ๆ ได้ เช่น การจัดตำแหน่งซ้าย ขวา ตรงกลาง และจัดให้สมดุล
การเลือกการจัดตำแหน่งที่เหมาะสมตามรูปแบบและเป้าหมายการออกแบบเป็นกุญแจสำคัญในการสร้างการออกแบบที่อ่านง่ายและสวยงาม

มาลองใช้การจัดตำแหน่งข้อความอย่างมีประสิทธิภาพเป็นส่วนหนึ่งของการออกแบบของคุณด้วย text-align

สมบัติ `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 เป็นคุณสมบัติของ CSS ที่ใช้สำหรับเพิ่มการตกแต่งเช่น เส้นใต้ เส้นขีดบน เส้นขีดกลาง หรือเส้นที่ตกแต่งในรูปแบบเฉพาะให้กับข้อความ ด้วยการใช้คุณสมบัตินี้ คุณสามารถทำให้การตกแต่งข้อความดูสวยงามหรือเน้นความสำคัญมากขึ้น

คำอธิบาย:

คลาส text-decoration-underline จะแสดงเส้นใต้บนข้อความ
คลาส text-decoration-overline จะวาดเส้นเหนือข้อความ
คลาส text-decoration-line-through จะเพิ่มเส้นขีดฆ่าที่ข้อความ
คลาส text-decoration-custom-underline เป็นตัวอย่างของการปรับแต่งสี ลักษณะ และความหนาของเส้นใต้

ค่าหลักของ `text-decoration`

`none`

1p {
2    text-decoration: none;
3}

การระบุค่า none จะลบการตกแต่งทั้งหมดออกจากข้อความ ใช้ในกรณีที่คุณต้องการลบเส้นใต้จากลิงก์เป็นต้น

`underline`

1p {
2    text-decoration: underline;
3}

การระบุค่า underline จะวาดเส้นใต้ใต้ข้อความ สามารถใช้ได้กับลิงก์หรือส่วนที่คุณต้องการเน้น

`overline`

1p {
2    text-decoration: overline;
3}

การระบุค่า overline จะวาดเส้นอยู่เหนือข้อความ ใช้สำหรับเปลี่ยนรูปลักษณ์หรือการตกแต่งพิเศษ

`line-through`

1p {
2    text-decoration: line-through;
3}

การระบุค่า line-through จะวาดเส้นขีดฆ่าข้ามข้อความ ใช้เพื่อแสดงการแก้ไข

`blink`（点滅）

blink เป็นค่าที่ทำให้ข้อความกระพริบ แต่ปัจจุบันแทบไม่ได้ใช้เนื่องจากไม่ได้รับการสนับสนุนจากเบราว์เซอร์ส่วนใหญ่

การตั้งค่าขั้นสูงของ `text-decoration`

text-decoration อนุญาตให้ตั้งค่าอย่างละเอียดดังนี้:

`text-decoration-color`

1p {
2    text-decoration: underline;
3    text-decoration-color: red;
4}

คุณสมบัติ text-decoration-color ให้คุณกำหนดสีของเส้นใต้หรือเส้นขีดฆ่า ค่าเริ่มต้นจะตรงกับสีของข้อความ แต่คุณสามารถเพิ่มความโดดเด่นด้วยการเลือกสีที่ต่างออกไป

`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 ให้คุณกำหนดลักษณะของเส้นตกแต่ง ค่าที่ใช้ได้มีดังนี้:
- solid (ค่าเริ่มต้น, เส้นมีความคงทน)
- double (เส้นคู่)
- dotted (เส้นจุด)
- dashed (เส้นประ)
- wavy (เส้นคลื่น)

**`text-decoration-thickness`

1p {
2    text-decoration: underline;
3    text-decoration-thickness: 2px;
4}

คุณสมบัติ text-decoration-thickness ให้คุณกำหนดความหนาของเส้นตกแต่ง คุณสามารถปรับเปลี่ยนได้โดยใช้หน่วยเช่น 2px หรือ 0.1em เป็นต้น

สรุป:

text-decoration เป็นคุณสมบัติสำหรับเพิ่มเส้นตกแต่งให้ข้อความ เช่น เส้นใต้หรือเส้นขีดฆ่า
ด้วย text-decoration-color, text-decoration-style และ text-decoration-thickness สามารถปรับแต่งในรายละเอียดได้มากขึ้น
มักใช้เพื่อเน้นลิงก์หรือข้อความสำคัญ หรือใช้เป็นองค์ประกอบในการออกแบบ

การใช้ text-decoration ช่วยเพิ่มความโดดเด่นหรือการเน้นที่นุ่มนวลให้กับข้อความ

คุณสมบัติ `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 เป็นคุณสมบัติของ CSS สำหรับเปลี่ยนลักษณะตัวอักษรของข้อความ คุณสมบัตินี้ช่วยให้คุณควบคุมรูปแบบการแสดงผลของข้อความที่ระบุไว้ใน HTML โดยจะแปลงรูปแบบตัวอักษรของข้อความที่ผู้ใช้งานป้อนเข้ามาหรือข้อความที่มีอยู่โดยอัตโนมัติ

คำอธิบาย:

คลาส text-transform-none จะแสดงข้อความโดยไม่เปลี่ยนแปลงไปจากต้นฉบับ
คลาส text-transform-capitalize จะแปลงตัวอักษรตัวแรกของแต่ละคำให้เป็นตัวพิมพ์ใหญ่
คลาส text-transform-uppercase จะแปลงข้อความทั้งหมดให้เป็นตัวพิมพ์ใหญ่
คลาส text-transform-lowercase จะแปลงข้อความทั้งหมดให้เป็นตัวพิมพ์เล็ก

ค่าหลักของ `text-transform`

`none`

1p {
2    text-transform: none;
3}

การกำหนดค่า none จะปล่อยข้อความให้อยู่ในรูปแบบเดิมโดยไม่เปลี่ยนแปลง

`capitalize`

1/* "this is a sentence" -> "This Is A Sentence" */
2p {
3    text-transform: capitalize;
4}

การกำหนดค่า capitalize จะเปลี่ยนตัวอักษรตัวแรกของแต่ละคำให้เป็นตัวพิมพ์ใหญ่ ขอบเขตของคำจะถูกกำหนดโดยช่องว่างหรือเครื่องหมายวรรคตอน

`uppercase`

1/* "hello world" -> "HELLO WORLD" */
2p {
3    text-transform: uppercase;
4}

การกำหนดค่า uppercase จะเปลี่ยนข้อความทั้งหมดให้เป็นตัวพิมพ์ใหญ่

`lowercase`

1/* "HELLO WORLD" -> "hello world" */
2p {
3    text-transform: lowercase;
4}

การกำหนดค่า lowercase จะเปลี่ยนข้อความทั้งหมดให้เป็นตัวพิมพ์เล็ก

`full-width`

การกำหนดค่า full-width จะเปลี่ยนข้อความให้เป็นอักษรแบบเต็มความกว้าง โดยปกติสิ่งนี้จะใช้ในรูปแบบพิเศษเมื่อจัดการกับคันจิหรือคะนะ แต่มีเพียงไม่กี่เบราว์เซอร์ที่รองรับ

สรุป:

text-transform เป็นคุณสมบัติ CSS ที่สะดวกสำหรับการเปลี่ยนรูปแบบตัวพิมพ์ของข้อความ
มักใช้เพื่อสร้างความสม่ำเสมอในลักษณะการแสดงผลของหัวข้อ เมนูนำทาง และข้อความในฟอร์ม
มีประโยชน์เมื่อคุณต้องการแสดงข้อความในรูปแบบที่เฉพาะเจาะจงโดยไม่ขึ้นอยู่กับข้อมูลที่ผู้ใช้ป้อน

ด้วยการใช้คุณสมบัตินี้ คุณสามารถปรับเปลี่ยนข้อความได้ง่ายในขณะที่ยังคงความสม่ำเสมอของการแสดงผล

คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย

YouTube Video

คุณสมบัติ CSS ที่เกี่ยวข้องกับฟอนต์คุณสมบัติ CSS ที่เกี่ยวข้องกับการจัดช่องว่างของข้อความ

คุณสมบัติ CSS ที่เกี่ยวข้องกับข้อความ

YouTube Video

สร้าง HTML สำหรับการพรีวิว

การพิมพ์อักษร (เกี่ยวข้องกับข้อความ)

คุณสมบัติ text-align

ค่าหลักสำหรับ text-align

left (จัดแนวซ้าย)

right (จัดแนวขวา)

center (จัดแนวกึ่งกลาง)

justify (จัดแนวเต็มความกว้าง)

start (จัดแนวเริ่มต้น)

end (จัดแนวสิ้นสุด)

การใช้ text-align และตัวอย่าง

หัวข้อที่ใช้การจัดแนวกึ่งกลาง

การจัดแนวซ้ายหรือขวาสำหรับย่อหน้า

จัดข้อความให้เท่ากัน

สรุป

สมบัติ text-decoration

คำอธิบาย:

ค่าหลักของ text-decoration

none

underline

overline

line-through

blink（点滅）

การตั้งค่าขั้นสูงของ text-decoration

text-decoration-color

text-decoration-style

**text-decoration-thickness

สรุป:

คุณสมบัติ text-transform

คำอธิบาย:

ค่าหลักของ text-transform

none

capitalize

uppercase

lowercase

full-width

สรุป:

YouTube Video

คุณสมบัติ `text-align`

ค่าหลักสำหรับ `text-align`

`left` (จัดแนวซ้าย)

`right` (จัดแนวขวา)

`center` (จัดแนวกึ่งกลาง)

`justify` (จัดแนวเต็มความกว้าง)

`start` (จัดแนวเริ่มต้น)

`end` (จัดแนวสิ้นสุด)

การใช้ `text-align` และตัวอย่าง

สมบัติ `text-decoration`

ค่าหลักของ `text-decoration`

`none`

`underline`

`overline`

`line-through`

`blink`（点滅）

การตั้งค่าขั้นสูงของ `text-decoration`

`text-decoration-color`

`text-decoration-style`

**`text-decoration-thickness`

คุณสมบัติ `text-transform`

ค่าหลักของ `text-transform`

`none`

`capitalize`

`uppercase`

`lowercase`

`full-width`