CSS สำหรับมือใหม่(มาก)
ก่อนจะเขียน CSS หรือทำความเข้าใจกับ CSS ได้ ผมต้องถือว่าคุณมีความรู้เรื่อง HTML หรือ XHTML มาก่อนนะครับ เพราะว่าเป็นเรื่องที่เกี่ยวข้อง และมีความสัมพันธ์กันโดยตรง หากเราไม่เข้าใจ HTML แล้ว ไป CSS ต่อไม่ได้แน่นอน
สำหรับเรื่อง HTML ที่ต้องทำความเข้าใจก็ไม่มีอะไรมากครับ แค่อ่าน tag ด้านล่างนี้แล้วเข้าใจ ว่ามันคืออะไร
<h1>หัวข้อ</h1>
<p>เนื้อหา</p>
ซึ่งมันอธิบายได้ว่า tag h1 มีcontent คือ หัวข้อ และ tag p มี content เนื้อหา ก็ถือว่าเพียงพอในการศึกษา CSS ระดับเบื้องต้นแล้ว
ย้อนกลับไปเมื่อก่อน เวลาที่เราต้องการเปลี่ยนรูปแบบการแสดงผลของตัวอักษร เราก็มักจะทำแบบนี้
<h1><font size="+2">หัวข้อ</font></h1> <p><font size="+1">เนื้อหา</font></p>
โดยจากโค้ด เราต้องการให้ header มีขนาดตัวอักษรที่ใหญ่ขึ้น(+2) หากใครที่เขียนเว็บในยุคนี้ล่ะก็ แบบนี้เค้าไม่ใช้กันแล้วเพราะว่าปัจจุบันเราเอาความสามารถของ CSS เข้ามาแทนที่เลย โดยมีเป้าหมายเพื่อให้โค้ดที่เขียนสั้นลง และโค้ดดูสะอาดมากขึ้นด้วย เพราะว่าไม่มี syntax ที่เกี่ยวข้องกับการจัดการแสดงผลเข้ามาปนในโค้ด(เช่น font)
ที่นี้ ก็จะเล่าต่อว่า CSS ทำงานอย่างไร CSS มันจะไปกำหนดการแสดงผลของ HTML ในแต่ละจุดได้ โดยที่ CSS ไม่ต้องไปประกบติดกับ html code ที่จุดนั้นเลย เรียกได้ว่า HTML code แบบเดียว(โดยไม่ต้องแก้อะไรเลย) เราจะสั่งให้แสดงผลเป็นกี่ร้อยกี่พันแบบก็ได้ ด้วย CSS ที่เปลี่ยนไปเรื่อยๆ ทีนี้เห็นประโยชน์ของมันแล้วหรือยังครับ
โดยปกติ CSS เราเขียนใส่ลงไปในหน้าเว็บนั้นๆเลยก็ได้ แต่ที่นิยมจะเขียนเป็นไฟล์แยกมากกว่า แล้วเอามา include เข้าหน้าเว็บ ด้วยคำสั่งดังนี้
<link rel="stylesheet" type="text/css" href="filename.css" />
ซึงประโยชน์ในการแยกไฟล์คือ เอาไปใช้กับทุกหน้าได้ โดยไม่ต้องเขียนโค้ด css ใหม่อีกรอบ ลดขนาดโค้ดลงไปได้อีก และการสร้าง css ก็แสนง่าย สร้างจาก notepad ในเครื่องเราก็ได้เลย แล้ว save as filename.css เป็นอันเรียบร้อย(ชื่ออะไรก็ได้นามสกุลเป็น .css)
ตัวอย่าง CSS ผมสร้าง css ด้วย notepad โดยเปิดมาแล้วพิมพ์ว่า
p { color: red; }
h1 {color: navy; font-weight: bold;}
แล้ว save as ตั้งชื่อ filename.css จากนั้นเอาไปใว้ในแฟ้มเดียวกับที่เก็บหน้าเว็บ แล้วเอา code ด้านบน(<link rel .......)ไปใส่ใน html codeใน head section เท่านั้นพอ (จริง ใส่ด้านล่างๆก็ได้ แต่ head จะดีกว่า) เมื่อเรารันเว็บ เราจะพบทันทีว่า เนื้อหา ที่อยู่ใน tag <p> จะเป็นสีแดง และ หัวข้อ ใน <h1> จะเป็นสีน้ำเงินเข้มและตัวหนา
เท่านี้เองครับ เรื่องของ css สำหรับมือใหม่ เพราะว่าถ้าตรงนี้ไม่เข้าใจ ว่ามันทำงานยังไงเหมือนผมตอนแรกแล้วล่ะก็รับรอง งง ไปอีกนานเลย
ทีนี้ ว่าขั้นตอนต่อจากนี้ที่้ต้องศึกษาก็คือ การรู้จักใช้งาน property และ รู้จักใช้งาน selector แต่! อย่าพึ่ง งง นะครับเพราะว่ามันไม่ยากที่จะทำความเข้าใจเลย แต่ต้องอาศัยความจำเอาซะมากกว่าแล้ว
selector ใน css คืออะไร
จากตัวอย่างโค้ด css ที่เขียนให้ดูนั้น ตัว p และ h1 เค้าเรียกว่า selector ครับ ทำไมถึงเรียกว่า selector น่ะเหรอ ให้เราลองนึกคำแปลครับ selector ก็คือ ตัวที่เลือกใช้งาน นั่นล่ะครับแปลตามนั้นเลย css มันบอกเราว่า กำลังจะเลือกตัวไหนให้มีการแสดงผลที่เปลี่ยนไป ในที่นี่ก็คือเลือกให้ p กับ h1 แสดงผลเปลี่ยนไปจากเดิมนั่นเอง
property ใน css คืออะไร
จากตัวอย่างเดิมอีกนี่แหล่ะครับ เราจะเห็นว่า color : red; กับ font-weight: bold; มันคือ property ของ p และ h1 ตามลำดับ มันจำทำงานคู่กัน ก็คือ selector เลือกไว้ที่ตัวไหน และให้มีการแสดงผลเป็นอย่างไรนั่นเอง ง่ายมั้ย
จบไปอีกเรื่องแล้วครับ CSS ไม่ยากหรอก
เรื่องต่อมา คือเรื่องการจัด layout
พื้นฐาน สำหรับการจัด layout ของ css
css มีการแสดงผล 2 แบบ คือแบบ inline กับแบบ block แบบ inline ให้เรานึกถึงตัวอย่างข้างบนได้เลยครับ นั่นคือการแสดงผล แบบ inline ก็คือแบบในบรรทัดเลย อีกแบบ คือแบบ block ให้เรานึกถึง กล่องสี่เหลี่ยมครับ แล้วกล่องนี้ ก็จะบรรจุกล่องใบเล็กๆลงไปได้อีกไม่จำกัด โดยปกติเราจะใช้ syntax <div> เป็นตัวแทนกล่องแต่ละกล่อง ดังเช่น <div>test</div> ก็คือ กล่องนี้มีคำว่า test บรรจุอยู่ และอีกตัวอย่างคือ <div><div>inner</div></div> อันนี้จะหมายความว่ามีสองกล่องซ้อนกันอยู่ โดยข้างในสุดใส่คำว่า inner อยู่นั่นเอง
จะว่าจบเรื่องของกล่องก็น่าจะยังไม่ได้ เพราะว่ารูปแบบกล่องของ css นี่แหล่ะ ที่สร้างความปวดหัวให้มือใหม่มาก เพราะว่ามันเป็นหัวใจหลักของการจัด layout ใน css เลยล่ะ
เล่าเรื่องของ กล่อง หรือ div ต่ออีกเรื่องที่สำคัญ ก็คือ โดยปกติเราจะตั้งชื่อให้กล่องต่างๆด้วย จุดประสงค์คือเราจะได้รู้ว่ากล่องไหนมีชื่ออะไรและจะให้ทำหน้าที่อะไร แต่ความจริงของ css ก็คือมันจะเอาไปใช้ประโยชน์ในการกำหนด selector ครับ สำหรับตัวอย่างการตั้งชื่อกล่องก็เช่น <div class="thisblock">test</div> หรือ <div id="blockid">inner</div> ตัวอย่างแรก เราตั้งชื่อเรียกว่า class thisblock ส่วนอันที่สอง เราตั้งชื่อเรียกว่า id blockid
การตั้งชื่อกล่องนั้นสำคัญไฉน
การตั้งชื่อกล่องก็มีเพื่อให้เราเอามาใช้ selector ครับ เพราะว่า selector นอกจากอ้างอิงจาก syntax เช่น h1 , p แล้ว เรายังอ้างอิงไปที่ชื่อกล่องที่เราตั้งขึ้นมาเองนี้ได้อีกด้วย เช่น เราอยากเขียน css อ้างอิงถึง กล่องที่ชื่อ class thisblock กับ id blockid เราจะเขียน CSS ได้ดังนี้
.thisblock {
color: pink;
}
#blockid{
color: white;
background: black;
}
จะเห็นได้ว่า เราจะแทน class ด้วยจุด . และ แทน id ด้วย ชาร์ป # อันนี้เป็นมาตรฐานครับ จำได้เลย ดังนั้นเมื่อเราสร้างกล่องแล้วตั้งชื่อกล่องเป็นแล้ว เราก็จะเอามาใช้ใน CSS ได้เลยอย่างง่ายดาย แต่ว่ามีข้อกำหนดที่สำคัญก็คือ ในเว็บหน้าหนึ่ง จะมี id ใดๆได้แค่จุดเดียว เช่น #xyz เราจะมี #xyz สองจุดในหน้าเดียวกันไม่ได้ แต่ว่า class ทำได้เช่น .abc เราจะมีกี่จุดในหน้าเว็บเราก็ได้ครับไม่มีปัญหา อันนี้ต้องจำอีกเหมือนกัน
ว่าด้วยเรื่องของกล่องโดยละเอียด
กล่องที่เหมือนธรรมดาแต่ไม่ธรรมดา ก็คือรายละเอียดของกล่องนั้นมีมากกว่าที่เราเห็นครับ เพราะว่า กล่อง หรือ div แต่ละอันนั้น ประกอบด้วยส่วนต่างๆดังต่อไปนี้
ให้ดูที่ตรงส่วนกลาง ด้านบนๆ นะครับ จากด้านนอกเข้าด้านในก็คือ Margin > Border > Padding > Content เจ้าพวกนี้ล่ะครับ สำคัญมาก เพราะว่าเป็นองค์ประกอบหลักของแต่ละ div เลย และแต่ละอัน ยกเว้น content จะมีค่าได้ 4 แบบ คือ 4 ด้านที่แยกจากกันอิสระ ไม่จำเป็นต้องเท่ากันครับ
Margin
margin คือระยะห่าง ระหว่าง ตัวเอง กับ object อื่นๆครับ โดย เช่น เราเข้าแถวเรียงหน้ากระดาน ห่าง 1 แขน คือเอาแขนขวา แตะเพื่อนเรา แบบนี้คือ margin right ครับ ถ้าห่างกันสองแขน ก็คือ เรากับกับกางแขนทั้งสองข้าง แบบนี้แปลว่ามีค่าทั้ง margin left และ margin right เลยนั่นเอง แต่อย่างที่บอกว่า มี 4 ด้าน ดังนั้นถ้ามีแถวด้านหน้าและด้านหลังเรา ก็คือ margin top และ margin bottom นั่นเอง ถ้า งง ดูรูปครับ
เป็นคนที่เข้าแถวแล้วเรามองจากมุมสูงนะครับ เห็นหัวกับไหล่ จะเห็นว่าถ้าแถวชิดกัน คือ margin เป็น0 เมื่อกางแขนออก ก็เป็น1 ส่วนอันล่างสุด 2 คน กางคนละแขน ก็คือ margin ขวา ของคนแรกเป็น 1 margin ซ้ายของคนที่สองเป็น 1
Border
ก็คือเส้นขอบ โดยปกติ border จะเป็น 0 นะครับ เราสามารถกำหนดความหนาได้ทั้ง 4 ด้านเช่นกัน
Padding
padding เป็นช่องว่าง ที่เว้นระหว่าง border กับ content เดิมๆค่าจะเป็น 0
Content
ส่วนของเนื้อหา ที่อยู่ในกล่อง ไม่ว่าจะเป็น ตัวหนังสือ รูปภาพ vdo flash หรืออื่นๆครับ แม้กระทั่ง เป็น div ที่ซ้อน ใน div ก็ได้ครับ
เวลาคำนวนขนาดโดยรวมของ div จะต้องใช้ content + padding + border + margin และจะต้องไม่ลืมว่าส่วนของ padding , border , margin จะมี 4 ด้านนะครับ โดยให้นับ บน,ขวา,ล่าง,ซ้าย ตามเข็มนาฬิกาเลยครับ
อ่านถึงตรงนี้ ก็พร้อมจะเขียน css แล้ว ที่เหลือ ก็คือ selector แบบพิเศษ แบบต่างๆ กับค่า property แบบต่าง เพื่อให้ css สามารถแสดงผลออกมาได้ดังใจเนรมิตรครับ
