วันนี้ขอคั่นด้วย CSS เกี่ยวกับ Selector ซึ่งจะขอแบ่งออกเป็น 2 ส่วน
โดยส่วนแรกขอแบ่งปันหัวข้อที่ 1-4 จากการที่ได้อ่านในหนังสือมาค่ะ
แล้วครั้งหน้าจึงจะขอแบ่งปันในหัวข้อที่ 5-8 ต่อไป
1. Tag Selector หรือเรียกอีกอย่างหนึ่งว่า
"Type Selector" หรือ
"Element Selector" เป็นการกำหนดสไตล์ให้กับประเภทของ Element เช่น a
(ลิงค์) และ p (พารากราฟ)
เป็นต้น โดยกำหนดเพียงครั้งเดียว แต่สามารถควบคุมสไตล์ให้กับ Element ประเภทเดียวกันได้ทั้งหมดในเวบเพจ
ด้วยการกำหนด Selector
ให้มีชื่อเดียวกับ Element บนเวบเพจ Selector
จะจับคู่ระหว่างชื่อสไตล์กับ Element ที่มีชื่อตรงกัน และแสดงผลตามที่สไตล์กำหนด
2. Class Selector ใช้กำหนด Element ในรูปของ
Class เพื่อให้ใช้งานกับ Element ใด ๆ ก็ได้ ด้วยการกำหนด Property "class" แต่สามารถแสดงผลเฉพาะแท็กที่เรียกใช้งานเท่านั้น
แต่การเรียกใช้งานสามารถเรียกใช้ได้อย่างไม่จำกัดและแทรกตำแหน่งใดก็ได้
การสร้าง Class
Selector จะต้องกำหนดเครื่องหมาย Point (.) นำหน้าชื่อ Selector
มีเกณฑ์ในการกำหนดดังนี้
1) ชื่อของ Class
จะต้องขึ้นต้นด้วยเครื่องหมาย Point (.) เพื่อให้เวบบราวเซอร์รู้ว่าเป็น Class Selector ในสไตล์ชีท
2) CSS อนุญาตให้ใช้ Letter, Number,
Hyphen และ Undrscore ในการกำหนดชื่อได้
3) หลังเครื่องหมาย Point
(.) ต้องเริ่มต้นด้วย Letter เช่น .heading
เป็นต้น นอกจากนี้ยังสามารถแทรกเครื่องหมายต่างๆ
ในการกำหนดชื่อได้อีกด้วย เช่น - และ _ เป็นต้น
4) ชื่อของ Class Selector เป็นแบบ Case-sensitive
คือ ตัวอักษรเล็กใหญ่แตกต่างกัน
วิธีเรียกใช้งานกับแท็ก HTML... <p class="ชื่อ Element">
3. ID Selector ใช้กำหนดสไตล์ แบบระบุ Element ซึ่งค่า ID ในแต่ละเพจต้องไม่ซ้ำกัน โดยทั่วไปใช้ควบคุมสไตล์ของ Banner,
Navigation และ Main
Content โดยสร้าง ID
Selector ที่มีการกำหนดสไตล์
และหากจะเรียกใช้ก็จะต้องกำหนดไว้ใน Property “ID”
การสร้าง
ID
Selector จะต้องกำหนดเครื่องหมาย Hash
Symbol (#) ไว้หน้าชื่อ Selector
เช่น #banner เป็นต้น
วิธีเรียกใช้งานกับแท็ก
HTML... <p id="ชื่อ Element">
ข้อพิจารณาเลือกใช้ระหว่าง
Class
Selector กับ ID
Selector มีดังนี้
1) ใช้สไตล์เดียวหลายครั้งบนเวบเพจ ให้ใช้ Class
Selector
2) ใช้เฉพาะส่วนที่ต้องการ เช่น Layout
ให้ใช้ ID Selector
3) ใช้ ID Selector ลดความขัดแย้งของสไตล์บนเวบ
เพราะเวบบราวเซอร์จะให้ความสำคัญกับ ID Selector มากกว่า Class Selector
4. การจัดกลุ่มสไตล์ของแท็ก
1) Constructor Group
Selector คือ Selector
ที่ใช้ในการจัดกลุ่มสไตล์ของ Element
โดยการกำหนดชื่อของ Selector แล้วคั่นด้วยเครื่องหมายคอมม่า (,)
ทำให้กลุ่มของ Selector ทั้งหมดเป็นสีเดียวกัน เช่น h1, h2, h3, h4, h5,
h6 {color: #FC0;} หรือ h1,
p, .copyright, #banner {color: #F1CD33;}
2) การสร้าง Universal Selector คือมาจากแนวคิด Group
Selector จะเน้นการกำหนด Property
เดียวกันให้กับ Element ต่างๆ บนเวบ ซึ่งเป็นการกำหนดสไตล์ให้กับทุก Elememt
ในเวบ การเขียน Universal Selector จะใช้เครื่องหมาย Asterisk (*) นำหน้าส่วน Declaration Block ตย. a, p, img, h1, h2, h3, h4, h5, h6 {font-weight:bold;}
แต่หากต้องการกำหนดสไตล์แบบย่อ
สามารถใช้เครื่องหมาย * แทน ซึ่งจะแจ้งให้ CSS กำหนดสไตล์ให้กับแท็ก HTML ทั้งหมดบนเวบ
Universal Selector ไม่สามารถกำหนดประเภทของแท็กได้
จึงยากที่จะคาดเดาผลกระทบที่เกิดกับแท็ก HTML จำนวนมากบนเวบ
เพราะแต่ละเพจอาจใช้ไตล์ในรูปแบบที่แตกต่างกัน
ไม่มีความคิดเห็น:
แสดงความคิดเห็น