เริ่มใช้งาน CSS ขั้นพื้นฐาน สำหรับคนที่ไม่เคยใช้
หากคุณคือคนที่มีประสบการณ์ทำเว็บมานานเกิน 2 ปี ย้อนหลัง น่าจะรู้จัดการจัดหน้าตาด้วย table เป็นอย่างดี และเชื่อว่าน่าจะเชี่ยวชาญเลย เพราะเมื่อยุคก่อน ล้วนแต่จัดหน้าด้วย table ทั้งหมด (เป็นยุคที่ถัดต่อมาจาก frame) แต่ในตอนนี้ เค้าไม่ใช้งานแบบนั้นกันแล้ว รวมไปถึงอนาคตด้วย
ปัจจุบัน มีการจัดหน้าเว็บด้วย div span เป็นหลัก โดยทั้งหน้า จะใช้งานหลักแค่ 2 tag นี้ในการวาง layout เท่านั้น ที่ทำงานคู่กับ css ซึ่งเป็นที่นิยมในการจัดหน้าบนมาตรฐาน HTML 4 และ XHTML 1.0, 1.1 ในปัจจุบัน (และอนาคตอีกประมาณ 2 ปี) อย่างไรก็ดี หากคนที่ได้ตามข่าวมามากๆ จะรู้ว่า อนาคตเค้าก็เลิกใช้ div span กันแล้วใน HTML 5 แต่ว่านั่นไม่ใช่ปัญหาเลย เพราะว่า HTML 5 ก็ยังต้องจัดหน้าตาคู่กับ CSS อยู่ดี (แม้ว่าจะเป็นCSS3 ไปแล้ว)
ดังนั้น ถือว่าเป็นเรื่องที่พื้นฐานแล้ว ที่จะต้องจัดหน้าเว็บ ด้วย CSS ได้ แต่ก่อนจะจัดหน้าเว็บด้วย CSS ได้ ก็ต้องเข้าใจก่อนว่า CSS มันทำงานร่วมกับหน้าเว็บอย่างไร แล้วทำไมมันถึงจัดหน้าเว็บได้ (พื้นฐานมากมาย)
ปกติ เราวางหน้าเว็บ เราก็จะมีโค้ดหน้าเว็บ ที่เหมือนกับบทความนี้ ซึ่งโค้ดก็มีแบบนี้
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>เว็บทดสอบ</title>
</head>
<body>
<p>บทความ เขียนเว็บ <a href="http://web.meewebfree.com/">บทความ</a>.</p>
</body>
</html>
นี่คือขั้นพื้นฐานที่สุดเลย แต่หากว่าเราต้องการให้ข้อความใน tag p มีสีสัน ยุคเก่า เราต้องใส่ tag
<p font-color="#FF0000">ข้อความที่ต้องการใส่สี</p>
แต่ยุคใหม่นี้ เราไม่ใส่โค้ด ที่ไม่เกี่ยวกับเนื้อหาเว็บ ลงหน้าเว็บแล้ว ดังนั้น หากเราต้องการใส่สีแดง เหมือนที่เราต้องการ ในยุคใหม่นี้ เราจะทำแบบนี้ครับ
- สร้างไฟล์ขึ้นมา ตั้งชื่อว่า meewebfree.css
- เอาไฟล์ meewebfree.css วางไว้ในแฟ้มเดียวกับหน้าเว็บเลย
- เรียกไฟล์เข้าหน้ามาในหน้าเว็บ ด้วย syntag ซึ่งต้องวางไว้ที่ส่วน head
<link href="meewebfree.css" rel="stylesheet" type="text/css" />
จะได้โค้ดหน้าเว็บที่มีหน้าตาแบบนี้
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>เว็บทดสอบ</title>
<link href="meewebfree.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>บทความ เขียนเว็บ <a href="http://web.meewebfree.com/">บทความ</a>.</p>
</body>
</html>
เราก็จะได้หน้าเว็บที่มีการใช้งาน CSS แล้ว ง่ายมั้ยครับ แค่นี้เอง แต่ตอนนี้ ตัวหนังสือใน tag p ยังไม่เป็นสีแดง วิธีก็คือ
- แก้ไขไฟล์ meewebfree.css
- พิมพ์ลงไปว่า
p { color: #FF0000; }
- save และ ลอง refresh หน้าเว็บ (หากไม่เปลี่ยน ให้กด ctrl+f5)
แค่นี้ จะเห็นว่าข้อความใน tag p เปลี่ยนเป็นสีแดงแล้ว ง่ายมั้ยครับ
จริงๆแล้ว ความยากของ CSS ไม่ได้อยู่ที่ตรงนี้เลย เพราะว่าทำแค่นี้ หน้าเว็บก็สามารถเรียกใช้ CSS ได้แล้ว แต่ความยากไปอยู่ที่ เราจะเรียกใช้ CSS ตัวไหน เมื่อไร อย่างไร ต่างหาก
แต่นั่นไม่ใช่จุดประสงค์ของบทความนี้ครับ เรื่องนี้เราจะคุยกันในบทความต่อๆไป