Download - Html&css lesson 5 pdf
![Page 1: Html&css lesson 5 pdf](https://reader031.vdocuments.us/reader031/viewer/2022020222/568ca9cc1a28ab186d9f047b/html5/thumbnails/1.jpg)
Web Design with HTML&CSS:Lesson 5
IT Lecturer: Ngô Đình Cường
![Page 2: Html&css lesson 5 pdf](https://reader031.vdocuments.us/reader031/viewer/2022020222/568ca9cc1a28ab186d9f047b/html5/thumbnails/2.jpg)
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.
![Page 3: Html&css lesson 5 pdf](https://reader031.vdocuments.us/reader031/viewer/2022020222/568ca9cc1a28ab186d9f047b/html5/thumbnails/3.jpg)
CSS3 Property: border
![Page 4: Html&css lesson 5 pdf](https://reader031.vdocuments.us/reader031/viewer/2022020222/568ca9cc1a28ab186d9f047b/html5/thumbnails/4.jpg)
CSS3 Property: border-collapse
• The border-collapse property sets whether the tableborders are collapsed into a single border or detachedas in standard HTML.
![Page 5: Html&css lesson 5 pdf](https://reader031.vdocuments.us/reader031/viewer/2022020222/568ca9cc1a28ab186d9f047b/html5/thumbnails/5.jpg)
CSS3 Property: border-spacing
• The border-spacing property sets the distancebetween the borders of adjacent cells (only for the"separated borders" model).
![Page 6: Html&css lesson 5 pdf](https://reader031.vdocuments.us/reader031/viewer/2022020222/568ca9cc1a28ab186d9f047b/html5/thumbnails/6.jpg)
border-spacing & border-collapse
![Page 7: Html&css lesson 5 pdf](https://reader031.vdocuments.us/reader031/viewer/2022020222/568ca9cc1a28ab186d9f047b/html5/thumbnails/7.jpg)
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
![Page 8: Html&css lesson 5 pdf](https://reader031.vdocuments.us/reader031/viewer/2022020222/568ca9cc1a28ab186d9f047b/html5/thumbnails/8.jpg)
CSS3 Property: border-style
![Page 9: Html&css lesson 5 pdf](https://reader031.vdocuments.us/reader031/viewer/2022020222/568ca9cc1a28ab186d9f047b/html5/thumbnails/9.jpg)
CSS3 Property: border-style
![Page 10: Html&css lesson 5 pdf](https://reader031.vdocuments.us/reader031/viewer/2022020222/568ca9cc1a28ab186d9f047b/html5/thumbnails/10.jpg)
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
![Page 11: Html&css lesson 5 pdf](https://reader031.vdocuments.us/reader031/viewer/2022020222/568ca9cc1a28ab186d9f047b/html5/thumbnails/11.jpg)
CSS3 Property: border-radius
![Page 12: Html&css lesson 5 pdf](https://reader031.vdocuments.us/reader031/viewer/2022020222/568ca9cc1a28ab186d9f047b/html5/thumbnails/12.jpg)
CSS3 Property: box-shadow
• The box-shadow property attaches one or moredrop-shadows to the box.
![Page 13: Html&css lesson 5 pdf](https://reader031.vdocuments.us/reader031/viewer/2022020222/568ca9cc1a28ab186d9f047b/html5/thumbnails/13.jpg)
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
![Page 14: Html&css lesson 5 pdf](https://reader031.vdocuments.us/reader031/viewer/2022020222/568ca9cc1a28ab186d9f047b/html5/thumbnails/14.jpg)
CSS3 Box Model
![Page 15: Html&css lesson 5 pdf](https://reader031.vdocuments.us/reader031/viewer/2022020222/568ca9cc1a28ab186d9f047b/html5/thumbnails/15.jpg)
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
![Page 16: Html&css lesson 5 pdf](https://reader031.vdocuments.us/reader031/viewer/2022020222/568ca9cc1a28ab186d9f047b/html5/thumbnails/16.jpg)
CSS3 Property: padding
![Page 17: Html&css lesson 5 pdf](https://reader031.vdocuments.us/reader031/viewer/2022020222/568ca9cc1a28ab186d9f047b/html5/thumbnails/17.jpg)
CSS3 Property: display
• The display property defines how a certainHTML element should be displayed.
![Page 18: Html&css lesson 5 pdf](https://reader031.vdocuments.us/reader031/viewer/2022020222/568ca9cc1a28ab186d9f047b/html5/thumbnails/18.jpg)
CSS3 Property: display
![Page 19: Html&css lesson 5 pdf](https://reader031.vdocuments.us/reader031/viewer/2022020222/568ca9cc1a28ab186d9f047b/html5/thumbnails/19.jpg)
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.
![Page 20: Html&css lesson 5 pdf](https://reader031.vdocuments.us/reader031/viewer/2022020222/568ca9cc1a28ab186d9f047b/html5/thumbnails/20.jpg)
CSS3 Property: list-style
![Page 21: Html&css lesson 5 pdf](https://reader031.vdocuments.us/reader031/viewer/2022020222/568ca9cc1a28ab186d9f047b/html5/thumbnails/21.jpg)
CSS3 Property: overflow
• The overflow property specifies what happens ifcontent overflows an element's box.
![Page 22: Html&css lesson 5 pdf](https://reader031.vdocuments.us/reader031/viewer/2022020222/568ca9cc1a28ab186d9f047b/html5/thumbnails/22.jpg)
CSS3 Property: overflow
![Page 23: Html&css lesson 5 pdf](https://reader031.vdocuments.us/reader031/viewer/2022020222/568ca9cc1a28ab186d9f047b/html5/thumbnails/23.jpg)
CSS3 Property: text-decoration
• The text-decoration property specifies thedecoration added to text.
![Page 24: Html&css lesson 5 pdf](https://reader031.vdocuments.us/reader031/viewer/2022020222/568ca9cc1a28ab186d9f047b/html5/thumbnails/24.jpg)
CSS3 Property: text-decoration
![Page 25: Html&css lesson 5 pdf](https://reader031.vdocuments.us/reader031/viewer/2022020222/568ca9cc1a28ab186d9f047b/html5/thumbnails/25.jpg)
CSS3 Property: text-shadow
• The text-shadow property is supported in allmajor browsers.
![Page 26: Html&css lesson 5 pdf](https://reader031.vdocuments.us/reader031/viewer/2022020222/568ca9cc1a28ab186d9f047b/html5/thumbnails/26.jpg)
CSS3 Property: text-shadow
![Page 27: Html&css lesson 5 pdf](https://reader031.vdocuments.us/reader031/viewer/2022020222/568ca9cc1a28ab186d9f047b/html5/thumbnails/27.jpg)
CSS3 Property: opacity
• The opacity property is supported in all majorbrowsers.
div{opacity:0.5}
![Page 28: Html&css lesson 5 pdf](https://reader031.vdocuments.us/reader031/viewer/2022020222/568ca9cc1a28ab186d9f047b/html5/thumbnails/28.jpg)
CSS3 Property: opacity
![Page 29: Html&css lesson 5 pdf](https://reader031.vdocuments.us/reader031/viewer/2022020222/568ca9cc1a28ab186d9f047b/html5/thumbnails/29.jpg)
Try It Yourself