Summary of CSS + DIV usage methods

(Original link: http://blog.csdn.net/clementad/article/details/46953787)
CCS = cascading Style Sheets
inline style sheets (not recommended):<p style= "" ></p>
internal style sheet (not recommended):<style type= "Text/css" > P{color: #F00;} ......</style>
external style sheet (usually below the title of head):<link href= "Style.css" rel= "stylesheet" type= "Text/css"/>
CSS Writing structure:< selector >{< properties: < property values >< units >; ......}    such as: p {color: #F00; font-size:12px;}
Basic Type selector:

• Tag Selector: Tags written in <>, such as: p{}. Select all of the contents of this label. Supports custom labels.
• Class selector: with "." The beginning, such as:. 30font{}, indicates that all elements of the class "30font" are selected.
• ID selector: Starts with "#".

Composite Type selector:

• Pseudo-class selectors: separated by ":", such as "A:link", "A:hover", "a:active" (Mouse Down), "a:visited", or ". Myclass:hover" for <a>
• Group selector: Separate with "," and select several elements, such as: "A,p,h3"
• The label specifies the selector: if P.AA represents the P-label for class= "AA", P#AA represents the P-label for id= "AA"
• Include selector: separated by a space, indicating b in a, such as "#top a" means the <a> tag in id= "Top"
• Sibling adjacent selector: separated by "+", such as "H1+p" for the <p> tag adjacent to
• Property selector: Separated by "[]", such as "p[align]" for <p> tags with align properties
• Wildcard selector: "*", indicating that all elements are selected

font and Text properties:

• Font-family: Font Name
• Font-size: Font size, required with unit px
• Font-weight: Bold. Bold,bolder, lighter, 100, 200, ... 900 (= 100, 200 ...)
• Font-style: Font style. Normal, italic, oblique (also italic, only valid for some special fonts)
• Font-variant: Converts the English letter to uppercase. Normal: Regular font, small-caps: small uppercase font
• Line-hight: Row Height
• Text-transform:capitalize: initial capitalization, uppercase: All uppercase, lowercase: all lowercase, none: Unchanged
• Text-decoration: Text decoration. Underline,overline, Line-through, Blink, none, can be multiple, separated by a space
• Color: Colors
• Text-indet: First line indent (with units required)
• Text-align: Text alignment, left, right, center, justify (justify)
• Letter-spacing: Word interval (with unit px required)

Background Properties:

• Background-color: Background color
• Background-image: Background image (precedence over background color)
• Background-repeat: Whether to tile the background picture. Repeat (default), No-repeat, Repeat-x, repeat-y (horizontal, vertical tiling)
• Background-attachment: Whether to follow the scroll bar movement. Fixed: Do not move, scroll: Move (default)
• Background-position: Background positioning, relative displacement of the origin coordinates (x, y) of the upper left corner of the background image, or right, left,top, bottom, center

Background properties can be written together, the attribute values are listed, separated by spaces, such as: body{background: #F00 URL (images/bg.jpg) no-repeat fixed 50px 100px;} Background tile: Repeat-x or repeat-y, tile the picture by the X or Y axis (horizontal or vertical)
Priority Sorting: Default < Tags < class < ID
box model (or box model):

• inline objects, displayed by row: Display:inline, determined by the line-hight row height. such as <p>, <a>, etc.
• Block objects, shown by block: display:block, Width and height determine width and height, default is one row. such as <div>

• After the inline object is converted to a block object, you can use the width and Height properties: a{display:block; width=10px; height:20px;}

• padding: Inner padding (top, bottom, left, right)
• Margin: Margin (top, bottom, left, right)
• Border: Border (top, bottom, left, right)
• Width: breadth of content
• Height: How high the content is

Note: When two elements are arranged up and down, the margin between them is automatically merged (neither float nor absolute positioning)
Border Attributes (top, bottom, left, right):

• Style: Line style (dotted, solid, double, etc.)
• Width: thickness (per px)
• Color: Colors

Can be abbreviated: border:solid 1px #FFF; set an edge individually:

• Border-bottom:solid 2px #00F;
• border-bottom-width:2px;

(Note: The front will be overwritten later)
settings for margin and padding:

• MARGIN:1PX (up or down)
• margin:1px 2px 3px 4px; (upper right lower left)
• MARGIN:1PX 2px; (Up or down)
• margin:1px 2px 3px; (top left and right)

(Note: The setting method of padding is the same as margin)
Float (float):

• Float to the upper layer of a normal stream
• Float:left, floating and left until the left side touches the boundary or touches the right edge of the same layer element
• Float:right, floats to the right until the right side touches the boundary or touches the left edge of the same layer element

Cleanup (Clear):

• Keep the floating layer in the normal stream reserved placeholder
• Clear:both, left, right, applied to the normal flow, making the normal flow determine its position based on the upper level of the placeholder

You can generally separate the layout by adding a clear div directly to the floating layer and the normal stream, such as: <div class= "clear" ></div><style type= "Text/css" >. Clear{clear: both;} </style>
The block is centered horizontally:

1. Margin: Auto (for example: margin:0px auto;)
2. Block to have a specific width value (width)

Note: Body default has a margin of 8px, cancellation method: body{margin:0px;} block vertically centered (less):

1. width:500px; height:200px; Position:absolute; top:50%; left:50%; margin-top:-100px; margin-left:-250px;

Center text in block:

1. Horizontal Center: Text-align:center
2. Vertical center: Row height = box height, such as: height:200px; line-height:200px (line up full div)

UL list:

• The default is padding and margin, the method of cancellation: ul{padding:0px; margin:0px;}
• List-style: The style of the list (none,)
• List-style-image:url (images/a.jpg);
• Horizontal: Li{float:left}
• Set Split line: li{ background:url (images/1.png) No-repeat Bottom Center; } 

positioning (via Position property):

• Static: The default positioning method, displayed by row, by block.
• Relative: relative positioning, element offset a distance (using top, right, bottom, left position relative to the original position, the original space placeholder will not be released)
• Absolute: The element is completely removed from the document stream (similar to float) and is positioned relative to its parent box (using top, right, bottom, left positioning). such as: #aaa {position:absolute; top:100px; left:50px;}
• Fixed: Similar to absolute, the difference is the distance between the location and the browser window. (can be used to make floating ads)

Note: If you overlap, you can use the Z-index property to determine who is on top and the value is large.
Size:

• Fixed value: such as width:100px;
• Default value: Not filled
• Percent: Percentage of the parent box, such as width:80%;
• Min-height, Min-width: Minimum height, width of element
• Max-height, Max-width: Maximum height, width of element

the content exceeds the processing of the parent box:

• Overflow:hidden: The contents of the overrun are clipped
• Overflow:scroll: Always show scroll bars
• Overflow:auto: Displays scroll bars when content is clipped (default value for body and textarea is auto)
• Overflow-x:hidden: Prohibit horizontal scroll bar
• Overflow-y:scroll: Always show vertical scroll bar

Note: If the parent box does not set height, the parent box is propped up until max-height is reached.
Browser scroll bar settings:such as: html{Scrollbar-base-color: #F00; } Note: It seems to be only valid for IE.


Photoshop Cut-chart process:

1. Using guide lines
2. Using the Slice tool
3. Cancel the background to make the picture transparent
4. Store the format used for the web ...
5. Save: Slices: All user slices
6. Save
7. Renaming

original articles, reproduced please indicate the CSDN Blog transferred from Clement-xu. )

Copyright NOTICE: This article is the original article, reprint please indicate the CSDN blog which is transferred from Clement-xu.

Summary of CSS + DIV usage methods