Category: CSS HTML

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

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
CSS : พัฒนาการเขียน HTML และ CSS กัน [Slide]

เมื่อวันที่ 3 – 5 ตุลาคมที่ผ่านมา ที่ลอนดอนประเทศอังกฤษมีงานประชุม Future of Web Apps ซึ่งคุณ Chris Coyier นั้นพูดในหัวข้อ Writing Better HTML & CSS เราจึงนำ Slide ที่เค้าใช้ในงานมาแบ่งปันกันครับ

ที่มา : Writing Better HTML & CSS (Slides from FOWA London)

October 11, 2011
CSS : z-index ใช้งานอย่างไร

คนที่ศึกษา CSS มาซักพัก น่าจะเจอกับคำว่า z-index ครั้งนี้ผมจะมาแนะนำว่า z-index นั้นใช้ทำอะไรกันแน่ แล้วมันใช้งานอย่างไร

z-index

เริ่มต้นผมมี Code HTML กับ CSS แบบนี้นะครับ

[html]
<div id="wrapper">
<h1>Example : z-index</h1>
<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]

[css]
* {margin:0;padding:0;}
#wrapper {width:860px;margin:20px auto;padding:50px;border:3px solid #F66;}
[/css]

ซึ่งผลลัพธ์ที่ออกมาก็จะเป็นดังรูปนะครับ

ผลลัพธ์ที่แสดงใน Browser

คราวนี้ผมมีรูปริบบิ้นที่อยากจะให้มันอยู่ตรงมุมขวา

รูปริบบิ้นที่เราจะใช้

ผมก็เลยเพิ่ม Code เข้าไปแบบนี้

[html]
<div id="wrapper">
<h1>Example : z-index</h1>
<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 id="ribbon"></div> <!– เพิ่ม –>
</div>
[/html]

[css]
* {margin:0;padding:0;}
#wrapper {width:860px;margin:20px auto;padding:50px;border:3px solid #F66;}
#ribbon {width:155px;height:142px;background:url(ribbon.png);position:absolute;top:0px;right:0px;} /** เพิ่ม **/
[/css]

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

ผลลัพธ์ที่ได้ แต่เอ๊ะ ทำไมมันอยู่นอกกรอบ

แต่เอ๊ะ ทำไมริบบิ้นเราถึงอยู่นอกกรอบ เพราะว่า position:absolute ตอนนี้ยึดหน้าต่าง Browser ในการนับตำแหน่ง ซึ่งริบบิ้นจึงอยู่บนสุด ขวาสุดของหน้าต่าง ถ้าเราอยากให้อยู่ในกรอบ ลองใส่ position:relative ให้กับกรอบเราดิ

[css]
* {margin:0;padding:0;}
#wrapper {width:860px;margin:20px auto;padding:50px;border:3px solid #F66;/** เพิ่ม **/ position:relative;}
#ribbon {width:155px;height:142px;background:url(ribbon.png);position:absolute;top:0px;right:0px;}
[/css]

ผลลัพธ์ที่ได้ริบบิ้นอยู่ในกรอบแล้ว

แล้วถ้าเกิดเราเจอปัญหาแบบนี้ละ สมมติผมลดขนาดกรอบลงนะครับ

[css]
* {margin:0;padding:0;}
#wrapper {width:500px;margin:20px auto;padding:30px;border:3px solid #F66;position:relative;}
#ribbon {width:155px;height:142px;background:url(ribbon.png);position:absolute;top:0px;right:0px;}
[/css]

ทำไงดี ริบบิ้นทับตัวอักษร

อ้าว ริบบิ้นทับตัวอักษรตรงมุมด้านขวาบน

รู้จักกับ z-index

ก่อนจะใช้งาน z-index ให้นึกถึงคณิตศาสตร์สมัยมัธยม ที่มีกราฟ มีแกน x แกน y หน้าต่าง Browser ก็เหมือนกัน ที่มองเป็นแกน x แกน y

รู้จัก X กับ Y ก่อนมารู้จัก Z

แล้วแกน z อยู่ไหนละ ให้จิตนาการว่า แกน z ก็จะเป็นลูกศรพุ่งเข้ามาที่หน้าเรา ดังนั้นในกรณีที่ตัวอักษรโดนริบบิ้นทับอยู่นั้น ก็เพราะว่ามันถูกจัดใน z-index ที่ต่ำกว่า ถ้าแบบนี้เรามากำหนด z-index ให้มันดีกว่า

เริ่มต้นใช้งาน z-index

ถ้าแบบนี้ เรากำหนดให้ tag <p> มี z-index มากกว่าริบบิ้นแล้วกัน

[css]
* {margin:0;padding:0;}
#wrapper {width:500px;margin:20px auto;padding:30px;border:3px solid #F66;position:relative;}
#ribbon {width:155px;height:142px;background:url(ribbon.png);position:absolute;top:0px;right:0px;z-index:2;}
p {z-index:5;}
[/css]

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

อ้าว เวรกรรม ทำไมมันเหมือนเดิมละ

อ้าว เวรกรรมแล้ว ทำไมมันไม่เห็นมีอะไรเปลี่ยนแปลงเลยละ ที่มันไม่เปลี่ยนแปลงก็เพราะว่า ตัว z-index นั้นจะทำงานกับ position:relative หรือ position:absolute พอเรารู้แบบนี้ เราลองใส่ position:relative ให้ tag <p> นะครับ

[css]
* {margin:0;padding:0;}
#wrapper {width:500px;margin:20px auto;padding:30px;border:3px solid #F66;position:relative;}
#ribbon {width:155px;height:142px;background:url(ribbon.png);position:absolute;top:0px;right:0px;z-index:2;}
p {z-index:5;position:relative;}
[/css]

ผลลัพธ์ก็ออกมาเป็นแบบนี้

เย้ z-index ใช้งานได้แล้ว

คราวนี้ผมมี badge facebook จะเอามาใช้ประกอบบ้าง

Badge Facebook

เอามาใส่ใน Code เลย

[html]
<div id="wrapper">
<h1>Example : z-index</h1>
<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 id="ribbon"></div>
<img src="facebook.png" />
<img src="facebook.png" />
</div>
[/html]

ก็จะได้ผลลัพธ์ออกมาเป็นดังนี้

เพิ่มรูป badge facebook เข้าไปสองอัน

ต่อมา ถ้าเราอยากให้ badge มันซ้อนกันละ ก็ทำแบบนี้ครับ

[html]
<div id="wrapper">
<h1>Example : z-index</h1>
<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 id="ribbon"></div>
<img src="facebook.png" />
<img src="facebook.png" style="position:relative;left:-50px;" />
</div>
[/html]

ซึ่งจากที่สังเกตมา ถ้าใส่ position เข้าแล้ว z-index ของตัวนั้น จะมีมากกว่าตัวที่ไม่ได้ใส่ position ดังนั้นผลลัพธ์จึงออกมาเป็น badge facebook ตัวหลังทับตัวหน้า

badge facebook ตัวหลังทับตัวหน้า

แต่ถ้าอยากให้ตัวหน้าทับตัวหลัง ก็ง่าย ๆ แบบตัวอย่างที่แล้ว ใส่ position:relative กับ z-index

[html]
<div id="wrapper">
<h1>Example : z-index</h1>
<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 id="ribbon"></div>
<img src="facebook.png" style="position:relative;z-index:10;" />
<img src="facebook.png" style="position:relative;left:-50px;" />
</div>
[/html]

เราก็จะได้ผลลัพธ์ออกมาตามที่เราต้องการ

ตัวหน้าทับตัวหลังแล้ว

z-index ใช้ได้ผลกับ element ที่อยู่ระดับเดียวกัน

ถ้าอยู่ดี ๆ เราอยากจะบังริบบิ้นขึ้นมาละ งั้นลองสั่งให้ wrapper มันมี z-index มากกว่า ribbon แล้วกัน

[html]
<div id="wrapper">
<h1>Example : z-index</h1>
<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 id="ribbon"></div>
</div>
[/html]

[css]
* {margin:0;padding:0;}
#wrapper {width:500px;margin:20px auto;padding:30px;border:3px solid #F66;position:relative;background:#DDD;
z-index:10;}
#ribbon {width:155px;height:142px;background:url(ribbon.png);position:absolute;top:0px;right:0px;z-index:2;}
[/css]

แต่ทำไมสีเทามันไม่บังริบบิ้นละ ก็เพราะว่า wrapper มันคลุม ribbon อยู่

สีเทาไม่ได้ทับริบบิ้นแบบที่เราต้องการ

ดังนั้นเราลองสร้างอะไรมาให้มันอยู่ระดับเดียวกับ ribbon แล้วกัน

[html]
<div id="wrapper">
<div id="box">
<h1>Example : z-index</h1>
<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>
<div id="ribbon"></div>
</div>
[/html]

[css]
* {margin:0;padding:0;}
#wrapper {width:500px;margin:20px auto;padding:30px;border:3px solid #F66;position:relative;}
#box {position:relative;background:#DDD;z-index:10;}
#ribbon {width:155px;height:142px;background:url(ribbon.png);position:absolute;top:0px;right:0px;z-index:2;}
[/css]

ผลลัพธ์ที่ได้ จะได้กล่องสีเทาบังริบบิ้นแบบที่เราต้องการ

กล่องสีเทาบังริบบิ้นแล้ว

จากทั้งหมดที่ยกตัวอย่าง เราน่าจะสามารถนำไปประยุกต์ใช้งานต่าง ๆ ได้

October 8, 2011
อยากรู้จริงว่า CSS เราถึงขั้นไหนแล้ว

ปรกติทุกวันก็นั่งดูเว็บนั่นเว็บนี่ หาความรู้ใส่ตัว แล้ววันนึงก็ไปสะดุดกับ Banner ตัวนี้

แน่นอนว่าไม่รีรอที่จะคลิ๊กเข้าไปดู แล้วก็พบว่ามันเป็นการแข่งกันทำ CSS >_<

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

ส่วนกรรมการนั้น ยอมรับว่ารู้จักอยู่แค่ 2 ท่าน คือ Chris Coyier แห่ง CSS Tricks กับ Christopher Schmitt ซึ่งเป็นจัดงาน CSSSummit ที่ผ่านมา โดยผลงานนึง ๆ จะมีกรรมการ 3 ท่านจากการสุ่มจากกรรมการทั้งหมด 13 ท่าน

และตัว PSD ที่จะให้เราใช้งานนั้นก็ Design โดย Paravel

เมื่อเป็นการแข่งขันก็ต้องมีรางวัล โดยที่ 1 ก็จะได้รางวัลดังนี้

แต่เป้าหมายที่ตั้งไว้ ตอนนี้ต้องการแค่ติด Top 25 ก็พอใจแล้ว เพราะว่าถ้าคะแนนติด Top 25 เค้าจะนำผลงานเราไปแปะไว้ที่หน้าเว็บเค้าด้วย

อ่านมาถึงตรงนี้แล้ว ถ้าอยากสมัครแข่งเหมือนกัน ก็เข้าไปที่เว็บ CSS Off เลย โดยเมื่อสมัครแล้วก็รอ PSD ในวันพุธที่ 20 ตุลาคม และส่งผลงานได้วันสุดท้าย วันพุธที่ 3 พฤศจิกายน [หรือเข้าไปอ่านกฎนะครับ]

September 23, 2011
inherit คืออะไร
หลาย ๆ คนใช้งาน CSS มาอาจจะเคยใช้ inherit บางคนอาจจะเคยเห็นแต่ไม่เคยใช้ บางคนอาจจะไม่เคยเห็นเลยด้วยซ้ำ

มาทำความรู้จักกับ inherit ดีกว่าว่ามันคืออะไรนะ แต่ก่อนจะรู้จัก inherit เรามาดูก่อนว่าเวลาเราเขียน CSS เนี่ยแต่ละส่วนมันเรียกว่าอะไรกันบ้าง

CSS ประกอบด้วยอะไรบ้าง

[css]
#my-div {
font-size : 16px;
color : #F00;
}
[/css]

สำหรับ #my-div เราเรียกมันว่า Selectors ก็คือเหมือนชี้เป้าหมายว่า ตัวนี้นะจะต้องมีคุณสมบัติตามใน { } ของชั้นนะ

ต่อมาคือ font-size, color เราเรียกมันว่า Properties ซึ่งจริง ๆ แล้ว CSS มี Properties อีกมากมาย แต่นี่เป็นการยกตัวอย่างมาเท่านั้น โดย Properties ก็ทำหน้าที่บอกหัวข้อคุณสมบัติ อย่างเช่น font-size ก็คือบอกหัวข้อคุณสมบัติว่า Selector ตัวนี้ต้องมีขนาดของตัวอักษร … เป็นต้น

สุดท้ายก็คือ 16px, #F00 เราเรียกมันว่า Value ซึ่งทำหน้าที่บอกว่าค่าให้คุณสมบัตินั้น ๆ อย่างเช่น font-size:16px; ก็แสดงว่าต้องการให้มีขนาดตัวอักษรที่ 16px เป็นต้น

แล้ว inherit คืออะไร

inherit นั้นเป็น Value ซึ่งถ้าตามหลัง Properties ตัวไหน มันก็จะสืบทอดค่ามาจาก parent โดย Properties ที่มีค่า Default ของตัวเองเป็น inherit นั้นได้แก่
- border-collapse
- border-spacing
- caption-side
- color
- cursor
- direction
- empty-cells
- font-family
- font-size
- font-weight
- font-style
- font-variant
- font
- letter-spacing
- list-style-type
- list-style-position
- list-style-image
- list-style
- line-height
- orphans
- page-break-inside
- quotes
- text-align
- text-indent
- text-transform
- visibility
- white-space
- widows
- word-spacing
ถ้าเริ่มงง ๆ แล้วไม่เป็นไรครับ เดี๋ยวทำตัวอย่างให้ดู

[css]
#my-div {font-size:16px;}
#my-div p {color:#F00;}
[/css]

[html]
<div id="my-div">
<p>Aenean, vel mus ac, vel est, duis tincidunt risus ultrices in, natoque, natoque porttitor ut turpis turpis eros, etiam quis velit magna, egestas integer. Vel! Risus rhoncus augue tristique ac vel tristique? <a href="#">Test Link ?</a></p>
</div><!– my-div –>
[/html]

เราจะได้ผลลัพธ์ออกมาเป็น

จะเห็นว่าตัวอักษรใน p มีขนาด 16px เพราะว่าตัว font-size นั้นมันมีค่า default value เป็น inherit ดังนั้นจึงดึงค่า font-size มาจาก parent ของมัน ซึ่งก็คือ #my-div

[css]
#my-div {font-size:16px;border:2px solid #000;}
#my-div p {color:#F00;}
[/css]

[html]
<div id="my-div">
<p>Aenean, vel mus ac, vel est, duis tincidunt risus ultrices in, natoque, natoque porttitor ut turpis turpis eros, etiam quis velit magna, egestas integer. Vel! Risus rhoncus augue tristique ac vel tristique? <a href="#">Test Link ?</a></p>
</div><!– my-div –>
[/html]

คราวนี้เรามีเพิ่มกรอบให้ #my-div จะได้ผลลัพธ์ออกมาเป็นแบบนี้นะครับ

ถ้าเกิดเราใส่ค่าให้ #my-div p มี border:inherit; ละผลจะเป็นยังไง

[css]
#my-div {font-size:16px;border:2px solid #000;}
#my-div p {color:#F00;border:inherit;}
[/css]

จะเห็นได้ว่า p ก็ไปดึงค่า border มาจาก parent ซึ่งก็คือ #my-div มาใช้งานด้วย

สิ่งที่ควรรู้เพิ่มเติมสำหรับ inherit
- Browser ที่ไม่ Support ค่า inherit นั้นก็มี IE6 กับ IE7
- ใช้ inherit กับ shorthand properties ไม่ได้
แถม : shorthand properties คืออะไร

มันก็คือการเขียนให้สั้นลงของ CSS อย่างเช่น

[css]
#my-border {
border-width : 2px;
border-style : solid;
border-color : #F00;
}
[/css]

เราสามารถเขียนให้สั้นลงได้ให้กลายเป็น

[css]
#my-border {
border : 2px solid #F00;
}
[/css]

ซึ่งค่า inherit ไม่สามารถใส่ค่าลงไปแบบนี้ได้

[css]
#my-border {
border : 2px inherit #F00;
}
[/css]
September 17, 2011
CSS : มารู้จัก Float กัน
float จะมี property 4 ตัว คือ

float
- left ก็คือ สั่งให้ลอยชิดซ้าย
- right คือ สั่งให้ลอยชิดขวา
- inherit คือ ค่าที่สืบทอดมา
- none คือ ไม่ต้องลอย [ซึ่งปรกติ element ทั่วไปจะเป็น none]
ลองมาดูตัวอย่างของคำสั่ง float แล้วกัน ว่ามันใช้งานแล้วได้ผลลัพธ์เป็นแบบไหน
```
img { float:right; margin:15px; }
```
ตัวอย่าง

จะเห็นว่า รูปของยูริ จะลอยอยู่ทางด้านขวาของหน้าเว็บตามที่เราสั่งไว้

ลองมาดูตัวอย่างต่อไปนะครับ ถ้าเรามี div สามตัว เหมือนใน ตัวอย่าง

ถ้าเราต้องการให้มันมาลอยชิดกัน เราก็ไปสั่งมันแบบนี้ [div ทั้งสามตัวมี class ชื่อ block นะครับ]
```
.block { float:left; width:300px; height:200px; }
```
ซึ่งผลลัพธ์ที่ได้จะเป็นแบบนี้ ตัวอย่าง

div ทั้งสามตัวก็มาลอยเรียงติดกันอย่างสวยงาม

แล้วถ้า float มันใช้งานง่ายแบบนี้ มันจะมีปัญหาอะไรละ เราลองไปดูบ้าง ว่าปัญหาที่เจอมันจะเป็นแบบไหน
```
<div class="block item-1 float"></div>

<div class="block item-2 float"></div>

<div class="block item-3"></div>

<div class="block item-4"></div>
```
```
.block {width:150px;height:150px;}
.float {float:left;}
.item-1 {background:#F00;}
.item-2 {background:#0F0;}
.item-3 {background:#00F;}
.item-4 {background:#FF0;}
```
จาก code แล้ว เราจะต้องมีสี่เหลี่ยมให้เห็นทั้งหมดสี่อัน แต่ถ้าดูจาก ตัวอย่าง แล้ว

เราจะพบว่า มีสี่เหลี่ยมให้เราเห็นเพียงสามอันเท่านั้น เนื่องจาก item-1 และ item-2 ลอยชิดซ้ายกันอยู่ ส่วน item-3 นั้นอยู่ใต้ item-1 ที่ลอยอยู่ ทำให้เราไม่เห็น item-3

ดังนั้นจึงมีอีกคำสั่ง clear มาเพื่อแก้ปัญหานี้ โดย clear นั้นจะมี property 5 ตัว คือ

clear
- left คือ ไม่ให้มีอะไรลอยอยู่ด้านซ้าย
- right คือ ไม่ให้มีอะไรลอยอยู่ด้านขวา
- both คือ ไม่ให้มีอะไรลอยอยู่ทั้งสองด้าน
- none คือ อยากจะลอยก็ลอย ตูไม่ยุ่ง
- inherit คือ ค่าที่สืบทอดมา
ดังนั้นเราลองมาเพิ่มคำสั่ง clear ไปให้ item-3 กันดีกว่า โดยเราจะใส่ดังนี้
```
<div class="block item-1 float"></div>

<div class="block item-2 float"></div>

<div class="block item-3 clear"></div>

<div class="block item-4"></div>
```
```
.block {width:150px;height:150px;}
.float {float:left;}
.clear {clear:left;}
.item-1 {background:#F00;}
.item-2 {background:#0F0;}
.item-3 {background:#00F;}
.item-4 {background:#FF0;}
```
เราจะได้ผลลัพธ์ดังนี้ ตัวอย่าง

ที่เราสั่ง clear:left; เพราะว่า เรามองว่ามี item-1 และ item-2 ลอยอยู่ด้านซ้ายของ item-3 เราจึงสั่งไม่ให้มีอะไรมาลอยอยู่ด้านซ้ายของ item-3

คราวนี้เรามาลองประยุกต์ใช้งานจริง โดยเราแบ่งเว็บออกเป็น 4 ส่วนดังนี้
- header อยู่ด้านบน
- content อยู่ตรงกลางด้านซ้าย
- sidebar อยู่ตรงกลางด้านขวา
- footer อยู่ด้านล่าง
```
<div id="wrapper">

<div id="header">
<h3>Header</h3>
</div>

<div id="content">

<h3>Content</h3>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer risus odio, feugiat quis eleifend vel, malesuada sit amet ante. Etiam ac ullamcorper sapien. In id felis libero, in imperdiet libero. Nullam varius magna eget tortor placerat consequat. Vivamus convallis auctor turpis, et lobortis enim pulvinar ac. Pellentesque nunc ante, facilisis non gravida sit amet, fermentum sit amet nunc. Vestibulum eleifend velit et ipsum sollicitudin non placerat lorem congue. In hac habitasse platea dictumst. Phasellus eu varius nibh. Maecenas et dolor sapien. Vestibulum ac diam lectus. Nulla magna purus, tincidunt sed elementum nec, blandit vitae risus. In at eros et urna lobortis laoreet. Vestibulum blandit nisi eu lectus pellentesque laoreet sollicitudin odio facilisis. Nam adipiscing pretium odio, eget laoreet libero volutpat eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod tortor vel tellus fringilla in tempus est rutrum. Quisque vitae nulla at erat luctus dapibus.

</div>

<div id="sidebar">
<h3>Sidebar</h3>
</div>

<div id="footer">
<h3>Footer</h3>
</div>

</div>
```
```
#wrapper {width:960px;margin:0 auto;}
h3 {font-size:30px;color:#FFF;}
#header {background:#F00;padding:20px;}
#content {background:#0F0;padding:20px;width:720px;float:left;}
#sidebar {background:#00F;padding:20px;width:160px;float:right;}
#footer {background:#FF0;padding:20px;clear:both;}
```
เราก็จะได้เว็บตามที่เราวางโครงไว้ ตัวอย่าง

แต่ถ้าเกิดเราลืมใส่ clear:both; ให้ footer ละ จะเกิดอะไรขึ้น ตามไปดู ตัวอย่าง กันเลยครับ

จะเห็นว่าตัว footer จะไปอยู่ทางด้านขวาแทนที่จะอยู่ด้านล่างอย่างที่เราต้องการ โดยตัว content และ sidebar จะลอยบังส่วนของ footer ไว้ และเหลือให้เราเห็นในส่วนที่ content และ sidebar ไม่ได้บัง

เรามาลองดูอีกปัญหานึงที่น่าจะได้เคยพบเจอกัน ลองดูจาก ตัวอย่าง นะครับ
```
<div id="wrapper">
<img src="images/float-1.jpg" alt="SNSD Yuri" />
<img src="images/float-1.jpg" alt="SNSD Yuri" />
<img src="images/float-1.jpg" alt="SNSD Yuri" />
</div>
```
```
#wrapper {background:#000;width:960px;margin:0 auto;}
img {float:left;margin:10px;}
```
ถ้าเราดูจาก code แล้ว ต้องจะมีพื้นหลังสีดำให้เราเห็น แต่จากที่เราดูในตัวอย่าง จะไม่เห็นพื้นหลังสีดำเลย วิธีแก้ไขก็มีอยู่หลายวิธี แต่จะขอนำเสนออยู่สองแบบ คือ
- ใช้ overflow:hidden
- ใช้ clearfix
overflow:hidden

ให้เราใส่ overflow:hidden ใน #wrapper ตัวอย่าง
```
#wrapper {background:#000;width:960px;margin:0 auto;overflow:hidden;}
img {float:left;margin:10px;}
```
clearfix

ให้เราใส่ class=”clearfix” ใน div id=”wrapper” และเพิ่ม CSS ของ class=”clearfix” เข้าไป ตัวอย่าง
```
<div id="wrapper" class="clearfix">
<img src="images/float-1.jpg" alt="SNSD Yuri" />
<img src="images/float-1.jpg" alt="SNSD Yuri" />
<img src="images/float-1.jpg" alt="SNSD Yuri" />
</div>
```
```
#wrapper {background:#000;width:960px;margin:0 auto;}
img {float:left;margin:10px;}
* html .clearfix { height: 1%; }
* + html .clearfix { display: inline-block; }
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
```
June 16, 2011