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