เริ่มใช้งาน CSS ขั้นพื้นฐาน สำหรับคนที่ไม่เคยใช้

เริ่มใช้งาน 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>

แต่ยุคใหม่นี้ เราไม่ใส่โค้ด ที่ไม่เกี่ยวกับเนื้อหาเว็บ ลงหน้าเว็บแล้ว ดังนั้น หากเราต้องการใส่สีแดง เหมือนที่เราต้องการ ในยุคใหม่นี้ เราจะทำแบบนี้ครับ

  1. สร้างไฟล์ขึ้นมา ตั้งชื่อว่า meewebfree.css
  2. เอาไฟล์ meewebfree.css วางไว้ในแฟ้มเดียวกับหน้าเว็บเลย
  3. เรียกไฟล์เข้าหน้ามาในหน้าเว็บ ด้วย 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 ยังไม่เป็นสีแดง วิธีก็คือ

  1. แก้ไขไฟล์ meewebfree.css
  2. พิมพ์ลงไปว่า 
    p { color: #FF0000; }
  3. save และ ลอง refresh หน้าเว็บ (หากไม่เปลี่ยน ให้กด ctrl+f5)

 แค่นี้ จะเห็นว่าข้อความใน tag p เปลี่ยนเป็นสีแดงแล้ว ง่ายมั้ยครับ

จริงๆแล้ว ความยากของ CSS ไม่ได้อยู่ที่ตรงนี้เลย เพราะว่าทำแค่นี้ หน้าเว็บก็สามารถเรียกใช้ CSS ได้แล้ว แต่ความยากไปอยู่ที่ เราจะเรียกใช้ CSS ตัวไหน เมื่อไร อย่างไร ต่างหาก

แต่นั่นไม่ใช่จุดประสงค์ของบทความนี้ครับ เรื่องนี้เราจะคุยกันในบทความต่อๆไป


Create: Modify : 2010-06-15 10:26:51 Read : 13687 URL :