นำลิงก์ที่ขีดเส้นใต้ออกหรือสร้างเส้นประหรือขีดเส้นใต้ที่มีเครื่องหมายขีดเส้นใต้
โดยค่าเริ่มต้นเว็บเบราเซอร์จะมีลักษณะ CSS บางอย่างที่ใช้กับองค์ประกอบ HTML บางอย่าง หากคุณไม่ได้เขียนทับค่าเริ่มต้นเหล่านี้ด้วยสไตล์ชีตของเว็บไซต์ของคุณระบบจะใช้ค่าเริ่มต้น สำหรับการเชื่อมโยงหลายมิติสไตล์การแสดงผลเริ่มต้นคือข้อความใด ๆ ที่เชื่อมโยงกันจะเป็นสีน้ำเงินและขีดเส้นใต้เบราว์เซอร์จะทำเช่นนี้เพื่อให้ผู้เข้าชมไซต์สามารถมองเห็นสิ่งที่เชื่อมโยงกันได้อย่างง่ายดาย นักออกแบบเว็บหลายคนไม่สนใจรูปแบบเริ่มต้นเหล่านี้โดยเฉพาะอย่างยิ่งที่ขีดเส้นใต้ Thankfully, CSS ทำให้ง่ายต่อการเปลี่ยนรูปลักษณ์ของขีดเส้นใต้หรือลบออกอย่างสมบูรณ์
การลบเครื่องหมายขีดเส้นใต้ของข้อความ
ข้อความที่ขีดเส้นใต้อาจเป็นเรื่องยากที่จะอ่านข้อความที่ไม่ขีดเส้นใต้ นอกจากนี้นักออกแบบหลายคนก็ไม่สนใจรูปลักษณ์ของลิงก์ข้อความที่ขีดเส้นใต้ ในกรณีเหล่านี้คุณอาจต้องการลบขีดเส้นใต้เหล่านี้ทั้งหมด
หากต้องการลบขีดเส้นใต้จากลิงก์ข้อความคุณจะใช้คุณสมบัติการตกแต่งข้อความ CSS นี่คือ CSS ที่คุณจะเขียนเพื่อทำสิ่งนี้:
{text-decoration: ไม่มี; }
ด้วย CSS บรรทัดเดียวคุณจะลบขีดเส้นใต้จากลิงก์ข้อความทั้งหมด แม้ว่าจะเป็นรูปแบบทั่วไป (ใช้ตัวเลือกองค์ประกอบ) แต่ก็ยังมีความจำเพาะมากกว่ารูปแบบเบราว์เซอร์เริ่มต้น เนื่องจากรูปแบบเริ่มต้นเหล่านี้เป็นสิ่งที่สร้างขีดเส้นใต้เพื่อเริ่มต้นด้วยนั่นคือสิ่งที่คุณต้องเขียนทับ
ข้อควรระวังในการลบขีดเส้นใต้
สายตาของการขีดเส้นใต้อาจเป็นไปตามที่คุณต้องการ แต่คุณควรระมัดระวังเมื่อทำเช่นนี้ด้วย ไม่ว่าคุณจะชอบรูปลักษณ์ของการเชื่อมโยงที่ขีดเส้นใต้หรือไม่คุณไม่สามารถยืนยันว่าพวกเขาทำให้เห็นได้ชัดว่าข้อความใดมีการเชื่อมโยงกันและไม่เป็นเช่นนั้น ถ้าคุณนำเครื่องหมายขีดล่างหรือเปลี่ยนสีลิงก์สีน้ำเงินเริ่มต้นคุณควรตรวจสอบให้แน่ใจว่าคุณได้แทนที่ด้วยสไตล์ที่ยังคงให้ข้อความที่เชื่อมโยงโดดเด่น การทำเช่นนี้จะทำให้ผู้เข้าชมเว็บไซต์ของคุณมีประสบการณ์ที่ง่ายขึ้น
อย่าขีดเส้นใต้ลิงค์ที่ไม่ใช่
ความระมัดระวังอีกประการหนึ่งในการเชื่อมโยงและขีดเส้นใต้อย่าขีดเส้นใต้ข้อความที่ไม่ใช่ลิงค์เพื่อเน้นความสำคัญ ผู้คนคาดหวังว่าข้อความที่ขีดเส้นใต้จะเป็นลิงก์ดังนั้นถ้าคุณเน้นเนื้อหาเพื่อเพิ่มความสำคัญ (แทนที่จะทำให้เป็นตัวหนาหรือเป็นตัวเอียง) คุณจะส่งข้อความผิด ๆ และจะสับสนกับผู้ใช้เว็บไซต์
เปลี่ยนขีดเส้นใต้เป็น Dots หรือ Dashes
หากคุณต้องการให้ขีดเส้นใต้ลิงก์ข้อความของคุณเปลี่ยนรูปแบบของเส้นใต้จากรูปลักษณ์เริ่มต้นซึ่งเป็นเส้น "soldi" คุณสามารถทำได้เช่นกัน แทนที่จะเป็นบรรทัดทึบคุณสามารถใช้จุดเพื่อขีดเส้นใต้ลิงก์ของคุณได้ เมื่อต้องการทำเช่นนี้คุณจะยังคงลบขีดเส้นใต้ แต่คุณจะแทนที่ด้วยคุณสมบัติสไตล์แบบ border-bottom:
{text-decoration: ไม่มี; border-bottom: 1px dotted; }เนื่องจากคุณได้ลบขีดเส้นใต้มาตรฐานแล้วเครื่องหมายจุดหนึ่งจะเป็นเครื่องหมายเดียวที่ปรากฏขึ้น
คุณสามารถทำสิ่งเดียวกันเพื่อให้ได้เครื่องหมายขีดคั่น เพียงแค่เปลี่ยนสไตล์เส้นขอบด้านล่างเป็นเส้นประ:
{text-decoration: ไม่มี; ขอบล่าง: 1px dashed; }เปลี่ยนสีขีดเส้นใต้
อีกวิธีหนึ่งในการดึงดูดความสนใจไปยังลิงก์ของคุณคือเปลี่ยนสีของขีดเส้นใต้ เพียงตรวจสอบให้แน่ใจว่าสีเหมาะกับ โทนสี ของคุณ
{text-decoration: ไม่มี; ขอบล่าง: 1px สีแดงทึบ }Double Underlines
เคล็ดลับการใช้ขีดเส้นใต้คู่คือคุณต้องเปลี่ยนความกว้างของเส้นขอบ ถ้าคุณสร้างเส้นขอบกว้าง 1px คุณจะต้องขีดเส้นใต้คู่ที่ดูเหมือนเป็นขีดเส้นใต้เดียว
{text-decoration: ไม่มี; border-bottom: 3px double; }นอกจากนี้คุณยังสามารถใช้ขีดเส้นใต้ที่มีอยู่เพื่อขีดเส้นใต้คู่กับคุณลักษณะอื่น ๆ เช่นบรรทัดใดเส้นหนึ่งที่ถูกจุด:
a {border-bottom: 1px double; }อย่าลืมประเทศที่เชื่อมโยง
คุณสามารถเพิ่มสไตล์ขอบด้านล่างลงในลิงก์ของคุณได้ที่สถานะต่างๆเช่นเลื่อนเมาส์ไปวาง: ใช้งานอยู่หรือ: visited วิธีนี้สามารถสร้างประสบการณ์ "โรลโอเวอร์" สไตล์ที่ดีสำหรับผู้เข้าชมเมื่อคุณใช้ชั้นหลอก "เลื่อน" หากต้องการทำเครื่องหมายขีดเส้นใต้ที่สองปรากฏขึ้นเมื่อวางเมาส์เหนือลิงก์:
{text-decoration: ไม่มี; } a: เลื่อน {border-bottom: 1px dotted; }บทความต้นฉบับโดย Jennifer Krynin แก้ไขโดย Jeremy Girard