![สอน html การทำตัวหนา เอียง ขีดเส้น และแบบอื่นๆ](https://i.ytimg.com/vi/_9q5orlaUWA/hqdefault.jpg)
เนื้อหา
วิธีการขีดเส้นใต้ HTML แบบเดิมคือการใช้แท็ก u> / u> แต่ตอนนี้ใช้วิธีการแบบ CSS ที่ทันสมัย การขีดเส้นใต้ถือเป็นวิธีที่ไม่ดีในการดึงดูดความสนใจไปยังข้อความ เนื่องจากจะทำให้ข้อความที่ขีดเส้นใต้สับสนกับลิงก์ได้ง่าย
ขั้นตอน
วิธีที่ 1 จาก 2: วิธีการสมัยใหม่
1 ใช้คุณสมบัติ "text-decoration" ใน CSS ปัจจุบัน แท็ก u> ไม่ได้ใช้เพื่อขีดเส้นใต้ข้อความ
- โดยการเพิ่มคุณสมบัตินี้ คุณไม่จำเป็นต้องเปลี่ยนรหัสของคุณในอนาคตเมื่อแท็กเก่าเลิกใช้
2 ใช้แท็ก span> เพื่อขีดเส้นใต้ข้อความที่ต้องการ ป้อนแท็กเริ่มต้นพร้อมกับคุณสมบัติ "text-decoration" หน้าข้อความที่คุณต้องการขีดเส้นใต้ ที่ส่วนท้ายของข้อความ ให้ป้อนแท็กปิด / span>
span style = "text-decoration: underline;"> ข้อความนี้จะถูกขีดเส้นใต้ / span>
3 ระบุองค์ประกอบ HTML ในส่วน style> เพื่อให้ง่ายต่อการขีดเส้นใต้ สามารถทำได้โดยใช้สไตล์ชีต CSS ตัวอย่างเช่น หากต้องการขีดเส้นใต้ส่วนหัวระดับ 3 ทั้งหมด ให้เพิ่มโค้ดต่อไปนี้ในส่วน "style":
html> หัว> สไตล์> h3 {การตกแต่งข้อความ: ขีดเส้นใต้; } / 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> หัว> สไตล์> em {สี: สีแดง; } / style> / head> body> ทุกอย่างในองค์ประกอบ "em" จะเป็นตัวเอียง (โดยค่าเริ่มต้น) และยังเป็นสีแดง / em> ด้วยตัวเลือกรูปแบบเพิ่มเติม / body> / html>
วิธีที่ 2 จาก 2: วิธีดั้งเดิม
1 หลีกเลี่ยงการใช้แท็ก u> / u> เก่า เลิกใช้แล้ว ซึ่งหมายความว่าแท็กเหล่านี้ยังคงใช้งานได้ แต่กำลังหมดกำลังใจหรือหมดกำลังใจ เนื่องจาก HTML ไม่ได้มีไว้เพื่อปรับแต่งสไตล์ของเนื้อหา แท็ก u> ยังคงใช้งานได้ แต่ต้องแสดงข้อความที่แตกต่างจากข้อความอื่น เช่น คำที่สะกดผิดหรือชื่อเฉพาะภาษาจีน
2 ใช้แท็ก u> / u> เพื่อขีดเส้นใต้องค์ประกอบ (สำหรับการสาธิตเท่านั้น) แทบไม่มีกรณีเดียวที่คุณต้องใช้แท็กเหล่านี้ คุณอาจต้องแก้ไขไซต์เก่า ดังนั้นจึงควรทราบว่าแท็กคืออะไร
html> เนื้อหา> แท็ก HTML u> แบบเก่าทำให้สามารถขีดเส้นใต้องค์ประกอบ / u> ได้อย่างรวดเร็ว แต่ถ้าสัมผัสองค์ประกอบการจัดสไตล์อื่นๆ สิ่งต่างๆ ก็เริ่มวุ่นวาย ดังนั้นทุกวันนี้พวกเขาจึงใช้องค์ประกอบ CSS "text-decoration" เพื่อขีดเส้นใต้ / body> / html>
เคล็ดลับ
- มีวิธีที่ดีกว่าในการเน้นเนื้อหาบนหน้าเว็บเกือบทุกครั้งมากกว่าการขีดเส้นใต้ การขีดเส้นใต้อาจทำให้ผู้ใช้สับสน ลองนึกถึงวิธีเน้นข้อความโดยใช้ CSS