เรียนรู้การเจาะจงองค์ประกอบอย่างแม่นยำด้วยตัวเลือกแบบองค์ประกอบ คลาส และไอดี จากนั้นนำสีมาใช้กับมัน
เปิดบทเรียนนี้ใน Kodokonตัวเลือก (selector) คือส่วนของกฎ CSS ที่บอกว่าจะจัดสไตล์ให้องค์ประกอบใด ตัวที่ง่ายที่สุดคือ ตัวเลือกแบบองค์ประกอบ (element selector) คุณเขียนชื่อแท็กโดยไม่มีวงเล็บมุม p เจาะจงทุกย่อหน้า h1 เจาะจงทุกหัวข้อระดับบนสุด วิธีนี้ใช้ได้ดี แต่บางครั้งก็กว้างเกินไป จะเป็นอย่างไรถ้าคุณต้องการใส่สีให้ย่อหน้าเพียงหนึ่งย่อหน้าจากสิบย่อหน้า? นั่นคือจุดที่คลาสและไอดีเข้ามามีบทบาท
คลาส (class) คือป้ายกำกับที่คุณติดกับองค์ประกอบ HTML หนึ่งรายการหรือมากกว่านั้นด้วยแอตทริบิวต์ class ในฝั่ง CSS คุณเจาะจงมันด้วยจุด .important เลือกทุกองค์ประกอบที่มี class="important" ส่วน ไอดี (id) คือป้ายกำกับที่ ไม่ซ้ำกัน (unique) มันต้องปรากฏเพียงครั้งเดียวต่อหน้า เช่น บนส่วนหัว ในฝั่ง CSS คุณเจาะจงมันด้วยเครื่องหมายแฮช #header
<h1 id="main-title">My cooking blog</h1>
<p class="highlight">Recipe of the day: the pie.</p>
<p>A perfectly ordinary paragraph.</p>
<p class="highlight">Tip: preheat the oven.</p>#main-title {
color: darkgreen;
}
.highlight {
background-color: yellow;
}
p {
color: black;
}ในตัวอย่างนี้ หัวข้อจะกลายเป็นสีเขียวเข้ม ย่อหน้าสองย่อหน้าที่กำกับด้วย highlight จะได้พื้นหลังสีเหลือง (background-color กำหนดสีพื้นหลัง) และทุกย่อหน้าจะมีข้อความสีดำ จำความแตกต่างไว้ให้ดี คลาส นำกลับมาใช้ซ้ำได้ (reusable) กับองค์ประกอบกี่ตัวก็ได้ตามที่คุณต้องการ ในขณะที่ไอดี ไม่ซ้ำกัน (unique) ภายในหน้า เมื่อไม่แน่ใจ ให้ใช้คลาส
ตอนนี้มาพูดถึงสีกัน CSS ยอมรับสัญกรณ์หลายแบบ ชื่อสี (color names) (red, blue, orange...) นั้นเรียบง่ายแต่มีจำกัด สัญกรณ์เลขฐานสิบหก (hexadecimal notation) เริ่มด้วย # ตามด้วยอักขระหกตัวที่กำหนดปริมาณสีแดง สีเขียว และสีน้ำเงิน #ff0000 คือสีแดงล้วน สุดท้าย สัญกรณ์ rgb() แสดงปริมาณเดียวกันด้วยตัวเลขตั้งแต่ 0 ถึง 255 rgb(255, 0, 0) ก็คือสีแดงล้วนเช่นกัน
.highlight {
color: tomato;
background-color: #fff3cd;
}
#main-title {
color: rgb(0, 100, 0);
}class="menu"?