html&css lesson 5 pdf
Post on 07-Apr-2016
233 Views
Preview:
DESCRIPTION
TRANSCRIPT
Web Design with HTML&CSS:Lesson 5
IT Lecturer: Ngô Đình Cường
CSS3 Property: border
• The border shorthand property sets all the borderproperties in one declaration.
• The properties that can be set, are (in order):border-width, border-style, and border-color.
CSS3 Property: border
CSS3 Property: border-collapse
• The border-collapse property sets whether the tableborders are collapsed into a single border or detachedas in standard HTML.
CSS3 Property: border-spacing
• The border-spacing property sets the distancebetween the borders of adjacent cells (only for the"separated borders" model).
border-spacing & border-collapse
CSS3 Property: border-style
The border-style property sets the style of an element'sfour borders. This property can have from one to fourvalues.
border-style:dotted solid double dashed;-top border is dotted-right border is solid-bottom border is double-left border is dashed
border-style:dotted solid double;-top border is dotted-right and left borders are solid-bottom border is double
border-style:dotted solid double dashed;-top border is dotted-right border is solid-bottom border is double-left border is dashed
border-style:dotted solid double;-top border is dotted-right and left borders are solid-bottom border is double
border-style:dotted solid;-top and bottom borders are dotted-right and left borders are solid
border-style:dotted;-all four borders are dotted
CSS3 Property: border-style
CSS3 Property: border-style
CSS3 Property: border-radius
• The border-radius property is a shorthand property forsetting the four border-*-radius properties.– border-top-left-radius– border-top-right-radius– border-bottom-right-radius– border-bottom-left-radius
• The border-radius property is a shorthand property forsetting the four border-*-radius properties.– border-top-left-radius– border-top-right-radius– border-bottom-right-radius– border-bottom-left-radius
CSS3 Property: border-radius
CSS3 Property: box-shadow
• The box-shadow property attaches one or moredrop-shadows to the box.
CSS3 Box Model• Margin - Clears an area around the border. The margin does not have a background
color, it is completely transparent• Border - A border that goes around the padding and content. The border is affected
by the background color of the box• Padding - Clears an area around the content. The padding is affected by the
background color of the box• Content - The content of the box, where text and images appear
• Margin - Clears an area around the border. The margin does not have a backgroundcolor, it is completely transparent
• Border - A border that goes around the padding and content. The border is affectedby the background color of the box
• Padding - Clears an area around the content. The padding is affected by thebackground color of the box
• Content - The content of the box, where text and images appear
CSS3 Box Model
CSS3 Property: padding
The padding shorthand property sets all the paddingproperties in one declaration. This property can havefrom one to four values.
padding:10px 5px 15px 20px;-top padding is 10px-right padding is 5px-bottom padding is 15px-left padding is 20px
padding:10px 5px 15px;-top padding is 10px-right and left padding are 5px-bottom padding is 15px
padding:10px 5px 15px 20px;-top padding is 10px-right padding is 5px-bottom padding is 15px-left padding is 20px
padding:10px 5px 15px;-top padding is 10px-right and left padding are 5px-bottom padding is 15px
padding:10px 5px;-top and bottom padding are 10px-right and left padding are 5px
padding:10px;all four paddings are 10px
CSS3 Property: padding
CSS3 Property: display
• The display property defines how a certainHTML element should be displayed.
CSS3 Property: display
CSS3 Property: list-style
• The list-style shorthand property sets all the listproperties in one declaration.
• The properties that can be set, are (in order):list-style-type, list-style-position, list-style-image.
• The list-style shorthand property sets all the listproperties in one declaration.
• The properties that can be set, are (in order):list-style-type, list-style-position, list-style-image.
CSS3 Property: list-style
CSS3 Property: overflow
• The overflow property specifies what happens ifcontent overflows an element's box.
CSS3 Property: overflow
CSS3 Property: text-decoration
• The text-decoration property specifies thedecoration added to text.
CSS3 Property: text-decoration
CSS3 Property: text-shadow
• The text-shadow property is supported in allmajor browsers.
CSS3 Property: text-shadow
CSS3 Property: opacity
• The opacity property is supported in all majorbrowsers.
div{opacity:0.5}
CSS3 Property: opacity
Try It Yourself
top related