อย่างที่เคยเห็นกันครับ ความสวยของหน้าตาเพจ มักจะแปรผกผันกับ การ programe หรือ ระยะเวลาโหลด รวมถึง seo ก็เช่นกันครับ แต่สิ่งที่เข้ามาเติมช่องว่างนี้ก็คือ css ครับ อาจจะไม่ได้มากแต่ก็พอบรรเทาลงบ้างก็ยังดี ใช่มั้ยครับ
คุณๆคงจะเคย link ทำแปลกๆที่ทำด้วย css กันใช่ไหมครับ คือจริงๆมันไม่แปลกอะแหละ แต่วิธีการทำของมันแปลกมากกว่า ตัวอย่างเช่นเ
<a class="galbtsuiv" href="http://www.crystalxp.net/galerie/en.2.12.cat.9.html">Next Page </a>
เห็นมั้ยครับว่า ไม่มี รูปภาพอยู่เลย (นั่นเพื่อที่จะให้ Spider สนใจlinkของเรามากขึ้นครับ)
เอาหล่ะครับ ประเด็นมันอยู่ที่แล้วจะทำทำไมหล่ะ ในเมื่อออกมาเหมือนกันกับการใ่ส่รูป โดยไม่มี <img /> เลย? เหตุผลแรกก็คือป้องกันรูปที่เราอุส่าออกแบบมาอย่างตั้งใจ โดยมิให้โดนขโมยไปง่ายๆ และอีกอย่างก็คือ SEO ในเมื่อ Search Engine ไม่ค่อยจะชอบลิงค์ที่ทำกับ รูปสักเท่าไหร่ เราเลยหาวิธีที่จะทำให้มันเป็น Text แล้วใส่รูปเข้าไปโดย css ครับ
บทความใกล้เคียง
วิธีใส่ background เบื้องต้น
อันนี้เป็นการใส่ background อย่างง่าย สำหรับ beginner นะครับ
Q : เราจะใส่ แบ๊กกราวด์ ได้ยังไง
A :
body {
background-image:url('ที่อยู่รูป ');
}
/* ที่ให้ใช้ background-image เพราะบางที background มันจะไม่ cross browser ครับ*/
Q : กรรมใส่แล้วรูปมันเรียงต่อกันอ่ะ อยากให้มันมีรูปเดียวนิ?
A : ตามปกติหากใส่ตามโค๊ดข้างบนมันจะเรียงต่อกันอัตโนมัติ แต่หากคุณต้องการให้มัน ไม่เรียงต่อกัน(คือรูปเดียวโดดๆนั้นแหละ)
body{
background:url(' รูปๆ') no-repeat;
}
/*----- หรือ -----*/
body{
background-image:url('รูปๆ');
background-repeat:no-repeat;
}
หากอยากให้มันเรียงไปแนวนอน ก็ให้เปลี่ยน no-repeat เป็น repeat-x นะครับ กรณีเดียวกันหากให้มันเรียงลงมาข้างล่างแนวดิ่ง ให้ก็ให้เปลี่ยนเป็น repeat-y ซะ
**tip**background-repeat จะไม่มี none ให้ใช้ no-repeat แทน
Q : แล้วๆๆถ้าอยากให้มัน อยู่กับที่เหมือน wallpaper หล่ะ?
A : ถ้าอยากให้มันอยู่กับที่เหมือน wallpaper ก็ให้ใส่ code นี้ครับ
body{
background-attachment:fixed;
}
อันนี้จะหมายถึง เกาะติดหน้าจอไว้เลย
Q : อยากให้มันมาอยู่ข้างล่างหง่า ทำไงดี?
A : นี่ก็อีกอย่างครับ ที่ควรรู้ไว้
ิbody{
background-position:right bottom;
}
ค่าของ attibrute นี้จะใช้ตรงตัวเลยครับ right bottom คือ ขวา ล่าง
ก็จบไปแล้วครับ สำหรับ bg 
ไว้แค่นี้ก่อนนะครับสำหรับ code แต่ง friend อยากถามตรงไหน ถามได้เลยฮับ
อ้อ ลืมบอกไปครับ เวลาเอามาใช้จริงๆนั้น ให้ใส่รวมกันเลยครับ เช่น ผมต้องการให้ bg รูปใหญ่ อยู่ตรงกลางจอ ไม่เลื่อนไปไหน ไม่เรียงซำกัน
body{
background-image:url('รูปๆๆ');
background-position:center;
background-repeat:no-repeat;
}
แบบสั้น
body{background:url('รูปๆๆ') no-repeat center;}
บทความใกล้เคียง
StyleSheet/CSS
StyleSheet/CSS
StyleSheet หรือ CSS เป็นภาษาที่ไว้จัดการเกี่ยวกับ การจัด layout ให้สวยงามโดยไม่ต้องใช้ HTML แบบเดิมๆ ซึ่งจะช่วยในการลด ประมาณ Coding โดย css จะมีการ ใช้ class เพื่อลดการซ้ำซ้อนของ การจัดรูปแบบ (เปรียบ เสมือน การ ดึงตัวร่วม ใน คณิตศาสตร์นั้นแหลครับ)
ข้อดีของ การใช้ StyleSheet/CSS
การใช้ Stylesheet จะช่วยให้เว็บโหลดไวขึ้น ปรับปรุงแก้ไขภายหลังได้ง่ายขึ้นเพราะแบ่งแยากส่วน ส่วนของรายละเอียด(HTML) และ การจัดรูปแบบ(Stylesheet) ออกมาโดยชัดเจน โดยจะเชื่อมโยงกันโดย Selector ,id หรือ Class นั้นๆ ในการจัดรูปแบบ ทำให้สะดวกขึ้น กว่าเก่าเยอะครับ
ส่วนวิธีการใช้งาน รวมถึง เทคนิคต่างๆ สำหรับคนที่ยังไม่รู้เดี่ยวกระผมจะเขียนไว้ให้ทีหลังนะครับ