ขั้นตอนในการลบขีดเส้นใต้จากลิงก์ข้อความและประเด็นที่ควรระวัง
โดยค่าเริ่มต้นเนื้อหาข้อความที่ เชื่อมโยงกับ HTML โดยใช้ หรือ "ยึด" องค์ประกอบจะมีสไตล์พร้อมกับขีดเส้นใต้ บ่อยครั้งนักออกแบบเว็บเลือกที่จะลบรูปแบบเริ่มต้นนี้ออกโดยการขีดเส้นใต้
นักออกแบบหลายคนไม่สนใจรูปลักษณ์ของข้อความที่ขีดเส้นใต้โดยเฉพาะอย่างยิ่งในเนื้อหาที่มีลิงก์จำนวนมาก คำที่ขีดเส้นใต้ทั้งหมดนี้สามารถทำลายการอ่านของเอกสารได้ หลายคนแย้งว่าขีดเส้นใต้เหล่านี้ทำให้คำพูดยากขึ้นเพื่อแยกแยะและอ่านอย่างรวดเร็วเนื่องจากวิธีการที่ขีดเส้นใต้เป็นการเปลี่ยนแปลงรูปแบบตัวอักษรตามธรรมชาติ
มีประโยชน์ที่ถูกต้องในการรักษาขีดเส้นใต้เหล่านี้ไว้ในลิงก์ข้อความอย่างไรก็ตาม ตัวอย่างเช่นเมื่อคุณเรียกดูข้อความขนาดใหญ่การเชื่อมโยงที่ขีดเส้นใต้พร้อมกับความคมชัดของสีที่เหมาะสมช่วยให้ผู้อ่านสามารถสแกนหน้าได้อย่างรวดเร็วและดูว่าการเชื่อมโยงอยู่ที่ใด หากคุณดูที่บทความเกี่ยวกับการออกแบบเว็บที่นี่ที่ About.com รวมถึงบทความอื่น ๆ ในไซต์คุณจะเห็นรูปแบบของลิงก์ที่ขีดเส้นใต้ในตำแหน่ง
หากคุณตัดสินใจที่จะลบลิงก์ออกจากข้อความ (ขั้นตอนง่ายๆที่เราจะกล่าวถึงในไม่ช้า) อย่าลืมค้นหาวิธีจัดรูปแบบให้กับข้อความเพื่อแยกแยะความแตกต่างของสิ่งที่เป็นลิงก์ออกจากข้อความล้วน นี้มักจะทำด้วยความคมชัดสีดังกล่าวข้างต้น แต่สีเดียวอาจทำให้เกิดปัญหาสำหรับผู้เข้าชมที่มีความบกพร่องทางสายตาเช่นตาบอดสี ขึ้นอยู่กับรูปแบบเฉพาะของพวกเขาของตาบอดสีความคมชัดอาจจะหายไปโดยสิ้นเชิงกับพวกเขาป้องกันไม่ให้พวกเขาเห็นความแตกต่างระหว่างข้อความที่เชื่อมโยงและไม่เชื่อมโยง ด้วยเหตุนี้ข้อความขีดเส้นใต้จึงเป็นวิธีที่ดีที่สุดในการแสดงลิงก์
ดังนั้นคุณจะปิดขีดเส้นใต้ได้อย่างไรถ้าคุณยังต้องการทำเช่นนั้น? เนื่องจากนี่เป็นลักษณะเฉพาะที่เรามีความกังวลเราจึงจะหันมาใช้ส่วนของเว็บไซต์ของเราเพื่อจัดการกับสิ่งต่างๆทั้งภาพ - CSS
ใช้ Cascading Style Sheets เพื่อปิดการขีดเส้นใต้ลิงค์
ในกรณีส่วนใหญ่คุณจะไม่ต้องการปิดบรรทัดใหม่ในลิงก์ข้อความเพียงตัวเดียว รูปแบบการออกแบบของคุณน่าจะทำให้คุณจำเป็นต้องลบขีดเส้นใต้จากลิงก์ทั้งหมดคุณจะทำเช่นนี้โดยเพิ่มสไตล์ลงในสไตล์ชีตภายนอกของคุณ
{text-decoration: ไม่มี; }แค่นั้นแหละ! บรรทัด CSS แบบง่ายๆที่จะปิดขีดเส้นใต้ (ซึ่งใช้ CSS property สำหรับ "text-decoration") ในลิงก์ทั้งหมด
นอกจากนี้คุณยังสามารถได้รับเฉพาะเจาะจงมากขึ้นด้วยสไตล์นี้ ตัวอย่างเช่นถ้าคุณต้องการปิดขีดเส้นใต้หรือลิงก์ภายในส่วน "nav" คุณสามารถเขียนได้:
nav {text-decoration: ไม่มี; }ขณะนี้ลิงก์ข้อความบนหน้าเว็บจะได้รับการขีดเส้นใต้ที่เป็นค่าเริ่มต้น แต่ผู้ที่อยู่ใน nav จะนำเนื้อหานั้นออก
สิ่งหนึ่งที่นักออกแบบเว็บหลายคนเลือกที่จะทำคือเปิดลิงก์ "เปิด" เมื่อมีคนเลื่อนเมาส์ไปวางเหนือข้อความ นี้จะทำได้โดยใช้: เลื่อน CSS pseudo-class เช่นนี้
{text-decoration: ไม่มี; } a: hover {text-decoration: ขีดเส้นใต้; }ใช้ CSS แบบอินไลน์
เพื่อเป็นทางเลือกในการเปลี่ยนแปลงสไตล์ชีทภายนอกคุณยังสามารถเพิ่มรูปแบบให้กับองค์ประกอบได้โดยตรงใน HTML เช่น:
ลิงก์นี้ไม่มีการขีดเส้นใต้ปัญหาเกี่ยวกับวิธีนี้คือการวางข้อมูลสไตล์ภายในโครงสร้าง HTML ของคุณซึ่งไม่ใช่แนวทางที่ดีที่สุด ควรแยก Style (CSS) และโครงสร้าง (HTML) แยกต่างหาก
หากคุณต้องการให้ลิงก์ข้อความของเว็บไซต์ทั้งหมดถูกขีดเส้นใต้ให้ลบออกการเพิ่มข้อมูลสไตล์นี้ลงในแต่ละลิงก์จะหมายถึงจำนวน Markup พิเศษที่เพิ่มเข้ามาในโค้ดของไซต์ของคุณ การขยายหน้าเว็บนี้อาจทำให้หน้าเว็บโหลดช้าลงและทำให้การจัดการหน้าเว็บโดยรวมมีความท้าทายมากขึ้น ด้วยเหตุนี้คุณจึงควรหันมาใช้สไตล์ชีตภายนอกเพื่อกำหนดรูปแบบหน้าทั้งหมดเสมอ
ในการปิดบัญชี
ง่ายที่สุดเท่าที่จะลบขีดเส้นใต้จากลิงก์ข้อความของหน้าเว็บคุณควรระลึกถึงผลที่ตามมาของการทำเช่นนั้น ในขณะที่อาจทำให้หน้าตาของหน้าเว็บสะอาดขึ้น แต่ก็อาจทำให้ค่าใช้จ่ายในการใช้งานโดยรวมลดลง คำนึงถึงเรื่องนี้ในครั้งต่อไปที่คุณพิจารณาเปลี่ยนคุณสมบัติ "text-decoration" ของหน้าเว็บ
บทความต้นฉบับโดย Jennifer Krynin แก้ไขเมื่อ 9/19/16 โดย Jeremy Girard