ละเลงสีสันให้หน้าเว็บด้วย CSS
คราวที่แล้ว ผมฝากการบ้านเป็นโค้ด HTML เพียวๆ ไว้ให้ทดลองแก้ไขกันไปแล้วนะครับ ถ้าใครยังไม่ได้อ่านก็ขอให้ย้อนกลับไปอ่านก่อน เพราะเราจะใช้โค้ดนั้นมาละเลงสีกันแล้ว (หรือไปที่หน้า perfect-webpage.html แล้ว View Source เพื่อก็อปปี้โค้ดเลยก็ได้ครับ)
ตอนแรกผมกะว่าจะเขียนเกี่ยวกับการจัดเลย์เอาต์หน้าเว็บด้วย CSS ก่อน แต่ตอนนี้ผมเปลี่ยนใจแล้ว เรามาละเลงสีกันก่อนดีกว่าครับ เพราะเรื่องจัดเลย์เอาต์ต้องเข้าใจพื้นฐานเกี่ยวกับ CSS Box Model ก่อน มันมีเรื่องตัวเลขและการคำนวณเข้ามาเกี่ยวข้องนิดหน่อย (แต่ที่อาจทำให้คุณปวดหัวมากขึ้น ถ้าต้องทำ CSS Hack สำหรับรองรับ IE รุ่นต่ำกว่า 6 เพราะ มันเข้าใจเรื่องขนาดของ Box ไม่เหมือนชาวบ้าน) ในแบบฝึกหัดนี้ก็เลยใช้ เลย์เอาต์แบบคอลัมน์เดียวและยืดหยุ่น (Fluid Single Column) มาเป็นหนูทดลองก่อน
การเรียกใช้งาน ไฟล์ CSS
เอาล่ะเมื่อคุณก็อปปี้ไฟล์ perfect-webpage.html เรียบร้อยแล้ว ก็เปิดมันด้วยโปรแกรมแก้ไขข้อความของคุณเลยครับ แล้วก็เติมโค้ดแบบข้างล่างนี้ลงไประหว่าง element head เลือกแบบใดแบบหนึ่งนะครับ อย่าโลภมาก (ผมขอใช้คำว่า element แทนคำว่า แท็ค - tag เพราะมันสื่อความหมายได้ตรงกับความเป็นจริงมากกว่า)
โค้ดด้านบนนี้เป็นการสั่งให้บราวเซอร์เรียกใช้งานไฟล์ CSS ครับ อันที่จริงมันเขียนได้ทั้งหมด 3-4 แบบ แต่แบบที่เราควรจะใช้คือ 2 ตัวอย่างด้านบนนั่นแหละครับ เพราะเมื่อเราทำเว็บไซต์จริงแล้ว มันจะช่วยเราประหยัดแบนด์วิดธ์ เนื่องจากบราวเซอร์จะโหลดมันแค่ครั้งเดียวแล้วเก็บเป็น Cache File (2 ตัวอย่างด้านบนจะแตกต่างกันนิดหน่อย คือ ตัวอย่างแรก จะป้องกันเว็บบราวเซอร์รุ่นเก่าๆบางตัวที่แสดงผล CSS แบบกระท่อนกระแท่น จนเลย์เอาต์ของหน้าเว็บเละตุ้มเป๊ะ ไม่ให้มันโหลด StyleSheet หรือไฟล์ CSS ของเรา เพราะมันไม่รู้จัก @import นั่นเอง)
แล้วเราจะเอาไฟล์ CSS มาจากไหนล่ะ? ก็เขียนเองไงครับ โดยให้คุณเปิดอีกหน้าต่างนึงของโปรแกรมแก้ไขข้อความ ยังไม่ต้องพิมพ์อะไรลงไปในนั้น แต่เซฟหน้าต่างใหม่นั้นเป็น ไฟล์ fluid-single-column.css เก็บไว้ในโฟลเดอร์เดียวกันกับไฟล์ perfect-webpage.html นะครับ (คุณจะตั้งชื่อไฟล์เป็นอย่างอื่นก็ได้ครับ แต่ควรจะเป็นภาษาอังกฤษ และต้องลิงค์มันให้ถูก ถ้าคุณไม่แน่ใจก็ทำตามตัวอย่างนั่นแหละ ง่ายที่สุดแล้ว อย่าเพิ่งเปรี้ยว!)
เติมสีสันให้หน้าเว็บแบบยึดหยุ่น
มาจัดหน้าเว็บกันซักนิดนึงก่อนนะครับ CSS สามารถกำหนดสไตล์ให้กับทุก elements ในหน้าเว็บของเราได้ทั้งหมด ไม่ว่าจะเป็นเรื่อง ตำแหน่ง, ขนาด, ฟอนต์, สี ฯลฯ แต่เราต้องเลือกก่อนว่าจะกำหนดสไตล์ให้กับส่วนไหน ลองเล่นกันเลยดีกว่าครับ จัดการเอาโค้ดด้านล่างนี้ไปใส่ในไฟล์ fluid-single-column.css ของเราเลย เสร็จแล้วก็ save และ reload หน้าเว็บ perfect-webpage.html ของเรา ในบราวเซอร์เลยครับ
body {
color:black;
background:#7a0;
font-size:100%;
font-family:"Times New Roman",Thonburi, Freeserif, Serif;
}
#page {
min-width:400px;
margin:20px;
color:#000;
background:#fff;
padding:2em;
/* เอฟเฟคต์มุมโค้งของ CSS3 ใน webkit, safari3 และ FireFox3 */
-webkit-border-radius:2em;
-moz-border-radius:2em;
border-radius:2em;
/* เอฟเฟคต์เงาของ CSS3 จะเห็นเฉพาะใน webkit และ safari3 */
-webkit-box-shadow: 0 0 2em #130;
box-shadow: 0 0 2em #130;
}
ตัวกำหนดสไตล์ใน CSS เราเรียกว่า Property เช่น color , background เป็นต้น (ชื่อ property ใน CSS ต้องตามด้วย เครื่องหมาย colon หรือ ":" เสมอ) เราสามารถใช้ property ได้ไม่จำกัด โดยแต่ละ property จะต้องคั่นด้วยเครื่องหมาย semi-colon หรือ ";" จะเขียนต่อกันยาวไปเลยหรือขึ้นบรรทัดใหม่ ก็ไม่ต่างกันครับ แต่ต้องเขียนไว้ระหว่าง วงเล็บปีกกา { } ของแต่ละ element (หรือ selector) ผมคงไม่สามารถอธิบายการใช้งาน property ใน CSS ได้มากในตอนนี้ เพราะรายละเอียดมันค่อนข้างเยอะ แต่คุณสามารถศึกษาวิธีการใช้งานแต่ละ property ได้เองที่ w3schools.com/Css/default.asp ซึ่งเป็นเว็บไซต์ที่รวบรวมความรู้เกี่ยวกับการทำเว็บไซต์ ตามแนวทางของ w3.org ซึ่งมีอิทธิพลต่อโลกอินเตอร์เน็ตมากที่สุดแห่งหนึ่งในปัจจุบัน
สไตล์จากโค้ดด้านบน ก็คือ กำหนดให้ element body มีสีของตัวหนังสือเป็นสีดำ และพื้นหลังเป็นสีเขียวใบตอง(color:black; background:#7a0;) ขนาดของตัวหนังสือทั่วไปๆ เป็น 100% (font-size:100%; หรือ 16 พิกเซลในบราวเซอร์ทั่วไป) โดยให้เลือกใช้ฟอนต์ตัวใดตัวหนึ่งต่อไปนี้ตามลำดับ (font-family:"Times New Roman",Thonburi, Freeserif, Serif;) ส่วนคอมเมนต์ที่ไม่มีผลต่อโค้ดต้องเขียนไว้ระหว่าง /* กับ */ เช่น
เนื่องจากในโค้ด HTML ตัวอย่างของเรา ผมกำหนดให้มีบล็อคสำหรับห่อ elements อื่นๆทั้งหมดรองจาก body (จริงๆแล้ว กำหนดความกว้างให้ body เลยก็ได้ครับ แต่ผมต้องการใช้มันเพื่อประโยชน์อย่างอื่น) คือ
<div id="page">
...
...
</div> <!-- End #page -->
</body>
ดังนั้นเราจึงสามารถกำหนดความกว้างของหน้าเว็บได้ โดยมี div เป็น บล็อคเอนกประสงค์ใน HTML และ id คือ attribute ของมัน (attribute อีกอันที่นำมาใช้ได้ คือ class) ส่วน page คือ ชื่อ selector หรือตัวเลือก ที่เรากำหนดเองสำหรับ attribute นี้ และ id="page" จะมีได้อันเดียวเท่านั้นในหน้าเว็บนี้ แต่ถ้าเรากำหนดเป็น class="page" ก็จะมีได้ไม่จำกัดจำนวนในหนึ่งหน้า
ชื่อ selector นั้นสำคัญมากสำหรับการกำหนดสไตล์ใน CSS เช่น id="page" ก็ต้องเขียนใน CSS เป็น #page มีเครื่องหมาย # นำหน้า แต่ถ้าเป็น class="page" ก็ต้องใช้ .page มี "." (จุด) นำหน้า (หลายคนอาจจะงงกับคำศัพท์พวกนี้ เอาไว้ค่อยเรียนรู้กันอย่างละเอียดทีหลังนะครับ)
selector #page ที่เห็นในไฟล์ CSS จึงเป็นการกำหนดความกว้างที่น้อยที่สุดเวลาย่อหน้าต่างบราวเซอร์ ของ #page เป็น 400 พิกเซล (min-width:400px; โปรดระวัง IE เวอร์ชั่นเก่าๆไม่รู้จัก min-width นะครับ และถ้าต้องการกำหนดความกว้างแบบคงที่ ก็แค่เปลี่ยนมันเป็น width:800px; เป็นต้น) โดยมีระยะห่างจากขอบทั้ง 4 ด้าน เท่ากับ 20 พิกเซล (margin:20px;) มีสีตัวอักษรที่ไม่ใช่ลิงค์ เป็นสีดำ (color:#000; หรือ color:black; นั่นเอง) ส่วนพื้นหลังเป็นสีขาว (background:#fff; หรือ background:white;) โดยมีระยะห่างเข้ามาด้านใน (padding) จากทุกด้าน เป็น 2 เท่าของขนาดตัวอักษรปกติ (padding:2em;) ส่วนที่ผมคอมเมนต์ไว้ว่าเป็นเอฟเฟคต์ของ CSS3 ตอนนี้มีเฉพาะเว็บบราวเซอร์่บางตัวเท่านั้นที่สามารถแสดงผลได้ ได้แก่ ขอบโค้งมน (border-radius:2em;) และเงาตกกระทบที่พื้นหลัง (box-shadow: 0 0 2em #130;)
นั่นไง! เราได้เลย์เอาต์หน้าเว็บเป็นง่ายๆแล้ว ตอนนี้คุณจะเห็นว่าหน้าเว็บของคุณ มี 2 บล็อคใหญ่ซ้อนทับกันอยู่ คือ บล็อค body สีเขียวใบตอง ที่ห่อ บล็อค page สีขาว เอาไว้ ลองยืดหรือขยายหน้าต่างบราวเซอร์ดูนะครับ จะเห็นว่าเนื้อหาของหน้าเว็บจะย่อและขยายตามไปด้วย
เล่นกับ Links ให้ถูกวิธี
หลายคนไม่ชอบสีของลิงค์ในหน้าเว็บนั้น เราก็กำหนดได้ โดยเติมโค้ดข้างล่างนี้ เพิ่มลงไปในไฟล์ CSS ดังนี้ครับ
color:#09f;
text-decoration:none;
}
a:visited {
color:#045;
text-decoration:none;
}
a:hover {
color:#c00;
text-decoration:underline;
}
a หรือ a:link ก็คือ element ที่เป็น ลิงค์ (Anchor) ในไฟล์ HTML นั่นเอง ส่วน a:visited คือ ลิงค์ที่เราเคยเข้าไปแล้ว และ a:hover คือ ลิงค์ที่จะแสดงเวลาเอาเมาส์เข้าไปจ่อครับ (:hover เป็น CSS Pseudo-classes แบบหนึ่ง ที่ต้องกำหนดทีหลัง :link และ :visited เสมอ ไม่อย่างนั้นมันจะไม่แสดงเอฟเฟคต์ครับ นอกจากนี้ยังมี :active ที่จะแสดงผลเฉพาะเวลาคลิ๊กเท่านั้น) ส่วนการกำหนดค่าสี ก็ทำได้หลายวิธี ในตัวอย่างด้านบนกำหนดโดย โค้ดสีแบบเลขฐาน 16 (hexadecimal) เช่น color:#06c; ปกติจะต้องมีเครื่องหมาย # นำหน้าตัวเลขของสีอีก 6 หลัก เช่น #0066cc แต่ใน CSS เรากร่อนตัวเลขคู่ของสีเดียวกันได้ เป็น #06c (ตอนนี้ยังไม่ขออธิบายเรื่องการกำหนดสีแบบละเอียดครับ เพราะคุณอาจจะงงหนักยิ่งกว่าเดิม) หรือ กำหนดเป็นชื่อไปเลยก็ได้ เช่น red , green , yellow เป็นต้น ลองเข้าไปดูตัวอย่างที่ CSS Color Names ได้ครับ ส่วน text-decoration คือ กำหนดการตกแต่งตัวอักษร ถ้าเป็น text-decoration:none; ก็ไม่ให้ทำการตกแต่งใดๆ ส่วน text-decoration:underline; คือ ให้ขีดเส้นใต้
ตกแต่งหัวเว็บได้ไม่ยาก
เริ่มเห็นเค้าของความสวยงามรึยังครับ? ที่นี่เราก็มาตกแต่งส่วนหัวเว็บ หรือ header กัน ในไฟล์ perfect-webpage.html ผมกำหนดให้คำว่า Perfect Webpage! เป็นชื่อของหน้าเว็บ โดยระบุให้มันเป็นลิงค์ด้วย ตามโค้ดด้านล่างนี้
จากนั้นก็กำหนดสไตล์ทั่วไปให้ h1 id="sitename" ก่อน ในไฟล์ CSS ผมกำหนดไว้แบบข้างล่างนี้ครับ
h1#sitename {
margin:0;
padding:0;
font-size:30px;
text-align:center;
}
margin:0; กับ padding:0; ใส่ไว้เพื่อเอาค่า margin และ padding ดั้งเดิม ของบราวเซอร์ออกไป (ปกติทุกบราวเซอร์จะมีค่า CSS ดั้งเดิมของมัน ที่กำหนดมาให้เราไว้ก่อนแล้ว เพื่อช่วยให้เราสามารถดูหรืออ่านหน้าเว็บที่ไม่ได้กำหนดสไตล์ได้ คนที่ใช้ CSS ใหม่ๆอาจจะงง ที่หลายๆ elements จะมี margin และ padding อยู่แล้ว แต่เราสามารถกำหนดมันเองได้ใน CSS ครับ) ส่วนขนาดตัวอักษรกำหนดให้เป็น 30 พิกเซล (font-size:30px;) และให้ตัวหนังสืออยู่ตรงกลางบล็อค (text-align:center;) เมื่อ reload เราก็จะเห็น h1 id="sitename" ลอยอยู่ตรงกลางหน้าเว็บครับ
มาเติมเอฟเฟคต์ให้ลิงค์ของมันเลยดีกว่า ดังนี้ครับ
display:block;
padding:0.2em 1em;
text-decoration:none;
color:#fff;
background:#e60;
/* เอฟเฟคต์มุมโค้งของ CSS3 */
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
border-top-left-radius:10px;
border-top-right-radius:10px;
}
h1#sitename a:hover {
color:#ffc;
background:#9c0;
}
ปกติ element a หรือ ลิงค์ จะแสดงผลแบบ inline แต่เราสามารถกำหนดให้มันแสดงผลเป็นบล็อคได้ ด้วย display:block; ผมกำหนดแบบนี้เพราะว่าต้องการให้พื้นหลังมันเปลี่ยนสีทั้งบล็อค เมื่อเอาเมาส์ไปจ่อก่อนคลิ๊กครับ คือ h1#sitename a:hover { } นั่นเอง (คุณสามารถเปลี่ยนสีเห่ยๆที่ผมใช้เป็นสีอื่นในโค้ดได้เลยนะครับ ไม่ต้องเกรงใจ เพราะผมรู้ว่าหลายคนคงแสบตา เมื่อเห็น สีส้มตัดกับสีเขียว! แต่บอกแล้วไงว่าเรากำลัง ละเลงสีด้วย CSS กัน)
เล่นกับ Main Navigation
Main Navigation หรือ ลิงค์หลักของหน้าเว็บ ในไฟล์ perfect-webpage.html ของเรา เขียนไว้เป็น List element คือ ul และมี li ซ้อนเป็นบล็อคชื่อรายการอีกที ปกติ list element ทั้งแบบเรียงลำดับตัวเลข ol li และ ไม่เรียงลำดับ ul li จะแสดงผลเป็นบล็อคจากบนลงล่าง แต่ CSS ก็เปลี่ยนมันได้เช่นเคย แบบโค้ดด้านล่างนี้
ul#main-nav {
margin:0;
margin-bottom:15px;
padding:0.5em 15px;
background:#7a0;
text-align:center;
font-size:100%;
line-height:1.5em;
}
ul#main-nav li {
display:inline;
list-style:none;
margin:0 0.5em;
}
ul#main-nav li a {
color:#ffc;
text-decoration:none;
padding:0.2em 0.5em;
}
ul#main-nav li a:hover {
color:#f60;
background:#fff;
}
ขออธิบาย property เพิ่มอีกหน่อย คือ display:inline; ใน ul#main-nav li { } เป็นการกำหนดให้ลิสต์ #main-nav แสดงผลแบบ เป็นเส้นตรงต่อกันไปเรื่อยๆ ส่วน list-style:none; ก็คือเอาสไตล์ด้านหน้าของลิสต์ออก (เช่น เอาวงกลมทึบออก)
เอาล่ะครับ ในที่สุดเราก็ตกแต่งหัวเว็บเรียบร้อยแล้ว คุณสามารถเปลี่ยนค่าต่างๆได้เองในไฟล์ CSS โดยไม่ต้องเปลี่ยนอะไรในไฟล์ HTML เลยแม้แต่น้อย นี่คือข้อดีที่ยิ่งใหญ่ของการจัดเลย์เอาต์และตกแต่งหน้าเว็บด้วย CSS อย่างที่ผมบอกไงครับ มันช่วยให้เราเปลี่ยนธีมหรือเทมเพลตของเว็บไซต์ได้ง่ายๆ โดยไม่ต้องกลัวว่าจะมีผลกระทบต่อเนื้อหาหรือตามแก้สไตล์ที่ละแท็ค เหมือนที่คนทำเว็บรุ่นเก่าเค้าทำกัน จะเห็นว่าในไฟล์ HTML ที่ผมเขียนเป็นตัวอย่างนั้น ไม่มีการกำหนดสไตล์ฝังไว้ในแท็คเลย (Inline Style) เพราะมันแก้ไขเปลี่ยนแปลงสไตล์ทีหลังได้ยากไงครับ ใช้ CSS สะดวกกว่าเป็นไหนๆ คุณจะใช้กี่ร้อยกี่พันสีก็ได้ จะกำหนดขนาดฟอนต์กี่สิบขนาดก็ได้ โดยไม่ต้องไปแตะไฟล์ HTML เลยแม้แต่น้อย!
สำหรับสไตล์ที่เหลือผมจะไม่อธิบายในที่นี้นะครับ เพราะมันก็คล้ายๆกัน แต่คุณสามารถดูโค้ด CSS ทั้งหมดที่เขียนเสร็จแล้วได้ที่ ohweb.info/html/sample/fluid-single-column.html หรือคลิ๊กรูปภาพด้านล่าง เพื่อดูภาพหน้าเว็บตัวอย่าง ที่ดูผ่าน Safari3
ครั้งต่อไป (ถ้าผมไม่เปลี่ยนใจ) เราจะมาปวดหัวกับการจัดเลย์เอาต์แบบต่างๆด้วย CSS กันครับ
Guide
Blog Tags
แสดงความคิดเห็น