วิธีการใช้ CSS เพื่อเชื่อมโยงหลายมิติลักษณะบนเว็บเพจ

เมษายน 27, 2024

หากคุณคุ้นเคยกับ HTML คุณจะรู้ว่าคุณสามารถควบคุมสีของข้อความและไฮเปอร์ลิงก์บนเว็บเพจได้ แต่ด้วย Cascading Style Sheets คุณสามารถทำได้มากกว่านี้ แท็กบางอย่างเช่นแท็ก anchor เชื่อมโยงหลายมิติมีสิ่งที่เรียกว่าคลาส pseudo ที่เกี่ยวข้องกับสถานะที่แตกต่างกันของแท็ก ตัวอย่างเช่นแท็กเชื่อมโยงหลายมิติมีสี่สถานะ ลิงค์, เยี่ยมชม, โฮเวอร์และแอคทีฟ

เมื่อไม่ได้ใช้งานลิงก์ (ไม่ได้เลือก) นั่นคือ ลิงค์ หลอกระดับหรือรัฐ เข้าเยี่ยมชม สถานะคือหลังจากที่มีการใช้ลิงก์ โฉบ state คือเมื่อเมาส์ผ่านไปยังลิงค์และ คล่องแคล่ว สถานะคือเมื่อคุณคลิกที่ลิงค์ ความมหัศจรรย์ของ CSS คือการเชื่อมโยงแต่ละสถานะจะถูกควบคุมอย่างอิสระผ่านชั้นเรียนหลอก ดังนั้นคุณสามารถตั้งค่าคุณสมบัติที่แตกต่างกันสำหรับแต่ละรัฐ คุณสามารถใช้พร็อพเพอร์ตี้ใด ๆ ที่เกี่ยวข้องกับไฮเปอร์ลิงก์แท็ก anchor ใน CSS

ในตัวอย่างด้านล่างเราจะตั้งค่าสถานะการเชื่อมโยงเป็นสีแดงสถานะการเข้าชมเป็นสีม่วง (# 400040) โฮเวอร์และสถานะการใช้งานเป็นสีแดงขีดเส้นใต้และตัวเอียง

บันทึก--ลูกศร

บ่งชี้ว่ารหัสถูกห่อเป็นบรรทัดที่สองและควรจะเป็นจริงในบรรทัดเดียว

อย่างที่คุณเห็นเราได้ตั้งค่าคุณสมบัติสีเป็นสีแดงสำหรับทุกรัฐยกเว้นสถานะเยี่ยมชมซึ่งเราตั้งค่าเป็นสีม่วง เนื่องจากเราต้องการให้ไฮเปอร์ลิงก์ถูกขีดเส้นใต้สำหรับสถานะโฮเวอร์และแอ็คทีฟเท่านั้นเราจึงตั้งค่าคุณสมบัติการตกแต่งข้อความเป็น none สำหรับอีกสองสถานะ ในที่สุดเราได้กำหนดรูปแบบตัวอักษรเป็นตัวเอียงสำหรับสถานะโฮเวอร์และแอคทีฟซึ่งจะทำให้ข้อความเป็นตัวเอียงเมื่อคุณผ่านหรือคลิกที่ลิงก์และเราได้ตั้งค่าการตกแต่งข้อความกลับเป็นขีดเส้นใต้ นี่เป็นเพียงตัวอย่างง่ายๆ คุณสามารถสร้างสไตล์ที่เรียบง่ายหรือแฟนซีตามที่คุณต้องการ อย่างไรก็ตามมีบางสิ่งที่ต้องจำ

เว็บเบราว์เซอร์แตกต่างกันในวิธีจัดการกับสิ่งนี้ โดยปกติถ้าคุณตั้งค่าคุณสมบัติเป็นค่าที่แน่นอนมันจะถูกสืบทอดโดย (ผ่านไปยัง) สถานะใด ๆ ที่ระบุไว้หลังจากนั้น ในตัวอย่างของเราด้านบนสถานะแรกที่แสดงในรหัสของเราคือสถานะลิงก์และเราตั้งค่าคุณสมบัติสีเป็นสีแดง ส่วนใหญ่เวลานี้จะถูกส่งผ่านไปยังอีกสามสถานะเว้นแต่ว่าเราจะเปลี่ยนเป็นรหัสเช่นเดียวกับที่เราทำเพื่อสถานะที่เยี่ยมชม นอกจากนี้หากเราไม่ได้ตั้งค่าการตกแต่งข้อความกลับเป็นขีดเส้นใต้ข้อความสำหรับโฮเวอร์และสถานะแอ็คทีฟจะไม่ถูกขีดเส้นใต้เพราะเราปิดใช้งานในสถานะแรก แต่คุณไม่สามารถวางใจได้กับเบราว์เซอร์ทั้งหมดในการทำเช่นนี้ ดังนั้นจึงเป็นการดีที่สุดที่จะตั้งค่าคุณสมบัติทั้งหมดสำหรับแต่ละสถานะ

เมื่อคุณออกแบบลิงก์แฟนซีอย่าทำการเปลี่ยนแปลงครั้งใหญ่ระหว่างรัฐเช่นการเพิ่มขนาดตัวอักษรอย่างมาก สิ่งนี้จะทำให้เว็บเบราว์เซอร์โหลดหน้าเว็บอีกครั้งและผู้เยี่ยมชมจะรู้สึกไม่พอใจกับคุณมาก

ลำดับที่คุณแสดงรายการรหัสสำหรับคลาสหลอกเหล่านี้ได้รับอิทธิพลจากลำดับการเรียงซ้อน เราจะพูดถึงลำดับการเรียงซ้อนในบทช่วยสอนในภายหลัง สำหรับตอนนี้เพียงจำไว้ว่าเพื่อป้องกันความขัดแย้งให้ใส่รหัสรัฐตามลำดับที่เราใช้ด้านบน ลิงค์, เยี่ยมชม, โฮเวอร์และแอคทีฟ

วิธีการใช้ CSS เพื่อเชื่อมโยงหลายมิติสไตล์บนเว็บเพจ, HTML, คลาสหลอกที่เกี่ยวข้องกับสถานะที่แตกต่างกันของแท็ก, คลาสหลอก, เชื่อมโยงหลายมิติ, เชื่อมโยงหลายมิติการเข้ารหัสใน CSS, CSS หลอกคลาส, รัฐ CSS, สถานะของแท็ก บนหน้าเว็บด้วย CSS ลิงค์แฟนซี

บทความก่อนหน้านี้

บทความถัดไป

บทความที่เกี่ยวข้อง

คอมพิวเตอร์

แฮกเกอร์ Shumsky มีข้อมูลของคุณ

เมษายน 2024

หลังจากการซื้อทางออนไลน์เมื่อเร็ว ๆ นี้ฉันสังเกตเห็นกิจกรรมที่แปลกประหลาดบางอย่างบนมาสเตอร์การ์ดของฉัน การตรวจสอบเพิ่มเติมในส่วนของฉันทำให้ฉันค้นพบชุดของการซื้อหลอกลวงที่ทำในชื่อของฉัน...

คอมพิวเตอร์

โปรแกรมปฏิทินกิจกรรมส่วนตัว - ใช้คำสั่ง PHP include () เพื่อตรวจสอบข้อมูลอินพุต

เมษายน 2024

ในบทช่วยสอนก่อนหน้านี้เราได้สร้างฟังก์ชัน Activity_Entry_Form () ที่จะพิมพ์แบบฟอร์มบันทึกกิจกรรมสำหรับโปรแกรมปฏิทินกิจกรรมส่วนตัวของเรา เราทำเช่นนี้เพราะส่วนของรหัสของเราจะใช้หลายครั้งในโปรแกรม...