วิธีใช้ ID Selector ใน CSS

อาจ 17, 2024

ในบทช่วยสอนสุดท้ายเราได้พูดถึงกฎ CSS สองในสามประเภท ประเภทแรกคือตัวเลือก HTML ซึ่งยึดตามและควบคุมสไตล์สำหรับแท็ก HTML ที่ตรงกัน ประเภทที่สองคือตัวเลือกคลาสซึ่งทำงานเหมือนกับสไตล์ทั่วไปที่สามารถใช้กับองค์ประกอบใด ๆ บนหน้าเว็บ

ตอนนี้ถึงเวลาที่จะหารือเกี่ยวกับกฎ CSS ประเภทที่สามซึ่งเรียกว่าตัวเลือก ID เช่นเดียวกับตัวเลือกคลาสตัวเลือกรหัสสามารถนำไปใช้กับองค์ประกอบใด ๆ บนหน้าเว็บ อย่างไรก็ตามมีไว้เพื่อใช้เพียงครั้งเดียวบนหน้าเว็บ สิ่งนี้ทำให้ตัวเลือก ID มีประโยชน์อย่างมากสำหรับ HTML และ JavaScript แบบไดนามิก ในทางทฤษฎีถ้าคุณใช้ตัวเลือก ID มากกว่าหนึ่งครั้งบนหน้าเว็บเบราว์เซอร์ที่ควรจะถูกละเว้นในภายหลัง อย่างไรก็ตามนี่ไม่ใช่กรณีเสมอไป มันยากมากที่จะพึ่งพาการคาดการณ์ของเว็บเบราว์เซอร์ ดังนั้นเมื่อคุณเลือกใช้ตัวเลือก ID โปรดใช้ความระมัดระวังครั้งเดียวเท่านั้น ลองมาดูตัวอย่าง

รหัสพื้นฐาน

. . .

ตัวอย่าง

. . .

ตัวเลือกรหัส

ภายในแท็กคุณจะสังเกตเห็นว่าตัวเลือก ID เริ่มต้นด้วยสัญลักษณ์แฮช (#) และตามด้วยชื่อที่คุณกำหนดให้กับตัวเลือก ID เช่นเดียวกับตัวเลือกคลาสคุณสามารถใช้ชื่อใดก็ได้ที่คุณต้องการ แต่จะดีที่สุดถ้าชื่อระบุว่าจะใช้ตัวเลือก ID ใด ในตัวอย่างเราใช้มันเพื่อระบุหัวข้อพิเศษของข้อความ

{property: value;}

นอกจากนี้ภายในแท็กตัวเลือก ID จะตามด้วยคู่ของค่าคุณสมบัติหนึ่งคู่หรือมากกว่าซึ่งอยู่ระหว่างวงเล็บปีกกา คู่ค่าคุณสมบัติเหล่านี้ตั้งค่าลักษณะของสไตล์ ในตัวอย่างย่อหน้าที่มีตัวเลือกรหัส special_text จะมีข้อความสีแดง

. . .

เมื่อคุณใช้ตัวเลือก ID ในเนื้อความของหน้าเว็บคุณจะใช้แอตทริบิวต์ id ภายในแท็กเปิด HTML ค่าสำหรับแอตทริบิวต์ id เป็นชื่อเฉพาะที่กำหนดให้กับตัวเลือกรหัสในกรณีนี้ "special_text" (id = "value") นี่คือวิธีที่ตัวเลือก“ เชื่อมต่อ” สไตล์กับแท็ก HTML หนึ่งแท็กที่คุณต้องการใช้สไตล์นั้น ในตัวอย่างด้านบนตัวเลือกรหัสจะถูกวางไว้ภายในหนึ่งตัวเท่านั้น

แท็กบนหน้าเว็บ แท็ก HTML อื่น ๆ บนหน้าเว็บไม่ควรมีตัวเลือก ID อยู่ภายในแท็กเปิด

คำแนะนำวิดีโอ: วิธีใช้ Selector ต่างๆ - สอน CSS (อาจ 2024).

วิธีใช้ตัวเลือก ID ใน CSS, HTML, ประเภทของกฎ CSS, วิธีใช้ตัวเลือก ID, ตัวเลือก CSS ID

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

บทความถัดไป

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

คอมพิวเตอร์

Text Slides Keynote Widget ผู้เขียน iBooks

อาจ 2024

เมื่อเพิ่มข้อความในหน้าของคุณใน iBooks AuthorRคุณมีตัวเลือกการออกแบบมากมาย อย่างไรก็ตามหากคุณมีข้อความมากกว่าที่จะพอดีกับหน้าเว็บคุณต้องมีวิธีที่ผู้อ่านสามารถดูข้อความทั้งหมดได้...

คอมพิวเตอร์

ภาพรวมทั่วไปของ Google Analytics

อาจ 2024

การรอความเห็นบล็อกในบล็อกของคน ๆ นั้นไม่ใช่วิธีการศึกษาความสำเร็จของบล็อก คุณต้องศึกษาการเข้าชมบ่อยที่สุดเท่าที่จะทำได้ วิธีที่ง่ายและประหยัดที่สุดคือใช้ Google Analytics Google Analytics...