นับตั้งแต่การประดิษฐ์ภาษามาร์กอัปไฮเปอร์เท็กซ์ HTML แนวคิดของเลย์เอาต์และเลย์เอาต์ของเอกสารเว็บได้เปลี่ยนแปลงไปอย่างมาก ด้วยการสนับสนุนเกือบสมบูรณ์ของเบราว์เซอร์ยอดนิยมสำหรับมาตรฐานสไตล์ชีตแบบเรียงซ้อน CSS และ CSS2 จึงเป็นไปได้ที่จะมีอิทธิพลต่อการนำเสนอด้วยภาพในเอกสารเกือบทุกแง่มุม ตัวอย่างเช่น คุณสามารถทำให้พื้นหลังของลิงก์มีสี เติมรูปภาพบางส่วน และเปลี่ยนแปลงได้ขึ้นอยู่กับการกระทำของผู้ใช้
จำเป็น
- - ความสามารถในการแก้ไขข้อความของเอกสารหรือข้อความของสไตล์ชีตเอกสาร
- - โปรแกรมแก้ไขข้อความที่ให้คุณบันทึกเอกสารในการเข้ารหัสดั้งเดิม
คำแนะนำ
ขั้นตอนที่ 1
ทำให้พื้นหลังของลิงก์เต็มไปด้วยสีแบบสุ่มโดยการเพิ่มข้อมูลรูปแบบอินไลน์ให้กับองค์ประกอบ A เพิ่มสไตล์ให้กับแอตทริบิวต์ขององค์ประกอบ A ที่สอดคล้องกับลิงก์ที่คุณต้องการเปลี่ยนพื้นหลัง ในเนื้อหาของแอตทริบิวต์ style ให้วางคุณสมบัติ CSS สีพื้นหลังด้วยค่าที่กำหนด ซึ่งเป็นตัวระบุที่ถูกต้องสำหรับสีพื้นหลัง ตัวอย่างเช่น อาจมีลักษณะดังนี้:
ข้อความลิงค์
ขั้นตอนที่ 2
กำหนดพื้นหลังของลิงก์ในสไตล์ชีตภายนอกหรือแบบฝังในเอกสารของคุณ ในสไตล์ชีตที่เหมาะสม ให้เพิ่มชุดของกฎที่กำหนดโดยตัวเลือกระดับความเฉพาะเจาะจงที่ยอมรับได้ ในชุดกฎ ให้ป้อนคุณสมบัติสีพื้นหลังในลักษณะเดียวกับในขั้นตอนก่อนหน้า เลือกความเฉพาะเจาะจงของตัวเลือกโดยอิงตามกฎการเรียงซ้อน CSS2 และขอบเขตที่ต้องการ ดังนั้น หากคุณต้องการกำหนดสีของลิงก์เดียว การใช้ตัวเลือก ID นั้นสมเหตุสมผล หากมีหลายลิงก์ดังกล่าว ควรใช้ตัวเลือกแอตทริบิวต์ตามค่าคลาส
ตัวอย่างเช่น ในการตั้งค่าพื้นหลังสีเขียวสำหรับลิงก์เฉพาะในเอกสาร คุณสามารถเพิ่มชุดกฎเกณฑ์ลงในสไตล์ชีตได้:
A # ID_GREEN
{
พื้นหลังสี: # 00FF00;
}
คุณควรตั้งค่าแอตทริบิวต์ ID ขององค์ประกอบ A ที่สอดคล้องกับลิงก์ที่ต้องการไปยัง ID_GREEN:
ข้อความลิงค์
ขั้นตอนที่ 3
เติมพื้นหลังของลิงก์ด้วยรูปภาพ ทำตามวิธีการที่อธิบายไว้ในขั้นตอนที่หนึ่งและสอง แต่แทนที่จะใช้คุณสมบัติ CSS สีพื้นหลัง ให้ใช้รูปภาพพื้นหลัง ตัวอย่างเช่น:
ข้อความลิงค์
หากจำเป็น ให้เพิ่มคุณสมบัติ background-repeat ให้กับกฎ CSS ที่ตั้งค่าเพื่อกำหนดตัวเลือกสำหรับการทำซ้ำภาพพื้นหลังในแนวนอนและแนวตั้ง
ขั้นตอนที่ 4
ทำให้พื้นหลังของลิงก์เปลี่ยนไปเมื่อคุณวางเมาส์เหนือลิงก์นั้นหรือเมื่อโฟกัสเคลื่อนที่ เพิ่มชุดกฎให้กับสไตล์ชีตเอกสารภายนอกหรือแบบฝังที่กำหนดพื้นหลังของลิงก์หรือกลุ่มลิงก์ในสถานะต่างๆ ใช้ตัวเลือก ID และแอตทริบิวต์ร่วมกับคลาสหลอกแบบไดนามิก: hover,: active และ: focus ตัวอย่างเช่น เพื่อให้พื้นหลังของลิงก์ที่มีค่าแอตทริบิวต์ ID ของ ID_DYNAMIC_BACKGROUND เป็นสีแดงในสถานะที่ไม่ใช้งาน และสีเขียวในสถานะอยู่ภายใต้เคอร์เซอร์ของเมาส์ จะต้องเพิ่มชุดกฎต่อไปนี้ในสไตล์ชีต:
# ID_DYNAMIC_BACKGROUND
{
สีพื้นหลัง: # FF0000;
}
# ID_DYNAMIC_BACKGROUND: โฮเวอร์
{
พื้นหลังสี: # 00FF00;
}
คุณสามารถทำเช่นเดียวกันนี้เพื่อสร้างพื้นหลังด้วยรูปภาพที่เปลี่ยนแปลงแบบไดนามิก