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

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

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

คุณสามารถเรียนรู้เกี่ยวกับการใช้งานและวิธีการเขียนคุณสมบัติเช่น line-height และ word-spacing

YouTube Video

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

css-text-space.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>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-text-space.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Text-Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Typography (Text-Related)</h2>
 20        </header>
 21        <article>
 22            <h3>line-height</h3>
 23            <section>
 24                <header><h4>line-height: normal</h4></header>
 25                <section class="sample-view">
 26                    <p class="line-height-normal">This is a paragraph with normal line height.</p>
 27                </section>
 28                <header><h4>line-height: 1.5</h4></header>
 29                <section class="sample-view">
 30                    <p class="line-height-150">This is a paragraph with 1.5 line height.</p>
 31                </section>
 32                <header><h4>line-height: 200%</h4></header>
 33                <section class="sample-view">
 34                    <p class="line-height-200">This is a paragraph with 200% line height.</p>
 35                </section>
 36            </section>
 37        </article>
 38        <article>
 39            <h3>letter-spacing</h3>
 40            <section>
 41                <header><h4>letter-spacing: normal</h4></header>
 42                <section class="sample-view">
 43                    <p class="letter-spacing-normal">This is text with normal letter spacing.</p>
 44                </section>
 45                <header><h4>letter-spacing: 4px</h4></header>
 46                <section class="sample-view">
 47                    <p class="letter-spacing-wide">This is text with wide letter spacing.</p>
 48                </section>
 49                <header><h4>letter-spacing: -1px</h4></header>
 50                <section class="sample-view">
 51                    <p class="letter-spacing-narrow">This is text with narrow letter spacing.</p>
 52                </section>
 53            </section>
 54        </article>
 55        <article>
 56            <h3>word-spacing</h3>
 57            <section>
 58                <header><h4>word-spacing: normal</h4></header>
 59                <section class="sample-view">
 60                    <p class="word-spacing-normal">This is text with normal word spacing.</p>
 61                </section>
 62                <header><h4>word-spacing: 4px</h4></header>
 63                <section class="sample-view">
 64                    <p class="word-spacing-wide">This is text with wide word spacing.</p>
 65                </section>
 66                <header><h4>word-spacing: -1px</h4></header>
 67                <section class="sample-view">
 68                    <p class="word-spacing-narrow">This is text with narrow word spacing.</p>
 69                </section>
 70                <header><h4>word-spacing: -0.1em; letter-spacing: -0.05em;</h4></header>
 71                <section class="sample-view">
 72                    <p class="word-and-letter-spacing">This is text with word and letter spacing.</p>
 73                </section>
 74            </section>
 75        </article>
 76        <article>
 77            <h3>word-break</h3>
 78            <section>
 79                <header><h4>word-break: normal</h4></header>
 80                <section class="sample-view">
 81                    <p class="box word-break-normal">Thisisaverylongwordthatwillnotbreakwithword-breaknormal.</p>
 82                </section>
 83                <header><h4>word-break: break-all</h4></header>
 84                <section class="sample-view">
 85                    <p class="box word-break-break-all">Thisisaverylongwordthatwillnotbreakwithword-breaknormal.</p>
 86                </section>
 87                <header><h4>word-break: keep-all</h4></header>
 88                <section class="sample-view">
 89                    <p class="box word-break-keep-all">&#12371;&#12428;&#12399;&#26085;&#26412;&#35486;&#12398;&#25991;&#31456;&#12391;&#12377;&#12290;&#12371;&#12398;&#35373;&#23450;&#12391;&#12399;&#33258;&#28982;&#12395;&#25913;&#34892;&#12373;&#12428;&#12414;&#12377;&#12290;</p>
 90                </section>
 91            </section>
 92        </article>
 93        <article>
 94            <h3>hyphens</h3>
 95            <section>
 96                <header><h4>hyphens: none</h4></header>
 97                <section class="sample-view">
 98                    <p class="no-hyphens">
 99                        Supercalifragilisticexpialidocious is a very long word.
100                    </p>
101                </section>
102                <header><h4>HTML</h4></header>
103<pre>
104&lt;p class="no-hyphens"&gt;
105    Supercalifragilisticexpialidocious is a very long word.
106&lt;/p&gt;
107</pre>
108                <header><h4>hyphens: manual</h4></header>
109                <section class="sample-view">
110                    <p class="manual-hyphens">
111                        Super&shy;califragilistic&shy;expialidocious is a very long word.
112                    </p>
113                </section>
114                <header><h4>HTML</h4></header>
115<pre>
116&lt;p class="manual-hyphens"&gt;
117    Super&amp;shy;califragilistic&amp;shy;expialidocious is a very long word.
118&lt;/p&gt;
119</pre>
120                <header><h4>hyphens: auto</h4></header>
121                <section class="sample-view">
122                    <p class="auto-hyphens">
123                        Supercalifragilisticexpialidocious is a very long word.
124                    </p>
125                </section>
126                <header><h4>HTML</h4></header>
127<pre>
128&lt;p class="auto-hyphens"&gt;
129    Supercalifragilisticexpialidocious is a very long word.
130&lt;/p&gt;
131</pre>
132            </section>
133        </article>
134    </main>
135</body>
136</html>

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

คุณสมบัติ line-height 

 1/* Line height examples */
 2.line-height-normal {
 3    line-height: normal; /* Default line height */
 4}
 5
 6.line-height-150 {
 7    line-height: 1.5; /* 1.5 times the font size */
 8}
 9
10.line-height-200 {
11    line-height: 200%; /* 200% of the font size */
12}

line-height เป็นคุณสมบัติของ CSS ที่ใช้ตั้งค่าการเว้นระยะระหว่างบรรทัด (ความสูงของบรรทัด) line-height ระบุระยะห่างแนวตั้งระหว่างบรรทัด ใช้เพื่อเพิ่มความสามารถในการอ่านหรือปรับระยะห่างเป็นส่วนหนึ่งของการออกแบบ

การใช้หลักของ line-height

ตัวเลขไม่มีหน่วย 
1p {
2    line-height: 1.5; /* 1.5 times the font size */
3}
  • กำหนดความสูงที่สัมพันธ์กับขนาดตัวอักษร ตัวอย่างเช่น การกำหนด 1.5 จะตั้งค่าความสูงของบรรทัดเป็น 1.5 เท่าของขนาดตัวอักษร วิธีนี้มีประโยชน์สำหรับการออกแบบที่ตอบสนองต่ออุปกรณ์
เปอร์เซ็นต์ 
1p {
2    line-height: 150%;
3}
  • กำหนดความสูงของบรรทัดเป็นเปอร์เซ็นต์ของขนาดตัวอักษร ตัวอย่างเช่น การกำหนด 150% จะตั้งค่าความสูงของบรรทัดเป็น 150% ของขนาดตัวอักษร
ค่าแบบคงที่ (px, em, rem, เป็นต้น) 
1p {
2    line-height: 20px;
3}
  • กำหนดความสูงของบรรทัดในหน่วยที่แน่นอน ตัวอย่างเช่น คุณสามารถกำหนดค่าแบบแน่นอน เช่น 20px แต่จะขาดความยืดหยุ่นในงานออกแบบที่ตอบสนองต่ออุปกรณ์
normal 
1p {
2    line-height: normal;
3}
  • การกำหนด normal จะใช้การตั้งค่าการเว้นระยะบรรทัดเริ่มต้นของเบราว์เซอร์ โดยปกติจะอยู่ที่ประมาณ 1.2 ถึง 1.4 เท่าของขนาดตัวอักษร

ตัวอย่างการใช้ line-height

ย่อหน้าที่อ่านง่าย
  • ความสูงบรรทัดประมาณ 1.5 ถึง 1.6 มักจะถูกแนะนำเพื่อความสามารถในการอ่าน หากระยะห่างระหว่างบรรทัดแคบเกินไป ข้อความจะดูแน่นและอ่านยาก และหากกว้างเกินไป ข้อความจะดูแยกย้ายไม่ปะติดปะต่อ
การออกแบบหัวข้อ
  • สำหรับหัวเรื่องและชื่อเรื่องที่มีข้อความขนาดใหญ่ สามารถลดระยะห่างระหว่างบรรทัดได้ การตั้งค่าเช่น 1.1 หรือ 1.2 มักถูกใช้งาน

สรุป

  • line-height เป็นคุณสมบัติสำคัญสำหรับการปรับปรุงความสามารถในการอ่านและการออกแบบข้อความ
  • การใช้ค่าแบบสัมพัทธ์ (ตัวเลขหรือเปอร์เซ็นต์) ทำให้ง่ายต่อการปรับตัวในงานออกแบบที่ตอบสนอง
  • สำหรับหัวเรื่องที่มีข้อความขนาดใหญ่และย่อหน้าที่มีข้อความขนาดเล็ก เป็นสิ่งสำคัญในการตั้งค่าระยะห่างบรรทัดให้เหมาะสมในแต่ละส่วน

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

คุณสมบัติ letter-spacing 

 1/* Letter spacing examples */
 2.letter-spacing-normal {
 3    letter-spacing: normal; /* Default letter spacing */
 4}
 5
 6.letter-spacing-wide {
 7    letter-spacing: 4px; /* Increase letter spacing */
 8}
 9
10.letter-spacing-narrow {
11    letter-spacing: -1px; /* Decrease letter spacing */
12}

letter-spacing เป็นคุณสมบัติ CSS ที่ใช้ปรับระยะห่างระหว่างตัวอักษร (การเว้นระยะตัวอักษร) คุณสมบัตินี้สามารถใช้เพื่อจัดระเบียบการออกแบบข้อความ เพิ่มความสามารถในการอ่าน และสร้างสไตล์เฉพาะตัว

ในตัวอย่างนี้ มีการกำหนดดังนี้

  • normal: ระยะห่างระหว่างตัวอักษรเริ่มต้น เป็นค่ามาตรฐานที่ถูกกำหนดโดยเบราว์เซอร์และฟอนต์
  • 4px: ตัวอย่างของการขยายระยะห่างระหว่างตัวอักษร เพิ่มระยะห่าง 4 พิกเซลระหว่างตัวอักษรแต่ละตัว
  • -1px: ตัวอย่างของการลดระยะห่างระหว่างตัวอักษร ลดระยะห่าง 1 พิกเซลระหว่างตัวอักษรแต่ละตัว

วิธีการใช้ letter-spacing

ค่าพร้อมหน่วย 
1p.increased {
2    letter-spacing: 2px;  /* Increase letter spacing by 2px */
3}
4p.decreased {
5    letter-spacing: -1em;  /* Decrease letter spacing by 1em */
6}
  • การตั้งค่าด้วยค่าบวกจะเพิ่มระยะห่างระหว่างตัวอักษร
  • การตั้งค่าด้วยค่าลบจะลดระยะห่างระหว่างตัวอักษร
  • หน่วยมักจะเป็น px (พิกเซล) หรือ em
ค่าเริ่มต้น: normal 
1p {
2    letter-spacing: normal;  /* Default letter spacing */
3}
  • ใช้ระยะห่างระหว่างตัวอักษรที่ตั้งไว้เริ่มต้น โดยปกติ, จะใช้ระยะห่างระหว่างตัวอักษรที่กำหนดโดยฟอนต์

ตัวอย่างการใช้งาน letter-spacing

  • เพิ่มความสามารถในการอ่าน: สำหรับขนาดฟอนต์เล็กหรือฟอนต์ที่มีการบีบอัดมากเกินไป, คุณสามารถเพิ่มความสามารถในการอ่านด้วยการเพิ่มค่า letter-spacing
  • การปรับดีไซน์: คุณสามารถปรับระยะห่างระหว่างตัวอักษรเพื่อเน้นส่วนประกอบของดีไซน์ เช่น ชื่อเรื่องหรือล็อกโก้
  • การปรับระหว่างตัวอักษร: คุณสามารถปรับระยะห่างในระดับตัวอักษรแทนที่จะเป็นระยะห่างระหว่างคำ letter-spacing ปรับระยะห่างในระดับตัวอักษร, แต่ให้ใช้ word-spacing เพื่อขยายระยะห่างระหว่างคำ
  • สมดุลของดีไซน์: หากเพิ่มระยะห่างระหว่างตัวอักษรมากเกินไป ข้อความทั้งหมดอาจดูยืดยาวเกิน ในทางกลับกัน, หากลดมากเกินไป ข้อความอาจดูแออัดและอ่านยาก ดังนั้นการรักษาสมดุลที่เหมาะสมจึงสำคัญ

สรุป

  • letter-spacing เป็นคุณสมบัติที่ปรับระยะห่างระหว่างตัวอักษร ซึ่งมีผลต่อทั้งดีไซน์และความสามารถในการอ่าน
  • คุณสามารถเพิ่มระยะห่างด้วยค่าบวกและลดด้วยค่าลบ
  • มีประสิทธิภาพสำหรับชื่อเรื่องและส่วนประกอบดีไซน์เฉพาะ แต่ควรระวังอย่าทำให้ความสามารถในการอ่านลดลง

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

คุณสมบัติ word-spacing 

 1/* Word spacing examples */
 2.word-spacing-normal {
 3    word-spacing: normal; /* Default word spacing */
 4}
 5
 6.word-spacing-wide {
 7    word-spacing: 4px; /* Increase word spacing */
 8}
 9
10.word-spacing-narrow {
11    word-spacing: -1px; /* Decrease word spacing */
12}
13
14.word-and-letter-spacing {
15    word-spacing: -0.1em;
16    letter-spacing: -0.05em;
17}

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

ในตัวอย่างนี้ มีการกำหนดดังนี้

  • ปกติ: ใช้ช่องว่างระหว่างคำแบบค่าเริ่มต้น นี่คือค่าพื้นฐานของเบราว์เซอร์
  • 4px: ตัวอย่างการเพิ่มช่องว่างระหว่างคำ เพิ่มช่องว่าง 4 พิกเซลระหว่างแต่ละคำ
  • -1px: ตัวอย่างของการลดช่องว่างระหว่างคำ ลดช่องว่างระหว่างแต่ละคำลง 1 พิกเซล
  • การปรับระยะคำและตัวอักษร: ตัวอย่างของการลดช่องว่างระหว่างคำและตัวอักษร ลดช่องว่างระหว่างคำลง 0.1em และระหว่างตัวอักษรลง 0.05em เมื่อเทียบกับปกติ

การใช้ค่าเป็นบวกและลบ

การตั้งค่าค่าบวกให้กับ word-spacing จะเพิ่มช่องว่างระหว่างคำ ในทางกลับกัน การใช้ค่าลบจะทำให้ช่องว่างระหว่างคำแคบลง ค่าลบอาจถูกใช้เพื่อเน้นเอฟเฟกต์ภาพหรือเพิ่มความกระชับของช่องว่างตัวอักษรเพื่อจุดประสงค์การออกแบบเฉพาะ

ความแตกต่างกับ letter-spacing

word-spacing เป็นคุณสมบัติที่ปรับช่องว่างระหว่างคำ ในขณะที่ letter-spacing ปรับช่องว่างระหว่างตัวอักษร โดยการรวมคุณสมบัติเหล่านี้ คุณสามารถควบคุมการพิมพ์ข้อความทั้งหมดได้อย่างแม่นยำมากขึ้น

ข้อควรระวังและแนวปฏิบัติที่ดีที่สุด

  • การปรับช่องว่างมากเกินไป: การใช้ word-spacing มากจนเกินไปอาจลดความอ่านง่ายของข้อความ โดยเฉพาะช่องว่างที่ใหญ่หรือเล็กเกินไปนั้นอาจทำให้ผู้ใช้งานรู้สึกไม่สะดวก จึงทำให้การปรับแต่งอย่างพอดีเป็นสิ่งสำคัญ
  • การออกแบบที่ตอบสนองต่ออุปกรณ์: การกำหนดค่าที่สัมพันธ์ด้วย em หรือ rem มีประสิทธิภาพสำหรับการออกแบบที่ตอบสนอง เพราะช่วยให้การแสดงผลถูกต้องในขนาดหน้าจอต่างๆ
  • การปรับปรุงสไตล์หัวข้อ: การเพิ่มช่องว่างระหว่างคำในข้อความหัวข้อจะช่วยเพิ่มการเน้นที่เห็นได้ชัด สิ่งนี้ช่วยให้คุณชี้แจงลำดับชั้นของเนื้อหาและบรรลุการออกแบบที่ซับซ้อนและมีความหรูหรา

คุณสมบัติ word-break 

 1p.box {
 2    width: 200px;
 3    border: 1px solid #000;
 4    margin-bottom: 20px;
 5}
 6
 7.word-break-normal {
 8    word-break: normal;
 9}
10
11.word-break-break-all {
12    word-break: break-all;
13}
14
15.word-break-keep-all {
16    word-break: keep-all;
17}

word-break เป็นสมบัติ CSS ที่ควบคุมการแบ่งบรรทัดเมื่อข้อความเกินขนาดความกว้างของคอนเทนเนอร์ โดยปกติ เบราว์เซอร์จะแบ่งบรรทัดที่ขอบเขตของคำ แต่การตั้งค่าบางอย่างสามารถปรับปรุงรูปลักษณ์และความอ่านง่ายเมื่อมีคำที่ยาวหรือ URL รวมอยู่ด้วย

คุณสามารถระบุตัวเลือกต่อไปนี้สำหรับสมบัติ word-break

  • normal

    normal เป็นค่ามาตรฐานเริ่มต้น เมื่อคำเกินขนาดความกว้างของคอนเทนเนอร์ คำนั้นจะแบ่งที่ขอบเขตของคำ การตั้งค่านี้พบได้ทั่วไปในภาษาเช่นภาษาอังกฤษ และการแบ่งบรรทัดจะไม่เกิดขึ้นกลางคำ

  • break-all

    break-all เป็นการตั้งค่าที่สามารถแบ่งบรรทัดหลังตัวอักษรใดๆ ได้ตามความจำเป็น โดยเฉพาะอย่างยิ่งเมื่อมีคำยาวหรือ URL การแบ่งบรรทัดจะเกิดขึ้นที่ระดับตัวอักษรเพื่อป้องกันการเสียรูปของเลย์เอาต์

  • keep-all

    keep-all เป็นการตั้งค่าที่ใช้โดยเฉพาะสำหรับภาษาชาวเอเชีย (เช่น ญี่ปุ่น จีน เกาหลี ฯลฯ) ในการตั้งค่านี้ คำทั้งหมดจะถูกเก็บรักษาไว้ และจะไม่มีการแบ่งบรรทัดกลางคำ อย่างไรก็ตาม สำหรับภาษาที่มีการแบ่งด้วยช่องว่าง เช่น ภาษาอังกฤษ จะใช้การแบ่งบรรทัดตามขอบเขตของคำตามปกติ

ตัวอย่างนี้แสดงการตั้งค่า word-break ที่แตกต่างกันสามแบบ เมื่อใช้ word-break-normal คำทั้งหมดจะถูกเก็บรักษาไว้ และจะแบ่งที่ขอบเขตของคำหากเกินขนาดความกว้างของคอนเทนเนอร์ เมื่อใช้ word-break-break-all การแบ่งบรรทัดจะเกิดขึ้นแม้กลางคำ word-break-keep-all อนุญาตการแบ่งบรรทัดตามธรรมชาติสำหรับภาษาชาวเอเชีย เช่น ญี่ปุ่น และการแบ่งตามขอบเขตของคำสำหรับภาษาอังกฤษ

สถานการณ์การใช้งาน word-break

อุปกรณ์มือถือและการออกแบบที่ตอบสนอง 

1@media (max-width: 600px) {
2  p {
3    word-break: break-all;
4  }
5}

ในอุปกรณ์มือถือ ขอบเขตความกว้างของหน้าจอมีข้อจำกัด ซึ่งอาจทำให้ข้อความ รวมถึง URL หรือคำยาว เกินขนาดความกว้างของหน้าจอ ในกรณีเช่นนี้ การใช้ word-break: break-all; จะช่วยให้การแบ่งบรรทัดในระดับตัวอักษรพอดีกับขนาดหน้าจอ ซึ่งช่วยปรับปรุงความอ่านง่าย

คุณสมบัติ hyphens 

 1p.no-hyphens {
 2    width: 200px;
 3    hyphens: none;
 4}
 5
 6p.manual-hyphens {
 7    width: 200px;
 8    hyphens: manual;
 9}
10
11p.auto-hyphens {
12    width: 200px;
13    hyphens: auto;
14}

  • คุณสมบัติ hyphens ใช้ใน CSS เพื่อกำหนดการจัดการการตัดคำ (แยกคำด้วยเครื่องหมายขีด) เมื่อมีการแบ่งบรรทัดในข้อความ โดยการตั้งค่าคุณสมบัตินี้อย่างเหมาะสม คุณสามารถปรับปรุงการอ่านและลักษณะการแสดงผลของข้อความได้ การตัดคำมีประโยชน์อย่างยิ่งเมื่อมีคำยาว ๆ ที่ต้องถูกแบ่งบรรทัด

  • เนื่องจากกฎการตัดคำแตกต่างกันไปในแต่ละภาษา คุณสมบัตินี้จึงขึ้นอยู่กับพื้นที่ภาษาของข้อความ

ไวยากรณ์ 

1element {
2    hyphens: none | manual | auto;
3}

คุณสมบัติ hyphens สามารถตั้งค่าได้ดังนี้:

  • none: ไม่มีการตัดคำเกิดขึ้น ปกติแล้ว คำจะถูกแบ่งเฉพาะที่ปลายคำเท่านั้น
  • manual: การตัดคำถูกตั้งค่าด้วยตนเอง ในกรณีนี้ คุณต้องกำหนดจุดตัดคำด้วยตนเองภายใน HTML ตัวอย่างเช่น คุณสามารถใช้ &shy; (เครื่องหมายขีดนุ่ม)
  • auto: เบราว์เซอร์ตัดคำโดยอัตโนมัติในตำแหน่งที่เหมาะสม ในกรณีนี้ ต้องกำหนดภาษา (lang attribute) ของเอกสารให้ถูกต้อง

หมายเหตุ

  • ความสำคัญของการตั้งค่าภาษา: เมื่อใช้ hyphens: auto; จำเป็นต้องตั้งค่า lang attribute ของเอกสาร HTML ให้ถูกต้องเพื่อให้การตัดคำทำงานได้อย่างเหมาะสม
  • การพึ่งพาฟอนต์: ฟอนต์บางตัวอาจไม่เหมาะสมสำหรับการตัดคำ
  • การใช้พจนานุกรมการตัดคำ: กฎการตัดคำขึ้นอยู่กับพจนานุกรมที่เบราว์เซอร์ใช้งาน ดังนั้น อาจไม่ทำงานตามที่คาดหวังสำหรับบางภาษา

สรุป

โดยการใช้คุณสมบัติ hyphens อย่างเหมาะสม คุณสามารถปรับปรุงเลย์เอาต์ข้อความได้อย่างมีนัยสำคัญ โดยเฉพาะอย่างยิ่งสำหรับเว็บไซต์หลายภาษาและการออกแบบที่เหมาะกับอุปกรณ์พกพา การใช้ auto และ manual อย่างเหมาะสมสามารถเพิ่มประสบการณ์ผู้ใช้งานได้

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

YouTube Video

คุณสมบัติ CSS ที่เกี่ยวข้องกับข้อความคุณสมบัติ CSS สำหรับการแสดงโค้ดและคำอ้างอิง