---------------------- android培训、java培训、期待与您交流! ----------------------
6、 Border Properties
Property | Description |
Sets all the border properties in one declaration | |
Sets all the bottom border properties in one declaration | |
Sets the color of the bottom border | |
Sets the style of the bottom border | |
Sets the width of the bottom border | |
Sets the color of the four borders | |
Sets all the left border properties in one declaration | |
Sets the color of the left border | |
Sets the style of the left border | |
Sets the width of the left border | |
Sets all the right border properties in one declaration | |
Sets the color of the right border | |
Sets the style of the right border | |
Sets the width of the right border | |
Sets the style of the four borders | |
Sets all the top border properties in one declaration | |
Sets the color of the top border | |
Sets the style of the top border | |
Sets the width of the top border | |
Sets the width of the four borders |
7、CSS Outlines
An outline is a line that is drawn around elements, outside the border edge, to make the element "stand out".
The outline properties specifies the style, color, and width of an outline.
Property | Description | Values | CSS |
Sets all the outline properties in one declaration | outline-color | 2 | |
Sets the color of an outline | color_name | 2 | |
Sets the style of an outline | none | 2 | |
Sets the width of an outline | thin | 2 |
Note: IE8 supports the outline properties only if a !DOCTYPE is specified.
Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
p {border:1px solid red;}
p.dotted {outline-style:dotted;}
p.dashed {outline-style:dashed;}
p.solid {outline-style:solid;}
p.double {outline-style:double;outline-color:green;outline-width:10px;}
p.groove {outline-style:groove;outline-color:yellow;outline-width:5px;}
p.ridge {outline-style:ridge;}
p.inset {outline-style:inset;}
p.outset {outline-style:outset;}
</style>
</head>
<body>
<p class="dotted">A dotted outline</p>
<p class="dashed">A dashed outline</p>
<p class="solid">A solid outline</p>
<p class="double">A double outline</p>
<p class="groove">A groove outline</p>
<p class="ridge">A ridge outline</p>
<p class="inset">An inset outline</p>
<p class="outset">An outset outline</p>
<b>Note:</b> IE8 supports the outline properties only if a !DOCTYPE is
specified.
</body>
</html>
8、Margin
The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent.
Properties:margin、margin-top、margin-left、margin-right、margin-bottom
The margin property can have from one to four values.
margin:25px 50px 75px 100px;:top margin is 25px,right margin is 50px,bottom margin is 75px,left margin is 100px
margin:25px 50px 75px;:top margin is 25px,right and left margins are 50px,bottom margin is 75px
margin:25px 50px;:top and bottom margins are 25px,right and left margins are 50px
margin:25px;:all four margins are 25px
Value | Description |
auto | The browser sets the margin. |
length | Defines a fixed margin (in pixels, pt, em, etc.) |
% | Defines a margin in % of the containing element |
10、CSS Padding
The CSS padding properties define the space between the element border and the element content.Properties:padding、padding-left、padding-right、padding-top、padding-bottom;
Example:
<style type="text/css">
p{background-color:yellow;}
p.padding{
padding-top:80px;
padding-bottom:77px;
padding-right:50px;
padding-left:50px;}
</style>
</head>
<body>
<p>This is a paragraph with no specified padding.</p>
<p class="padding">This is a paragraph with specified paddings.</p>
</body>
---------------------- android培训、java培训、期待与您交流! ----------------------