lab7
TRANSCRIPT
![Page 1: Lab7](https://reader033.vdocuments.net/reader033/viewer/2022050817/55673bbcd8b42a986b8b5606/html5/thumbnails/1.jpg)
322 432 Web design Technology Computer Science Khon Kaen University
![Page 2: Lab7](https://reader033.vdocuments.net/reader033/viewer/2022050817/55673bbcd8b42a986b8b5606/html5/thumbnails/2.jpg)
CSS Box Model
![Page 3: Lab7](https://reader033.vdocuments.net/reader033/viewer/2022050817/55673bbcd8b42a986b8b5606/html5/thumbnails/3.jpg)
o Margin – การเคลียร์ขอบนอก หรือการเว้นว่างขอบนอก o Border – ขอบรอบๆ padding หรือรอบๆ Content o Padding – การเคลียร์พื้นที่ภายในขอบ หรือการเว้นว่างขอบใน o Content - เนื้อหาของ Box
CSS Box Model
Words
![Page 4: Lab7](https://reader033.vdocuments.net/reader033/viewer/2022050817/55673bbcd8b42a986b8b5606/html5/thumbnails/4.jpg)
Border
Property Description Value Example
border-width
ใช้ก าหนดขนาดของกรอบของวัตถุท้ัง 4 ด้าน
thin medium thick length
10 px;, 10 pt;
border-style ใช้การก าหนดลกัษณะของกรอบของวัตถุท้ัง 4 ด้าน
none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset
![Page 5: Lab7](https://reader033.vdocuments.net/reader033/viewer/2022050817/55673bbcd8b42a986b8b5606/html5/thumbnails/5.jpg)
Border (Cont.)
• border-top-width • border-top-style • border-top-color • border-top
ใช้ก าหนดคุณสมบัติให้กับกรอบดา้นบน
• border-bottom-width • border-bottom-style • border-bottom-color • border-bottom
ใช้ก าหนดคุณสมบัติให้กับกรอบดา้นล่าง
} }
![Page 6: Lab7](https://reader033.vdocuments.net/reader033/viewer/2022050817/55673bbcd8b42a986b8b5606/html5/thumbnails/6.jpg)
Border (Cont.)
ใช้ก าหนดคุณสมบัติให้กับกรอบดา้นซ้าย
• border-right-width • border-right-style • border-right-color • border-right
ใช้ก าหนดคุณสมบัติให้กับกรอบดา้นขวา
} }
• border-left-width • border-left-style • border-left-color • border-left
![Page 7: Lab7](https://reader033.vdocuments.net/reader033/viewer/2022050817/55673bbcd8b42a986b8b5606/html5/thumbnails/7.jpg)
CSS3 Borders
• border-radius • box-shadow
box-shadow: 10px 10px 5px #888888;
![Page 8: Lab7](https://reader033.vdocuments.net/reader033/viewer/2022050817/55673bbcd8b42a986b8b5606/html5/thumbnails/8.jpg)
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 */
![Page 9: Lab7](https://reader033.vdocuments.net/reader033/viewer/2022050817/55673bbcd8b42a986b8b5606/html5/thumbnails/9.jpg)
Example1 Border
เขียนอย่างไร?
Box1 ขอบ Solid สีเขียว ขนาด 5px Box2 ก าหนด เส้นขอบบนล่างเปน็จุด ขอบซ้ายขวาเป็น Solid สีแดง Box3 ก าหนดขนาดให้เส้นกรอบ บน เป็น 1px, ขนาดเส้นกรอบ ซ้าย ขวา เป็น 10px และขนาดเส้นกรอบ ลา่ง เป็น 20px
![Page 10: Lab7](https://reader033.vdocuments.net/reader033/viewer/2022050817/55673bbcd8b42a986b8b5606/html5/thumbnails/10.jpg)
Margin
margin-top margin-bottom margin-left margin-right margin
ใช้ก าหนดระยะห่างระหว่างขอบของวัตถุด้านบน กับวัตถุอื่นๆ autolength เช่น 5px, 5pt,5cm
ใช้ก าหนดระยะห่างระหว่างขอบของวัตถุด้านล่าง กับวัตถุอื่นๆ
ใช้ก าหนดระยะห่างระหว่างขอบของวัตถุด้านซ้าย กับวัตถุอื่นๆ
ใช้ก าหนดระยะห่างระหว่างขอบของวัตถุด้านขวา กับวัตถุอื่นๆ
ใช้ก าหนดระยะห่างระหว่างขอบของวัตถุท่ีต้องการ ท้ัง 4 ด้าน กับวัตถุอ่ืน ๆ ในค าสั่งเดียว
![Page 11: Lab7](https://reader033.vdocuments.net/reader033/viewer/2022050817/55673bbcd8b42a986b8b5606/html5/thumbnails/11.jpg)
Padding
Property Description
padding-top ใช้ก าหนดระยะหา่งระหว่างขอบของวัตถุด้านในเส้นบน กับ ข้อความที่อยู่ในกรอบ
padding-bottom ใช้ก าหนดระยะหา่งระหว่างขอบของวัตถุด้านในเส้นล่าง กับ ข้อความที่อยู่ในกรอบ
padding-left ใช้ก าหนดระยะหา่งระหว่างขอบของวัตถุด้านในเส้นซ้าย กับ ข้อความที่อยู่ในกรอบ
padding-right ใช้ก าหนดระยะหา่งระหว่างขอบของวัตถุด้านในเส้นขวา กบั ข้อความที่อยู่ในกรอบ
padding ใช้ก าหนดระยะหา่งระหว่างขอบของวัตถุด้านใน กับ ข้อความที่อยู่ในกรอบ (ไม่เกี่ยวขอ้งกับวตัถุด้านนอก)
![Page 12: Lab7](https://reader033.vdocuments.net/reader033/viewer/2022050817/55673bbcd8b42a986b8b5606/html5/thumbnails/12.jpg)
<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
![Page 13: Lab7](https://reader033.vdocuments.net/reader033/viewer/2022050817/55673bbcd8b42a986b8b5606/html5/thumbnails/13.jpg)
Example3
Line1 font > Comic Sans MS size 36px Line2 ห่างจากขอบบน/ล่าง 25 px Line3 ขอบจุด มีขีดเส้นใต้ จดัอยูต่รงกลาง ก าหนดขนาดช่องว่างระหว่างค า 1 em
![Page 14: Lab7](https://reader033.vdocuments.net/reader033/viewer/2022050817/55673bbcd8b42a986b8b5606/html5/thumbnails/14.jpg)
Summary
![Page 15: Lab7](https://reader033.vdocuments.net/reader033/viewer/2022050817/55673bbcd8b42a986b8b5606/html5/thumbnails/15.jpg)
LAB#7 Box Model
จุดประสงค์: เรียนรู้ Border, Margin and Padding ค าสั่ง: ให้ นศ. สร้าง Box Model โดยใช้ HTML5&CSS ในการออกแบบ ให้ใช้ CSS แบบ External file โดยมีท้ังหมด 3 box ออกแบบใส่ข้อความ จัดตัวอักษร ให้สวยงาม