การขีดเส้นใต้เอกสารหรือข้อความถือเป็นเรื่องง่ายเสมอ แต่ถ้าเราพิจารณากรณีของเว็บไซต์มันง่ายหรือยัง? พวกเราส่วนใหญ่จะตอบว่าใช่ แต่การสร้างเส้นแนวนอนรวมถึงการออกแบบที่กำหนดเองทำให้งานง่ายๆนี้น่าเบื่อ เริ่มต้น Journey of Text Decoration โดยใช้ CSS ในลักษณะต่อไปนี้:
- Text Decoration คืออะไร?
- ประเภทของการตกแต่งข้อความใน CSS
- การตกแต่งข้อความโดยใช้ CSS: Code
- การตกแต่งข้อความข้าม
Text Decoration คืออะไร?
เป็นการกำหนดลักษณะของเส้นตกแต่งบนข้อความ เป็นทรัพย์สินชวเลขสำหรับ:
- ข้อความตกแต่งบรรทัด
- ข้อความตกแต่งสี
- ข้อความตกแต่งสไตล์
ถูกระบุเป็นค่าที่คั่นด้วยช่องว่างอย่างน้อยหนึ่งค่าที่แสดงถึงมือยาวคุณสมบัติการตกแต่ง xt
ไวยากรณ์:
ตกแต่งข้อความ: || ||
ที่ไหน
ความแตกต่างระหว่างการใช้งานและการขยาย java
ข้อความตกแต่งบรรทัด: ใช้กำหนดประเภทการตกแต่งที่ใช้เช่นขีดเส้นใต้ขีดเส้นใต้และเส้นผ่าน.
ข้อความตกแต่งสี:ใช้เพื่อกำหนดสีของการตกแต่ง
ข้อความตกแต่งสไตล์: ใช้เพื่อกำหนดลักษณะของเส้นเช่นแข็ง, หยัก, ประ, ประ, คู่
ประเภทของการตกแต่งข้อความใน CSS
- ทับ:
#decoration {text-decoration: overline} 
- Line-through:
#decoration {text-decoration: line-through}- ขีดเส้นใต้:
#decoration {text-decoration: underline}- การรวมกัน:
#decoration {text-decoration: ขีดเส้นใต้ line-through overline}เอาท์พุต:
การตกแต่งข้อความโดยใช้ CSS: Code
รหัส:
รหัส CSS:
เป็นภาษาโปรแกรม
#overline {text-decoration: wavy overline lime} #underover {text-decoration: dashed underline overline} #dotted {text-decoration: underline overline dotted red} #wavy {text-decoration: line-through wavy}เอาท์พุต:
การตกแต่งข้อความข้าม
คุณสมบัติที่เรียกว่า text-decoration-skip ยังสามารถใช้ในกรณีที่ข้อความซ้อนทับขีดเส้นใต้และขีดเส้นใต้ ช่วยในการตกแต่งข้อความ เพียงแค่ระบุว่าจะลากเส้นขีดทับและขีดเส้นใต้อย่างไรเมื่อพวกเขาเดินผ่านผู้ขึ้นไปและลูกหลาน
#decoration {text-decoration-skip: ink}ค่าที่สามารถใช้กับการข้ามการตกแต่งข้อความมีดังนี้
วัตถุ : (ค่าเริ่มต้น) เส้นจะข้ามวัตถุแบบอินไลน์เช่นรูปภาพหรือองค์ประกอบอินไลน์บล็อก
ไม่มี : เส้นขวางทุกอย่าง
ช่องว่าง : เส้นตกแต่งข้ามช่องว่างอักขระคั่นคำและช่องว่างใด ๆ ที่กำหนดด้วยระยะห่างระหว่างตัวอักษรหรือช่องว่างคำ
ผนวกหมายถึงอะไรใน java
หมึก : เส้นตกแต่งข้ามร่ายมนตร์ลูกหลานหรือผู้ขึ้น
ขอบ : เส้นตกแต่งเริ่มต้นเล็กน้อยหลังจากขอบเริ่มต้นของเนื้อหาและสิ้นสุดก่อนขอบตอนจบของเนื้อหาเล็กน้อย
กล่องตกแต่ง : เส้นตกแต่งข้ามไปเหนือระยะขอบเส้นขอบและช่องว่างที่สืบทอดมา
เนื่องจากคุณสมบัตินี้ไม่ได้รับการสนับสนุนในเบราว์เซอร์ใด ๆ จึงยังไม่มีการสาธิต แต่นี่คือตัวอย่างในภาพด้านล่างว่าค่าแต่ละค่าจะมีลักษณะอย่างไรเมื่อใช้ text-decoration-skip
ด้วยเหตุนี้เราจึงมาถึงจุดสิ้นสุดของบล็อก Text Decoration โดยใช้ CSS หากคุณมีข้อสงสัยเกี่ยวกับหัวข้อนี้โปรดแสดงความคิดเห็นไว้ด้านล่างแล้วเราจะติดต่อกลับไป
ตรวจสอบ ซึ่งมาพร้อมกับการฝึกอบรมสดที่นำโดยผู้สอนและประสบการณ์โครงการในชีวิตจริง การฝึกอบรมนี้ทำให้คุณมีความเชี่ยวชาญในทักษะในการทำงานกับเทคโนโลยีเว็บส่วนหลังและส่วนหน้า รวมถึงการฝึกอบรมเกี่ยวกับ Web Development, jQuery, Angular, NodeJS, ExpressJS และ MongoDB
มีคำถามสำหรับเรา? โปรดระบุไว้ในส่วนความคิดเห็นของบล็อก 'การตกแต่งข้อความโดยใช้ CSS' แล้วเราจะติดต่อกลับไป