Css common attributes (background, font, div boxes, etc.)

Css common attributes (background, font, div boxes, etc.)

1. Background

1. Background Color: Color-background
2. as the background image: background-image: url () ;
3. Set whether the image tile: background-repeat: no-repeat or repeat-x or Y-REPEAT
4. Settings whether the background image with the scroll bar to move together: background-attachment: fixed; fixed.
inherit: the provisions should set the background-attachment property inherited from the parent element. The default attribute the Scroll
5. background: background color background picture tiled

background-color:red;
background-image:url(../img/logo.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background:#c9c9dd url(../img/logo.gif) no-repeat;

2. Fonts

1. Is italic: font-style: normal (default value); italic or oblique tilt of the display font; inherit provisions should inherit the font style from the parent element.
2. Bold: font-weight: normal (default value); Bold bold characters defined; Bolder thicker defined character; finer Lighter defined characters.
3. size: font-size
4. High Line: Line-height
5. The Font: font-family

font-style:italic;
font-weight:bold;
font-size:16px;
line-height:26px;
font-family:sans-serif;

3. box model

1. Width width: length | percentage | Auto;
2. Height height: length | percentage | auto;
3. 清除 clear: none | left | right | both;
4. Boundary margin: on the right lower left;
5. Filling padding: on the right lower left;
6. Positioning position: absolute (absolute positioning) | relative (relative positioning) | static (default value);
7. Transparency visibility: inherit (should inherit the visibility attribute value from the parent element) | visible (default value) | hidden (not visible elements);
8. Overflow overflow: visible (default value) | hidden (content will be trimmed) | scrol (content will be trimmed) l auto (if the contents are trimmed, the browser will display the scroll bar to view the rest of the content.);
9. Cutting clip: rect (12px, auto, 12px, auto).

4.position

1. fixed: generally used to write the fixed top of the page navigation bar, menu or both sides.

<!--对于块级标签来说加上position:fixed之后，该div就不会占一整行，一般需要手动定义宽度，如width:100%-->
 
<div style="position:fixed;height:10%;background-color:lightskyblue;color:white;width:100%;top:0px;">我是导航</div>
<div style="">
    <div style="position:fixed;bottom: 0px;top:10%;float: left;width: 20%;background-color:indianred">我是菜单</div>
    <div style="float: right;width:80%;"><p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
    </div>
</div>

2. Both absolute and relative typically used in conjunction with the adjustment of the relative position between the div

<div style="position:relative;width: 300px;height: 150px;">
    <div style="position:absolute;float: left;width: 20%;background-color:indianred;bottom: 0px;right: 0px;">我是菜单</div>
</div>

5.css border

1. border-radius to create a rounded borders
2. to add a shadow box-shadow rectangular
3. border-image use images to draw the border

The following is added rounded corners to a div element

div
{
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Old Firefox */
}

The following is a shadow box to add div elements:

div
{
box-shadow: 10px 10px 5px #888888;
}