Home > เริ่มต้นกับ CSS > 10 ข้อเบสิคควรทำเมื่อเริ่มเขียน CSS part1

10 ข้อเบสิคควรทำเมื่อเริ่มเขียน CSS part1

????? การเขียนเว็บด้วย CSS นั้นก็เพื่อลดปริมาณการ coding ลง ถ้ายิ่งเขียนแล้วโค้ดเพิ่มมากขึ้น นั่นก็คงไม่ใช่วิธีการเขียนที่ถูกต้อง เพราะเว็บที่ใช้ CSS นั้นจะต้อง

  • ดาวน์โหลดเร็ว
  • แสดงผลเร็ว
  • แสดงผลเหมือนกันในหลาย browser
  • สามารถแก้ไขปรับปรุงเปลี่ยนแปลงได้ง่าย

1. Use external style sheets
???คุณควรใช้ CSS โดยการการเรียกจากภายนอกทุกครั้ง เท่าที่จะเป็นไปได้ แทนที่จะเขียนอยู่ใน?xhtml ของคุณโดยตรง แน่นอนว่าวิธีนี้จะช่วยให้หน้าเว็ยเพจของคุณมีขนาดเล็กลง และก็จะทำให้ดาวน์โหลดได้เร็วมากขึ้น และก็ช่วยเซฟ Bandwitch อีกด้วย

<link rel="stylesheet" type="text/css" href="/css/styles.css" />

หรือสามารถเรียกโดยใช้ @import

<style type="text/css">       

?   @import '/css/styles.css';       

</style>

2. Use CSS for all styling
หลาย tag ที่เราใช้กันใน html ไม่ว่าจะเป็นการ layout หรือจัดรูปแบบต่าง สามารถที่จะเขียนแทนที่ด้วย CSS ตัวอย่าง

Bad:  <table align="center"> 
Good: <table style="margin: auto">    

Bad:  <td valign="top"> 
Good: <td style="vertical-align: top">    

Bad:  <body bgcolor="#FFFFFF" marginwidth="10" marginheight="10" 
                 leftmargin="10" rightmargin="10" topmargin="10"> 
Good: <body style="background: #fff; margin : 10px;">

ตัวอย่างนี้แสดงให้เห็นถึง การแทนที่กันได้ ของ css เท่านั้นครับ ส่วนรูปแบบการเขียนนั้น เรามาดูข้อต่อไป

3. Try to avoid using the ?style? attribute
เราควรหลีกเลี่ยงการเขียน style=”" ฝังลงใน tag ทำไมล่ะ?

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

เราจะใช้เวลาในการวางแผนล่วงหน้าซักเล็กน้อยครับ แล้วใช้ CSS classes and ID เข้าไปแทนที่ style จะทำให้ code ดูดีขึ้นมากเลย

4. Reproducing cellspacing=?0? with CSS
ลดการใช้ cellspacing=”0″ ด้วย css เรามาดูกัน

อย่างนี้สงสัยไม่ดี:    

    <table cellspacing="0" cellpadding="3" border="1"> 
        <tr> 
            <td>Example</td> 
        </tr> 
    </table>    

อย่างนี้ดีกว่านะ:    

    <style type="text/css"> 
        table { border-collapse : collapse; } 
        td { padding : 3px; border : 1px solid #000; } 
    </style>    

    <table> 
        <tr> 
            <td>Example</td> 
        </tr> 
    </table>

5. Id?s once, classes many
มีหลายๆคนเลยนะครับ ที่ใช้ id กับ class อย่างสับสนปนเปกัน โดยไม่รู้ว่า มันใช้ต่างกันอย่างไร ให้จำไว้เลยนะครับว่า ID ใช้เมื่อมันมีอันเดียว 1 เดียว และเป็นอะไรที่สำคัญๆครับ ส่วน class จะใช้เมื่อมันมีหลายๆอัน ซ้ำๆกัน คล้ายๆกับ แม่กับลูกอะนะ แม่1 คนมีลูกหลายคนอะ อธิบายแบบชาวบ้านๆ :) อิอิ

แบบนี้ไม่ถูก: 
    <p id="some-style"> 
        Para 1. 
    </p>    

    <p id="some-style"> 
        Para 2. 
    </p>    

แบบนี้ถูก: 
    <p class="some-style" id="para-1"> 
        Para 1. 
    </p> 
    <p class="some-style" id="para-2"> 
        Para 2. 
    </p>

อ่านต่อ PART 2 >>

Related Articles


About the author

Webmaster ของเว็บนี้และ www.toysmile.com กับ www.wondercutie.com ความสามารถ : web design, graphic design, CSS, PHP programming, wordpress, magento ตอนนี้กำลังสนใจ : การออกแบบ ตัวการ์ตูน คาแรคเตอร์ ^^

Website : http://www.divland.com

Facebook : http://www.facebook.com/divland

Twiter : http://twitter.com/divland


  1. Dack Zee..
    August 4th, 2007 at 11:02 | #1

    เพิ่งเข้ามาเว็บนี้ครั้งแรกครับ หาเว็บอย่างนี้มานานแล้ว ชอบมากๆ ขอให้ทีมงานสู้ๆๆ เป็นกำลังใจให้ครับ:x:)>-

  2. August 5th, 2007 at 14:46 | #2

    ไม่มีหรอกครับทีมงาน มีผมคนเดียวครับ @-)

  3. OLO
    August 9th, 2007 at 18:22 | #3

    ไม่คิดว่า css จะมีแบบย่อๆ และวิธีใช้งานอย่างนี้ค่ัะ ครั้งก่อนสงสัยที่ทำไปไม่ช่วยลดโค๊ดเลย อิๆๆ
    ขอบคุณสำหรับความมีน้ำใจแบ่งปันความรู้นะค่ะ:d/

  4. aomze
    October 15th, 2007 at 17:49 | #4

    เปนเวบที่ดีมาก ให้ความรู้ดี ขอบคุณค่า:)

  5. toey
    October 30th, 2007 at 18:43 | #5

    ขอบคุณคะ ทำให้เข้าใจมากขึ้น ขอให้ช่วยทำต่อๆไปนะคะ ;)

  6. smile
    January 30th, 2008 at 13:17 | #6

    Impressive mak mak leaw ka.

    เก่งอย่างแบ่งปันจริงๆ ขอให้เจริญรุ่งเรืองยิ่งๆขึ้นไปนะคะ

    ขอบคุณมากสำหรับความรู้

  7. aekiji
    February 13th, 2008 at 18:54 | #7

    ฮือๆๆ..ซึ้งจายยยย..มีเว็บดีๆแบบนี้ ขอบคุณมากคร้าบบบ

  8. L
    February 14th, 2008 at 13:53 | #8

    เป็นคนเก่งอย่างเดียวไม่ได้ ต้องเป็นคนดีอย่างคุณด้วย ขอบคุณคับ :d

  9. pEo
    February 15th, 2008 at 18:25 | #9

    เอ ถ้าผมเขียน table แบบนี้
    <TABLE cellSpacing=0 cellPadding=0 width=730 border=0 >
    <TR>
    <TD WIDTH=470>Content</TD>
    </TR>
    <TR>
    <TD WIDTH=250>Content</TD>
    </TR>
    </TABLE>

    CSS จะเขียนยังไงครับ

  10. ren
    February 18th, 2008 at 01:20 | #10

    ขอบคุณสำหรับความรู้ดีดีที่นำมาแบ่งปันนะคะ:)

  11. ming9899
    March 26th, 2008 at 17:08 | #11

    เว็บนี้มีประโยชมากเลยครับจะเข้ามาอ่านเรื่อยๆ^^

  12. Helios
    August 20th, 2008 at 16:57 | #12

    ชอบมากเลย มีความรู้เยอะกว่าที่เรียนอีก (สอนดีกว่าที่โรงเรียน อ่านะ) ^^

  13. September 13th, 2008 at 17:20 | #13

    สุดยอดเลยครับ เนื้อหาดีมาก ขอเป็นกำลังใจให้ครับ ต้องขอคำชี้แนะด้วยครับ เรื่อง CSS เนี่ย:)>-

  14. December 1st, 2008 at 10:02 | #14

    มีประโยชน์มากเลยครับ ผมขอนำเอาไปเผ่ยแพร่ต่อ และให้เครดิต กับเว็บนี้นะครับ ^^” ขอบคุณสำหรับ ข้อมูล และ สาระดี ๆ ครับผม ^^”:x

  15. Jef
    December 4th, 2008 at 20:28 | #15

    หาจนเจอ ขอบคุณนะคร้าบ..

  16. squallcope
    December 15th, 2008 at 15:28 | #16

    ผมจะหาอ่านเว็บนี้ไงเนี่ยครับ งงๆ ว่าแต่ละหมวดหมู่เข้าดูตรงไหนหว่า

  17. SunnY
    January 18th, 2009 at 13:20 | #17

    ขอบคุณมากๆเลยค่ะ

    เพิ่งจะเริ่มใช้ CSS ถ้าไม่ได้เว็บนี้ แย่แน่ๆเลยค่ะ

    ขอเป็นกำลังใจให้เขียนบทความดีๆแบบนี้ต่อๆไปนะคะ

    แล้วจะเข้ามาติดตามเรื่อยๆเลยค่ะ:)>-

  18. Zafieara
    March 29th, 2009 at 08:53 | #18

    Very nice krub. I din’t understand about the CSS but when I read your blog. I got that. Very nice krub.

  19. PhiCha-aaa
    April 1st, 2009 at 22:50 | #19

    ขอบคุณสำหรับความรู้ดีๆ..ค้าา:d

  20. tongguish
    May 4th, 2009 at 15:36 | #20

    Thank you Krub !!! :)

  21. wit
    July 16th, 2009 at 13:44 | #21

    ยังงงกับการใช้ class และ id อยู่ครับ ช่วยอธิบายใ้ห้เห็นภาพกว่านี้ได้ไหมครับ ระหว่างการใช้สองตัวนี้ ขอบคุณครับ

  22. see
    August 25th, 2009 at 11:47 | #22

    ขอถามหน่อยค่ะ

    ทามมัยเวลาทำเว็บๆถึงถูกเจาะได้

    มีวิธีแก้ยังไงอ่ะคร๊ะ

  23. September 2nd, 2009 at 22:42 | #23

    ขอบคุณมากๆเลยครับ

    กำลังหัดเขียนอยู่พอดี

    ยังไงจะนำไปใช้เริ่มต้นเขียนให้ดีครับ

  24. September 5th, 2009 at 14:39 | #24

    ขอบคุณมากๆเลยครับ :)

  25. muddy007
    September 8th, 2009 at 08:20 | #25

    ขอบคุณมากๆครับ เป็นกำลังใจให้พี่ทีมงานทุกคนครับ ผมพึ่งพลิกแผ่นดินเจอครับ
    ไม่คิดว่าจะมีเว็บดีๆแบบนี้ด้วย ได้ประโยชน์และสาระดีๆมากๆเลย สู้ๆนะคับ ผมจะติดตามผลงานพี่ๆต่ไปครับ สู้ๆสู้ตาย….:)>-:)>-:-h:-h

  26. September 17th, 2009 at 15:06 | #26

    Thank you jaaaaa.

  27. December 6th, 2009 at 17:46 | #27

    Thank you for good information

  28. December 6th, 2009 at 17:46 | #28

    แนวนี้ชอบมากเลยครับ

  29. @jommnaja
    January 9th, 2010 at 21:01 | #29

    ตอบคุณ wit (จะช้าไปมั้ย 55)

    id = ใช้ระบุแ่ต่ละจุด ซึ่งแต่ล่ะชื่อควรระบุเพียงจุด ๆ เดียวในหน้าเท่านั้น
    class = ใช้ร่วมกันหลายจุดได้ สำหรับการดึงค่าจาก css มาโดยไ๋ม่ต้องเขียนค่าซ้ำ ๆ

    ช่วยมั้ยเนี่ย 55

    :)>-

  30. April 8th, 2010 at 19:36 | #30

    ขอบคุณมากครับสำหรับข้อมูล:)

  31. April 15th, 2010 at 15:19 | #31

    ขอบพระคุณมากมายครับ

  32. January 20th, 2011 at 21:32 | #32

    ขอบคุณสำหรับบทความ css ดี ๆ ครับเว็บ divland.com นี้ทำให้ผมเข้าใจ css มากขึ้น 30%
    css นั้นทำให้การพัฒนาเว็บไซต์ทำได้เป็นสัดส่วนเนื่องจากแจกเป็นไฟล์ภายนอกได้

    ขอบคุณสำหรับน้ำใจ ขอให้เจริญยิ่ง ๆ ขึ้นไป :)>-

  33. May 23rd, 2011 at 13:16 | #33

    กำลังหาข้อมูลจะเริ่มศึกษาครับ
    ขอบคุณที่ให้ความรู้ดีๆครับ

  34. September 19th, 2011 at 13:17 | #34

    ขอบคุณมากครับ แล้วรีบ ๆ เขียนต่อนะครับ เพราะหาหนังสือในร้านหนังสือเกี่ยวกับการทำ theme ของพวก cms ไม่มีเจ้าไหนทำเลยครับ ถ้าหาก divland จะทำ ผมจะขอซื้อ 1 เล่มครับ

  1. June 2nd, 2012 at 19:39 | #1
  2. June 2nd, 2012 at 19:59 | #2