Category: CSS HTML

เนื้อหาเกี่ยวกับ CSS และ HTML

CSS : เมื่อต้องเจอปัญหากับ IE

เชื่อว่าหลาย ๆ คนที่เขียน CSS กันมา ต้องเจอปัญหาว่า ทำไมเขียน CSS มาแล้ว แต่ละ Browser ถึงแสดงผลมาไม่เหมือนกัน และในบรรดา Browser ทั้งหลาย Browser ที่มีปัญหามากที่สุด ก็คงไม่พ้น Internet Explorer หรือที่เราเรียกกันว่า IE

ผมเองก็ไม่ทราบว่าด้วยเหตุผลอะไร IE ต่าง ๆ ถึงมีปัญหาในการแสดงผลที่แตกต่างกับชาวบ้านเค้า แถมตัว IE เองแต่ละเวอร์ชั่นก็มีการแสดงผลที่แตกต่างกันเองอยู่ด้วย แล้วเราจะมีวิธีแก้ปัญหาอย่างไรกันบ้าง มาลองดูกันครับ

CSS : สร้างเงื่อนไขให้ Tag html

[html]
<!–[if lt IE 7]> <html class="ie6"> <![endif]–>
<!–[if IE 7]> <html class="ie7"> <![endif]–>
<!–[if IE 8]> <html class="ie8"> <![endif]–>
<!–[if !IE]><!–> <html> <!–<![endif]–>
[/html]

กำหนดเงื่อนไขเลยครับ ว่าถ้าเป็น IE ที่เวอร์ชั้นตำกว่า 7 ให้ tag html นั้นมี class เป็น ie6 แล้วก็เขียนไล่ลำดับมาจนถึงว่า ถ้าไม่ใช่ IE ถึงจะแสดงผลมาเป็น tag html ที่ไม่มี class อะไร แล้วหลังจากนั้นเราจึงไปเขียน CSS ให้กับ element ที่มีการแสดงผลที่ไม่เหมือนชาวบ้าน อย่างเช่น

[css]
.box {margin-bottom:20px;}
.ie6 .box {margin-bottom:5px;}
.ie7 .box {margin-bottom:10px;}
.ie8 .box {margin-bottom:15px;}
[/css]

คือ .box ทั่วไปให้มี margin-bottom เท่ากับ 20px แต่ถ้าเป็นใน IE6 ให้มี margin-bottom แค่ 5px ใน IE7 ให้มี margin-bottom แค่ 10px และใน IE8 มี margin-bottom แค่ 15px

CSS : กำหนดเงื่อนไขในการเรียกใช้ CSS

[html]
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
<!–[if lt IE 7]><link rel="stylesheet" type="text/css" media="screen" href="css/ie6.css" /><![endif]–>
<!–[if IE 7]><link rel="stylesheet" type="text/css" media="screen" href="css/ie7.css" /><![endif]–>
<!–[if IE 8]><link rel="stylesheet" type="text/css" media="screen" href="css/ie8.css" /><![endif]–>
[/html]

วิธีนี้จะคล้าย ๆ กับวิธีแรกแต่ต่างกันที่วิธีแรกจะกำหนด class ให้กับ Tag html แต่วิธีนี้เราจะกำหนดให้แต่ละ Browser เรียกใช้ CSS ที่แตกต่างกันครับ ข้อสำคัญคือ เราจะต้องเรียกใช้งาน CSS หลักของเราก่อนบรรดา CSS ที่เป็นเงื่อนไขนะครับ

CSS : Hack CSS สำหรับ IE

สำหรับกรณีที่เราไปเปลี่ยนแปลง Code HTML ไม่ได้ งั้นมาแก้ไขที่ตัว CSS แล้วกัน ด้วยการ Hack CSS สำหรับ IE โดยเขียนแบบนี้

[css]
.box {margin-bottom:20px;} /* ทุก browsers */
* html .box {margin-bottom:5px;} /* สำหรับ IE6 */
*+html .box {margin-bottom:10px;} /*สำหรับ IE7 */
.box {margin-bottom:20px\0/;} /* สำหรับ IE8 */
[/css]

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

November 6, 2011
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