CSS เบื้องต้น
25 Dec 2011
เคยสงสัยบ้างไหมครับว่า Cascading แปลว่าอะไรใน Cascading Style Sheet? เจ้าคำว่า Style Sheet ก็คงพอเดากันได้จากหัวข้อที่ผ่านมาใช่ไหมครับว่า คือไฟล์ที่รวมเอาสไตล์ต่างๆเอาไว้ (ผ่านการกำหนดสไตล์พร็อพเพอร์ตี้) อ้าวแล้วคำว่า Cascading หล่ะ ในหัวข้อที่ผ่านมาเรารู้แล้วว่าเราสามารถเขียนโค้ด CSS ได้ 3 ที่ แล้วถ้าเราใช้มันทุกวิธีหรือมากกว่าหนึ่งวิธี ผลลัพธ์จะออกมาเป็นอย่างไร มันก็ต้องมีการเรียงลำดับเป็นขั้นๆไป นั่นแหละครับความหมายของคำว่า Cascading ดูตัวอย่างเลยแล้วกัน
HTML:
<html>
<head>
<title></title>
<style type="text/css">
h1 {
color: #0000FF; /* Blue */
}
</style>
<link rel="stylesheet" type="text/css"
href="External.css" />
</head>
<body>
<!-- #00FF00 is green -->
<h1 sytle="color: #00FF00;">Hello</h1>
<p>Welcome to . . .</p>
</body>
</html>
CSS (External.css):
h1 {
color: #FF0000; /* Red */
}
ในตัวอย่างข้างต้นเราใช้ทั้ง 3 วิธีในการเขียนโค้ด CSS คือมีทั้งแบบ Inline, Embedded, และ External แล้วคำว่า "Hello" ในแท็ก <h1> จะได้เป็นสีอะไร เว็บเบราว์เซอร์จะใช้สไตล์ที่พบอันสุดท้ายนะครับ ในที่นี้ก็คือสีเขียว (#00FF00) จากการเขียนแบบ Inline หากลบการเขียนแบบ Inline ออก ก็จะได้สีแดง (#FF0000) จากการเขียนแบบ External เพราะเราประกาศแท็ก <link> ไว้ล่างแท็ก <style> นั่นเอง จำไว้เสมอนะครับว่าแบบ Inline จะทับ (Override/Overrule) สไตล์ที่ได้กำหนดไว้ในที่อื่นๆเสมอ
Case Sensitivity, White Spaces, และ Comments
ก่อนจะเริ่มเรียนรู้และลงมือเขียนโค้ด CSS เรามาเรียนรู้เรื่องของ Case Sensitivity, White Spaces, และ Comments กันก่อน โค้ด CSS เป็น Case Sensitive ตาม XML/XHTML นั่นหมายความว่า ตัวอักษรพิมพ์เล็กกับพิมพ์ใหญ่เป็นคนละตัวกัน นอกจากนี้คีย์เวิร์ดของ CSS จะเป็นตัวพิมพ์เล็กทั้งหมดด้วย แต่ทว่าในการใช้งานบน HTML นั้นสามารถอนุโลมได้ เพราะ HTML เป็น Syntax แบบเก่า คือยังไม่เข้ามาตราฐาน XML ดังนั้นตัวอักษรพิมพ์เล็กหรือพิมพ์ใหญ่จึงไม่แตกต่างกัน (XHTML คือ HTML ที่เข้ามาตราฐาน XML แล้ว) ในส่วนของช่องว่างหรือ White Spaces นั้น ไม่มีผลต่อการตีความโค้ด แต่จะส่งผลต่อการอ่านและแก้ไขโค้ดในอนาคต ดั้งนั้นคุณจะเขียนทุกอย่างอยู่ภายในบรรทัดเดียวกันก็ได้ แต่คงไม่ดีแน่เพราะอ่านไม่รู้เรื่องเลยใช่ไหมครับ สุดท้ายคอมเม้นท์ (Comment) คือการแทรกคำอธิบายลงไปในโค้ด ไม่มีผลต่อรูปแบบการแสดงผลใดๆทั้งสิ้น เพื่อให้ผู้ที่มาอ่านโค้ดของเรา เข้าใจโค้ดได้ง่ายขึ้น หรือแม้แต่จะอธิบายตัวเองก็ได้ เพราะเราอาจลืมในสิ่งที่เราเขียนเมื่อเวลาผ่านไป คอมเม้นท์มี Syntax ดังนี้
/* . . . any comment here . . . */
คอมเม้นท์เริ่มต้นด้วยเครื่องหมาย "/*" แล้วตามด้วยคอมเม้นท์ ซึ่งจะยาวแค่ไหนก็ได้ แล้วปิดท้ายด้วยเครื่องหมาย "*/" ส่วนใครจะมีรูปแบบการจัดคอมเม้นท์อย่างไรให้ดูสวยงาม อันนี้ก็ขึ้นอยู่กับความชอบส่วนตัวแล้ว
รู้จักกับ Selectors
Selectors คือตัวระบุแท็ก HTML ที่เราต้องการกำหนดสไตล์ให้ จากตัวอย่างโค้ด CSS แบบ Embedded และ External ที่ผ่านมา เราใช้ Syntax ดังนี้
selector {
property:value;
}
ตัวอย่างเช่น
p {
color: #0000FF;
}
ในต้วอย่างข้างต้น p คือ Selector นั่นเอง การเรียนรู้ Selector นั้นสำคัญกว่าการเรียนรู้สไตล์พร็อพเพอร์ตี้ property:value ต่างๆเสียอีก เพราะถ้าใช้ Selector ไม่เป็น ค่า property:value ที่เขียนไปก็ไม่มีประโยชน์นะครับ
Selector ไม่เพียงแต่จะระบุแท็กด้วยชื่อเท่านั้น แต่ยังสามารถระบุแท็กด้วยวิธีการอื่นอีกด้วย มิเช่นนั้นเราคงไม่สามารถระบุย่อหน้าที่เฉพาะเจาะจงของแต่ละเว็บเพจได้ การใช้ Selector มีอยู่ 3 รูปแบบหลักๆด้วยกันคือ
- ใช้ชื่อแท็ก (tag{ })
- ใช้แอททริบิวท์ id (#id{ })
- ใช้แอททริบิวท์ class (.class{ })?
ซึ่งแต่ละรูปแบบก็มีวิธีการใช้และความเหมาะสมที่แตกต่างกันไป โดยรายละเอียดจะกล่าวในลำดับถัดไป
การระบุ Selector ด้วยชื่อแท็ก
การระบุด้วยชื่อแท็กนั้นก็เป็นวิธีการดังเช่นที่ได้ยกตัวอย่างมา โดยมี Syntax ดังนี้
tagName {
property:value;
}
การระบุด้วยชื่อแท็กนั้นจะส่งผลถึงทุกๆแท็กภายในเว็บเพจนั้น รูปแบบนี้เหมาะสำหรับกรณีที่แท็กนั้นๆใช้รูปแบบเดียวกันทั้งเว็บเพจ ตัวอย่างเช่น ถ้าต้องการเปลี่ยนสีลิงค์ทั้งหมดให้เป็นสีเทาเข้ม ก็ทำได้ดังนี้
a {
color: #333333; /* dark grey */
}
ทุกลิงค์ในเว็บเพจนั้นจะเป็นสีเทาเข้มหมด แต่หากต้องการระบุเพียงแค่บางแท็ก ถึงแม้จะมีชื่อแท็กเหมือนกัน ก็ต้องใช้วิธีระบุด้วยแอททริบิวท์ class
การระบุ Selector ด้วย id Attribute
การระบุด้วยแอททริบิวท์ id ใช้ในกรณีที่ต้องการระบุถึงแท็กเดียวภายในเว็บเพจเท่านั้น เนื่องด้วยเราสามารถตั้ง id ให้กับแท็ก HTML ใดๆก็ได้ และ id ก็จะต้องไม่ซ้ำกันด้วย ดังนั้นหากเราต้องการระบุถึงแท็กใดเป็นการเฉพาะเจาะจง ก็ให้ตั้ง id ให้กับแท็กนั้นๆเสียก่อน ตัวอย่างเช่น
<p id="footer">Copyright 2011</p>
ถึงแม้ว่าจะมีแท็ก <p> มากกว่าหนึ่งแท็กในเว็บเพจเดียวกัน เราก็สามารถอ้างถึงแท็กดังกล่าวข้างต้นได้ด้วย id "footer" อย่างไรก็ตามในการระบุ Selector ด้วย id มีรูปแบบการเขียนที่แตกต่างจากการระบุด้วยชื่อแท็ก กล่าวคือเราจะต้องใช้เครื่องหมาย "#" นำหน้า Selector เสมอ ทั้งนี้เพื่อบอกให้เว็บเบราว์เซอร์รู้ว่า กำลังอ้างถึงด้วย id โดยมี Syntax ดังนี้
#id {
property:value;
}
ดังนั้นจากตัวอย่างข้างต้น เราสามารถกำหนดให้ย่อหน้าข้อความ "Copyright 2011" เป็นตัวหนาและมีการจัดเรียงข้อความให้อยู่กึ่งกลางได้ดังนี้
#footer {
font-weight: bold;
text-align: center;
}
รูปแบบการระบุ Selector ด้วยแอททริบิวท์ id นี้ เหมาะกับการปรับแต่งส่วนใดส่วนหนึ่งเฉพาะภายในเว็บเพจ ซึ่งจะไม่ซ้ำกันโดยเด็ดขาด เช่นในการทำเลย์เอาท์เราอาจแบ่งเว็บเพจออกเป็นส่วนต่างๆเช่น Header, Content, Menu, Sidebar, Footer เป็นต้น ในแต่ละส่วนก็มีรูปแบบการแสดงผลที่ไม่เหมือนกัน ในกรณีนี้เราควรใช้การระบุ Selector ด้วยแอททริบิวท์ id (ในการจัดเลย์เอาท์เราไม่ใช้แท็ก <p> นะครับ แต่จะใช้แท็ก <div> แทน)
การระบุ Selector ด้วย class Attribute
การระบุ Selector ด้วยชื่อแท็กจะเปลี่ยนแปลงสไตล์ให้กับแท็กทุกๆแท็กที่ชื่อเดียวกัน ในขณะที่การระบุ Selector ด้วย id จะเปลี่ยนแปลงสไตล์ให้กับแท็กใดแท็กหนึ่งเฉพาะเจาะจงเท่านั้น ในรูปแบบสุดท้ายนี้เราจะมาดูวิธีที่อยู่ตรงกลาง กล่าวคือการเปลี่ยนแปลงสไตล์ให้กับแท็กไม่ทั้งหมดแต่ก็มากกว่าหนึ่งแท็กได้ นั่นก็คือการระบุ Selector ด้วยแอททริบิวท์ class นั่นเอง วิธีการนี้มีประโยชน์มาก เช่น เราต้องการให้ลิงค์ภายในเว็บไซต์เรามีสีเทา แต่ลิงค์ไปยังเว็บไซต์อื่นเป็นสีฟ้า จะเห็นได้ว่าเราต้องการให้แท็ก <a> มีรูปแบบการแสดงผลที่แตกต่างกัน แม้จะเป็นแท็ก <a> เหมือนกัน เป็นต้น การระบุ Selector ด้วยแอททริบิวท์ class เริ่มต้นด้วยการกำหนดแอททริบิวท์ class ภายในแท็กนั้นๆก่อน ตัวอย่างเช่น
<a class="internal" href="/about">about us</a>
<a class="internal" href="/contact">contact us</a>
HTML อนุญาตให้เราใส่แอททริบิวท์ class ลงไปในแท็กใดๆก็ได้ เพื่อประโยชน์ในการจัดพวกหรือประเภท ให้นึกง่ายๆว่า ถ้าแท็กใดมี class เดียวกัน ก็จัดอยู่ในพวกเดียวกัน ก็สามารถใช้สไตล์แบบเดียวกันได้ ที่นี้มาดูวิธีการระบุ Selector ด้วยแอททริบิวท์ class ใน CSS กัน ให้เรานำหน้าด้วยเครื่องหมายจุด "." แล้วตามด้วยชื่อ class โดยมี Syntax ดังนี้
.class {
property:value;
}
จากตัวอย่างลิงค์ก่อนหน้านี้ เราสามารถระบุ Selector ได้ดังนี้
.internal {
color: #333333;
}
ในตัวอย่างข้างต้นเรากำหนดสไตล์ให้กับแท็ก <a> ที่มี class เป็น "internal" เท่านั้น แท็ก <a> อื่นๆยังคงใช้ค่าสีเป็นค่าตั้งต้นคือสีฟ้า หากต้องการให้เป็นสีอื่นนอกจากสีฟ้า ก็ต้องกำหนด class เพิ่ม นอกจากนี้การกำหนดค่า class ยังสามารถซ้ำกันข้ามแท็กก็ยังได้ ตัวอย่างเช่น
<h1 class="emphasize">
<p class="emphasize">
แบบนี้ก็ทำได้นะครับ ถ้าคิดว่าจะใช้สไตล์แบบเดียวกันได้
การระบุ Selector แบบอื่นๆ
นอกจากการระบุ Selector ใน 3 รูปแบบหลักที่ได้กล่าวไปแล้วนั้น ยังมีการระบุ Selector ในรูปแบบอื่นๆอีกด้วย ซึ่งจะเป็นในลักษณะของลูกเล่นพิเศษเพื่อเพิ่มความยืดหยุ่นในการเขียนโค้ด CSS โดยจะเริ่มต้นจากการผสมชื่อแท็กและ class เช่น
HTML:
<h1 class="emphasize">Warning</h1>
<p class="emphasize">Please use caution when driving . . . </p>
CSS:
.emphasize {
color: ##FF0000;
}
p.emphasize {
font-weight: bold;
font-style: italic;
}
จากตัวอย่างข้างต้นนี้แท็กใดก็ตามที่มีแอททริบิวท์ class เป็น emphasize จะมีตัวอักษรเป็นสีแดง แต่เฉพาะแท็ก <p> ที่มีแอททริบิวท์ class เป็น emphasize ด้วยเท่านั้นที่จะมีตัวอักษรเป็นตัวหนาและตัวเอียง และโปรดสังเกตว่าชื่อแท็ก เครื่องหมายจุด และชื่อ class ต้องติดกันหมดด้วย
นอกจากนี้เรายังสามารถระบุ Selector แบบ Contextual ได้อีกด้วย แบบ Contextual เป็นการระบุถึงแท็กที่อยู่ภายในแท็กเฉพาะอีกที ตัวอย่างเช่น
HTML:
<p>Copyright 2011, <em>Somboon Patntirapong</em>, All rights reserved</p>
CSS:
p em {
color: #0000FF;
}
จะเห็นได้ว่าตัวอย่างข้างต้น ต้องการระบุถึงแท็ก <em> ที่อยู่ภายในแท็ก <p> เท่านั้น อันนี้เราเลยเรียกว่าแบบ Contextual นะครับ เพราะระบุแท็กที่อยู่ใน Context ของแท็กอื่นอีกที อันที่จริงแล้วตัวอย่างข้างต้นน่าจะเขียนด้วยแท็ก <div> มากว่า แทนที่จะเป็นแท็ก <p> ดังนี้
HTML:
<div id="footer">
Copyright 2011, <em>Somboon Patntirapong</em>, All rights reserved
</div>
CSS:
#footer em {
color: #0000FF;
}
เพราะคงไม่ต้องการให้แท็ก <em> ภายในแท็ก <p> มีสไตล์เหมือนกันหมดนะครับ การใช้ <div> จึงดูจะยึดหยุ่นกว่า ทั้งนี้ทั้งนั้นเพียงต้องการยกตัวอย่างให้เห็นการระบุ Selector แบบ Contextual เท่านั้นครับ คุณผู้อ่านก็ไปประยุกต์กันเอาเองตามแต่ความเหมาะสมแล้วกัน
แบบสุดท้ายคือแบบรวมกลุ่ม (Grouping) ซึ่งสามารถกำหนด Selector ได้มากกว่าหนึ่งในคราวเดียวกัน ตัวอย่างเช่น
h1, h2, h3 {
color: #0000FF;
}
h3 {
font-style: italic;
}
ตัวอย่างข้างต้นแท็ก <h1>, <h2>, และ <h3> ใช้สไตล์เดียวกันได้เลยไม่ต้องแยกเขียน และเฉพาะแท็ก <h3> เท่านั้นที่ให้เป็นตัวเอียงด้วย
Inheritance
Inheritance คือการสืบทอดคุณสมบัติหรือสไตล์นั่นเอง โดยแท็กย่อยจะสืบทอดสไตล์จากแท็กชั้นนอก ถ้าไม่มีการกำหนดเป็นการเฉพาะ ตัวอย่างเช่น
HTML:
<body>
<h1>Hello</h1>
<p>Welcome to . . .</p>
</body>
CSS:
body {
color: #333333; /* Dark Grey */
}
h1 {
color: #0000FF; /* Blue */
}
ตัวอย่างข้างต้นนี้ข้อความ "Welcome to . . ." จะมีสีเทาเข้ม เพราะแท็ก <p> สืบทอดสไตล์มาจากแท็ก <body> ซึ่งเป็นแท็กชั้นนอก ในขณะที่คำว่า Hello จะมีสีน้ำเงิน เพราะมีการระบุเฉพาะเจาะจง จากตัวอย่างนี้จะเห็นได้ว่าถ้าต้องการกำหนดคุณสมบัติรวมของทั้งเพจ ก็สามารถกำหนดได้ที่แท็ก <body> เลย อย่างไรก็ตามไม่ใช่ทุกพร็อพเพอร์ตี้ที่จะมีการสืบทอดได้ทั้งหมด บางพร็อพเพอร์ตี้อาจมีข้อยกเว้นได้
