วันนี้ 11 มิ.ย.59 ว่าจะจัดการเรื่อง float:left ใน web2 ให้เรียบร้อย แต่มาใช้เวลากับการนั่งทดสอบ Developer tools ของ chrome นานไปหน่อย ติดใจเลย
ทำให้ได้เรียนรู้ว่า chrome ช่วยให้การปรับแต่งเว็บไซต์ง่ายกว่าใช้ editor ธรรมดาอย่าง editplus มาก
http://www.thaiall.com/web2
—
เรื่อง CSS : Cascading Style Sheets กลายเป็นข้อควรรู้ที่จำเป็นสำหรับนักพัฒนาเว็บไซต์อย่างหลีกเลี่ยงไม่ได้ ปัจจุบัน CSS มีถึงรุ่น 3 แล้ว ในการใช้งานจริงมักสร้าง CSS แบบ External style sheet เพราะแฟ้มอื่นเรียกใช้ได้ ส่วน Internal style sheet ก็จะเรียกใช้ได้เฉพาะในแฟ้มนั้น ส่วน Inline style ก็จะพิมพ์คำว่า style ต่อท้าย tag นั้นไปเลย ซึ่งตัวแปรหลัก 2 แบบที่กำหนดเองใน CSS มี 2 แบบคือ id กับ class
การกำหนด และการเรียกใช้ต่างกันไป
ถ้าเป็น id จะขึ้นต้นด้วย # แต่เป็น class จะขึ้นต้นด้วย . ถ้าเรียกใช้ id จะใช้ properties name ว่า id ส่วนเรียกใช้ class จะใช้ properties name ว่า class
สิ่งที่แตกต่างกัน คือ id จะเรียกใช้ครั้งเดียว แต่ class เรียกใช้ได้หลายครั้ง ถ้าวางแผนอย่างใจเย็นก็จะใช้ประโยชน์จาก css ได้อย่างเต็มที่ มีตัวอย่างที่ css_sample.htm หากจะทดสอบการปรับแต่ง css ทำได้ที่ w3schools.com
<html><head><style type=”text/css”>
#header {background:yellow;font-size:20px;}
.title-text {color:red;}
p.big { font-size:40px; }
span.small { font-size:10px; }
table, th, td { border: 1px solid black; }
.burin1 {color:red;border: 2px}
.burin2 {font-size:20px;float:left;}
.burin3 {color:blue;font-size:30px;float:left;}
</style><body id=”header” class=”title-text”>
<span style=”color:green;”>hello</span><p class=”big”>my</p>
<span class=”small”>friend</span><span class=”small”>is tom.</span>
<table class=”burin1″><tr><td>one</td></tr></table>
<table class=”burin2″><tr><td>two</td></tr></table>
<table class=”burin3″><tr><td>three</td></tr></table>
http://www.w3schools.com/css/css_table.asp
</body></html>