คอร์ส IT พื้นฐาน CSS 022_ข้อความ, แบบอักษร, ลิงก์

ข้อความ

การควบคุมข้อความ CSS ช่วยให้เราแสดงข้อมูลข้อความบนหน้าเว็บได้ดีขึ้นและปรับปรุงเอฟเฟกต์ภาพ

การย่อหน้า

ใช้สำหรับตั้งค่าการย่อหน้าบรรทัดแรกของข้อความ เหมาะสำหรับการย่อหน้าย่อหน้า หลีกเลี่ยงการใช้กับอิลิเมนต์อินไลน์ คุณสมบัตินี้รับค่าสัมบูรณ์หรือสัมพัทธ์ หน่วยสัมบูรณ์ได้แก่ พิกเซล (px), นิ้ว (in), เซนติเมตร (cm), มิลลิเมตร (mm) เป็นต้น หน่วยสัมพัทธ์ได้แก่ em, rem, vw, vh เป็นต้น

ตัวอย่าง:

1
p {
2
  text-indent: 2em;
3
}

เอฟเฟกต์:

โหมดการเขียน

โหมดการเขียนใน CSS หมายถึงทิศทางการจัดเรียงข้อความ รวมถึงโหมดแนวนอน แนวตั้ง และแบบผสม จริงๆ แล้วเป็นการตั้งค่าทิศทางการแสดงผลของอิลิเมนต์ระดับบล็อกบนหน้า — จากบนลงล่าง จากขวาไปซ้าย หรือจากซ้ายไปขวา ซึ่งกำหนดทิศทางของข้อความ

• horizontal-tb: การไหลของบล็อกจากบนลงล่าง ทิศทางข้อความที่สอดคล้องคือแนวนอน
• vertical-rl: การไหลของบล็อกจากขวาไปซ้าย ทิศทางข้อความที่สอดคล้องคือแนวตั้ง
• vertical-lr: การไหลของบล็อกจากซ้ายไปขวา ทิศทางข้อความที่สอดคล้องคือแนวตั้ง

ตัวอย่าง:

1
body {
2
  writing-mode: vertical-rl;
3
}

เอฟเฟกต์: เมื่อเราสลับโหมดการเขียน เราก็เปลี่ยนทิศทางบล็อกและข้อความอินไลน์ด้วย ในโหมดการเขียน horizontal-tb ทิศทางบล็อกคือแนวนอนจากบนลงล่าง ขณะที่ในโหมด vertical-rl ทิศทางบล็อกคือแนวตั้งจากขวาไปซ้าย มิติบล็อกหมายถึงทิศทางการแสดงผลของบล็อกในโหมดการเขียนของหน้าเสมอ มิติอินไลน์หมายถึงทิศทางข้อความเสมอ

ภาพนี้แสดงสองมิติในโหมดการเขียนแนวนอน

ภาพนี้แสดงสองมิติในโหมดการเขียนแนวตั้ง

ทิศทางข้อความ

ใช้คุณสมบัติ direction เพื่อตั้งค่าทิศทางการอ่านข้อความ: จากซ้ายไปขวา (ltr) หรือจากขวาไปซ้าย (rtl) เหมาะสำหรับเว็บไซต์หลายภาษา กำหนดทิศทางการอ่านตามภาษาของข้อความ บางภาษา (เช่น อาหรับ) เขียนแนวนอนแต่จากขวาไปซ้าย

ตัวอย่าง:

1
html {
2
  direction: rtl;
3
}

เอฟเฟกต์:

การตกแต่งข้อความ

ใช้คุณสมบัติ text-decoration เพื่อตั้งค่าเอฟเฟกต์ตกแต่งเส้นของข้อความ

• none: ไม่มีเส้น
• overline: เส้นบน
• underline: ขีดเส้นใต้
• line-through: ขีดทับ

ตัวอย่าง:

1
<p style="text-decoration: none;">ไม่มีเส้นตกแต่งข้อความ</p>
2
<p style="text-decoration: overline;">ฉันมีเส้นบน</p>
3
<p style="text-decoration: underline;">ฉันมีขีดเส้นใต้</p>
4
<p style="text-decoration: line-through;">ฉันมีขีดทับ</p>

เอฟเฟกต์:

การจัดตำแหน่งข้อความ

ตั้งค่าการจัดตำแหน่งแนวนอนของข้อความ

• left: ข้อความจัดชิดซ้าย ค่าเริ่มต้นในภาษาส่วนใหญ่
• center: ข้อความจัดกึ่งกลางแนวนอน
• right: ข้อความจัดชิดขวา
• justify: ข้อความจัดชิดทั้งสองด้าน เติมช่องว่างเพิ่มเติมในแต่ละบรรทัด เนื่องจากการจัดเรียงข้อความและความกว้างของคอนเทนเนอร์ (ข้อความสั้น ขาดช่องว่าง บรรทัดน้อยเกินไป ภาษาเดียว) ในบางกรณีเอฟเฟกต์จัดชิดทั้งสองด้านอาจไม่เห็นได้ชัด
• justify-all (ไม่ค่อยใช้): คล้ายกับ justify แต่กระจายช่องว่างเพิ่มเติมอย่างสม่ำเสมอที่ต้นและท้ายบรรทัด
• start: ตามทิศทางข้อความของเบราว์เซอร์ ข้อความจัดตำแหน่งที่จุดเริ่มต้น (โดยปกติคือซ้าย)
• end: ตามทิศทางข้อความของเบราว์เซอร์ ข้อความจัดตำแหน่งที่จุดสิ้นสุด (โดยปกติคือขวา)

ตัวอย่าง:

1
<p style="text-align: left;">ข้อความนี้จัดชิดซ้าย</p>
2
<p style="text-align: right;">ข้อความนี้จัดชิดขวา</p>
3
<p style="text-align: center;">ข้อความนี้จัดกึ่งกลาง</p>

เอฟเฟกต์:

ความสูงบรรทัด

ใช้คุณสมบัติ line-height เพื่อตั้งค่าความสูงระหว่างบรรทัดข้อความ การปรับความสูงบรรทัดตามขนาดแบบอักษรและข้อกำหนดการออกแบบสามารถปรับปรุงความสามารถในการอ่านได้

ตัวอย่าง:

1
<p>นี่คือความสูงบรรทัดปกติ <br>นี่คือความสูงบรรทัดปกติ</p>
2
<p style="line-height: 3;">ดูความสูงบรรทัดของข้อความนี้ <br>ดูความสูงบรรทัดของข้อความนี้</p>

เอฟเฟกต์:

ระยะห่าง

ตั้งค่าระยะห่างระหว่างเนื้อหาข้อความ

• letter-spacing ตั้งค่าระยะห่างระหว่างตัวอักษร อักขระจีน และตัวเลข
• word-spacing ตั้งค่าระยะห่างระหว่างคำ (อักขระทั้งสองด้านของช่องว่าง)

ตัวอย่าง:

1
<p style="letter-spacing: 10px;">ดูระยะห่างข้อความของฉัน CSS</p>
2
<p style="word-spacing: 10px;">ดู ระยะห่างข้อความของฉัน CSS 123</p>

เอฟเฟกต์:

การตัดบรรทัด

ควบคุมวิธีการตัดบรรทัดของข้อความ

word-wrap: ควบคุมการตัดบรรทัดของคำยาวหรือ URL เป็นหลัก เหมาะสำหรับสถานการณ์ภาษาอังกฤษมากกว่า

• normal (ค่าเริ่มต้น): ตามกฎการตัดบรรทัดปกติ ไม่อนุญาตให้ตัดภายในคำ
• break-word: อนุญาตให้ตัดภายในคำ สามารถบังคับตัดบรรทัดคำยาวหรือ URL ได้

ตัวอย่าง:

1
.base{
2
    background: #d7d8d9;
3
    width: 60px;
4
}
5
.example1{
6
    word-wrap: normal;
7
}
8
.example2{
9
    word-wrap: break-word;
10
}

1
    <p class="base example1">ดู ฉัน    ตัดบรรทัดยังไง HelloCSS Hello-CSS</p>
2
    <p class="base example2">ดู ฉัน    ตัดบรรทัดยังไง HelloCSS Hello-CSS</p>

เอฟเฟกต์:

white-space: ควบคุมการจัดการอักขระช่องว่างภายในอิลิเมนต์ รวมถึงช่องว่าง อักขระขึ้นบรรทัดใหม่ เป็นต้น

• normal (ค่าเริ่มต้น): จัดการอักขระช่องว่างตามปกติ รวมช่องว่างต่อเนื่องและตัดบรรทัดตามอักขระขึ้นบรรทัดใหม่
• nowrap: ไม่อนุญาตให้ตัดบรรทัดข้อความ ละเว้นอักขระขึ้นบรรทัดใหม่
• pre: คงอักขระช่องว่างไว้ ไม่รวมช่องว่างต่อเนื่อง ข้อความแสดงตามรูปแบบซอร์สโค้ด
• pre-line: คงอักขระขึ้นบรรทัดใหม่ไว้ รวมช่องว่างต่อเนื่อง ช่องว่างอื่นจัดการตามปกติ
• pre-wrap: คงอักขระช่องว่างไว้ รวมช่องว่างต่อเนื่อง คงอักขระขึ้นบรรทัดใหม่ไว้

ตัวอย่าง:

1
.base{
2
    background: #d7d8d9;
3
    width: 60px;
4
}
5
.example1{
6
    white-space: normal;
7
}
8
.example2{
9
    white-space: nowrap;
10
}
11
.example3{
12
    white-space: pre;
13
}

1
    <p class="base example1">ดู ฉัน    ตัดบรรทัดยังไง HelloCSS Hello-CSS</p>
2
    <p class="base example2">ดู ฉัน    ตัดบรรทัดยังไง HelloCSS Hello-CSS</p>
3
    <p class="base example3">ดู ฉัน    ตัดบรรทัดยังไง HelloCSS Hello-CSS</p>

เอฟเฟกต์:

เงา

สามารถเพิ่มเอฟเฟกต์เงาหนึ่งหรือหลายอัน (คั่นด้วยจุลภาค) ให้กับข้อความเพื่อเพิ่มความสามารถในการอ่านหรือสร้างเอฟเฟกต์การออกแบบที่เป็นเอกลักษณ์

• h-shadow: ตำแหน่งเงาแนวนอน ค่าบวก (เลื่อนไปขวา) หรือค่าลบ (เลื่อนไปซ้าย)
• v-shadow: ตำแหน่งเงาแนวตั้ง ค่าบวก (เลื่อนลง) หรือค่าลบ (เลื่อนขึ้น)
• blur: ไม่บังคับ แสดงระดับความเบลอของเงา ค่ายิ่งมากยิ่งเบลอ สามารถละเว้นได้
• color: สีของเงา สามารถเป็นค่าสีเฉพาะ คีย์เวิร์ด หรือค่า RGBA

ตัวอย่าง:

1
<p style="text-shadow: 2px 2px black;">ดูเงาของฉัน</p>
2
<p style="text-shadow: 1px 1px 1px red;">ดูเงาของฉัน</p>
3
<p style="text-shadow: 3px 3px 5px darkgrey;">ดูเงาของฉัน</p>
4
<p style="text-shadow: 2px 2px 2px black, -2px -2px 2px white;">ดูเงาของฉัน</p>

เอฟเฟกต์:

การแปลง

ควบคุมเอฟเฟกต์การแปลงตัวพิมพ์ใหญ่-เล็กของข้อความ

• none: ค่าเริ่มต้น คงตัวพิมพ์ใหญ่-เล็กเดิม
• capitalize: แปลงตัวอักษรแรกของแต่ละคำเป็นตัวพิมพ์ใหญ่
• uppercase: แปลงข้อความทั้งหมดเป็นตัวพิมพ์ใหญ่
• lowercase: แปลงข้อความทั้งหมดเป็นตัวพิมพ์เล็ก

ตัวอย่าง:

1
<p style="text-transform: none;">ดูฉันแปลงยังไง hello CSS</p>
2
<p style="text-transform: capitalize;">ดูฉันแปลงยังไง hello CSS</p>
3
<p style="text-transform: uppercase;">ดูฉันแปลงยังไง hello CSS</p>
4
<p style="text-transform: lowercase;">ดูฉันแปลงยังไง hello CSS</p>

เอฟเฟกต์:

การล้นของข้อความ

ใน CSS สามารถใช้คุณสมบัติ overflow เพื่อจัดการการล้นของข้อความ

• visible: ข้อความไม่ล้น แสดงผลครบถ้วน
• hidden: เมื่อข้อความล้น จะถูกซ่อน
• scroll: เมื่อข้อความล้น จะแสดงแถบเลื่อนให้ผู้ใช้เลื่อนดูเนื้อหาทั้งหมด
• auto: เมื่อข้อความล้น จะตัดสินใจตามความกว้างและความสูงของอิลิเมนต์ว่าจะแสดงแถบเลื่อนหรือไม่

ตัวอย่าง:

1
.base{
2
    white-space: nowrap;
3
    background: #d7d8d9;
4
    width: 120px;
5
}
6
.example1{
7
    overflow: visible;
8
}
9
.example2{
10
    overflow: hidden;
11
}
12
.example3{
13
    overflow: scroll;
14
}
15
.example4{
16
    overflow: auto;
17
}

1
    <p class="base example1">ดูว่าเนื้อหาข้อความของฉันล้นหรือไม่</p>
2
    <p class="base example2">ดูว่าเนื้อหาข้อความของฉันล้นหรือไม่</p>
3
    <p class="base example3">ดูว่าเนื้อหาข้อความของฉันล้นหรือไม่</p>
4
    <p class="base example4">ดูว่าเนื้อหาข้อความของฉันล้นหรือไม่</p>

เอฟเฟกต์:

แบบอักษร

วิธีการควบคุมและกำหนดแบบอักษรเป็นส่วนสำคัญของการออกแบบเว็บ

ตระกูลแบบอักษร

กำหนดแบบอักษรด้วยคุณสมบัติ font-family สามารถระบุแบบอักษรหนึ่งตัว แนะนำให้ระบุแบบอักษรสำรองหลายตัว เบราว์เซอร์จะลองแบบอักษรเหล่านี้ตามลำดับความสำคัญจนกว่าจะพบแบบอักษรที่เหมาะสม หากชื่อแบบอักษรมีช่องว่าง อักขระพิเศษ หรืออักขระจีน แนะนำให้ใส่เครื่องหมายคำพูด สามารถใช้บริการแบบอักษรเว็บได้ ระวังลิขสิทธิ์แบบอักษร

ตัวอย่าง:

1
<p style="font-family: Arial, sans-serif;">hello CSS hello CSS</p>
2
<p style="font-family: Gabriola; ">hello CSS hello CSS</p>

เอฟเฟกต์:

ขนาด

ขนาดแบบอักษรใน CSS สามารถตั้งค่าด้วยคุณสมบัติ font-size ใช้สำหรับตั้งค่าขนาดแบบอักษรของข้อความ ขนาดแบบอักษรสามารถระบุด้วยค่าสัมบูรณ์หรือสัมพัทธ์ เมื่อใช้ค่าสัมบูรณ์ ขนาดแบบอักษรจะคงที่และไม่เปลี่ยนแปลงตามความละเอียดหน้าจอ หน่วยสัมบูรณ์ได้แก่: พิกเซล (px), นิ้ว (in), เซนติเมตร (cm), มิลลิเมตร (mm) เป็นต้น เมื่อใช้ค่าสัมพัทธ์ ขนาดแบบอักษรจะสัมพัทธ์กับขนาดแบบอักษรของอิลิเมนต์แม่ หน่วยสัมพัทธ์ได้แก่: em, rem, vw, vh เป็นต้น การใช้คีย์เวิร์ดเพื่อระบุขนาดแบบอักษรสามารถปรับปรุงความสามารถในการอ่านและความสอดคล้อง คีย์เวิร์ดได้แก่: xx-small, x-small, small, medium, large, x-large, xx-large

ตัวอย่าง:

1
body {
2
  font-size: 16px;
3
}

การออกแบบแบบตอบสนอง:

• ขนาดแบบอักษรในการออกแบบแบบตอบสนองควรเป็นค่าสัมพัทธ์เพื่อให้แน่ใจว่ามีประสบการณ์การอ่านที่ดีบนหน้าจอและอุปกรณ์ต่างๆ

การเข้าถึง:

• ตรวจสอบให้แน่ใจว่าขนาดแบบอักษรใหญ่พอที่จะตรงตามมาตรฐานการเข้าถึง แนะนำให้ใช้อย่างน้อย 16px สำหรับข้อความเนื้อหา

การเลือกหน่วยแบบอักษร:

• การใช้หน่วยสัมพัทธ์ (em, rem, %) ปรับตัวได้ดีกว่ากับการตั้งค่าขนาดแบบอักษรของผู้ใช้ในเบราว์เซอร์ เพิ่มการเข้าถึงเว็บไซต์

การตั้งค่าความสูงบรรทัด:

• ตั้งค่าความสูงบรรทัดตามขนาดแบบอักษรเพื่อปรับปรุงความสามารถในการอ่าน โดยทั่วไปความสูงบรรทัดสามารถตั้งค่าเป็น 1.4 ถึง 1.6 เท่าของขนาดแบบอักษร

ความหนา

ความหนาแบบอักษรใน CSS สามารถตั้งค่าด้วยคุณสมบัติ font-weight

• normal: ความหนาแบบอักษรเริ่มต้น
• bold: แบบอักษรหนา
• bolder: หนากว่าอิลิเมนต์แม่
• lighter: บางกว่าอิลิเมนต์แม่
• ค่าตัวเลข: ตั้งค่าความหนาแบบอักษรด้วยค่าตัวเลข โดยปกติตั้งแต่ 100 ถึง 900

ตัวอย่าง:

1
<div style="font-weight: normal;">ความหนาแบบอักษรเริ่มต้น</div>
2

3
<div style="font-weight: bold;">
4
    แบบอักษรหนา
5
    <div style="font-weight: bolder;">หนากว่าอิลิเมนต์แม่</div>
6
</div>
7

8
<div style="font-weight: 700;">
9
    แบบอักษรหนาด้วยค่าตัวเลข
10
    <div style="font-weight: lighter;">บางกว่าอิลิเมนต์แม่</div>
11
</div>

เอฟเฟกต์:

สไตล์

สไตล์แบบอักษรใน CSS สามารถตั้งค่าด้วยคุณสมบัติ font-style

• normal: สไตล์แบบอักษรเริ่มต้น
• italic: สไตล์ตัวเอียง ใช้เอฟเฟกต์ตัวเอียงที่ออกแบบเฉพาะในไฟล์แบบอักษร
• oblique: สไตล์เอียง คล้ายตัวเอียง หากไฟล์แบบอักษรไม่มีการออกแบบตัวเอียงเฉพาะ จะบังคับให้แบบอักษรปกติเอียง

ตัวอย่าง:

1
<div style="font-style: normal;">สไตล์แบบอักษรเริ่มต้น 123 ABC</div>
2
<div style="font-style: italic;">สไตล์ตัวเอียง 123 ABC</div>
3
<div style="font-style: oblique;">สไตล์เอียง 123 ABC</div>

เอฟเฟกต์:

สี

สีแบบอักษรใน CSS สามารถตั้งค่าด้วยคุณสมบัติ color

• ชื่อสีที่กำหนดไว้ล่วงหน้า: เช่น red, green, blue เป็นต้น
• ค่าสีเลขฐานสิบหก: เช่น #FF0000, #00FF00, #0000FF เป็นต้น
• ค่าสี RGB, RGBA: เช่น rgb(255, 0, 0), rgba(0, 255, 0, 0.5) เป็นต้น
• ค่าสี HSL, HSLA: เช่น hsl(0, 100%, 50%), hsla(120, 100%, 50%, 0.7) เป็นต้น

ตัวอย่าง:

1
<div style="color: blue;">สีแบบอักษร</div>
2
<div style="color: #ff6a00;">สีแบบอักษร</div>
3
<div style="color: rgba(0, 128, 0);">สีแบบอักษร</div>
4
<div style="color: rgba(0, 128, 0, 0.5);">สีแบบอักษร</div>
5
<div style="color: hsla(0, 100%, 50%);">สีแบบอักษร</div>
6
<div style="color: hsla(0, 100%, 50%, 0.7);">สีแบบอักษร</div>
7
<div style="color: transparent;">สีแบบอักษร</div>

เอฟเฟกต์:

ลิงก์

ใน CSS สามารถใช้คุณสมบัติ color เพื่อตั้งค่าสีแบบอักษรของลิงก์ (ไฮเปอร์ลิงก์)

ตั้งค่าสีลิงก์

• a - ตั้งค่าสีลิงก์ทั่วไป
• a:link - ปกติ ลิงก์ที่ยังไม่ได้เยี่ยมชม
• a:visited - ลิงก์ที่ผู้ใช้เยี่ยมชมแล้ว
• a:hover - เมื่อผู้ใช้วางเมาส์บนลิงก์
• a:active - ขณะที่ลิงก์ถูกคลิก

ตัวอย่าง:

1
/* ลิงก์ทั่วไป */
2
a {
3
  color: #3498db; /* สีน้ำเงิน */
4
}
5

6
/* ลิงก์ที่ยังไม่ได้เยี่ยมชม */
7
a:link {
8
    color: #3498db; /* สีน้ำเงิน */
9
}
10

11
/* ลิงก์ที่เยี่ยมชมแล้ว */
12
a:visited {
13
    color: #884dff; /* สีม่วง */
14
}
15

16
/* ลิงก์เมื่อวางเมาส์ */
17
a:hover {
18
    color: #ff6600; /* สีส้ม */
19
}
20

21
/* สีลิงก์เมื่อคลิก */
22
a:active {
23
    color: #ff0000; /* สีแดง */
24
}

ตั้งค่าขีดเส้นใต้ลิงก์

ตัวอย่าง:

1
a {
2
    text-decoration: none; /* ลบขีดเส้นใต้ */
3
}
4

5
a:hover {
6
    text-decoration: underline; /* แสดงขีดเส้นใต้เมื่อวางเมาส์ */
7
}