CSS style แต่ง-แต้ม-สีสัน ให้หน้าเว็บ

หากเทียบ Web Page เป็นดินแดนแล้วล่ะก็ เราก็คงจะแบ่งมันได้ออกเป็น สามก๊ก หลักๆ นั่นคือ

1. HTML
2. JavaScript
3. CSS

ซึ่งในผู้ยิ่งใหญ่ทั้งสาม (?) นี่ .. เราจะถือว่า HTML เป็นลูกพี่ใหญ่สุด เปรียบได้กับวุ่ยก๊กของโจโฉที่ยิ่งใหญ่มากจนอีกสองก๊กต้องร่วมมือกันถึงจะต้านได้ (นอกเรื่องไกลไปและ กลับมาๆ)

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

เปิดหน้าเว็บ แต่เน็ตช้า เลยโหลด CSS ไม่ติด

ตัวอย่างเช่นหน้าเว็บนี้ เห็นแล้วเป็นยังไงบ้าง ?
อืม .. มันก็มีเนื้อหาเขียนอยู่ให้อ่านล่ะนะ แต่ไม่สวยใช่มั้ยล่ะ
งั้นมาดูกันใหม่

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

Casecading Style Sheets

CSS หรือ casecading style sheets (บางครั้งการเอ่ยถึง style ก็หมายถึงเจ้า CSS นี่แหละ) เป็นสิ่งที่เอาไว้ตกแต่งหน้าเว็บ โดยสมัยก่อนเนี่ย เวลาเราเขียนเว็บด้วย HTML แล้วอยากทำให้มันสวย เราก็ทำการฝั่งค่าสี ขนาดตัวอักษร ต่างๆ พวกนั้นลงไปในแท็ก HTML ซะ

แล้วเป็นไง ?

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

ดันนั้นการเขียนเว็บสมัยใหม่เขาจะใช้คอนเซ็ปว่า แยก Structure ออกจาก Style ซะให้มันไม่ปนกันเลย

HTML คือ Structure .. ส่วน CSS คือ Style

วิธีการแทรก CSS ลงในไฟล์ HTML มี 3 วิธี

1. Inline
2. Internal
3. External

โดยวิธีแบบ Inline นั้นง่ายที่สุด

Inline Style

<div style="color: red;">
    content
</div>
<p>

 

เราอยากจะให้ตัวอักษรใน div ตัวนี้เป็นสีแดง เราก็ใช้ CSS ซึ่งเขียนว่า color: red; แล้วใส่มันลงไปใน attribute ของแท็กที่ชื่อว่า style 
การเขียนแบบนี้เรียก inline ซึ่งแท็กที่จะได้รับผลจาก Style ตัวนี้ก็มีแค่เจ้าแท็กที่เราฝั่งค่าลงไปเท่านั้น

ส่วน color นั้นเราเรียกว่า property เป็นตัวที่บอกว่าคุณสมบัตินี้ของจะแสดงค่าตาม red หรือก็คือ value ของ property ตัวนั้นนั่นเอง
เราสามารถบอกว่า style จะมี properties แบบนี้ๆๆๆ ได้โดยการใส่คุณสมบัติลงไป ถ้ามีหลายตัวก็ใส่ต่อกันไปแบบนี้

property: value;
 property: value;
 property: value;  

อย่างต่อไปคือ

Internal Style

<style>
div{
    color: red;
}
</style>
<div>
    content
</div>

แบบที่สองเป็นการสร้างแท็ก <style> ขึ้นมาแล้วบอกว่า Element ตัวชุดนี้ให้แสดงผลแบบนี้ๆ

selector {
 property: value;
 property: value;
 property: value;
 }

เราบอกว่า selector ตัวนี้ให้แสดงผลแบบ color: red จากตัวอย่าง selector คือ div แสดงว่า div ทั้งหมดในหน้านี้จะแสดงผลเป็นสีแดงทั้งหมด

External Style

จากตัวอย่างที่แล้ว เราแบ่ง code ออกเป็นส่วน <style> กับ HTML อย่างชัดเจนแล้วแต่ก็เป็นการเขียนแบบ internal นั่นคือ code ทั้งหมดอยู่ในไฟล์เดียวกัน แต่ถ้าเราอยากแยก code Style กับ HTML ออกจากกันให้อยู่คนละไฟล์อย่างชัดเจน

style.css 

div{
    color: red;
}

index.html

<link rel="stylesheet" type="text/css" href="style.css”/>
<div>
    content
</div>

เขียนไฟล์ .css ให้เสร็จแล้วก็ให้ไฟล์ .html โหลดไฟล์นี้เข้ามาใช้ด้วยคำสั่ง

<link rel="stylesheet" type="text/css" href="style.css”/>

คำถามคือแบบไหนดีกว่ากัน?

ไม่มีคำตอบตายตัว เราสามรถใช้ทั้ง 3 รูปแบบในการเขียนได้แล้วแต่ความเหมาะสมกับสถานการณ์

• inline มักใช้กับอะไรที่เฉพาะ ชั่วคราว
• internal มักใช้กับอะไรที่มีเฉพาะในหน้านั้น อาจจะเป็น inline มาก่อนก็ได้ แต่เมื่อมันมี inline หลายๆ ตัวเขาก็มักแยกมันออกมาเป็น internal ไปซะเลย
• external เป็นรูปแบบที่นิยมที่สุด เนื่องจากการเขียนเว็บนั้นไม่ได้มีแค่หน้าเดียว ถ้าเราเขียนแบบ internal นั้นจำเป็นต้องก๊อปโค้ดชุดนี้ไปแปะใส่ทุกหน้าซึ่งไม่ใช่เรื่องดีแน่ การเขียนไฟล์ css แยกออกมาเดี่ยวๆ จึงนับว่าเป็นวิธีที่ดีกว่า

แล้วถ้าเกิดสไตล์มันชนกันล่ะ?

สไตล์ชนกันหมายความว่า ในไฟล์ .css เราเขียนแบบ

div{
   font-size: 10px;
   color: green;
   text-decoration: underline;
}

เราเซ็ตค่า css ให้ div ทุกก้อนแสดงผลเป็น ตัวอักษรขนาด10px สีเขียว และมีการขีดเส้นใต้

แล้วใน internal เราก็เขียนอันนี้ลงไปด้วย

div{
    font-size: 20px;
    color: yellow;
}

ส่วนที่ div เป้าหมายเราก็เขียนลงไปแบบนี้

<div style="font-size: 30px;"></div>

ที่เราเขียนผ่านมานั้นมีการเซ็ตค่า css ถึง 3 ที่ .. แล้วผลสุดท้ายจะออกมาเป็นยังไงล่ะเนี่ย

div{
    font-size: 10px;
    color: green;
    text-decoration: underline;
}
div{
    font-size: 20px;
    color: yellow;
}

<div style="font-size: 30px;"></div>

ได้ผลเป็นแบบนี้ font-size: 30px; color: yellow; text-decoration: underline; นั่นแสดงว่า inline > internal > external

Selector

selector คือสิ่งที่บอกว่าเราต้องการเลือก Element ตัวไหนในการเซ็ตค่า property ของ CSS ที่เรากำหนดลงไป เราสามารถแบ่งประเภทของ selector ออกเป็น 3 แบบหลักๆ ที่ใช้กัน

select by TAG

div{
    color: red;
}

แบบเบสิกที่สุด บอกว่าแท็กนี้แสดงผลยังไง
ซึ่งการเขียนแบบนี้จะกระทบโดนแท็กนี้ทุกตัวในหน้า
ส่วนมากเลยใช้กับการเขียนทับการแสดงผลของ browser ให้ elements ทั้งหน้าทุกตัวของเราแสดงผลแบบที่เป็นธีมของเรา

select by ID

#topic{
    color: red;
}

id เป็นการประกาศว่าให้ใช้ style นี้กับ element ตัวเดียวที่มี id ตามที่เรากำหนดเท่านั้น
โดยปกติของ id นั้นจะอนุญาตให้มีได้แค่ตัวเดียวในหน้าเว็บ เช่นเราประกาศ <p id="my-paragraph"></p> นั่นหมายความว่าเรากำหนดชื่อให้ element ตัวนี้แล้ว ในหน้าเพจนี้จะมี elements ตัวอื่นๆ ที่มี id ซึ่งกับตัวนี้ไม่ได้แล้ว

การประกาศ id ของ css จะใช้สัญลักษณ์ # (Hashtag) นำหน้าชื่อ

select by Class

.content{
    color: red;
}

แล้วถ้าเราต้องการจะกำหนดสไตล์ให้ elements หลายๆ ตัวแต่ไม่ใช่ทุกแท็กที่จะแสดงผลแบบนี้ เราก็ใช้ class แทนเพราะว่าหลักการของ class ก็เหมือนกับ id ที่อนุญาตให้มีหลายตัวได้นั่นเอง

การประกาศ class ของ css จะใช้สัญลักษณ์ . (dot) นำหน้าชื่อ

Pseudoclass

ซูโดคลาส (หรือจะอ่านว่า สูโดคลาส ก็ได้นะ 55) เป็นการประกาศว่าเราจะเซ็ตสไตล์แบบนี้ๆ ให้ selector ที่เรากำหนดโดยมีข้อแม้ว่า ต้องเกิดเหตุการณ์ที่เป็นไปตาม pseudoclass ตัวนั้นก่อนเท่านั้น

ตัวอย่างเช่น เราอยากจะให้ link ของเรามีสีแดง แต่ถ้าเอาเมาส์ไปวางไว้ข้างบนแล้วให้เปลี่ยนสีไปเป็นสีเขียว (เอาเมาส์ไปอยู่เหนือ elements น่ะน่ะ ไม่ใช่คลิกเมาส์ลงไป ถ้าเลื่อนเมาส์ออกมาจากเขตของ elements ตัวนั้นก็จะกลับเป็นเหมือนเดิม)

a{
    color: red;
}
a:hover{
    color: green;
}

ในโค้ดชุดนี้เราเพิ่ม :hover เข้าไปข้างหลัง a หมายความ style ในกรุ๊ปนี้จะแสดงผลออกมาเมื่อโดนเมาส์ hover หรือการที่เมาส์ไปลอยอยู่เหมือน elements เท่านั้น
pseudoclass ที่ใช้บ่อยๆ ได้แก่

• hover ใช้กับการบอกว่า เมาส์มาลอยอยู่เหนือตัวมันแล้วจะให้ทำยังไง
• active ใช้เมื่อ element ตัวนั้นโดน focus หรือโดนกดลงไป (คลิกเมาส์ลงไปเท่ากับเป็นกันโฟกัสไปที่มันโดยอัตโนมัติ)
• visited ส่วนมากจะใช้กับ link เป็นหลัก ใช้เพื่อบอกว่า link ตัวนี้ ผู้ใช้เคยคลิกไปแล้ว

Box-Model

คือมิติของ Elements ชิ้นหนึ่งๆ ในหน้าเพจ หรือก็คือ Element Dimension นั่นเอง .. Element แต่ละตัวจะมีขนาดของมันเป็น width และ height ซึ่งถ้าเปรียบเทียบแล้วมันก็เหมือนกับตัวบ้านแบบรูปข้างล่างนี่

การเซ็ตค่า width และ height เป็นการเซ็ตมิติแบบมาตราฐานให้ Elements แต่ว่ามันสามารถเซ็ตอย่างอื่นได้อีกด้วย นั่นคือ padding, border และ margin

ใน 3 ตัวนี้ border เข้าใจได้ง่ายที่สุด ซึ่งมันก็แปลตรงๆ ก็คือ ขอบ หรือ เส้นขอบ นั่นเองซึ่งเราเทียบได้กับรั้วบ้าน การที่เรากำหนดความสูง+กว้างให้ Element แล้วทำให้มันมีขนาดแบบนั้น แต่ว่าเมื่อแสดงผลมักจะไม่เห็นขอบเขตว่า Element ตัวนี้มันมีขนาดเท่าไหร่กันแน่ (เพราะตัว Element มีสีพื้นเป็นสีใส มองทะลุได้) เราจึงต้องปักรั้วให้มัน เพื่อให้เห็นขอบเขตว่ามันอยู่ตรงไหนกันแน่

ส่วน padding นั้นเทียบได้กับ พื้นที่ว่างระหว่างตัวบ้านซึ่งเอาไว้ทำสนามหญ้ากับรั้วบ้าน คือบางครั้งเราก็ไม่ได้ต้องการปลูกบ้านแล้วเอารั้วล้อมรอบเลย อยากให้มีพื้นที่ว่างระหว่าง content ข้างในกับขอบบ้างประมาณนั้น

อย่างสุดท้ายคือ margin ซึ่งเป็นการบอกว่าให้ Element เว้นระยะตัวมันเองให้ห่างจาก Element ตัวอื่นเท่าไหร่

วิธีเซ็ตค่าให้เจ้าพวกนั้น ทำไง?

การเซ็ตค่าให้ width กับ height ทำได้ตรงตัวเลยคือ

selector{
    width: 100px;
    height: 100px;
}

หน่วยในการเขียนเว็บนั้นมีที่ใช้กันคือ px, % และ em ซึ่งส่วนมากมักจะใช้ px เพราะมันคือ pixel หรือหน่วยวัดมาตราฐานของจอคอมอยู่แล้ว

ส่วน padding, margin นั้นใช้วิธีเดียวกันซึ่งแบ่งได้เป็น 4 รูปแบบการเขียน

• แบบแรกเป็นแบบ 1 value

padding: 10px;
margin: 10px;

เขียนแบบนี้หมายความว่า
- ทุกด้านของจะใช้ค่าเท่านี้เหมือนกันหมด

• แบบสองเป็นแบบ 2 value

padding: 10px 20px;
 margin: 10px 20px;

การเขียนแบบสองค่า  
- ค่าแรก จะหมายถึงด้าน "บน-ล่าง"  
- ค่าที่สองจะหมายถึงด้าน "ซ้าย-ขวา"

• แบบสามเป็นแบบ 3 value

padding: 10px 20px 30px;
 margin: 10px 20px 30px;

การเขียนแบบสามค่า  
- ค่าแรก จะหมายถึงด้าน "บน"  
- ค่าที่สองจะหมายถึงด้าน "ซ้าย-ขวา" 
- ค่าที่สามจะหมายถึงด้าน "ล่าง"

• แบบสุดท้ายเป็นแบบ 4 value ซึ่งเป็นรูปแบบเต็ม

padding: 10px 20px 30px 40px;
 margin: 10px 20px 30px 40px;

การเขียนแบบเต็ม ค่าจะเซ็ตทิศแบบตามเข็มนาฬิกา

- ค่าแรก จะหมายถึงด้าน "บน"  
- ค่าที่สองจะหมายถึงด้าน "ขวา"
- ค่าที่สามจะหมายถึงด้าน "ล่าง" 
- ค่าที่สี่จะหมายถึงด้าน "ซ้าย"

ส่วน border จะต่างจากชาวบ้านเขาเล็กน้่อยคือ value ของมันต้องเซ็ตถึง 3 อย่าง

border: 1px solid #f00;

โดยสิ่งที่ border ต้องมีคือ

1. ขนาดเส้น ใช้หน่วย px ได้ตามปกติ
2. รูปแบบของเส้น การแสดงผลของเส้น โดยทั่วไปจะใช้ solid หมายถึงเป็นเส้นทึบ และ dashed สำหรับเส้นประ
3. สีของเส้น กำหนดสีด้วยชื่อหรือหรือรหัสก็ได้

Reference

เนื่องจาก CSS นั้นมีเยอะมากและอัพเดตตลอดเวลาตามโลกคอมพิวเตอร์ หากจะเขียนวิธีใช้ทุกตัวก็คงไม่ไหว ลองหาอ่านเพิ่มที่นี่ได้

ซึ่งสองที่นี้เป็นลักษณะประมาณว่าเว็บรวมชื่อ property และ value ที่เป็นไปได้ของ CSS เอาไว้


http://coding.smashingmagazine.com/2009/07/13/css-3-cheat-sheet-pdf/
http://www.htmldog.com/reference/cssproperties/ 

แต่ยังมีเรื่อง position background color font text display CSS3 อีกบลาๆๆ ซึ่งเรื่องพวกนี้สำคัญซะด้วย ถ้ามีเวลาจะมาเขียนภาคต่อนะ ยังไงก็ยังอยากพูดถึงมันอยู่