กำหนด selector โดย ชื่อ element

เป็นแบบที่ใช้กันมาก และใช้ได้ง่ายที่สุด เพราะว่า เป็น element ที่เราคุ้นเคยกันดีอยู่แล้ว เช่น เราจะทำให้ H1 element เป็นตัวหนาและตัวใหญ่ หรือจะให้ p element เป็น font sans-serif

<body>
<h2>หัวข้อที่ 1</h2>
<p>เราก็จะถือว่านี้คือย่อหน้าปรกติ</p>
<h2>หัวข้อที่ 2 </h2>
<p>เนื้อหาส่วนที่ 2</p>
</body>
สิ่งเพิ่มเติมที่ 9.6 โค้ดที่จะใช้ทดสอบ การใช้ selector ในแบบ ชื่อของ element โดยเราต้องการให้มีผลที่ h2 element

h2 { color: red; }
สิ่งเพิ่มเติมที่ 9.7 style rule ที่เรากำหนดให้ h2 element ที่จุดใดๆ มีสีแดง


สิ่งเพิ่มเติมที่ 9.8 จะเห็นได้ว่า h2 เป็นตัวหนังสือสีแดงในทุกๆจุด

เพิ่มเติม
- ถ้าคุณไม่ได้มีการกำหนดอะไรเพิ่มเติม (ไม่ได้มีการเขียน selector? สำหรับ h2 element ขึ้นมาอีกชุด) ทุกหน้า และทุกจุดที่มีการใช้งาน h2 ก็จะแสดงผลตัวอักษรเป็นสีแดงตามที่เราได้กำหนดเอาไว้แล้วนั่นเอง
- selector ไม่จำเป็นต้องการหนดชื่อของ element เสมอไป
- เครื่องหมายดอกจันทร์ * หมายถึงทำกับทุกๆ element ในโค้ดของคุณ
- คุณสามารถเลือกกลุ่มของ element ที่จะเอาไปใช้กับ selector ได้ โดยใช้เครื่องหมาย comma (ลูกน้ำ)คั่นระหว่าง element แต่ละตัว
- ชื่อหรือชนิดของ selector ก็จะต้องรองรับใน browser ที่กำลังใช้งานนั้นๆด้วย

selector คืออะไร เป็นแบบไหน

select มันคือตัวที่ใช้บ่งบอกว่าเราว่าเราจะใช้ รูปแบบ หรือ style ที่เรากำหนดที่จุดใด เช่น ถ้าคุณต้องการกำหนดรูปแบบให้ p element เป็น font TIMES ขนาด 12 pixel คุณจะต้องสร้าง selector ให้กับ p element เพียงเท่านั้น แต่ถ้าหากว่าต้องการกำหนด รูปแบบ ให้กับ p อันแรกของ division เพียงอันเดียวเราก็ต้องเขียน selector ให้ผสมกันมากขึ้น เพื่อที่จะใช้ในการบ่งบอกว่า เราต้องการให้มีผลต่อเฉพาะใน p อันแรกของ division เท่านั้น

selector สามารถกำหนดให้เป็นได้ 5 รูปแบบตามที่เราต้องการเลือกใช้ โดยจะมีดังต่อไปนี้
1.ในแบบ ชื่อ หรือชนิดของ element
h1 {color: red;}
สิ่งเพิ่มเติมที่ 9.1? รูปแบบอย่างง่ายที่สุดคือการใส่ชื่อ หรือชนิดของ element ที่เราต้องการให้มีผล เช่นตัวอย่างนี้ เราต้องการให้มีผลต่อ h1 element นั่นเอง

2.ในแบบการบรรยาย
h1 em {color: red;}
สิ่งเพิ่มเติมที่ 9.2 selector ตัวนี้เป็นแบบการบรรยาย โดยที่ style จะถูกกำหนดถ้ามี em element ที่อยู่ใน h1 element โดยที่ em ที่อยู่ที่อื่นใดก็ตามที่ไม่ใช่ h1 จะไม่มีผล (กรณี em เป็น child ของ h1 นั่นเอง)

3.ในแบบ class หรือ id element
em.very {color: red;}
div#gaudi {color: red;}
สิ่งเพิ่มเติมที่ 9.3 selector แรกจะมีผลต่อทุกๆ em element ที่ประกอบด้วย very class และ selector อันที่สอง กำหนดเฉพาะ div element ที่มี id คือ gaudi เท่านั้น

4.ในแบบ pseudo-class ของ element หรือ pseudo-element ที่ตัวมันเอง (เรื่องของ pseudo-class จะอธิบายในภายหลังอีกทีครับ)
a:link {color: red;}
สิ่งเพิ่มเติมที่ 9.4 ในตัวอย่างนี้ selector เลือกใช้ a element เพื่อสร้าง link pseudo-class (จากคำสั่งหมายถึง มีผลเฉพาะลิ้งค์ที่ยังไม่เคยถูกกดนั่นเอง)

5.ในแบบที่ไม่ระบุเจาะจง หรือ element ที่มี attributes และ value
a[name] {color: red;}
สิ่งเพิ่มเติมที่ 9.5 สามารถใช้เครื่องหมาย วงเล็บใหญ่ [ ] ในการเพิ่มเติมค่าของ selector เพื่อกำหนดค่าของ attribute ของ element หรือ value

selector นั้นสามารถผสมรูปแบบเข้าด้วยกันได้ โดยเรียงตามลำดับความสัคัญตามบรรทัดที่เขียน หรือที่เรียกใช้งาน แต่โดยส่วนใหญ่แล้ว เราจะเลือกใช้แค่ 1 หรือ 2 แบบเท่านั้น และเรายังสามารถกำหนด selector ให้แตกต่างกันได้ด้วย โดยให้มีรูปแบบที่เหมือนกัน แม้ว่า selector จะอยู่คนละ group ก็ตาม

บทที่ 9 การตั้งค่าให้กับ selector

จากบทเก่าๆที่ผ่านมาแล้วๆนั้น จะทำให้เราทราบได้ว่า มีสองส่วนประกอบหลักของ CSS style rule นั่นคือส่วนของ selector ที่เป็นตัวบ่งบอกถึงส่วนที่มีผลของรูปแบบที่เราต้องการกำหนด และส่วนของ declarations ที่กำหนดรูปแบบว่าเราต้องการให้เป็นแบบไหนอย่างไร โดยในบทนี้ เราจะศึกษาถึงเรื่องของการกำหนดค่าของ CSS selector

ปรกติเราจะมี selector ที่เป็นการกำหนดค่าที่ทำให้มีผลในทุกๆส่วน เช่น h1 ไม่ว่าอยู่ตำแหน่งใดๆของเอกสาร ก็ยังเป็น h1 ที่เหมือนกันโดยตลอด แต่เราจะใช้ตัว selector ที่เป็นตัวกำหนดความแตกต่างได้ว่า h1 ที่หน้านึง อาจจะให้ไม่เหมือนกันกับ h1 ของอีกหน้านึงก็ได้โดยใช้ selector นั่นเอง โดยแบ่งแยกด้วย class หรือ id

หลังจากที่เราได้กำหนดค่าของ selector มาแล้ว เราก็ต้องกำหนด (declaration) ว่าจะให้ selector นั้นๆมีรูปแบบเป็นแบบใด ซึ่งการกำหนดรูปแบบเราจะกล่าวในบทท้ายๆ ตอนนี้เราก็จะใช้รูปแบบที่ง่ายๆไปก่อน เช่น {color:red;} เป็นต้น

เปิดดู css แบบ online

จะว่าไปแล้วการเปิดดู style sheet แบบ online เลยนั้น ก็ไม่ได้ยากอะไร เหมือนกับการเปิดเว็บธรรมดาทั่วไปนั่นเอง

การดู style sheet นั้นๆ
1.เริ่มจากการ view source code ของเว็บหน้านั้นดูก่อน เพื่อจะได้ดูว่าเค้าเก็บ css เอาไว้ที่ไหน

สิ่งเพิ่มเติมที่ 8.19 การเปิดดู source เพื่อดูตำแหน่งที่เก็บ จากตัวอย่างจะเห็นได้ว่ามี style ที่ชื่อ styles.css เก็บเอาไว้ในแฟ้มเดียวกันกับหน้าเว็บ
2.แต่ถ้าไม่ได้ อยู่ใน link ดังข้อที่ 1 ให้ลองมองหา เพราะว่าอาจจะอยู่ใน style โดย @import rule ก็ได้
3.วาง style sheet URL ใน address ของ browser ที่ใช้งานอยู่


สิ่งเพิ่มเติมที่ 8.20 Address bar ที่แสดงที่เก็บของไฟล์ ที่ ณ ปัจจุบันกำลังเปิดใช้งานอยู่


สิ่งเพิ่มเติมที่ 8.21เราก็เปลี่ยน URL ของเราให้เป็นชื่อไฟล์ (และต้องดูตำแหน่งให้ถูกต้องด้วย เพราะว่าบางเว็บไม่ได้เก็บ style เอาไว้ที่เดียวกับหน้าเว็บ) จากนั้นกด Enter เราก็จะเห็นไฟล์ หรือเป็นไฟล์ให้เรา download ในทันทีเลย

ความสำคัญของตำแหน่ง style sheet

มีหลากหลายวิธีในการกำหนด style เพื่อให้จุดที่เราต้องการเปลี่ยนนั้นได้รับค่าที่เรากำหนดให้ แต่จะเกิดอะไรขึ้นล่ะ ถ้าเรากำหนดให้มี style มากกว่า 1 rule ผ่านช่องทางที่ต่างกัน แต่กำหนดเข้าไปที่เป้าหมายเดียวกัน โดยคำตอบก็อยู่ในเรื่องเก่าที่เราเคยได้กล่าวเอาไว้แล้ว ในเรื่องการสืบทอดจาก child >> parent นั่นเอง

<link rel=”stylesheet” type=”text/css” href=”styles.css” />
<style>img {border-style: dashed}</style>
</head>
สิ่งเพิ่มเติมที่ 8.17 สั่ง style ซ้ำ rule ที่มีอยู่ใน style sheet ที่ link เข้ามาใช้ โดยให้ style นั้นอยู่บรรทัดต่อจาก link

โดยการกำหนดแบบนี้ ทำให้เกิดการสร้าง rule ซ้ำขึ้นมา สุดท้าย browser จะกำหนดให้ rule ท้ายที่สุดที่จะมีผลต่อ สิ่งนั้นๆ โดยค่าอะไรที่ไม่ได้ถูกกำหนดซ้ำก็เรียกใช้ค่าที่เคยกำหนดเอาไว้แล้วออกมาใช้ จากตัวอย่างที่ 8.17นั้น เราได้กำหนดสี และขนาดของเส้นขอบเอาไว้แล้ว แล้วเราก็ style ซ้ำอีกครั้งเพื่อเปลี่ยนจากเส้นทึบให้เป็นเส้นขีด

สิ่งเพิ่มเติมที่ 8.18 เส้นขอบที่เปลี่ยนจากเส้นทึบเป็นเส้นประ จาก style อันสุดท้ายที่เราได้กำหนดเอาไว้ โดยที่สียังคงเป็นสีเดิมเพราะว่าไม่ได้สั่งให้เปลี่ยนไปเป็นสีอื่น