เริ่มเขียน CSS | selector { property: value;}

Selector

คือส่งแรกที่สุดที่ควรรู้ แล้วคืออะไรหว่า ชื่อคลาส ชื่อไอดี หรือ [X]HTML tag ใดๆ ใน CSS นั้น เรียกว่า Selector ครับ

โดย คลาส นั้นใช้ . (ดอท) ในการบ่งบอกว่าเป็นคลาส ส่วน ไอดี นั้นใช้ # (ชาร์พ) เป็นตัวบอกว่านี่คือไอดีนะ ส่วน html tag หรือ ใส่มันลงไปโต้งๆ เลยครับ เช่น body (ส่วนของ body) หรือ img (รูปภาพ)

Property

คือชื่อคุณสมบัติของ css เช่น width, height, position ฯลฯ

Values

คือค่าของ property นั้นๆ ครับ เช่น 500px สำหรับความกว้าง

ภาพประกอบ ด้านล่างครับ

ภาพตัวอย่าง การเขียน selectoพ property และ value

Back to Top

8 Responses to เริ่มเขียน CSS | selector { property: value;}

  1. iannnnn

    กำลังจะถามเรื่องความแตกต่างระหว่าง class กะ id อยู่พอดีเลยครับ

    ขอบคุณครับ เดี๋ยวจำไปแก้เว็บตัวเองมั่ง

    Reply

  2. raQuiam

    ผมว่ามันต่างกันนะครับในเรื่องการใช้คลาสกับไอดี

    ส่วนใหญ่ผมจะใช้ไอดีกำหนด style ในส่วนประกอบหลักของหน้า เช่น #container, #header, #sidebar, #footer เป็นต้น

    โดยตั้งโจทย์ขึ้นมาว่าถ้าจะเปลี่ยน theme ของทั้ง site แต่ละส่วนหน้าตาจะเป็นอย่างไรบ้าง ส่วน class ใช้เหมือนกับที่ คห.1

    กล่าวคือสำหรับ style ที่ "เกิดขึ้นซ้ำ" ในหลายๆ element ได้

    ในส่วนของคลาสเราสามารถกำหนดเฉพาะบางส่วนแล้วนำมารวมกันใน element เดียว ยกตัวอย่างเช่น

    .gray { color:#808080; }

    .smal { font-size:0.8em; }

    เวลาเอาไปใช้:

    <p class="small gray">blah blah</p>

    ส่วนเรื่องที่กำหนดไอดีซ้ำในหน้าเดียวกันนั้นถือเป็นข้อห้ามเลยครับ สำหรับคนที่เขียน JavaScript หรือทำเว็บแบบ AJAX ที่

    กำลังอินเทรนด์กันอยู่ เนื่องจาก DOM จะหา element ไม่เจอ (ก็ไอดีมันซ้ำกัน) แล้วทีนี้จะทำอะไรต่อก็ไม่ได้แล้วครับ

    เป็นความคิดเห็นส่วนตัวนะครับ ถ้าผิดพลาดประการใดก็ขออภัยด้วย เพิ่งเคยเข้ามาที่ ThaiCSS เป็นเว็บที่มีประโยชน์มากครับ

    ขอเอาใจช่วย :)

    Reply

  3. dogdoy

    มีประโยชน์มากครับ ทั้งบทความและ comment :)

    Reply

  4. Ake

    อ่าใช่ครับ เห็นด้วยกับ 4

    Reply

  5. artofid

    ถ้าถามว่า แล้วคลาสกับไอดีต่างกันอย่างไร จริงๆ ไม่ต่างกันครับ เพราะเรากำหนด property ให้ได้เหมือนกัน แต่จะต่างกันตรงที่ ตัวที่เรากำหนดเป็นคลาสจะใช้หลายๆที่ใน 1 หน้า เช่น ตัวหนังสือสีแดง ตรง header แล้วก็ใช้ ตัวหนังสือสีแดงแบบนี้ตรง footer ด้วย (สรุปแล้วทั้งหน้า ใช้ 2 ที่) ส่วนไอดีนั้น จะเป็น property ที่มีที่เดียวใน 1 หน้า จะไม่มีเกินกว่านี้ เช่นกล่องเมนูด้านขวามีแบ็คกราวรูปภูเขา ตัวหนังสือสีฟ้า และจะไม่มีกล่องเมนูแบบนี้อีกในหน้านี้

    *ถ้าคุณกำหนดเป็นไอดีแล้วใช้เกิน 1 ที่ใน 1 หน้า จริงๆก็ไม่ได้เกิดเรื่องราวอะไรใหญ่โต แต่ถ้าใช้โปรแกรมตรวจว่าถูกตาม W3C หรือปล่าว ก็จะขึ้น warning ขึ้นมา (รู้สึกเหมือนความเท่จะลดลงมั้ง) เราใช้เพื่อให้ง่ายกับตัวเราในการที่จะรู้ทันทีว่า จะแก้ตรงนี้แล้วจะกระทบกับกี่ที่ในหน้าบ้าง

    Reply

  6. takereu

    สำหรับท่านที่ใช้ Javascript AJAX หรือ DOM จะเห็นความแตกต่างระหว่าง คลาสและid อย่างชัดเจนเลยครับ

    getElementById("id")

    เป็นประโยชน์มากมาย

    Reply

  7. goragod

    เห็นด้วยกับกระทู้ที่ 3 ครับ โดยเฉพาะถ้าต้องใช้กับ Javascript AJAX หรือ DOM ก็กำหนดให้ใช้ ID ไปเลย ไม่ต้องใช้ class กับ tag นั้นๆ เนื่องจาก ID มันควรจะมีเพียงหนึ่งเดียวในหนึ่งหน้าครับ นอกจากนี้แล้วเรายังสามารถกำหนด ลำดับชั้นได้ด้วยครับ

    a {

    กำหนดให้กับ tag a ทั่วๆไป

    }

    #id1 {

    กำหนดให้กับ id1

    }

    #id1 a{

    กำหนดให้กับ tag a ที่อยู่ภายใน id1 เท่านั้น

    }

    Reply

  8. Prunus' Xd

    ว้าวๆ น่าสนใจมากค่ะ :)

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Connect with Facebook

Back to Top