CSS เบื้องต้น
25 Dec 2011
บทความ "CSS เบื้องต้น" นี้เป็นบทความที่กล่าวถึงความรู้พื้นฐานของเทคโนโลยี CSS โดยเริ่มตั้งแต่ CSS คืออะไร จะเขียน CSS ไว้ที่ไหน วิธีการใช้ Selector มีกี่รูปแบบ เมื่ออ่านจบบทความแล้ว คุณจะเข้าใจโครงสร้างพื้นฐานของการเขียนโค้ด CSS และพร้อมที่จะเรียนรู้และลงมือปฏิบัติในหัวเรื่องถัดๆไป
CSS คืออะไร
Cascading Style Sheets (CSS) คือภาษาที่ใช้กำหนดรูปแบบการแสดงผล HTML CSS ถูกสร้างขึ้นเพื่อใช้ร่วมกับ HTML กล่าวคือ HTML ใช้สำหรับกำหนดโครงสร้างข้อมูล และ CSS ใช้สำหรับกำหนดรูปแบบการแสดงผล ตัวอย่างเช่น
HTML:
<h1>Welcome to my web site</h1>
CSS:
h1 {
color: #0000FF; /* Blue */
}
ในตัวอย่างข้างต้นเราใช้แท็ก <h1> เพื่อกำหนดหัวข้อเท่านั้น และแยกส่วนรูปแบบการแสดงผลให้เป็นหน้าที่ของ CSS และกำหนดให้แสดงผลสีฟ้า ดังนั้นจึงกล่าวได้ว่า CSS คือภาษาที่ใช้ในการกำหนดรูปแบบหรือสไตล์ (Style) สำหรับ HTML
การแยกการแสดงผลออกจากข้อมูลช่วยให้ง่ายต่อการเปลี่ยนแปลงรูปแบบในอนาคต เช่น ถ้าเราต้องการเปลี่ยนสีให้กับหัวข้อในแท็ก <h1> ในทุกๆเว็บเพจ เราเพียงเปลี่ยนที่ไฟล์ CSS เท่านั้น (ไฟล์ CSS สามารถใช้ได้กับทุกๆเว็บเพจที่ต้องการ) ปัจจุบัน CSS เป็นที่นิยมอย่างมากในการจัดรูปแบบให้กับเว็บเพจ ซึ่งก่อนการมาของ CSS นั้นเราใช้ตารางในการจัดเลย์เอาท์ และใช้พร็อพเพอร์ตี้ของ HTML ในการจัดรูปแบบ ซึ่งยุ่งยากมากหากเราต้องการเปลี่ยนรูปแบบของทุกเว็บเพจในเว็บไซต์ สำหรับสเปคและข้อมูลอย่างละเอียดของ CSS สามารถดูได้ที่ http://www.w3.org/Style/CSS ซึ่งกำกับและดูแลโดย World Wide Web Consortium (W3C)
เวอร์ชันของ CSS
เวอร์ชันของ CSS มีดังต่อไปนี้
CSS 1CSS 1 หรือ CSS Level 1 คือเวอร์ชันแรกที่ออกสู่สาธารณะและเป็น W3C Recommendation ซึ่งออกในเดือนธันวาคมปีค.ศ. 1996 CSS 1 นั้นมีฟีเจอร์เพียงไม่มาก
CSS 2CSS 2 ออกในเดือนพฤษภาคมปีค.ศ. 1998 โดยเพิ่มเติมฟีเจอร์ให้กับ CSS 1 อย่างไรก็ตาม CSS 2 ไม่ประสบความสำเร็จมากนักในแง่ของการยอมรับและการรองรับจากเว็บเบราว์เซอร์ต่างๆ ทำให้ CSS 2.1 ต้องออกมาเพื่อแก้ไขปัญหาต่างๆในเวอร์ชัน 2 CSS 2.1 ได้เป็น Recommendation ในเดือนกรกฎาคมปีค.ศ. 2007
CSS 3CSS 3 ยังอยู่ระหว่างการพัฒนา และการกำหนดสเปคใน CSS 3 นั้น จะถูกแบ่งออกเป็นส่วน (Module) ต่างๆ ซึ่งบางส่วนก็เสร็จสมบูรณ์แล้ว บางส่วนก็กำลังพัฒนาอยู่ แต่บางเว็บเบราว์เซอร์ก็เริ่มรองรับสเปคในบางส่วนบ้างแล้ว
เราเขียนโค้ด CSS ที่ใดได้บ้าง?
หลังจากรู้ความเป็นมาและอะไรคือ CSS แล้ว เรามาดูว่าจะเขียนโค้ด CSS ไว้ที่ใดได้บ้าง ก่อนอื่นเรามาเตรียมตัวอย่างโค้ด HTML กันก่อนดังนี้
<html>
<head>
<title>CSS Basic</title>
</head>
<body>
<h1>Where to Put CSS?</h1>
<p>
There are 3 main places to put CSS:
<ul>
<li>Inline</li>
<li>Embedded</li>
<li>External</li>
</ul>
</p>
</body>
</html>
เราสามารถเขียนโค้ด CSS ได้ 3 ที่หรือ 3 แบบหลักๆดังนี้
- Inline
- Embedded
- External
รายละเอียดของแต่ละรูปแบบจะอธิบายในหัวข้อถัดไป
การเขียนโค้ด CSS แบบ Inline
แบบ Inline คือการเขียนโค้ด CSS ลงไปในแท็ก HTML ที่ต้องการให้เกิดการแสดงผลเลย และจะมีผลต่อแท็กนั้นๆเท่านั้น โดยมี Syntax ดังนี้
<tag style="property:value; property:value; . . .">
แอททริบิวท์ style ใช้ในการกำหนดค่าสไตล์พร็อพเพอร์ตี้ต่างๆ ซึ่งจะอยู่ในรูปของ "property:value" หากมีมากกว่าหนึ่งชุดให้ใช้เครื่องหมาย Semicolon ";" คั่น ตัวอย่างเช่น
<h1 style="color:#0000FF">Where to Put CSS?</h1>?
ในตัวอย่างข้างต้นเรากำหนดสไตล์ให้กับแท็ก <h1> โดยให้ข้อความเป็นสีฟ้าด้วยสไตล์พร็อพเพอร์ตี้ color
การเขียนแบบ Inline ไม่เป็นที่นิยมนัก เนื่องจากต้องเขียนโค้ด CSS ลงไปในแท็กHTML ดังนั้นจึงไม่สามารถนำสไตล์ไปประยุกต์ใช้กับแท็กอื่นๆได้ ลองนึกดูว่าถ้าต้องระบุค่าสีให้กับทุกๆแท็ก <h1> ในทุกๆเว็บเพจ คงจะลำบากน่าดูหากว่าต้องการเปลี่ยนสีในภายหลัง
การเขียนโค้ด CSS แบบ Embedded
แบบที่ 2 แบบ Embedded เป็นการเขียนโค้ด CSS ลงไปในไฟล์ HTML เช่นกัน แต่จะรวมโค้ด CSS ทั้งหมดไว้ภายใต้แท็ก <head> โดยมี Syntax ดังนี้
<head>
<title></title>
<style type="text/css">
selector {
property:value;
property:value;
. . .
}
</style>
</head>
การกำหนดสไตล์จะถูกกำหนดไว้ภายในแท็ก <style> ซึ่งอยู่ภายในแท็ก <head> อีกที การกำหนดสไตล์จะเริ่มต้นด้วยการระบุแท็กที่ต้องการ (Selector) จากนั้นจึงเป็นสไตล์พร็อพเพอร์ตี้ "property:value" ต่างๆภายในเครื่องหมายปีกกา แต่ละชุดจะถูกคั่นด้วยเครื่องหมาย Semicolon ";" ตัวอย่างเช่น
<head>
<title></title>
<style type="text/css">
h1 {
color: #0000FF;
font-style: italic;
}
li {
list-style-type: upper-roman;
}
</style>
</head>
ในตัวอย่างข้างต้นเรากำหนดสีให้กับแท็ก <h1> เป็นสีฟ้า และใช้ตัวอักษรแบบตัวเอียง นอกจากนี้ยังกำหนดให้แต่ละหัวข้อของลิสต์ (<li>) แสดงเป็นเลขโรมันเรียงตามลำดับ เช่น i, ii, iii, iv เป็นต้น ตัวอย่างข้างต้นมีข้อสังเกตุว่า คุณสมบัติต่างๆที่กำหนดจะมีผลต่อแท็ก <h1> และ <li> ทุกๆแท็กที่ปรากฏในไฟล์ HTML ถ้ามี (ส่วนในกรณีที่ต้องการเลือกเพียงแค่บางแท็ก ไม่เอาทั้งหมด เช่น แท็ก <p> เฉพาะที่ย่อหน้าแรก ก็ทำได้นะครับ ซึ่งจะกล่าวถึงในลำดับถัดๆไป )
การเขียนแบบ Embedded ก็ไม่เป็นที่นิยมอีกนะครับ เพราะก็ต้องเขียนรวมอยู่ในไฟล์ HTML เช่นเดียวกับแบบ Inline หากจะนำไปใช้กับไฟล์ HTML อื่นๆ ก็ต้องก็อปปี้โค้ดเอา ดังนั้นการเปลี่ยนแปลงแก้ไขจึงค่อนข้างยุ่งยาก เพราะต้องตามไล่แก้ในทุกๆไฟล์
การเขียนโค้ด CSS แบบ External
แบบสุดท้ายแบบ External เป็นการเขียนแบบแยกโค้ด CSS ออกมายังไฟล์แยกต่างหาก ซึ่งชื่อก็บอกอยู่แล้วนะครับว่า External โดยมี Syntax ดังนี้
HTML:
<head>
<title></title>
<link rel="stylesheet" type="text/css"
href="fileName.css" />
</head>
CSS:
selector {
property:value;
property:value;
. . .
}
รูปแบบนี้จะแยกโค้ด CSS ไปไว้ที่ไฟล์แยก โดยมีนามสกุลเป็น ".css" ส่วนโครงสร้างการเขียนโค้ดจะเหมือนกับแบบ Embedded คือเริ่มต้นด้วยการระบุแท็ก (Selector) แล้วตามด้วยสไตล์พร็อพเพอร์ตี้ "property:value" ต่างๆภายในเครื่องหมายปีกกา และโปรดสังเกตุว่าในไฟล์แยกไม่ต้องมีแท็ก <style> นะครับ ให้มีแต่โค้ด CSS เท่านั้น จากนั้นในไฟล์ HTML ก็ให้ลิงค์มายังไฟล์ CSS ด้วยแท็ก <link> ตัวอย่างเช่น
HTML:
<head>
<title></title>
<link rel="stylesheet" type="text/css"
href="External.css" />
</head>
CSS (External.css):
h1 {
color: #0000FF;
font-style: italic;
}
li {
list-style-type: upper-roman;
}
ในตัวอย่างข้างต้นไฟล์ HTML และ CSS จะต้องอยู่ในไดเรกทอรี่เดียวกัน (ไฟล์ CSS จะใช้ชื่ออะไรก็ได้) และถ้าไฟล์ HTML ใดอยากใช้สไตล์ที่กำหนดในไฟล์ External.css ก็สามารถลิงค์มาได้ โดยแค่เพิ่มแท็ก <link> เข้าไป ไม่เพียงเท่านี้ไฟล์ HTML ยังสามารถลิงค์ไปยังไฟล์ CSS ได้มากกว่าหนึ่งไฟล์ด้วย ทำให้เราสามารถแยกเป็นไฟล์ CSS ตามแต่ละจุดประสงค์ได้ เช่น Menu.css สำหรับจัดการกับเมนู, Layout.css จัดการกับเลย์เอาท์ เป็นต้น เว็บไซต์ใหญ่ๆก็ใช้รูปแบบนี้ในการสร้างธีม (Theme) นะครับ แล้วก็ประยุกต์ใช้มันกับทุกหน้าในเว็บไซต์นั้น
การเขียนแบบ External เป็นรูปแบบที่นิยมที่สุดเพราะสามารถนำกลับมาใช้ใหม่ได้ ถ้าทุกหน้ามีสไตล์ที่ตรงกัน ก็ให้ลิงค์ไปที่ไฟล์ CSS เดียวกัน ดังนั้นหากต้องการเปลี่ยนแปลงรูปลักษณ์ใหม่ ก็เปลี่ยนมันที่เดียวเลยสะดวกดี
