home

หน้าแรก
 Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

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

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

นั่นคือที่มาของคุณสมบัติ CSS text-decoration คุณสมบัติ text-decoration ช่วยให้คุณเพิ่มขีดเส้นใต้ ขีดทับ และบรรทัดที่ปรากฏผ่านบล็อกข้อความได้

กวดวิชานี้จะอภิปรายพร้อมตัวอย่าง วิธีใช้คุณสมบัติ text-decoration และคุณสมบัติย่อยสามคุณสมบัติ เพื่อเพิ่มการตกแต่งให้กับกลุ่มข้อความใน CSS เมื่ออ่านบทช่วยสอนนี้จบ คุณจะเป็นผู้เชี่ยวชาญในการตกแต่งข้อความโดยใช้คุณสมบัติการตกแต่งข้อความ

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

การตกแต่งข้อความโดยการเพิ่มการขีดเส้นใต้ บรรทัดที่ปรากฏผ่านข้อความ และการขีดเส้นใต้ เป็นวิธีสำคัญที่คุณจะสามารถดึงความสนใจไปที่เนื้อหาหลักบนหน้าเว็บได้

เมื่อข้อความถูกขีดเส้นใต้ แสดงว่าผู้ใช้ทราบว่าสิ่งที่ขีดเส้นใต้นั้นควรค่าแก่การอ่าน เป็นต้น นอกจากนี้ การตกแต่งข้อความเป็นส่วนสำคัญของการออกแบบประสบการณ์ที่เข้าถึงได้บนหน้าเว็บ

ทั้งนี้เนื่องจากผู้ใช้ทุกคนไม่สามารถเข้าถึงได้โดยอาศัยตัวบ่งชี้ที่มองเห็นได้ เช่น สีเพียงอย่างเดียว เช่น ผู้ที่ตาบอดสีหรือมีความบกพร่องทางสายตาที่คล้ายคลึงกัน การเพิ่มขีดเส้นใต้ ขีดทับ หรือขีดเส้นใต้จะทำให้ผู้ใช้มีโอกาสสังเกตมากขึ้นว่ามีการเน้นข้อความบางส่วน

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

  • text-decoration-line (จำเป็น)
  • text-decoration-color (ไม่จำเป็น)
  • text-decoration-style (ไม่จำเป็น)

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

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

text-decoration: line color style;

ไม่มีลำดับเฉพาะที่ลักษณะของคุณสมบัติการตกแต่งข้อความควรปรากฏ

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

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

ร้านเบเกอรี่ในท้องถิ่นที่เรากำลังพัฒนาไซต์ขอให้เราเน้นชื่อในแต่ละหน้า

ตัวอย่างเช่น ใน About หน้าชื่อเรื่อง About Us ควรมีขีดเส้นใต้เพื่อดึงดูดความสนใจของผู้ใช้ไปที่ชื่อ แต่ละชื่อควรมีเส้นใต้สีน้ำเงินอ่อน และแต่ละบรรทัดควรมีความกว้าง 2px เราสามารถสร้างชื่อดังกล่าวโดยใช้รหัสต่อไปนี้:

<html>

<h1>About Us</h1>

<style>

h1 {
	text-decoration: lightblue solid underline;
}

การตกแต่งข้อความ CSS ปุ่มในตัวแก้ไขโค้ดด้านบนเพื่อดูผลลัพธ์ของโค้ด HTML/CSS

ในโค้ด HTML ของเรา เราได้กำหนดส่วนหัวโดยใช้แท็ก

ซึ่งแสดงข้อความ About Us บนหน้าเว็บ จากนั้น ในโค้ด CSS ของเรา เราได้สร้างกฎที่ใช้กับองค์ประกอบ

ทั้งหมดบนหน้าเว็บของเรา กฎนี้ใช้คุณสมบัติการตกแต่งข้อความเพื่อสร้างการขีดเส้นใต้ว่า:

  • ปรากฏเป็นสีฟ้าอ่อน (แสดงด้วย lightblue )
  • มีบรรทัดเดียว (แสดงด้วย solid )
  • ใช้รูปแบบการขีดเส้นใต้ (แสดงโดย underline )

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

เส้นตกแต่งข้อความ (text-decoration-line)

คุณสมบัติ text-decoration-line ช่วยให้คุณกำหนดประเภทของเส้นที่จะให้ปรากฏบนข้อความที่คุณสมบัติถูกนำไปใช้ ค่าที่คุณสมบัตินี้ยอมรับคือ:

  • ขีดเส้นใต้:สร้างบรรทัดที่ปรากฏใต้กลุ่มข้อความ
  • overline:สร้างบรรทัดที่ปรากฏเหนือกลุ่มข้อความ
  • line-through:สร้างเส้นขีดทับที่ปรากฏตรงกลางบล็อกข้อความ
  • กะพริบ:ทำให้ข้อความที่ใช้รูปแบบนั้นกะพริบ (เลิกใช้รูปแบบนี้แล้ว)

หากใช้คุณสมบัตินี้โดยไม่มีการตกแต่งข้อความอื่นใด ขีดเส้นใต้สีดำทึบเดี่ยวจะปรากฏขึ้น

กลับไปที่ตัวอย่างเบเกอรี่เพื่อแสดงให้เห็นว่าคุณสมบัตินี้ทำงานอย่างไร สมมติว่าร้านเบเกอรี่ที่เรียกว่า Family Bakery ของเจฟเฟอร์สันขอให้เราจัดรูปแบบข้อความในAbout Us หน้าหนังสือ. พวกเขาขอให้เราขีดเส้นใต้บางส่วนของข้อความของพวกเขา

เราสามารถใช้คุณสมบัติ text-decoration-line เพื่อทำงานนี้ให้สำเร็จ นี่คือรหัสที่เราจะใช้:

<html>

<p>The Jefferson's Family Bakery, founded in 1899, is a family bakery that serves delicious baked goods to the people of Seattle, Washington. Our bakery is <span class="underline">most well-known for our bagels</span>, which have been reviewed highly by a number of local publications since we started selling them in 1950.

Today, Jeffersons employs ten people who work tirelessly to make the breads, rolls, and assorted baked goods enjoyed by our customers. If you're in the mood for a good bagel, bread, or baked cake, <span class="underline">come to Jeffersons</span>!</p>

<style>

.underline {
	text-decoration-line: underline;
}

การตกแต่งข้อความ CSS ปุ่มในตัวแก้ไขโค้ดด้านบนเพื่อดูผลลัพธ์ของโค้ด HTML/CSS

มาทำลายรหัสของเรากัน ในโค้ด HTML ของเรา เราได้สร้างย่อหน้าของข้อความที่อยู่ภายในแท็ก


ภายในย่อหน้านี้คือคำอธิบายของร้านเบเกอรี่สำหรับครอบครัวของเจฟเฟอร์สัน นอกจากนี้ คำศัพท์สองคำ —most well-known for our bagels และ come to Jeffersons —ถูกปิดอยู่ภายในแท็ก ซึ่งใช้เพื่อแยกข้อความที่อยู่ภายในออกจากส่วนที่เหลือของย่อหน้า

ในโค้ด CSS ของเรา เรากำหนดกฎที่ใช้กับองค์ประกอบทั้งหมดที่มีคลาส underline . ดังนั้น ในกรณีของเรา แท็ก ทั้งหมดของเราจะใช้รูปแบบที่เรากำหนดไว้ เนื่องจากแท็ก แต่ละแท็กถูกกำหนดให้กับ underline ของคลาสด้วย . กฎที่เรากำหนดใช้ text-decoration-line เพื่อเพิ่มขีดเส้นใต้สีดำให้กับข้อความที่เราต้องการเน้น

สีตกแต่งข้อความ (text-decoration-color)

คุณสมบัติ text-decoration-color อนุญาตให้คุณกำหนดสีของการตกแต่งข้อความที่ใช้กับสไตล์ สมมติว่าเราต้องการทำให้ขีดเส้นใต้ที่เรากำหนดในตัวอย่างสุดท้ายปรากฏเป็นสีเขียว เราสามารถทำให้สิ่งนี้เกิดขึ้นได้โดยใช้รูปแบบต่อไปนี้:

<html>

<p>The Jefferson's Family Bakery, founded in 1899, is a family bakery that serves delicious baked goods to the people of Seattle, Washington. Our bakery is <span class="underline">most well-known for our bagels</span>, which have been reviewed highly by a number of local publications since we started selling them in 1950.

Today, Jeffersons employs ten people who work tirelessly to make the breads, rolls, and assorted baked goods enjoyed by our customers. If you're in the mood for a good bagel, bread, or baked cake, <span class="underline">come to Jeffersons</span>!</p>

<style>

.underline {
	text-decoration-line: underline;
	text-decoration-color: green;
}

การตกแต่งข้อความ CSS ปุ่มในตัวแก้ไขโค้ดด้านบนเพื่อดูผลลัพธ์ของโค้ด HTML/CSS

ในโค้ด CSS ของเรา เราได้เพิ่มกฎสไตล์ text-decoration-color ซึ่งมีค่า green . สิ่งนี้กำหนดสีของขีดเส้นใต้ที่เรากำหนดโดยใช้ text-decoration-line เป็นสีเขียว

นอกจากนี้เรายังระบุค่าสำหรับ text-decoration-line ซึ่งจำเป็นสำหรับการสร้างสไตล์เส้นของเรา

รูปแบบการตกแต่งข้อความ (รูปแบบการตกแต่งข้อความ)

คุณสมบัติ text-decoration-style ช่วยให้คุณสามารถกำหนดลักษณะที่การตกแต่งข้อความจะปรากฏในกลุ่มข้อความ คุณสมบัติ text-decoration-style ยอมรับค่าใดค่าหนึ่งต่อไปนี้:

  • ทึบ:สร้างบรรทัดเดียว
  • คู่:สร้างเส้นคู่
  • ประ:สร้างเส้นประ
  • จุด:สร้างเส้นประ
  • หยัก:สร้างเส้นหยัก

กลับมาที่ตัวอย่างเบเกอรี่กัน สมมติว่าร้านเบเกอรี่ขอให้เราเพิ่มขีดเส้นใต้ในหัวข้อ About the Jeffersons ใน About Us หน้าหนังสือ. ขีดเส้นใต้นี้ควรปรากฏเป็นสีน้ำเงินอ่อน และควรใช้รูปแบบจุด เราสามารถสร้างขีดเส้นใต้นี้โดยใช้รหัสต่อไปนี้:

<html>

<h2>About the Jeffersons</h2>

<style>

h2 {
	text-decoration-line: underline;
	text-decoration-color: lightblue;
	text-decoration-style: dotted;
}

การตกแต่งข้อความ CSS ปุ่มในตัวแก้ไขโค้ดด้านบนเพื่อดูผลลัพธ์ของโค้ด HTML/CSS

ในโค้ดของเรา เราใช้สไตล์ text-decoration-line และ text-decoration-color เพื่อกำหนดขีดเส้นใต้และตั้งค่าสีของขีดเส้นใต้เป็นสีน้ำเงินอ่อนตามลำดับ จากนั้น เราใช้คุณสมบัติ text-decoration-style เพื่อกำหนดรูปแบบการขีดเส้นใต้เป็นจุด

การลบขีดเส้นใต้จากไฮเปอร์ลิงก์

คุณสมบัติการตกแต่งข้อความมักใช้เพื่อลบขีดเส้นใต้ที่ปรากฏในลิงก์ HTML แบบเดิม เนื่องจากคุณสมบัติการตกแต่งข้อความยอมรับค่า none ซึ่งใช้เพื่อลบรูปแบบข้อความเริ่มต้นที่ใช้กับองค์ประกอบ

ตามค่าเริ่มต้น เมื่อคุณกำหนดลิงก์โดยใช้แท็ก ขีดเส้นใต้จะปรากฏขึ้น อย่างไรก็ตาม ไม่ใช่ทุกเว็บไซต์ที่ต้องการแสดงขีดเส้นใต้ใต้ลิงก์

สมมติว่าเว็บไซต์ Family Bakery ของ Jefferson มีไฮเปอร์ลิงก์ที่มีป้ายกำกับว่า Contact Us ซึ่งเชื่อมโยงไปยังหน้า /contact.html บนเว็บไซต์ของพวกเขา นี่คือรหัส HTML สำหรับไฮเปอร์ลิงก์:

<a href="/contact.html">Contact Us</a>

เมื่อเราแสดงองค์ประกอบนี้ การตอบสนองต่อไปนี้จะถูกส่งกลับ:การตกแต่งข้อความ CSS ปุ่มในตัวแก้ไขโค้ดด้านบนเพื่อดูผลลัพธ์ของโค้ด HTML/CSS

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

<html>

<a href="/contact.html">Contact Us</a>

<style>

a {
	text-decoration: none;
}

การตกแต่งข้อความ CSS ปุ่มในตัวแก้ไขโค้ดด้านบนเพื่อดูผลลัพธ์ของโค้ด HTML/CSS

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

บทสรุป

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

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

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