» 10 ข้อเบสิคควรทำเมื่อเริ่มเขียน CSS part1>>Divland.com:เรียนรู้วิธีเขียน CSS หลักการ เครื่องมือ ในการเขียน CSS เทคนิคต่างๆ เทมเพลต CSS ฟรี และเรื่องราวเกี่ยวกับ wordpress การทำธีมเวิร์ดเพรส

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

กุมภาพันธ์ 27, 2007 at 12:58 am · Filed under เริ่มต้นกับ CSS

การเขียนเว็บด้วย 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 >>

Tags: เริ่มต้นกับ CSS

20 ความเห็น »

Dack Zee.. said,

สิงหาคม 4, 2007 @ 11:02 am

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

สิงหาคม 5, 2007 @ 2:46 pm

ไม่มีหรอกครับทีมงาน มีผมคนเดียวครับ
OLO said,

สิงหาคม 9, 2007 @ 6:22 pm

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

ตุลาคม 15, 2007 @ 5:49 pm

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

ตุลาคม 30, 2007 @ 6:43 pm

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

มกราคม 30, 2008 @ 1:17 pm

Impressive mak mak leaw ka.

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

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

กุมภาพันธ์ 13, 2008 @ 6:54 pm

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

กุมภาพันธ์ 14, 2008 @ 1:53 pm

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

กุมภาพันธ์ 15, 2008 @ 6:25 pm

เอ ถ้าผมเขียน 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 จะเขียนยังไงครับ
ren said,

กุมภาพันธ์ 18, 2008 @ 1:20 am

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

มีนาคม 26, 2008 @ 5:08 pm

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

สิงหาคม 20, 2008 @ 4:57 pm

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

กันยายน 13, 2008 @ 5:20 pm

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

ธันวาคม 1, 2008 @ 10:02 am

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

ธันวาคม 4, 2008 @ 8:28 pm

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

ธันวาคม 15, 2008 @ 3:28 pm

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

มกราคม 18, 2009 @ 1:20 pm

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

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

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

แล้วจะเข้ามาติดตามเรื่อยๆเลยค่ะ
Zafieara said,

มีนาคม 29, 2009 @ 8:53 am

Very nice krub. I din’t understand about the CSS but when I read your blog. I got that. Very nice krub.
PhiCha-aaa said,

เมษายน 1, 2009 @ 10:50 pm

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

พฤษภาคม 4, 2009 @ 3:36 pm

Thank you Krub !!!