ขีดเส้นใต้ข้อความใน HTML

ผู้เขียน: John Pratt
วันที่สร้าง: 17 กุมภาพันธ์ 2021
วันที่อัปเดต: 1 กรกฎาคม 2024
Anonim
สอน html การทำตัวหนา เอียง ขีดเส้น และแบบอื่นๆ
วิดีโอ: สอน html การทำตัวหนา เอียง ขีดเส้น และแบบอื่นๆ

เนื้อหา

การขีดเส้นใต้ใน HTML เคยเป็นเรื่องของการใส่ข้อความระหว่างแท็ก u> / u> แต่วิธีนี้ได้เลิกใช้แล้วเพื่อสนับสนุน CSS ที่หลากหลายกว่า โดยทั่วไปการขีดเส้นใต้ในหน้าเว็บถือเป็นวิธีที่ไม่สะดวกในการเน้นส่วนใดส่วนหนึ่งของข้อความ เนื่องจากข้อความที่ขีดเส้นใต้จะสับสนกับลิงก์ได้ง่าย

ที่จะก้าว

วิธีที่ 1 จาก 2: วิธีการปัจจุบัน

  1. ใช้คุณสมบัติการตกแต่งข้อความในสไตล์ CSS ของคุณ การใช้แท็ก u> ไม่ใช่วิธีที่เหมาะสมในการขีดเส้นใต้ข้อความอีกต่อไป เราใช้คุณสมบัติ CSS "text-decoration" แทน
    • ซึ่งจะช่วยให้แก้ไขโค้ดได้ง่ายขึ้นโดยที่คุณไม่ต้องเปลี่ยนแปลงอะไรเกี่ยวกับโค้ดเก่าหากโค้ดนั้นไม่สามารถใช้งานได้
  2. ใช้แท็ก span> เมื่อคุณต้องการขีดเส้นใต้บางส่วนของข้อความ วางแท็กเริ่มต้นพร้อมกับคุณสมบัติ "text-decoration" ที่คุณต้องการให้ขีดเส้นใต้เริ่มต้น วางแท็กปิดท้าย / ช่วง> จุดที่ขีดเส้นใต้ควรหยุดลง

    span style = "text-decoration: underline;"> สิ่งนี้จะถูกขีดเส้นใต้. /span>

  3. ประกาศองค์ประกอบ HTML ในสไตล์> ส่วนหนึ่งของเพจของคุณ คุณสามารถทำได้ในสไตล์ชีต CSS การขีดเส้นใต้สามารถทำได้ง่ายขึ้นมากโดยการเชื่อมโยงสไตล์กับองค์ประกอบ HTML ตัวอย่างเช่นหากต้องการขีดเส้นใต้ส่วนหัวระดับ 3 ทั้งหมดให้เพิ่มสไตล์ CSS ต่อไปนี้:

    html> head> style> h3 {text-decoration: ขีดเส้นใต้; } / style> / head> body> h3> ส่วนหัวนี้ขีดเส้นใต้ / h3> / body> / html>

  4. สร้างคลาส CSS เพื่อขีดเส้นใต้อย่างรวดเร็วเมื่อใดก็ได้ คุณสามารถสร้างคลาสในสไตล์ชีตหรือสไตล์> เพื่อเรียกใช้ในภายหลังได้ ชั้นเรียนสามารถมีชื่อใดก็ได้ที่คุณต้องการ

    html> head> style> .underline {text-decoration: ขีดเส้นใต้; } / style> / head> body> คุณสามารถใช้คลาสนี้เพื่อขีดเส้นใต้ div> / div> จากส่วนต่างๆ div> จากเนื้อหา / div> / body> / html> ได้อย่างรวดเร็ว

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

    html> head> style> em {color: red; } / style> / head> body> ทุกอย่างภายในองค์ประกอบ em จะกลายเป็น em> italic (เนื่องจากการตั้งค่าเริ่มต้น) และสีแดง / em> เนื่องจากสไตล์ที่เพิ่มไว้ด้านบน / body> / html>

วิธีที่ 2 จาก 2: วิธีการที่ล้าสมัย

  1. หลีกเลี่ยงการใช้แท็ก u> / u> แบบเก่า สิ่งเหล่านี้ "หมดกำลังใจ" ซึ่งหมายความว่ายังใช้งานได้ แต่ไม่แนะนำให้ใช้อีกต่อไป เนื่องจากโดยหลักการแล้ว HTML ไม่ได้ออกแบบมาเป็นภาษามาร์กอัป แท็ก u> จะยังคงใช้งานได้ แต่ตอนนี้มีจุดมุ่งหมายเพื่อระบุข้อความที่แตกต่างจากข้อความอื่น ๆ เช่นคำที่สะกดผิดหรือคำนามภาษาจีนที่เหมาะสม
  2. ใช้แท็ก u> / u> สำหรับการขีดเส้นใต้ (เพื่อจุดประสงค์ในการอธิบายเท่านั้น) คุณไม่ควรใช้วิธีนี้อีก อาจเป็นการดีที่จะทราบวิธีการใช้งานในกรณีที่คุณต้องการอัปเดตเว็บไซต์ที่เก่ากว่า

    html> body> ด้วยแท็กเก่า u> ใน HTML คุณสามารถขีดเส้นใต้สิ่งต่างๆ / u> ได้อย่างรวดเร็ว แต่สิ่งต่างๆจะยุ่งเหยิงอย่างรวดเร็วเมื่อใช้องค์ประกอบสไตล์อื่น ๆ นั่นคือเหตุผลที่ตอนนี้เราขีดเส้นใต้ "การตกแต่งข้อความ" ด้วยองค์ประกอบ CSS / body> / html>

เคล็ดลับ

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