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

ผู้เขียน: Clyde Lopez
วันที่สร้าง: 19 กรกฎาคม 2021
วันที่อัปเดต: 1 กรกฎาคม 2024
Anonim
สอน html การทำตัวหนา เอียง ขีดเส้น และแบบอื่นๆ
วิดีโอ: สอน html การทำตัวหนา เอียง ขีดเส้น และแบบอื่นๆ

เนื้อหา

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

ขั้นตอน

วิธีที่ 1 จาก 2: วิธีการสมัยใหม่

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

    span style = "text-decoration: underline;"> ข้อความนี้จะถูกขีดเส้นใต้ / span>

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

    html> หัว> สไตล์> h3 {การตกแต่งข้อความ: ขีดเส้นใต้; } / style> / head> body> h3> หัวข้อนี้จะถูกขีดเส้นใต้ / h3> / body> / html>

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

    html> head> style> .underline {text-decoration: ขีดเส้นใต้; } / style> / head> body> ใช้คลาสนี้สำหรับ div> ขีดเส้นใต้อย่างรวดเร็ว / div> div ต่างๆ> องค์ประกอบ / div> / body> / html>

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

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

วิธีที่ 2 จาก 2: วิธีดั้งเดิม

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

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

เคล็ดลับ

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