ตัว CSS เองไม่ได้จัดเตรียมฟังก์ชันในการเปลี่ยนขีดเส้นใต้ของลิงก์ HTML โดยตรง แต่ตราบใดที่เราใช้เทคนิคบางอย่าง เราก็ยังสามารถทำให้การขีดเส้นใต้ที่ซ้ำซากจำเจของลิงก์ของเว็บกลายเป็นสีสันได้
1. หลักการพื้นฐาน
ก่อนอื่น ขั้นตอนแรกในการปรับแต่งการขีดเส้นใต้ของลิงก์ HTML คือการสร้างกราฟิก ทำซ้ำกราฟิกนี้ในแนวนอนเพื่อสร้างเอฟเฟกต์การขีดเส้นใต้ หากคุณต้องการแสดงพื้นหลังของหน้าเว็บด้านหลังขีดเส้นใต้ คุณสามารถใช้กราฟิก .gif แบบโปร่งใสได้
ประการที่สอง ถ้าความสูงของกราฟิกที่ขีดเส้นใต้มีขนาดใหญ่ ความสูงของข้อความจะต้องเพิ่มขึ้นอย่างเหมาะสมเพื่อให้มีช่องว่างที่มากขึ้นระหว่างด้านล่างของบรรทัดข้อความหนึ่งและด้านบนของข้อความบรรทัดถัดไป เช่น p { ความสูงของบรรทัด: 1.5; }
ตัวอย่างการขีดเส้นใต้ลิงก์แบบกำหนดเองประการที่สาม เพื่อที่จะแสดงการขีดเส้นใต้แบบกำหนดเอง จะต้องซ่อนการขีดเส้นใต้เริ่มต้น นั่นคือ { การตกแต่งข้อความ: ไม่มี }
ประการที่สี่ ตั้งค่ากราฟิกขีดเส้นใต้สำหรับองค์ประกอบลิงก์ และสร้างขีดเส้นใต้ที่กำหนดเอง สมมติว่ากราฟิกที่ขีดเส้นใต้คือ underline.gif โค้ด CSS สำหรับการตั้งค่ากราฟิกที่ขีดเส้นใต้จะเป็น { background-image: url(underline.gif }
ประการที่ห้า เราต้องทำให้กราฟิกขีดเส้นใต้ทำซ้ำในแนวนอน แต่ไม่ใช่ในแนวตั้ง ไม่เช่นนั้นมันจะถูกซ่อนอยู่ด้านหลังข้อความ รหัสที่ต้องการขีดเส้นใต้เพื่อทำซ้ำในแนวนอนเท่านั้นคือ: a { background-repeat: Repeat-x }
ประการที่หก เพื่อให้แน่ใจว่ากราฟิกปรากฏด้านล่างข้อความลิงก์ (ไม่ว่าขนาดตัวอักษรจะเป็นเท่าใด) ให้ใช้แอตทริบิวต์ตำแหน่งพื้นหลังเพื่อวางกราฟิกไว้ที่ด้านล่างขององค์ประกอบลิงก์ สำหรับกราฟิกที่ขีดเส้นใต้ เช่น ลูกศร คุณอาจต้องการพิจารณาการจัดตำแหน่งแนวนอนของกราฟิกด้วย สมมติว่าคุณต้องการวางกราฟิกที่ขีดเส้นใต้ไว้ที่มุมขวาล่าง โค้ด CSS คือ: a { background-position: 100% 100%;
ประการที่เจ็ด ต้องเพิ่มพื้นที่สีขาวที่เหมาะสมเพื่อให้มีพื้นที่สำหรับกราฟิกแบบกำหนดเองด้านล่างข้อความลิงก์ ตำแหน่งเฉพาะของกราฟิกขีดเส้นใต้ที่สัมพันธ์กับข้อความลิงก์จะสัมพันธ์กับขนาดของข้อความ แต่โดยทั่วไปแล้ว คุณสามารถทำให้ระยะขอบด้านล่างเท่ากับความสูงของกราฟิกขีดเส้นใต้ก่อน แล้วจึงปรับเปลี่ยนหากจำเป็น ตัวอย่างเช่น: { padding-bottom: 4px;
ประการที่แปด เนื่องจากกราฟิกที่ขีดเส้นใต้ถูกวางไว้ที่ด้านล่างขององค์ประกอบลิงก์ จะต้องแน่ใจว่าลิงก์ไม่แยกบรรทัด (หากลิงก์ได้รับอนุญาตให้ขยายหลายบรรทัด เฉพาะข้อความลิงก์ในบรรทัดต่อไปนี้เท่านั้นที่จะมี ขีดเส้นใต้ที่กำหนดเอง) ใช้แอตทริบิวต์ white-space ของ CSS เพื่อป้องกันไม่ให้ข้อความลิงก์ถูกตัด นั่นคือ { white-space: nowrap; }
โดยสรุป ตัวอย่างที่สมบูรณ์ของการกำหนดคุณสมบัติสไตล์ CSS สำหรับองค์ประกอบลิงก์คือ:
{
การตกแต่งข้อความ: ไม่มี;
พื้นหลัง: url (ขีดเส้นใต้.gif) ทำซ้ำ-x 100% 100%;
ช่องว่างภายในด้านล่าง: 4px;
พื้นที่สีขาว: nowrap;
-
หาก คุณต้องการให้ขีดเส้นใต้แบบกำหนดเองปรากฏเฉพาะเมื่อเมาส์ลอยอยู่ เพียงเปลี่ยนคุณสมบัติพื้นหลัง CSS ที่ตั้งค่าไว้เดิมโดยตรงบนองค์ประกอบลิงก์เป็น:hover ตัวอย่างเช่น:
{
การตกแต่งข้อความ: ไม่มี;
ช่องว่างภายในด้านล่าง: 4px;
พื้นที่สีขาว: nowrap;
-
เป็น:โฮเวอร์ {
พื้นหลัง: url (ขีดเส้นใต้.gif) ทำซ้ำ-x 100% 100%;
-
2. การชื่นชมตัวอย่าง
สมมติว่ามีสองกราฟิกที่ขีดเส้นใต้ diagonal.gif (เส้นลูกฟูก) และ flower.gif (ดอกไม้) ความสูงและความกว้างของกราฟิกแบบแรกคือ 3 และ 9 และความสูงและความกว้างของกราฟิกแบบหลังคือ 11 และ 15 นี่คือตัวอย่างที่สมบูรณ์ของการตั้งค่าการขีดเส้นใต้สองประเภท:
ตัวอย่างการขีดเส้นใต้ลิงก์แบบกำหนดเองซอร์สโค้ดของหน้าเว็บมีดังนี้:
หมายเหตุ: diagonal.gif และ flower.gif ได้รับการคัดลอกไปยังไดเร็กทอรีเดียวกับที่หน้าเว็บนั้นตั้งอยู่
<html>
<หัว>
<title>อดีต</title>
<ประเภทสไตล์=ข้อความ/css>
a#example1a {
การตกแต่งข้อความ: ไม่มี;
พื้นหลัง: url (diagonal.gif) ทำซ้ำ-x 100% 100%;
พื้นที่สีขาว: nowrap;
ช่องว่างภายในด้านล่าง: 2px;
-
a#example1b {
การตกแต่งข้อความ: ไม่มี;
พื้นที่สีขาว: nowrap;
ช่องว่างภายในด้านล่าง: 2px;
-
a#example1b:โฮเวอร์ {
พื้นหลัง: url (diagonal.gif) ทำซ้ำ-x 100% 100%;
-
a#example2a {
การตกแต่งข้อความ: ไม่มี;
พื้นหลัง: url (flower.gif) ทำซ้ำ-x 100% 100%;
พื้นที่สีขาว: nowrap;
ช่องว่างภายในด้านล่าง: 10px;
-
a#example2b {
การตกแต่งข้อความ: ไม่มี;
พื้นที่สีขาว: nowrap;
ช่องว่างภายในด้านล่าง: 10px;
-
a#example2b:โฮเวอร์ {
พื้นหลัง: url (flower.gif) ทำซ้ำ-x 100% 100%;
-
-
</สไตล์>
</หัว>
<ร่างกาย>
<p>ตัวอย่าง:</p>
<p> <a href=# id=example1a>ขีดเส้นใต้คงที่แบบระลอกคลื่น</a>,
<a href=# id=example1b>เส้นระลอกคลื่นที่ปรากฏขึ้นเมื่อวางเมาส์ไว้เหนือ</a> </p>
<p> <a href=# id=example2a>ขีดเส้นใต้ดอกไม้แบบคงที่</a>,
<a href=# id=example2b>ดอกไม้ขีดเส้นใต้ที่ปรากฏขึ้นเมื่อเลื่อนเมาส์ไป</a> </p>
</ร่างกาย>
</html>