เริ่มต้นกับ css

หลายคนยังสับสนในเรื่องของ css กับ html พอสมควร ดังที่ผมได้พูดคุยแลกเปลี่ยนกันทาง Windows Live Messenger [MSN] ซึ่งทำให้ผมต้องปรับโครงสร้างเว็บใหม่ เพื่อ ทำความเข้าใจกับ CSS ให้มากยิ่งขึ้นครับ และสำหรับผู้เริ่มต้นเลย ไม่รู้จะเอายังไง ก็เชิญแวะมาเลียบๆ เคียงๆ กันทางนี้ก่อนนะครับ

ก่อนอื่นมาแยกกันก่อนว่า แม้เราจะบอกว่า เขียนเว็บ ออกแบบเว็บด้วย css อย่างไรก็ตาม แต่แท้จริงแล้ว หาใช่ css อย่างเดียวไม่ เพราะ css เป็นเพียงแค่ตัวสร้างสีสัน ความสวยงาม จัดการเลย์เอ้าท์ ซึ่งเราต้องเขียนควบคู่ไปกับ [x]html

[X]HTML เป็นส่วนสำคัญของการวางโครงสร้างของข้อมูล ส่วน CSS นั้น เป็นส่วนของการจัดการรูปแบบของโครงสร้างของข้อมูลหรือเรียกง่ายๆ ว่า เป็นส่วนของการออกแบบเลย์เอ้าท์หน้าเว็บนั่นเอง

อย่างไรคือการวางโครงสร้างข้อมูล อย่างไรคือการจัดวางโครงสร้างข้อมูล

การวางโครงสร้างข้อมูลด้วย HTML แต่เดิมทีนั้น อาจจะ เช่น <font></font> หรือ <h1></h1> หรือแม้กระทั้ง table เองก็ตาม

การจัดการรูปแบบของข้อมูลของ html ก็เช่น

<table width=”500” height=”500” bgcolor=”black”></table>

  1. <table></table> คือ การวางโครงสร้างของข้อมูล
  2. width=500 height=500 bgcolor=black คือการจัดการรูปแบบของโครงสร้างของข้อมูล

ในที่นี้คือให้ตารางนี้มีความกว้าง 500 พิเซล สูง 500 พิกเซล พื้นหลังสีดำ

ด้วยลักษณะของการเขียน โค้ดแบบ html ฝังติดไปในบรรทัดเดียวกัน ทำให้เวลาที่เราจะกลับมาเรียกแก้ไข มันยากต่อการค้นหา และแก้ไขในอนาคต ส่วนนี้เองที่ CSS มีบทบาทเข้ามาเกี่ยวข้อง ซึ่งเรียกว่า การนำข้อมูลมาจัดระเบียบ จัดวางให้เข้าที่เข้าทางในรูปแบบเฉพาะตัวนั่นเอง

ที่สำคัญคุณสมบัติของการจัดวางโครงสร้างข้อมูลของ HTML อาจจะมีขีดจำกัดในเรื่องของการสนับสนุนบางเทคโนโลยีในอนาคต เช่น เขียนเว็บบน โทรทัศน์ ใช่ครับ บนทีวี หรือที่เห็นง่ายๆ บนมือถือและอื่นๆ ที่ต้องเน้นความรวดเร็ว และกินทรัพยากรน้อยๆ เป็นหลัก ซึ่ง <table> คือตัวอันตรายที่สุดที่เขาถกเถียงกัน

ข้อดีสำคัญของ CSS

  1. ไฟล์แต่ละหน้าเล็กลงกว่าเดิม เพราะโค้ดน้อยกว่า
  2. มีความยืดหยุ่นสูงในการปรับแต่งแก้ไขในอนาคต
  3. สามารถควบคุมเว็บหลายๆ หน้าได้ด้วย style sheet เพียงแค่ ไฟล์เดียว
  4. สามารถจัดการเลย์เอ้าท์ได้อย่างละเอียด แม่นยำ
  5. ง่ายในการเรียกดู Source
  6. ใช้ดีกับระบบเสิร์ชเอ็นจิน ซึ่ง ระบบเสิร์สเอ็นจิ้นต่างๆ
  7. อื่นๆ

แค่นี้คงจะพอทำความเข้าใจกันได้นะครับ สำหรับผู้เริ่มต้นจริงๆ แค่เพียงเยกออกให้ได้ว่า xhtml หรือ css ก็สามารถเดินต่อขั้นต่อไปได้ไม่มีปัญหาแล้วหละครับ

รักกันชอบกันอย่าลืมแชร์นะครัช:
0

Back to Top

22 Responses to เริ่มต้นกับ css

  1. artofid

    เพิ่มเติมนะครับ

    เวลาสร้าง table คุณลองนึกภาพว่า คุณจะสร้างโดย เหมือนสร้างกรงขึ้นมา (หมายถึงการแบ่ง tr td เรื่อยๆ) แล้วเอาเนื้อหาไปใส่ ถ้าเนื้อหามีการย่อหน้าหรือเปลี่ยนตำแหน่ง คุณก็จะสร้างกรงขึ้นมาซ้อนเข้าไปเรื่อยๆ

    ส่วนการสร้างโดยใช้ CSS นั้น คุณจะต้องเปลี่ยนการคิดใหม่สักหน่อย สิ่งที่คุณสร้างไม่ใช้กรง แต่มันเป็นกล่อง กล่องที่พร้อมจะลอยไปที่ไหนในหน้าก็ได้ ลักษณะของกล่องส่วนมากมักจะลอยไปแบบตัวใครตัวมัน คือเป็นกล่องเล็กๆ ลอยอยู่ในกล่องใหญ่ ซ้อนไปเรื่อยๆ ทีนี้ในโค้ด html มันจะเห็นแค่ <div>xxxx</div> ตัวที่กำหนดว่ากล่องแต่ละกล่องจะลอยไปทางไหน อยู่ตำแหน่งใด แบ็คกราวยังไง ลักษณะ text ในกล่องนั้นเป็นยังไง ก็คือ CSS ครับ

    Reply

  2. doo_doo

    เยี่ยมยอด เว็บนี้ถือว่าเป็นผู้บุกเบิก css เลย

    สำหรับมือใหม่ ต้องใช้พื้นฐานสักนิด เริ่มต้นใช้ style หรือ class ที่ง่ายๆก่อน

    ส่วนบริษัทที่จำเป็นต้องใช้ css คือบริษัทต่างชาติ

    บริษัทคนไทย อาจจะยังไม่สนใจเท่าไรนัก

    Reply

  3. Step9

    ดูเหมือนLayerเหมือนกันนะครับ

    Reply

  4. joedocg

    เจ๋งดีครับ ขอบคุณมาก

    Reply

  5. PimGie

    น่าลองค่ะ

    แต่คงต้องเรียนรู้อีกมาก

    Reply

  6. กร

    ทำแต่หน้าแรกเป็น Css ได้ไหมครับ

    กำลังหัดทำเว็บนี้
    http://www.ivehomespa.com

    Reply

  7. zakurabau

    ก็ยังไม่ค่อยเข้าใจอยู่ดี ช่วยอธิบายขั้นตอนด้วยนะคะ เพราะเราเพิ่งจะเริ่มทำบล็อก แต่ยังทำไม่เป็นน่ะ

    Reply

  8. foocss

    คห.แรกโดยคุณ artofid อธิบายได้แจ่มมากครับ ขอบคุณครับ

    Reply

  9. กช

    อยากทำ แต่ยังมีความรู้ไม่พอ

    Reply

  10. 10z

    http://www.modelalive.com

    พอจะแนะนำเรื่องCSSได้ไหมงับ จะทำกับเวปนี้

    Reply

  11. kalamank

    ขอบคุณมากค่ะ…จะเอาไปทำดูนะคะ แต่ไม่รู้จะสำเร็จอ๊ะป่าวดิ่…สู้ๆ

    Reply

  12. ทิพค่ะ *-*

    เราพึ่งจะทำงานเกี่ยวกับเว็บอ่ะค่ะ มึนตื้บเยย ไม่เป็นอะไรซักอย่าง TT^TT ขอบคุณมากนะคะสำหรับความรู้ที่นำมาแจกจ่าย

    Reply

  13. boycs

    ผมกำลังจะศึกษา css ครับ ช่วยชี้แนะด้วย

     

    Reply

  14. 55

    ผมต้องการสร้างพื้นที่ร่วมแสดงความคิดเห็น เหมือนด้านล่างของเวบนี้ ต้องใช้ซอสตัวไหน อะไร ยังไงบ้างครับ …..

    Reply

  15. 55

    ขอความช่วยเหลือจากผู้รู้ทุกท่าน โปรดช่วยแนะนำด้วยขอรับ…..๑*_*๑ อยากที่จะรู้ว่ามีคนมา post แสดงความคิดเห็นบ้างไหม และจะได้รู้ข้อคอมเมนท์ต่างๆ ….. (ผมไม่แน่ใจว่าเรียกถูกหรือเปล่าครับ)

    Reply

  16. ผู้แสวงหา

    เวปนี้ดีมากเลยให้ความรู้เกียวกับ css เยอะมาก เพราะตัวผมเองไม่เคยได้สนใจกับเวปมากเท่าไรใช้แต่ Dreamweaver ลากๆแปะจบ แต่เลยออกมาไม่ค่อยสวยเท่าไรเลยนั้งหาวิธีมากเลยมาเจอเว็บนี้โดนเลย

     

     
    ผมเลยตอบแทนโดยหาหนังสือ CSS มาแจกคับ

      http://www.uploadd.com/download.aspx?pku=334207FB9FCLCAXJ99NT398SVMM9GI

    Reply

  17. พร อันทะ

    *** แก้ไขเพิ่มเติม 12 มกราคม 2551

    Reply

  18. คุณชายซอดอง

    ขอบคุณมั่ก ๆ เลยน๊ะคับที่เขียนเนื้อหาประเภทนี้ออกมา

     

     
    ได้ความรู้เย๊อะเรยค้าบบบ

     

     
    ^^\’\’

    Reply

  19. K_k

    เพิ่งเริ่มหัด Web design ด้วย CSS เพื่อทำ web standard อ่ะครับ พี่ๆน้องๆ มีอะไรบ้างที่ผมควรรู้ ช่วยแนะนำด้วยนะค้าบบ

    Reply

  20. K_k

    เพิ่งเริ่มหัด Web design ด้วย CSS เพื่อทำ web standard อ่ะครับ พี่ๆน้องๆ มีอะไรบ้างที่ผมควรรู้ ช่วยแนะนำด้วยนะค้าบบ

    Reply

  21. NP99

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

     

    Reply

  22. mOd-x

    ทำ web app อยู่อ่ะค่ะ เปงโปรเจคจบ พอดีนู๋ไม่รู้จักเลยเจ้า css อารายเนี่ย ขอบคุณสำหรับบทความดี ๆ นะคะ ทำให้พอเข้าใจมากขึ้น นู๋ทำเว็บ แต่แบ่งหน้าโดยใช้ตารางเอาอ่ะค่ะ และอยากทำได้เหมือน คห แรก ที่มันสามารถขยับล่องลอยได้ มันทำยังไงอ่ะคะ แต่เพื่อนมันแนะนำให้เขียน Ajax พอดีนู๋เห็นว่ามันมี css จะทำง่ายก่าไหมคะ นู๋ถนัดแต่เขียนโปรแกรมอ่ะค่ะ แต่ตกแต่งไม่เป็น ช่วยชี้แนะหน่อยนะคะ

    Reply

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back to Top

Social media & sharing icons powered by UltimatelySocial