Lab#7 CSS Box Model
-
Upload
yaowaluck-promdee -
Category
Education
-
view
660 -
download
0
description
Transcript of Lab#7 CSS Box Model
![Page 1: Lab#7 CSS Box Model](https://reader034.fdocuments.net/reader034/viewer/2022042508/55858660d8b42ae41d8b4e27/html5/thumbnails/1.jpg)
LAB#7 Margin, Padding, Border
322 432 Web Design Technology
By Yaowaluck Promdee, Sumonta Kasemvilas
Computer Science Khon Kaen University
![Page 2: Lab#7 CSS Box Model](https://reader034.fdocuments.net/reader034/viewer/2022042508/55858660d8b42ae41d8b4e27/html5/thumbnails/2.jpg)
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
![Page 3: Lab#7 CSS Box Model](https://reader034.fdocuments.net/reader034/viewer/2022042508/55858660d8b42ae41d8b4e27/html5/thumbnails/3.jpg)
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
![Page 4: Lab#7 CSS Box Model](https://reader034.fdocuments.net/reader034/viewer/2022042508/55858660d8b42ae41d8b4e27/html5/thumbnails/4.jpg)
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
![Page 5: Lab#7 CSS Box Model](https://reader034.fdocuments.net/reader034/viewer/2022042508/55858660d8b42ae41d8b4e27/html5/thumbnails/5.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
Sets all the left border properties
Sets all the right border properties
![Page 6: Lab#7 CSS Box Model](https://reader034.fdocuments.net/reader034/viewer/2022042508/55858660d8b42ae41d8b4e27/html5/thumbnails/6.jpg)
Outline
p {
border: 1px solid red;
outline-style: dotted;
outline-color: #00ff00; }
![Page 7: Lab#7 CSS Box Model](https://reader034.fdocuments.net/reader034/viewer/2022042508/55858660d8b42ae41d8b4e27/html5/thumbnails/7.jpg)
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
![Page 8: Lab#7 CSS Box Model](https://reader034.fdocuments.net/reader034/viewer/2022042508/55858660d8b42ae41d8b4e27/html5/thumbnails/8.jpg)
CSS3 Borders
• border-radius • box-shadow
box-shadow: 10px 10px 5px #888888;
border-radius: 25px;
![Page 9: Lab#7 CSS Box Model](https://reader034.fdocuments.net/reader034/viewer/2022042508/55858660d8b42ae41d8b4e27/html5/thumbnails/9.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 10: Lab#7 CSS Box Model](https://reader034.fdocuments.net/reader034/viewer/2022042508/55858660d8b42ae41d8b4e27/html5/thumbnails/10.jpg)
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
![Page 11: Lab#7 CSS Box Model](https://reader034.fdocuments.net/reader034/viewer/2022042508/55858660d8b42ae41d8b4e27/html5/thumbnails/11.jpg)
Margin and Padding
![Page 12: Lab#7 CSS Box Model](https://reader034.fdocuments.net/reader034/viewer/2022042508/55858660d8b42ae41d8b4e27/html5/thumbnails/12.jpg)
Margin and Padding (Out put)
![Page 13: Lab#7 CSS Box Model](https://reader034.fdocuments.net/reader034/viewer/2022042508/55858660d8b42ae41d8b4e27/html5/thumbnails/13.jpg)
Margin and Padding
Top Right
Bottom
Left
/*Set All margin */
![Page 14: Lab#7 CSS Box Model](https://reader034.fdocuments.net/reader034/viewer/2022042508/55858660d8b42ae41d8b4e27/html5/thumbnails/14.jpg)
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
![Page 15: Lab#7 CSS Box Model](https://reader034.fdocuments.net/reader034/viewer/2022042508/55858660d8b42ae41d8b4e27/html5/thumbnails/15.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 16: Lab#7 CSS Box Model](https://reader034.fdocuments.net/reader034/viewer/2022042508/55858660d8b42ae41d8b4e27/html5/thumbnails/16.jpg)
Example3
Line1 font > Comic Sans MS size 36px
Line2 Top and bottom are 25 px
Line3 Word space is 1 em, all uppercase
![Page 17: Lab#7 CSS Box Model](https://reader034.fdocuments.net/reader034/viewer/2022042508/55858660d8b42ae41d8b4e27/html5/thumbnails/17.jpg)
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
![Page 18: Lab#7 CSS Box Model](https://reader034.fdocuments.net/reader034/viewer/2022042508/55858660d8b42ae41d8b4e27/html5/thumbnails/18.jpg)
Q & A ?