Blogs

Syntax ของ CSS ตอนที่ 1

สวัสดีเพื่อนๆทุกคนวันนี้พอมีเวลาว่างนิดหน่อยและ นักศึกษาหลายๆคนช่วงนี้ก็คงเป็นช่วงฝึกงาน มีหลายคนทักมาถามผมเกี่ยวกับ 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