10 ข้อเบสิคควรทำเมื่อเริ่มเขียน CSS part1
Feb 27th
การเขียนเว็บด้วย 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>
เพิ่งเข้ามาเว็บนี้ครั้งแรกครับ หาเว็บอย่างนี้มานานแล้ว ชอบมากๆ ขอให้ทีมงานสู้ๆๆ เป็นกำลังใจให้ครับ
ไม่มีหรอกครับทีมงาน มีผมคนเดียวครับ
ไม่คิดว่า css จะมีแบบย่อๆ และวิธีใช้งานอย่างนี้ค่ัะ ครั้งก่อนสงสัยที่ทำไปไม่ช่วยลดโค๊ดเลย อิๆๆ
/
ขอบคุณสำหรับความมีน้ำใจแบ่งปันความรู้นะค่ะ
เปนเวบที่ดีมาก ให้ความรู้ดี ขอบคุณค่า
ขอบคุณคะ ทำให้เข้าใจมากขึ้น ขอให้ช่วยทำต่อๆไปนะคะ
Impressive mak mak leaw ka.
เก่งอย่างแบ่งปันจริงๆ ขอให้เจริญรุ่งเรืองยิ่งๆขึ้นไปนะคะ
ขอบคุณมากสำหรับความรู้
ฮือๆๆ..ซึ้งจายยยย..มีเว็บดีๆแบบนี้ ขอบคุณมากคร้าบบบ
เป็นคนเก่งอย่างเดียวไม่ได้ ต้องเป็นคนดีอย่างคุณด้วย ขอบคุณคับ
เอ ถ้าผมเขียน 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 จะเขียนยังไงครับ
ขอบคุณสำหรับความรู้ดีดีที่นำมาแบ่งปันนะคะ
เว็บนี้มีประโยชมากเลยครับจะเข้ามาอ่านเรื่อยๆ^^
ชอบมากเลย มีความรู้เยอะกว่าที่เรียนอีก (สอนดีกว่าที่โรงเรียน อ่านะ) ^^
สุดยอดเลยครับ เนื้อหาดีมาก ขอเป็นกำลังใจให้ครับ ต้องขอคำชี้แนะด้วยครับ เรื่อง CSS เนี่ย
มีประโยชน์มากเลยครับ ผมขอนำเอาไปเผ่ยแพร่ต่อ และให้เครดิต กับเว็บนี้นะครับ ^^” ขอบคุณสำหรับ ข้อมูล และ สาระดี ๆ ครับผม ^^”
หาจนเจอ ขอบคุณนะคร้าบ..
ผมจะหาอ่านเว็บนี้ไงเนี่ยครับ งงๆ ว่าแต่ละหมวดหมู่เข้าดูตรงไหนหว่า
ขอบคุณมากๆเลยค่ะ
เพิ่งจะเริ่มใช้ CSS ถ้าไม่ได้เว็บนี้ แย่แน่ๆเลยค่ะ
ขอเป็นกำลังใจให้เขียนบทความดีๆแบบนี้ต่อๆไปนะคะ
แล้วจะเข้ามาติดตามเรื่อยๆเลยค่ะ
Very nice krub. I din’t understand about the CSS but when I read your blog. I got that. Very nice krub.
ขอบคุณสำหรับความรู้ดีๆ..ค้าา
Thank you Krub !!!
ยังงงกับการใช้ class และ id อยู่ครับ ช่วยอธิบายใ้ห้เห็นภาพกว่านี้ได้ไหมครับ ระหว่างการใช้สองตัวนี้ ขอบคุณครับ
ขอถามหน่อยค่ะ
ทามมัยเวลาทำเว็บๆถึงถูกเจาะได้
มีวิธีแก้ยังไงอ่ะคร๊ะ
ขอบคุณมากๆเลยครับ
กำลังหัดเขียนอยู่พอดี
ยังไงจะนำไปใช้เริ่มต้นเขียนให้ดีครับ
ขอบคุณมากๆเลยครับ
ขอบคุณมากๆครับ เป็นกำลังใจให้พี่ทีมงานทุกคนครับ ผมพึ่งพลิกแผ่นดินเจอครับ
ไม่คิดว่าจะมีเว็บดีๆแบบนี้ด้วย ได้ประโยชน์และสาระดีๆมากๆเลย สู้ๆนะคับ ผมจะติดตามผลงานพี่ๆต่ไปครับ สู้ๆสู้ตาย….
Thank you jaaaaa.
Thank you for good information
แนวนี้ชอบมากเลยครับ
ตอบคุณ wit (จะช้าไปมั้ย 55)
id = ใช้ระบุแ่ต่ละจุด ซึ่งแต่ล่ะชื่อควรระบุเพียงจุด ๆ เดียวในหน้าเท่านั้น
class = ใช้ร่วมกันหลายจุดได้ สำหรับการดึงค่าจาก css มาโดยไ๋ม่ต้องเขียนค่าซ้ำ ๆ
ช่วยมั้ยเนี่ย 55
ขอบคุณมากครับสำหรับข้อมูล
ขอบพระคุณมากมายครับ