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

อาจ 15, 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

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

บทความถัดไป

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

คอมพิวเตอร์

jQuery UI และ ThemeRoller

อาจ 2024

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

คอมพิวเตอร์

Kinect การเชื่อมต่อของร่างกายและสมอง

อาจ 2024

ด้วยการเชื่อมต่อของร่างกายและสมอง XBox ได้รวมเกมประเภทอายุสมองของสมองเข้ากับการตอบสนองและการเคลื่อนไหวของร่างกาย ผลการออกกำลังกายทั้งสมองและร่างกาย เราชื่นชอบเกม Brain Age...