Download to read offline
Lab7
- 1. 322 432 Webdesign Technology Computer Science Khon Kaen University
- 2.
- 3. o Margin –การเคลียร์ขอบนอก หรือการเว้นว่างขอบนอก o Border – ขอบรอบๆ padding หรือรอบๆ Content o Padding – การเคลียร์พื้นที่ภายในขอบ หรือการเว้นว่างขอบใน o Content - เนื้อหาของ Box CSS Box Model Words
- 4. Border Property Description ValueExample border-width ใช้กาหนดขนาดของ กรอบของวัตถุทั้ง 4 ด้าน thin medium thick length 10 px;, 10 pt; border-style ใช้การกาหนดลักษณะ ของกรอบของวัตถุทั้ง 4 ด้าน none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset
- 5. Border (Cont.) • border-top-width •border-top-style • border-top-color • border-top ใช้กาหนดคุณสมบัติให้กับกรอบด้านบน • border-bottom-width • border-bottom-style • border-bottom-color • border-bottom ใช้กาหนดคุณสมบัติให้กับกรอบด้านล่าง } }
- 6. Border (Cont.) ใช้กาหนดคุณสมบัติให้กับกรอบด้านซ้าย • border-right-width •border-right-style • border-right-color • border-right ใช้กาหนดคุณสมบัติให้กับกรอบด้านขวา } } • border-left-width • border-left-style • border-left-color • border-left
- 7. CSS3 Borders • border-radius •box-shadow box-shadow: 10px 10px 5px #888888;
- 8. CSS3 Borders • border-image border-image:url(border.png)30 30 round; -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */ -o-border-image:url(border.png) 30 30 round; /* Opera */
- 9. Example1 Border เขียนอย่างไร? Box1 ขอบSolid สีเขียว ขนาด 5px Box2 กาหนด เส้นขอบบนล่างเป็นจุด ขอบซ้ายขวาเป็น Solid สีแดง Box3 กาหนดขนาดให้เส้นกรอบ บน เป็น 1px, ขนาดเส้นกรอบ ซ้าย ขวา เป็น 10px และขนาดเส้นกรอบ ล่าง เป็น 20px
- 10. Margin margin-top margin-bottom margin-left margin-right margin ใช้กาหนดระยะห่างระหว่างขอบของวัตถุด้านบน กับวัตถุอื่นๆ autolength เช่น5px, 5pt,5cm ใช้กาหนดระยะห่างระหว่างขอบของวัตถุด้านล่าง กับวัตถุอื่นๆ ใช้กาหนดระยะห่างระหว่างขอบของวัตถุด้านซ้าย กับวัตถุอื่นๆ ใช้กาหนดระยะห่างระหว่างขอบของวัตถุด้านขวา กับวัตถุอื่นๆ ใช้กาหนดระยะห่างระหว่างขอบของวัตถุที่ต้องการ ทั้ง 4 ด้าน กับวัตถุอื่น ๆ ในคาสั่งเดียว
- 11. Padding Property Description padding-top ใช้กาหนดระยะห่างระหว่างขอบของวัตถุด้านในเส้นบนกับ ข้อความที่อยู่ในกรอบ padding-bottom ใช้กาหนดระยะห่างระหว่างขอบของวัตถุด้านในเส้นล่าง กับ ข้อความที่อยู่ในกรอบ padding-left ใช้กาหนดระยะห่างระหว่างขอบของวัตถุด้านในเส้นซ้าย กับ ข้อความที่อยู่ในกรอบ padding-right ใช้กาหนดระยะห่างระหว่างขอบของวัตถุด้านในเส้นขวา กับ ข้อความที่อยู่ในกรอบ padding ใช้กาหนดระยะห่างระหว่างขอบของวัตถุด้านใน กับ ข้อความที่อยู่ในกรอบ (ไม่เกี่ยวข้องกับวัตถุด้านนอก)
- 12. <div style="margin:20px; padding:20px;border:20px solid blue"> Massage in Box <br /> Padding Margin Border<br /> Example lab#7 Box Model 322432 Web design technology Computer Science Khon Kaen University </div> Copyright by 322432 Web design technology Computer Science Khon Kaen University Example2 Margin, Padding
- 13. Example3 Line1 font >Comic Sans MS size 36px Line2 ห่างจากขอบบน/ล่าง 25 px Line3 ขอบจุด มีขีดเส้นใต้ จัดอยู่ตรงกลาง กาหนดขนาดช่องว่างระหว่างคา 1 em
- 14.
- 15. LAB#7 Box Model จุดประสงค์:เรียนรู้ Border, Margin and Padding คาสั่ง: ให้ นศ. สร้าง Box Model โดยใช้ HTML5&CSS ในการออกแบบ ให้ใช้ CSS แบบ External file โดยมีทั้งหมด 3 box ออกแบบใส่ข้อความ จัดตัวอักษร ให้สวยงาม