สวัสดีเพื่อนๆทุกคนวันนี้พอมีเวลาว่างนิดหน่อยและ นักศึกษาหลายๆคนช่วงนี้ก็คงเป็นช่วงฝึกงาน มีหลายคนทักมาถามผมเกี่ยวกับ CSS วันนี้ผมจะขอตอบทุกคำถามตรงนี้เลย ผมจะพาไปรู้จักโครงสร้างของ CSS ว่า CSS มันมีโครงสร้าง หรือ Syntax หลัก มันเป็นอย่างไรแล้วเราจะเลือกเขียนแบบไหนดี เพราะมีหลายวิธีให้เราเลือกเยอะซะเหลือเกินอยู่ที่กรณีว่าเราจะเลือกหยิบแบบไหนมาใช้ ก่อนอื่นผมจะพาไปรู้จักองค์ประกอบของ Selector ว่า CSS มันประกอบด้วยอะไรบ้าง มาถึงตอนนี้อย่าเพิ่งท้อก่อน เพราะภาษา CSS เป็นภาษาที่ไม่ยากเลย ภาษาค่อนข้างจะเป็นภาษาที่เราเข้าใจได้ง่าย คล้ายคลึง กับคำศัพท์ที่เรารู้อยู่แล้วในปัจุบัน เช่น Color Background อะไรพวกนี้ และภาษาที่ควรรู้อีกภาษาก่อนที่จะมาเขียน CSS คือ HTML (อันนี้สำคัญ)เพราะสองภาษานี้มันจะทำงานคู่กัน ตอนนี้เราก็พูดกันมาเยอะแล้วเรามาเข้าเนื้อหาเลยดีกว่า พร้อมหรือยัง พร้อมแล้วไปกันเลย
ชนิดของ SELECTOR
ในการกำหนดชื่อของ Selector จะมีวิธีเขียนได้หลายแบบเพื่อให้ตรงความต้องการและเหมาะสม เพื่อให้ใช้งานได้สัมพันธ์กันระหว่า HTML และ CSS เพื่อให้ บราวเซอร์สามารถแสดงผลได้ถูกต้องตามที่เราเขียน หากไม่สัมพันธ์กัน บราวเซอร์ก็จะนำค่า Default มาแสดงแทน
1.TYPE SELCTOR
ใช้ชื่อของ HTML Tag โดยตรง เช่น h1, h2, h3, body ผลที่ได้จะเกิดขึ้นโดยตรงกับ Tag นั้นๆ ในทุกๆที่เช่น หากกำหนด <h3> ให้เป็นตัวอักษรหนาทั้งหมด ทุก <h3> ก็จะเป็น ตัวหนาทั้งหมด
2.CLASS SELECTOR
เป็นการกำหนดด้วยชื่อเฉพาะที่ผู้เขียนกำหนดขึ้นมาเอง เรียกว่า Class Name สามารถใช้ชื่อนี้ซ้ำ (ซ้ำได้) ได้หลายๆที่ในแต่ล่ะหน้าของ HTML อย่างไม่จำกัด และการเขียนชื่อ Selector ของ Class Name ใน CSS ต้องใช้จุดนำหน้าชื่อเสมอ ในการเรียกใช้ใน CSS
หรืออาจเขียนอีกแบบโดยกำกับ Tag ไว้หน้า Class Name ก็ได้
3.ID SELECTOR
เป็นการกำหนดค่าเฉพาะที่ให้กับ Element ที่ใช้เพียงครั้งเดียวเท่านั้น(ครั้งเดียวเท่านั้น)ในหน้าหนึ่ง การตั้งชื่อ ใน CSS ใช้ # นำหน้าเสมอ และใน HTML ต้องกำหนดชื่อด้วย ID
หรืออาจเขียนในลักษณะนี้เป็นการเขียน Tag กำกับไว้หน้า ก็ได้เช่นกัน
สรุป ID กับ Class หัวใจสำคัญของสองตัวนี้คือ ถ้ามีการเรียกใช้ครั้งเดียว ใช้ ID แต่ถ้ามีการเรียกใช้หลายครั้งใช้ Class สองตัวนี้ ไม่มีผล กับ search engine ถ้ากังวลว่าจะใช้กี่ครั้ง ก็ทำเป็น Class ซะ ฮ่าๆ แต่ความสำคัญ ID จะสูงกว่า Class นะครับ เช่น
แต่ถ้ามันเรียกใช้ มันจะเรียกใช้ background ของ #main
4.CONTEXTUAL SELECTOR
คือ Selector ที่ใช้อ้างถึง Tag ตัวใน ที่ถูกวางซ้อนอยู่เป็นชั้นๆต่อลงไป โดยเขียนเรียงต่อกันไปจนถึง Element ที่ต้องการ หรือเขียนเฉพาะต้นและปลาย ก็ได้ เช่น ต้องการ อ้างถึง <h3> ที่อยู่ใน ID Selector “div2” จะเขียนเป็น
5.PSEUDO ELEMENT และ PSEUDO CLASS SELCTOR
เป็น Element และ Class พิเศษ ที่ใช้ประกอบกับ Selector ให้มีความหมายเฉพาะที่ CSS กำหนดไว้
Pseudo Element
- first-child คือ Element ที่ตามมาตัวแรกซึ่งจะเป็นอะไรก็ได้
- first-line คือ บรรทัดแรก Element
- first-letter คือ ตัวอักษรแรกของ Element
- befor ก่อน Element นั้น
- after หลัง Element
Pseudo Class อันนี้เรามักใช้กับสถานะของลิงค์
- link ใช้แสดงว่าลิงก์ในครั้งแรกที่ยังไม่มีการกระทำ
- visited ลิงก์ที่ได้กดเลือกไปแล้ว
- hove ลิงก์ที่เมื่อเมาส์ชี้อยู่บนลิงค์
- active ลิงก์ขณะที่เรากด Click
เพื่อเป็นการไม่ให้บทความยาว เกินไป และให้ลองไปเขียนโค๊ดลองทำดู ผมจะขอยกส่วนที่เหลือไป ตอนที่ 2
