Tag: css

CSS : Firebug เพื่อนแท้ ช่วยแก้ CSS
วันนี้เราจะมาเรียนรู้วิธีการใช้ Firebug กันนะครับ โดยในการทำ CSS เนี่ย เวลาเราจะเช็คว่า CSS ที่เราเขียนมานั้น มันผิดตรงไหนหรือเปล่า หรืออยากลองแก้ CSS ดูก่อน โดยไม่อยากให้กระเทือนกับเว็บที่ใช้งานอยู่ในปัจจุบัน Firebug นั้นน่าจะเป็น 1 ในคำตอบที่เป็นตัวช่วยที่ดีของเรา

Firebug : โหลด Firebug

โดย Firebug นั้นเป็น Extensions ของ Firefox สามารถโหลดมาใช้งานได้ที่ Get Firebug

หน้าตาเว็บ Firebug (02/11/2011)

Firebug : การใช้งาน Firebug เบื้องต้น

เมื่อลง Firebug เสร็จเรียบร้อยแล้ว มาลองใช้งานกัน โดยคลิ๊กขวาแล้วเลือก Inspect Element

คลิ๊กขวา แล้วเลือก Inspect Element

หลังจากนั้น Firebug Panel จะปรากฎขึ้นมา

Firebug Panel

Firebug : เปิด Firebug เป็นอีกหน้าต่าง

เราสามารถเปิด Firebug เป็นอีกหน้าต่าง ได้โดยคลิ๊กที่ icon อันดับที่ 2 ที่อยู่ตรงมุมด้านขวาบนของ Firebug Panel

เปิด Firebug เป็นอีกหน้าต่าง

Firebug : ส่วนประกอบของ HTML Tab ใน Firebug Panel

สำหรับผม ในการใช้งาน Firebug นั้นจะใช้ในส่วนของ HTML Tab เป็นหลัก ดังนั้นมาดูว่า HTML Tab หน้าตาเป็นยังไงกันครับ

หน้าตาของ HTML Tab

Firebug : Node View

สำหรับ Node View ของ HTML Tab นั้นก็จะแสดง Code HTML ของเว็บให้เราดู โดยถ้าเรานำเม้าส์ไปวางไว้บน Element ไหน Firebug จะ Highlight ให้ดู ว่าแสดงผลอยู่ตรงไหน อย่างเช่นในรูป นำเม้าส์ไปวางที่ <div class=”info”> ดังนั้น Firebug ก็ Highlight ให้ดูว่า Element ตัวนี้อยู่ตรงไหน

Firebug Highlight ให้เราเห็นว่า <div class="info"> นั้นอยู่ตรงไหน

แต่ถ้าเราคลิ๊กที่ Element ไหน Firebug จะ highlight แถวที่เราคลิ๊ก และในส่วน HTML Stack นั้น Element ตัวที่เราคลิ๊กจะเป็นตัวหนา โดย HTML Stack นั้นจะเรียง Element ไว้โดยด้านขวาสุดคือ Element ที่คลุม Element อื่น ๆ ไว้ตามลำดับ รวมถึง HTML Side Panel จะแสดง CSS ของ Element ตัวนั้นไว้ด้วย

คลิ๊กที่ Element เพื่อดูรายละเอียด

แก้ไข Code HTML

เราสามารถกดคลิ๊กขวาที่ Element แล้วเลือก Edit HTML เพื่อแก้ไข Code HTML ได้

คลิ๊กขวา เลือก Edit HTML เพื่อแก้ไข Code

ซึ่งการแก้ไขใน Firebug เราจะสามารถเห็นผลลัพธ์ได้เลย แต่เมื่อเรา Refresh หน้านั้น การแสดงผลจะกลับมาเป็นเหมือนเดิมก่อนที่เราจะทำการแก้ไข (แก้ไขเสร็จแล้ว ให้กดที่ Edit เพื่อกลับไปยังหน้าปรกติ)

เมื่อลบคำว่า "วิธีจัดให้อยู่กึ่งกลาง" ออก ผลลัพธ์ก็แสดงผลให้เห็นทันที

Firebug : HTML Side Panel

สำหรับ HTML Side Panel นั้น มีแบ่งออกเป็น 4 ส่วนได้แก่
- Style : ซึ่งจะบอกรายละเอียดว่า Element ตัวนี้มี CSS ตัวใดกำกับอยู่บ้าง
  
  หัวข้อ Style
- Computed : จะบอก CSS ของ Element ตัวนั้นทั้งหมด ว่ามีค่าเป็นเท่าไหร่บ้าง
  
  ค่า CSS ต่าง ๆ ของ Element
- Layout : แสดงให้เห็นว่า Element มีขนาด มีลักษณะยังไง และเราสามารถแก้ค่าตัวเลขต่าง ๆ ได้ด้วย
  
  สามารถแก้ไขค่าตัวเลขได้เลย
- DOM : หัวข้อนี้ขอออกตัวเลยว่าไม่รู้เรื่อง ขอไม่อธิบายนะครับ >_<
Firebug : เริ่มต้นแก้ไข CSS ด้วย Firebug

ระงับการแสดงผล

เราสามารถระงับการแสดงผลชั่วคราวเพื่อดูการเปลี่ยนแปลงได้ โดยเอาเม้าส์ไปวางไว้หน้าตัวที่เราจะระงับ จะปรากฎ icon มาเมื่อเรากดไป จะเห็นการเปลี่ยนแปลงดังรูปเป็นตัวอย่าง

CSS ที่กำกับ

ตัวอักษรที่ใหญ่ขึ้นจากการระงับขนาดตัวอักษร

กดเพื่อระงับการใช้งาน

แก้ไข CSS

คราวนี้เรามาลองแก้ไข CSS ดูนะครับ Firebug ช่วยให้เราเห็นการเปลี่ยนแปลงในค่าที่เราใส่ได้ยังไง

ให้เราดับเบิ้ลคลิ๊กที่ค่าที่เราต้องการแก้ไข แล้วใส่ค่าใหม่ได้เลยครับ

จะเห็นว่าเพิ่ม margin-bottom แล้วมีการเปลี่ยนแปลงยังไง

เพิ่ม CSS

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

ใส่ค่าที่ต้องการทดสอบเลยครับ

ผมใส่ค่าเป็น background:#FF0; เข้าไป ก็จะได้ผลลัพธ์เป็นพื้นหลังสีเหลืองในทันที

พื้นหลังสีเหลือง เห็นกันทันที

ทุกคนลองใช้ดูนะครับ ผมว่ามันทำให้การเขียน CSS ง่ายขึ้นเยอะเลยครับ

ปล. Chrome เนี่ยมันมีให้มากับตัว Browser อยู่แล้ว ใช้งานไม่ต่างกันเท่าไหร่

เพิ่มเติม (โดย @inhumba) : ตรง HTML Slide Panel ในส่วนของ Style สามารถแก้ไขค่าตัวเลขได้โดยใช้ปุ่มลูกศร เมื่อ cursor อยู่ที่ค่านั้นๆ ปุ่มขึ้นจะเพิ่มค่าตัวเลขทีละ 1 ปุ่มลงจะลดค่าตัวเลขทีละ 1 ปุ่ม Page Up จะเพิ่มทีละ 10 ปุ่ม Page Down จะลดทีละ 10 ครับ
November 2, 2011
CSS : วิธีจัดให้อยู่กึ่งกลาง กรณีรู้ความกว้างและความสูง

หลายครั้งหลายหน ที่อยากจะจัดการให้ div ตัวนี้ div ตัวนั้นอยู่กึ่งกลาง แต่จะทำยังไงละ มีวิธีมาแนะนำครับ แต่ต้องเป็นกรณีที่เรารู้ความกว้าง และความสูงของ div ตัวนั้นนะครับ

CSS : จัด div ที่เราต้องการ ให้อยู่กึ่งกลาง

สมมติว่าเรามี div อยู่ตัวนึง อยากจะให้มันอยู่ตรงกลางจะทำยังไงดี เรารู้แล้วว่า div ตัวนี้กว้าง 200px และสูง 100px งั้นเรามาลองใช้ position แล้วให้ top:50% กับ left:50% แล้ว มันน่าจะอยู่ตรงกลางนะ ลองดู

[css]
#box{
width:200px;
height:100px;
position:fixed;
top:50%;
left:50%;
}
[/css]

ผลลัพธ์ที่เราได้ออกมาจะเป็นแบบนี้ครับ

ถ้าตั้งค่า top:50%; left:50%; จะได้ผลลัพธ์ดังรูป

จะเห็นได้ว่า ตำแหน่งที่มันใช้วางตำแหน่ง จะยึดหลักไว้ที่มุมด้านซ้ายบน ทำให้ top:50%; left:50%; ให้ผลลัพธ์ในแบบนี้ ดังนั้นเราจะทำต่อโดยใช้ margin เพื่อดึง div ให้มาอยู่ตรงกึ่งกลาง คราวนี้ค่าที่เราจะใช้คิดค่ามาจากเอาความกว้างหาร 2 แล้วนำไปใส่เป็นค่าลบให้ margin-left และเอาค่าความสูงหาร 2 แล้วนำไปใส่เป็นลบให้ margin-top ซึ่งความกว้าง 200px และความสูง 100px จึงได้ค่าออกมาเป็น

[css]
#box{
width:200px;
height:100px;
position:fixed;
top:50%;
left:50%;
margin-left:-100px;
margin-top:-50px;
}
[/css]

จะทำให้ div ขยับตามที่เราตั้งค่าไว้

#box จะขยับไปด้านบน และด้านซ้ายตามรูป

ผลลัพธ์จึงออกมาเป็นดังรูป

ในที่สุด #box ก็อยู่กึ่งกลางแล้ว

October 30, 2011
CSS : CSS Shorthand เขียน CSS ให้กระชับ
การเขียน CSS แบบ Shorthand นั้น คือ การเขียน CSS ของเราให้กระชับ เป็นระเบียบกว่าเดิม และทำให้ CSS ของเรามีขนาดที่เล็กลง

CSS : ตัวอย่าง CSS Shorthand

หลายครั้งที่ทำ CSS แก้ไข CSS หรือดู Code CSS คนอื่นนั้น จะพบว่าทำไมถึงเขียนไม่เหมือนกัน แต่ได้ผลลัพธ์ที่เหมือนกันนะ อย่างเช่น

[css]
margin-top:0px;
margin-right:10px;
margin-bottom:0px;
margin-left:10px;
[/css]

กับ

[css]
margin:0 10px;
[/css]

ผลลัพธ์ที่ได้เหมือนกัน แต่จะเห็นว่าตัวอย่างด้านล่าง สั้นและดูง่ายกว่าตัวอย่างด้านบน ตัวอย่างด้านล่างนี่ละ คือการเขียน CSS แบบ Shorthand ที่เราจะทำความเข้าใจกันต่อนะครับ

CSS : มาดูว่าแต่ละตัวใน Code CSS เราเรียกอะไรกัน
- ตัวด้านหน้าปีกกา เราเรียกว่า selector ซึ่งเป็นตัวระบุว่า ค่าที่อยู่ในปีกกานั้นจะไปใช้กับใคร
- ตัวก่อนหน้า : นั้นเราเรียกว่า property เอาไว้บอกว่าจะกำหนดค่าของอะไร
- ตัวด้านหลัง : นั้นเราเรียกว่า value ก็เป็นค่าที่เรากำหนดให้ซึ่งจะสัมพันธ์กับ property
อย่างในตัวอย่าง
- selector : #header h2 คือ element h2 ที่ภายใน element ที่มี id=”header”
- property : color คือ กำหนดค่าของสีตัวอักษร (color)
- value : #FF0000 คือ ให้สีตัวอักษร (color) มีค่าเท่ากับ #FF0000 (สีแดง)
CSS : เราจะเขียนแบบ Shorthand ได้ยังไงบ้าง

ในการเขียนแบบ Shorthand นั้น เท่าที่ผมใช้งานและจำได้มีดังนี้ครับ

ลบ selector ที่ไม่จำเป็น

selector ที่ไม่จำเป็นก็ลบออกได้ อย่างเช่น

[css]
div#wrapper
[/css]

shorthand

[css]
#wrapper
[/css]

Background

สำหรับ background นั้น จะมี property แบบนี้

[css]
background-color : red;
background-image: url("logo.png");
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
[/css]

shorthand

[css]
background: red url(logo.png) no-repeat center top fixed;

background: color – image – repeat – position – attachment;
[/css]

font

สำหรับ font นั้น จะมี property ที่เกี่ยวข้องดังนี้

[css]
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 18px;
line-height: 1.5;
font-family: Roboto, Thonburi, Arial, Tahoma, sans-serif;
[/css]

shorthand

[css]
font: bold italic small-caps 18px/1.5 Helvetica, Thonburi, Arial, Tahoma, sans-serif;

font: font-weight – font-style – font-variant – font-size/line-height – font-family;
[/css]

Margin, Padding

คือสำหรับตัว margin และ padding นั้นการเขียนแบบ shorthand จะมีรูปแบบที่ทำให้เราเขียนได้แบบนี้
- ในกรณีที่ทุกตัวมีค่าไม่เท่ากันเลย หรือค่าด้านซ้ายกับด้านขวาไม่เท่ากัน ก็จะเป็น margin: top right bottom left;
- ในกรณีที่ด้านซ้ายกับด้านขวาเท่ากัน แต่ด้านบนกับด้านล่างไม่เท่ากัน ก็จะเป็น margin: top [right left] bottom;
- ในกรณีที่ด้านซ้ายกับด้านขวาเท่ากัน และด้านบนกับด้านล่างเท่ากัน ก็จะเป็น margin: [top bottom] [right left];
- ในกรณีที่ทุกตัวมีค่าเท่ากัน ก็จะเป็น margin: [top right bottom left];
ปล. ใน [ ] คือใช้ค่าตัวใดก็ได้ เพราะมีค่าเท่ากันอยู่แล้ว

[css]
margin-top:0px;
margin-right:10px;
margin-bottom:0px;
margin-left:10px;
[/css]

shorthand

[css]
margin:0 10px;
[/css]

Border

สำหรับ border นั่น จะมี property แบบนี้

[css]
border-width:1px;
border-style:solid;
border-color:#000;
[/css]

shorthand

[css]
border:1px solid #000;
[/css]

แต่ยังมีในกรณีที่เรามีความกว้างของกรอบในแต่ละด้านไม่เท่ากัน

[css]
border-top-width:1px;
border-right-width:2px;
border-bottom-width:3px;
border-left-width:4px;
[/css]

shorthand

[css]
border-width:1px 2px 3px 4px;

border-width:top – right – bottom – left;
[/css]

ซึ่งตัว border-width เราก็สามารถย่อได้เหมือนกับ margin และ padding

Value มีค่าเท่ากับ 0

ในกรณีที่มีค่า value เท่ากับ 0 เราไม่ต้องใส่หน่วยก็ได้ เช่น

[css]
padding:0px 10px 0px 20px;
[/css]

shorthand
[css]
padding:0 10px 0 20px;
[/css]

ย่อค่าสี

ค่าสีที่เราใช้เป็นรหัสกันอย่างเช่น #FFF000, #223344 หรือ #345677 เป็นต้น เราสามารถย่อค่าของสีได้โดยสังเกตว่า ถ้าค่าสีตัวที่ 1 กับตัวที่ 2 และตัวที่ 3 กับตัวที่ 4 และตัวที่ 5 กับตัวที่ 6 มีค่าเท่ากัน อย่างเช่น #223344 เราสามารถย่อได้เป็น #234 หรือ #FFAABB เราสามารถย่อได้เป็น #FAB เป็นต้น

ตัวอย่างที่เราไม่สามารถย่อได้อย่างเช่น #FFF000 เพราะตัวที่ 3 และตัวที่ 4 ไม่เท่ากัน หรือ #345566 เพราะตัวที่ 1 กับตัวที่ 2 ไม่เท่ากันเป็นต้น
October 23, 2011
CSS : ลำดับความสำคัญของ style ใน CSS
ในการเขียน CSS เราคงสงสัยว่าทำไมถึงมีการเขียนแยกเป็น ID เป็น class จะใช้ ID อย่างเดียวเลยได้มั้ย หรือจะใช้ class อย่างเดียวเลยได้มั้ย มาไขข้อข้องใจกันดีกว่า

HTML : ID กับ Class ต่างกันยังไง

ถ้าตามที่ผมจำมาตลอดนะครับ ID จะใช้ครั้งเดียวใน 1 หน้าเว็บ ส่วน class จะใช้กี่ครั้งก็ได้ การที่ ID ใช้ครั้งเดียวใน 1 หน้าเว็บนั้นจะมีผลตอนที่เราเขียน script ต่าง ๆ (นี่คือที่ผมเข้าใจมาตลอดนะครับ ถูกผิดยังไง comment ด้านล่างบอกผมด้วยนะครับ >_<) ดังนั้นเวลาผมเขียน Code จะวางแผนว่าอะไรที่จะตั้งอะไรเป็น ID และอะไรเป็น class อย่างเช่นตัวอย่างแบบนี้ [html] <div id="header"> <h2 class="title-text">Header</h2> <p>Hello World in Header</p> </div> <div id="main"> <h3 class="title-text">Main</h3> <p>Hello World in Main</p> </div> <div id="footer"> <h4 class="title-text">Footer</h4> <p>Hello World in Footer</p> </div> [/html] ผมเห็นว่าใน 1 หน้าเว็บของเรานั้น จะมี Header, Main และ Footer ที่เดียวแน่ ๆ เลยตั้งให้เป็น ID และข้อความที่เป็นหัวข้อมีหลายที่เลยตั้งให้เป็น class ชื่อ title-text
CSS : ID กับ Class ต่างกันยังไง

คราวนี้มาดูในกรณีที่เราจะเขียน CSS นะครับ สมมติผมจะเขียน CSS ให้กับ HTML ด้านบนนะครับ

[css]

#header {background:#60A2AA;color:#FFFFFF;padding:10px;}
#main {background:#CCE2B5;color:#7CAB6A;padding:20px;}
#footer {background:#FAF2E5;color:#EC9974;padding:10px;}

.title-text {font-size:18px;}

[/css]

จะเห็นข้อแตกต่างว่า ถ้าเป็น ID แล้วเวลาใช้งาน CSS เราจะเขียนนำด้วยเครื่องหมาย # และถ้าเป็น class เราจะเขียนนำด้วย . ในการใช้งาน ผลลัพธ์ที่ได้จะออกมาเป็นแบบนี้นะครับ

ผลลัพธ์จาก HTML CSS ที่เราเขียนขึ้นมา

CSS : บนล่างก็มีผลนะ

CSS นั้นจะมองความสำคัญของตัวที่เขียนด้านล่าง มากกว่าด้านบน อย่างเช่น

[css]
.title-text {font-size:18px;}

.title-text {font-size:24px;}
[/css]

แบบนี้ผลลัพธ์ที่เราได้คือ class=”title-text” จะมีขนาดตัวอักษร 24px ตามลำดับที่อยู่ด้านล่่าง

CSS : ID class ใช้คิดค่าความสำคัญ

ผมถือดีตั้งชื่อมันเองว่า ค่าความสำคัญ แต่จริง ๆ แล้วมันเรียกว่า Specificity Value โดยมันแบ่งคะแนนเป็นดังนี้
- inline-style มีค่าความสำคัญ 1,0,0,0 ซึ่งมีค่าความสำคัญสูงสุด โดย inline-style ก็คือการใส่ style เข้าไปใน HTML อย่างเช่น
  [html]
  <div id="header" style="background:#000000;">
  [/html]
- ID ค่าความสำคัญนั้นคือ 0,1,0,0
- class ค่าความสำคัญนั้นคือ 0,0,1,0
- element ต่าง ๆ อย่างเช่น h1,h2,div หรือ p ค่าความสำคัญนั้นคือ 0,0,0,1
การรวมค่านั้น ก็จะดูจากจำนวนแต่ละแบบมารวมกัน ซึ่ง 0,1,0,0 นั้นก็มีค่ามากกว่า 0,1,12,0 นะครับ เหมือนต่อให้มีกี่ class ก็แล้วแต่ แต่ถ้ากำหนด ID มาให้ตัวนึง ก็จะยึด style จาก ID ในทันที ลองมาดูการรวมค่านะครับ

[css]
ul#nav li.active a
[/css]

จะมีค่าเท่ากับ 0,1,1,3 โดย 0,1,0,0 มาจาก ID 0,0,1,0 มาจาก class และ 0,0,0,3 มาจาก ul,li และ a ดังนั้นจึงรวมกันมีค่าเท่ากับ 0,1,1,3

[css]
#header #nav .smalltext
[/css]

จะมีค่าเท่ากับ 0,2,1,0 โดย 0,2,0,0 มาจาก ID header และ nav ส่วน 0,0,1,0 นั้นมาจาก class

[html]
<li style="color:#B23D61">
[/html]

จะมีค่าเท่ากับ 1,0,0,0 โดยมาจาก inline-style

CSS : !important

แต่ก็เหมือนการ์ตูนบางเรื่องที่ตอนแรกก็มีบอส แต่ตอนหลังก็มีบอสที่ใหญ่กว่า เหมือนกันที่ inline-style อาจจะสำคัญที่สุด แต่ถ้าเราใส่ !important ลงไป ก็จะปรากฎว่า style ตัวนั้นจะมีความสำคัญที่สุดแทน โดยให้คิดว่ามันมีค่าเป็น 1,0,0,0,0 อย่างเช่น

[html]
<div id="header" style="background:#000;">
<h2 class="title-text">Header</h2>
<p>Hello World in Header</p>
</div>
<div id="main">
<h3 class="title-text">Main</h3>
<p>Hello World in Main</p>
</div>
<div id="footer">
<h4 class="title-text">Footer</h4>
<p>Hello World in Footer</p>
</div>
[/html]

[css]
#header {background:#60A2AA;color:#FFFFFF;padding:10px;}
#main {background:#CCE2B5;color:#7CAB6A;padding:20px;}
#footer {background:#FAF2E5;color:#EC9974;padding:10px;}

.title-text {font-size:18px;}
[/css]

จาก Code เราจะรู้ทันทีว่าพื้นหลังต้องเป็นสีดำแน่ ๆ เพราะมี inline-style อยู่ที่ ID header

เป็นพื้นหลังสีดำตามค่าความสำคัญ

แต่ถ้าเราใส่ !important ลงไป

[css]
#header {background:#60A2AA !important;color:#FFFFFF;padding:10px;}
#main {background:#CCE2B5;color:#7CAB6A;padding:20px;}
#footer {background:#FAF2E5;color:#EC9974;padding:10px;}

.title-text {font-size:18px;}
[/css]

!important ไม่สนใจใครสำคัญ ชั้นสำคัญสุด
October 22, 2011
CSS : ใช้งาน Position กันอย่างไร
ทำงานกับ CSS มาซักพัก น่าจะได้พบเจอกับ Position กันบ้าง แต่เข้าใจการใช้งานมันกันขนาดไหน เอาเป็นว่า เรามาทำความเข้าใจไปด้วยกันเลยนะครับ

CSS : Position นั้นมีอะไรบ้าง
- static
- relative
- absolute
- fixed
- inherit
คราวนี้ผมจะลองเขียน Code แบบนี้นะครับ
```
<div id="wrapper">
  <div id="div-1">div-1</div>
    <div id="div-2">
      <div id="div-a">div-a</div>
      <div id="div-b">div-b</div>
      <div id="div-c">div-c</div>
    </div>
  <div id="div-3">div-3</div>
</div>
```
```
div {
  padding: 20px;
  color: #FFF;
}

#wrapper {
  width: 400px;
}

#div-1 {
  background: #000;
}

#div-2 {
  background: #C0C;
}

#div-3 {
  background: #666;
}

#div-a {
  background: #339;
}

#div-b {
  background: #66C;
}

#div-c {
  background: #99F;
}
```
ซึ่งจะแสดงผลดังรูป

จาก Code ที่เขียน เราจะได้เว็บดังรูป

Position : static

position : static นั้นถือเป็นค่าเริ่มต้นสำหรับ position เลย ดังนั้นเราจะตั้งค่า position หรือไม่ ค่า position ก็จะเป็น static อยู่แล้ว แต่ผมจะลองใส่ค่าให้ดูเป็นตัวอย่างว่า เว็บจะแสดงผลออกมาเป็นแบบไหน
```
#div-a {
  background: #339;
  position: static;
}
```
ผลลัพธ์จากการตั้ง #div-a ด้วย position:static

จะเห็นว่าไม่มีความเปลี่ยนแปลงใด ๆ เนื่องจากอย่างที่ได้กล่าวไว้ เพราะค่า position นั้น มีค่าเริ่มต้นเป็น static อยู่แล้ว static

Position : relative

position : relative นั้นจะมีลักษณะคล้าย ๆ กับ static ต่างกันตรงที่ relative นั้น เราสามารถใช้ top left bottom right ในการกำหนดตำแหน่งได้
```
#div-a {
  background: #339;
  position: relative;
}
```
position : relative ที่ยังไม่ได้กำหนดตำแหน่ง แสดงผลออกมาเหมือนกับ position : static

คราวนี้เรามากำหนดตำแหน่งให้มันกัน โดยตำแหน่งที่ระบุไป จะเริ่มต้นนับจาก element ที่อยู่ก่อนหน้า เรามาลองกับ #div-2 นะครับ น่าจะเห็นผลชัดเจนกว่า
```
#div-2 {
  background: #C0C;
  position: relative;
  top: 30px;
  left: -20px
}

#div-a {
  background: #339;
}
```
#div-2 จะห่างจาก #div-1 ตามที่กำหนดไว้

จะเห็นว่าตอนนี้ การแสดงผลของ relative ไม่เหมือนกับ static แล้ว โดย #div-2 นั้นจะขยับตัวเองจากด้านบนลงมา 30 pixels และขยับตัวเองจากด้านซ้ายไปทางซ้าย 20 pixels
```
#div-2 {
  background: #C0C;
  position: relative;
  bottom: 10px;
  right: 20px;
}
```
ตำแหน่งเปลี่ยนไปจากครั้งที่แล้ว หลังเราเปลี่ยนค่า

คราวนี้เราจะเห็นว่า #div-2 นั้นจะขยับตัวเองจากด้านล่างขึ้นมา 10 pixels และขยับตัวเองจากด้านขวาไปทางซ้าย 20 pixels

Position : absolute

position : absolute นั้นจะไม่สนใจ element ก่อนหน้า และจะพาตัวเองไปยังจุดนั้นเลย
```
#div-2 {
  background: #C0C;
  position: absolute;
  top: 0px;
  right: 0px;
}
```
ตอนนี้ #div-2 ไปอยู่ที่ตำแหน่งด้านบนสุด ด้านขวาสุดแล้ว

ต่อมาเรามาลองใช้ position : absolute กับ #div-b บ้างนะ
```
#div-2 {
  background: #C0C;
}

#div-b {
  background: #66C;
  position: absolute;
  top: 0px;
  right: 0px;
}
```
จะเห็นว่า #div-b ไปอยู่ด้านบนขวา

ใช้ Position : relative คู่กับ Position : absolute

แล้วถ้าเราอยากให้ #div-b มาอยู่ในกรอบ #div-2 ก็ทำได้โดยการใส่ position : relative ให้ #div-2 เหมือนเป็นการกำหนดกรอบให้มัน
```
#div-2 {
  background: #C0C;
  position: relative;
}

#div-b {
  background: #66C;
  position: absolute;
  top: 0px;
  right: 0px;
}
```
#div-b จะอยู่ด้านบนขวาสุดของ #div-2

Position : fixed

position : fixed นั้นทำหน้าที่คล้าย absolute เลย แต่มีแตกต่างกันที่ fixed นั้นจะใช้กับ relative เพื่อกำหนดกรอบของมันไม่ได้ และจะตรึงตัวเองอยู่ตรงนั้นเสมอ ดูตัวอย่างน่าจะเข้าใจง่ายกว่าครับ อย่างเช่น

Absolute
```
div {
  padding: 20px;
  color: #FFF;
}

#wrapper {
  width: 400px;
  height: 2000px;
}

#div-1 {
  background: #000;
}

#div-2 {
  background: #C0C;
}

#div-3 {
  background: #666;
}

#div-a {
  background: #339;
}

#div-b {
  background: #66C;
  position: absolute;
  top: 0px;
  right: 0px;
}

#div-c {
  background: #99F;
}
```
Position : absolute

เมื่อทำการ scroll ลงมา #div-b จะไม่ได้ขยับตามลงมา และหายไป

#div-b หายไปจากการ scroll ลงมา

Fixed

แต่ถ้าเป็น position : fixed แล้ว มันจะตรึงตัวเองอยู่กับที่ ไม่ว่าจะ scroll ลงมายังไง มันก็จะอยู่ที่ตำแหน่งนั้น

#div-b ไม่ขยับไปไหน

รูปแบบการใช้ Position ก็มีคร่าว ๆ ประมาณนี้ ลองนำไปประยุกต์ใช้กับงานที่ทำอยู่นะครับ
October 15, 2011
CSS : อะไรคือ CSS Reset
หลายคนอาจจะสงสัยว่า CSS Reset มันมีไว้ทำอะไร มีไว้เพื่ออะไร งั้นเรามาทำความรู้จักกับมันกัน CSS Reset นั้นก็มีไว้สำหรับล้างค่า style ต่าง ๆ ของแต่ละ element ซึ่งก็จะมีคำถามตามมาว่า แล้วเราจะล้างค่ามันทำไม สาเหตุมันก็มาจากว่า แต่ละ Browser ที่เราใช้ ๆ กันอยู่นั้น จะมีค่าเริ่มต้นของแต่ละ element ไม่เหมือนกันครับ ถ้ายังงง ๆ อยู่ มาดูตัวอย่างกันนะครับ

CSS Reset : ความแตกต่างของแต่ละ Browser

ผมเขียนหน้าเพจมาหน้านึงให้มี Code แบบนี้นะครับ

[html]
<div style="background:#FF0;border:2px solid #000;width:500px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vestibulum rutrum metus, sed consequat lectus pharetra at. Morbi pulvinar egestas elementum. In viverra tristique vulputate. Pellentesque quis sapien tortor, ut consequat leo. Donec ac felis leo, quis vestibulum arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Morbi mattis ultricies nibh eu semper. Suspendisse malesuada hendrerit sapien eget pharetra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas commodo eleifend metus, eu sollicitudin mi gravida vel. Maecenas sodales vestibulum felis vel sodales. Praesent sed felis sem. Fusce tincidunt, odio vulputate commodo dapibus, justo tortor scelerisque eros, in aliquet mi erat at nibh. Pellentesque sed eros ligula, vel egestas lorem.</p>
</div>
[/html]

แปลออกมาเป็นภาษาคนหน่อย ก็เราจะได้กล่องที่มีขนาดกว้าง 500 pixels พื้นหลังสีเหลือง และมีกรอบขนาด 2 pixels ในแต่ละด้านเป็นสีดำ ผลลัพธ์ที่ออกมาก็เป็นแบบนี้ครับ

Firefox

Google Chrome

IE 7

IE 8

IE 9

CSS Reset : มาเริ่มต้นการล้างค่า style ของ element

ส่วนใหญ่ 1 ในสิ่งที่แต่ละ Browser มักจะมีค่าไม่เท่ากัน ก็คือ margin กับ padding ดังนั้นเรามาลองมาล้างค่า margin และ padding ของทุกตัวกันครับ

[css]
* {
margin: 0;
padding: 0;
}
[/css]

เราจะได้ผลลัพธ์ของแต่ละ Browser ออกมาเป็นแบบนี้ครับ

การแสดงผลของแต่ละ Browser ที่ออกมาเหมือนกัน หลังจากเราทำการล้างค่าแล้ว (คลิ๊กที่รูปเพื่อขยาย)

แต่ก็ไม่ใช่ว่าการใช้ * จะควบคุมทั้งหมด ดังนั้นเราจึงต้องมีการล้างค่า กำหนดค่าใหม่ให้แต่ละ element ซึ่งถ้าเรามาทำใหม่เองหมด ก็คงจะเสียเวลา และอาจไม่ครอบคลุมในทุก element ดังนั้นมีวิธีที่ง่ายกว่า คือการไปนำของที่มีคนอื่นทำไว้แล้วมาประยุกต์ใช้งานครับ

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

CSS Reset : แนะนำเกี่ยวกับ CSS Reset

แยก CSS Reset ไว้ ไม่นำไปรวมกับ CSS อื่น ๆ

อย่างเช่น เรามี style.css ก็ไม่ควรนำการ reset ค่าต่าง ๆ ไปใส่ style.css ส่วนใหญ่จะตั้งชื่อเป็น reset.css ต่างหากเลย และเรายังสามารถนำ reset.css อันนี้ไปใช้งานกับเว็บอื่น ๆ ของเราได้ด้วย

ควรเรียก CSS Reset ก่อน CSS อื่น ๆ

ยกตัวอย่างเช่น

[html]
<link rel="stylesheet" href="reset.css" />
<link rel="stylesheet" href="style.css" />
[/html]

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

อย่านำค่าเฉพาะเว็บมาใส่ใน CSS Reset

ยกตัวอย่างเช่น

[css]
body {
background: #FF00FF;
color: #FFFFFF;
}
[/css]

การกำหนดค่าแบบนี้ น่าจะไปอยู่ใน style.css ของเรามากกว่า เพราะว่าทุกเว็บของเราคงไม่ได้มีพื้นหลังเป็นสีชมพู ตัวอักษรสีขาวกันทุกเว็บใช่มั้ยครับ
October 14, 2011