แน่นอนครับ ถ้ามันสั้นได้ จะเขียนยาวไปทำไมให้เยิ่นเย้อ มาดูกันว่า property ตัวไหน ย่อได้บ้าง

Background

แบบปกติ
background-color: #87CEFA; ———————–/*สีแบ็คกราวน์*/
background-position: left top; ———————-/*ตำแหน่งชิดซ้าย บน*/
background-repeat: no-repeat;——————– /*ใส่ไปรูปเดียว ไม่ต้องทำซ้ำ*/
background-image: url(images/arrow.gif); ——–/*เอารูปจากที่นี่นะ*/
background-attachment: fixed; —————-/*ใส่ตรงไหน fix ไว้ตรงนั้นเลย ต่อให้เลื่อน scroll bar ลงมาก็ยังเห็น*/

แบบย่อแล้ว
background: #87CEFA url(images/arrow.gif) no-repeat fixed left top; ควรเรียงตามลำดับครับ ไม่เช่นนั้น IE6 อาจไม่แสดงในบางกรณี

ถ้าเขียนแบบนี้
background: #87CEFA url(images/arrow.gif) no-repeat fixed 5px 10px; ตัวเลขค่าแรกคือระยะห่างแบ็คกราวน์ในแนวแกน x อันที่2 คือแนวแกน y อ่านต่อ คลิกที่นี่ »

li คือ list ul คือ unorderlist จะนับ li เป็น สัญลักษณ์ อื่นๆที่ไม่ใช่ตัวเลข ol คือ orderlist นับ li เป็นตัวเลข
รูปแบบการใช้คือ

แต่เราสามารถกำหนด property ให้ ul ได้ ด้วยการใส่ list-style-type เช่น ul { list-style-type: square } ก็จะได้เป็นสี่เหลี่ยมเล็กๆ

การแสดงผล

เขียนโค้ด css ดังนี้ อ่านต่อ คลิกที่นี่ »

ในหน้าเว็บเพจนั้น แต่ละส่วน มองกันอย่างง่ายๆมันก็คือ กล่องแต่ละกล่อง วางต่อๆกัน เป็นการวาง layout พิ้นฐาน ซึ่งมีความสำคัญมาก เราจะมาดูกันว่า box แต่ละอัน มีส่วนประกอบอะไรบ้าง
: ภาพตัวอย่าง

content area 100×100 pixel
padding 10px คือ ส่วนที่เว้นเข้ามาจากเส้นขอบ
boder 10 px คือ เส้นขอบ
margin 10 px คือ ระยะห่างจากเส้นขอบออกไปด้านนอก

ทดสอบ Box model

อ่านต่อ คลิกที่นี่ »

Browser คือ โปรแกรมสำหรับเปิดหน้าเว็บเพจ
Cross browser คือ การสร้างหน้าเว็บเพจ ที่แสดงผลได้เหมือนกัน ในทุกเบราเซอร์ นั่นเอง มาดูกันก่อนว่า โลกเรานี้มีเบราเซอร์อะไรเป็นที่นิยมบ้าง แล้วอะไรที่ฮิตที่สุด ดูได้ที่นี่ Browser Stats จาก W3C

IE คือ Internet Explorer
Fx คือ Firefox
Moz คือ The Mozilla
S คือ Safari บน เครื่อง Mac
O คือ Opera
N คือ Netscape

จะเห็นว่า IE 6 กับ Fx สูสีกันเลยทีเดียวส่วน N นั้น มีผู้ใช้น้อยกว่า 1% จึงตัดการแสดง stat ออกไป และทั้งหมดนี้คือ เบราเซอร์ ที่คุณจะต้องนำหน้าเว็บมาตรวจสอบ ก่อนนำขึ้นจริง เป็นอะไรที่ยุ่งยากพอสมควรเลยทีเดียว เพราะเบราเซอร์แต่ละอันนั้น ก็มีจุดที่แตกต่างกัน สำหรับผู้ใช้เว็บไทยนั้นส่วนใหญ่ จะเป็น IE6 Fx และ Opera บ้างนิดหน่อยครับ อาจจะเชกแค่ IE Fx ก็น่าจะเพียงพอสำหรับเว็บไทย แต่ถ้าเว็บคุณมีผู้ใช้ ต่างประเทศ หรือเป็น อี-คอมเมิซ ก็ควรอย่างยิ่งที่จะแสดงผลได้ตรงกันทุกเบราเซอร์

วิธีเช็ก cross browser

อ่านต่อ คลิกที่นี่ »

เมื่อเราทำเว็บไซต์ ขึ้นมา หลายๆคน อาจจะคุ้นชินกับการ กำหนด font ในไฟล์ .css ใ้ห้เป็น 10pt บ้าง 12px หรือ 14px ซึ่งเป็นการ fix font ไม่ให้ขยายใหญ่ด้วยการกด ที่ menu ของ browser view/textsize เพราะจะทำให้ layout ของเราเละเทะนั่นเอง แต่ IE7 และ FF ได้ทำให้ผู้ใช้กด ctrl+ เพื่อขยายฟ้อนต์ได้แล้ว แม้ว่าคุณจะล็อกไว้ก็ตาม แต่ในขณะนี้(วันที่เขียนเรื่องนี้อยู่) ก็ยังมีคนอีกจำนวนมากเลยทีเดียว ที่ยังใช้ IE6 อยู่ หรือต่ำกว่า ก็จะไม่สามารถขยาย font ได้ หากเค้าสายตาไม่ค่อยดี ก็คงจะเลิกดูเว็บคุณไปเลย เพราะตัวหนังสือเ็ล็กเกินไป ดังนั้น ทางเลือกในการกำหนด font ก็มีอยู่หลายตัวด้วยกัน เริ่มจาก

• px ก็คือหน่วย pixel นั่นเอง มือโฟโต้ชอป ก็คงคุ้นเคยกันดีอยู่ เป็นหน่วยการวัด ขนาด ความละเอียดพื้นที่หน้าจอ
• em ย่อมาจาก emphasize คือ ขนาดจำนวนเท่า เช่น h1{fon-size:1.5em} h2{fon-size:1.4em} h3{fon-size:1.3em}
  ก็จะได้ว่า h1 มีขนาด 1.5 เท่า h2 มีขนาด 1.4 เท่า แล้วมันเท่าของอะไรล่ะ มันคือจำนวนเท่าของ body ครับ ถ้าคุณกำหนด ที่ body ไว้เป็น 14px h1 ก็จะใหญ่เป็น 1.5 เท่าของ 14px และถ้าคุณกำหนดไว้ 1em มันก็จะได้เท่ากับ 14px เท่าเดิม ถ้าคุณไม่ได้กำหนดขนาด font ไว้ที่ body ค่า default ของมันก็น่าจะอยู่ที่ 16px
• pt มาจาก point มืออิลัสเตรเตอร์ ก็คงคุ้นเคยกันดี 10pt ก็มีขนาดพอๆกับ 12px มักเป็นขนาดของฟ้อนต์ในงาน สิ่งพิมพ์แต่ใช้กับเว็บก็ได้เหมือนกัน เมื่อก่อนผมก็ชอบใช้
• % เปอร์เซ็นต์ ใช้บ่อยกับ layout แบบ liquid layout ก็คือ เปลี่ยนแปลงตามหน้าจอนั่นเอง หากจะใช้ กำหนดขนาด font ที่ body ขนาดกำลังดีก็จะอยู่ที่ประมาณ 76%ครับ
• ex คือ x-height ค่าความสูงของตัวอักษร x
• pc picas; 1pc=12pt