View
1.510
Download
0
Category
Preview:
Citation preview
WDS CS KKU
322 432 Web Design Technology By Yaowaluck Promdee, Sumonta Kasemvilas
Computer Science Khon Kaen University
CSS Box Model Margin, Padding and Border
Web Design Technology -2015 1
WDS CS KKU
Web Design Technology -2015 2
Index • CSS Border • Outline • Box model • Margin • Padding • Example
LAB#7
WDS CS KKU
Web Design Technology -2015 3
margin-bottom
ma
rgin
-righ
t m
arg
in-l
eft
margin-top
border-bottom
bo
rde
r-righ
t
border-top
bo
rde
r-le
ft
pa
dd
ing
-le
ft
padding-top pa
dd
ing
-righ
t
padding-bottom
Clears an area outside the border. The margin is transparent
Border – A border that goes around the padding and content
Clears an area around the content. The padding is transparent
ß------------ width---------------à
ß--
----
he
igh
t---
----
-à
The content of the box, where text and images appear
CSS Box Model
WDS CS KKU
Web Design Technology -2015 4
Border border-width is used to set the
width of the border
border-style The border-style property specifies what kind of border to display
none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset
value {!
WDS CS KKU
Web Design Technology -2015 5
Border • border-top-width • border-top-style • border-top-color • border-top • border-bottom-width • border-bottom-style • border-bottom-color • border-bottom
Sets all the top border properties
Sets all the bottom border properties
WDS CS KKU
Web Design Technology -2015 6
Border
• 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
WDS CS KKU
Web Design Technology -2015 7
CSS3 Border • border-radius • box-shadow
box-shadow: 10px 10px 5px #888888;
WDS CS KKU
Web Design Technology -2015 8
CSS3 Border • 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 */
WDS CS KKU
9
Outline
p { border: 1px solid red; outline-style: dotted; outline-color: #00ff00; }
Web Design Technology -2015
WDS CS KKU
Web Design Technology -2015 10
Outline p { border: 1px solid red; outline: green dotted thick; }
Sets all the outline properties in one declaration
outline-color outline-style outline-width inherit
Web Design Technology -2015 11
WDS CS KKU
Example1 This is output. How to code like this?
WDS CS KKU
Web Design Technology -2015 12
Lists Lists • unordered lists (<ul>) - the list items are marked with bullets • ordered lists (<ol>) - the list items are marked with numbers or letters
ol.c { list-style-type: upper-roman; } ol.d { list-style-type: lower-alpha;}
ul.a {list-style-type: circle; } ul.b { list-style-type: square;}
o CSS o HTML
I. CSS II. HTML
§ CSS § HTML
a. CSS b. HTML
Try it more
WDS CS KKU
Web Design Technology -2015 13
Margin The CSS margin properties define the space around elements.
p { margin: 10px 20px 30px 40px; } /* shortcut margin changed the top 10px, right 20px, bottom 30px and left margin 40px. */
h1 { margin: 10px; }
h2 { margin: 10px 20px 30px; }
h2 { margin: 10px 20px; }
top right bottom
set all top and bottom 10px
right and left 20px
Web Design Technology -2015 14
WDS CS KKU
Example2 Use the margin property to set the top and bottom margins for <h1> to “10%", and left and right margins to “30%". p set margin all 10% and border width 3px solid.
WDS CS KKU
Web Design Technology -2015 15
Padding The CSS padding properties define the space between the element border and the element content.
p { padding: 10px 20px 30px 40px; } /* shortcut padding changed the top 10px, right 20px, bottom 30px and left margin 40px. */
h1 {padding: 10px; }
h2 { padding: 10px 20px 30px; }
h2 { padding: 10px 20px; }
top right bottom
set all top and bottom 10px
right and left 20px
WDS CS KKU
Web Design Technology -2015 16
Example3
Web Design Technology -2015 17
WDS CS KKU
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”
Example4
Recommended