Lab#7 CSS Box Model
2 likes1,751 views
The document discusses CSS box model properties including margin, padding, border, and outline. It defines each property and provides examples of how to set widths, styles, and colors. Examples are given for using shorthand properties to set multiple border properties at once and setting margin and padding. The lab assignment is to create four web pages displaying borders, margins, and paddings as shown in the examples and submit the files in a zip folder.
More Related Content
What's hot (20)
Viewers also liked (7)
Similar to Lab#7 CSS Box Model (20)
More from Yaowaluck Promdee (20)
Recently uploaded (20)
Lab#7 CSS Box Model
- 1. LAB#7 Margin, Padding, Border 322 432 Web Design Technology By Yaowaluck Promdee, Sumonta Kasemvilas Computer Science Khon Kaen University
- 2. CSS – Box Model Margin – Clears an area outside the border. The margin is transparent Border – A border that goes around the padding and content Padding – Clears an area around the content. The padding is transparent The content of the box, where text and images appear
- 3. Border Property Description Value Example border-width is used to set the width of the border thin medium thick length 10 px;, 10 pt; border-style The border-style property specifies what kind of border to display none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset
- 4. Border (Cont.) •border-top-width •border-top-style •border-top-color •border-top Sets all the top border properties •border-bottom-width •border-bottom-style •border-bottom-color •border-bottom } } Sets all the bottom border properties
- 5. Border (Cont.) •border-right-width •border-right-style •border-right-color •border-right } } •border-left-width •border-left-style •border-left-color •border-left Sets all the left border properties Sets all the right border properties
- 6. Outline p { border: 1px solid red; outline-style: dotted; outline-color: #00ff00; }
- 7. outline Sets all the outline properties in one declaration outline-color outline-style outline-width inherit outline-color Sets the color of an outline color_name hex_number rgb_number invert inherit outline-style Sets the style of an outline none dotted dashed solid double groove ridge inset outset inherit outline-width Sets the width of an outline thin medium thick length inherit
- 8. CSS3 Borders •border-radius •box-shadow box-shadow: 10px 10px 5px #888888; border-radius: 25px;
- 9. 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 */
- 10. Example1 Border Try it yourself! Box1 green size 5px Box2 red Box3 top size is 1 px, left and right size are 10 px and bottom size is 20 px
- 12. Margin and Padding (Out put)
- 13. Margin and Padding Top Right Bottom Left /*Set All margin */
- 14. Margin and Padding /* use Margin shorthand*/ h1 {margin:5px 10px 5px 10px;} /* instead of */ h1 {margin-top:5px; margin-right:10px; margin-bottom:5px; margin-left:10px; } /*shorthand*/ h2 { margin:5px 10px 5px; } h3 { margin:5px 10px; } top bottom Left and Right Top & Bottom Left & Right
- 15. <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
- 16. Example3 Line1 font > Comic Sans MS size 36px Line2 Top and bottom are 25 px Line3 Word space is 1 em, all uppercase
- 17. LAB#7 Box Model - Create four web pages by display results as shown in example 1-4. - You have to finish this assignment in lab hour. -- Zip All Files > Example 1-4 and name “Lab7_YourID_Section.zip” Example 4 Design Box
- 18. Q & A ?
Editor's Notes
- #3: Margin – Clears an area outside the border. The margin is transparent Border – A border that goes around the padding and content Padding – Clears an area around the content. The padding is transparent Content - The content of the box, where text and images appear
- #4: dotted: Defines a dotted border dashed: Defines a dashed border solid: Defines a solid border double: Defines two borders. The width of the two borders are the same as the border-width value groove: Defines a 3D grooved border. The effect depends on the border-color value ridge: Defines a 3D ridged border. The effect depends on the border-color value inset: Defines a 3D inset border. The effect depends on the border-color value outset: Defines a 3D outset border. The effect depends on the border-color value
- #9: the box-shadow property is used to add shadow to boxes: the border-radius property is used to create rounded corners:
- #10: border-image property you can use an image to create a border
- #18: ให้ทำตามตัวอย่างที่ให้ และจากดีไซน์บล็อก เป็น 4 ตัวอย่าง ส่งในชั่วโมง