CSS + DIV usage summary, cssdiv

CSS + DIV usage summary, cssdiv
(Original link: http://blog.csdn.net/clementad/article/details/46953787)
CCS = Cascading Style Sheets
Line style table (not recommended ):<P style = ""> </p>
Internal style sheet (not recommended ):<Style type = "text/css"> p {color: # F00 ;}...... </Style>
External Style Sheets (usually under the title of the head ):<Link href = "style.css" rel = "stylesheet" type = "text/css"/>
CSS writing structure:<Selector >{< attribute >:< attribute value ><< unit> ;......} For example, p {color: # F00; font-size: 12px ;}
Basic Type selector:

• Tag selector: the label written in <>, for example, p {}. Select all the content of this label. Supports custom tags.
• Class selector: starts with ".", for example,. 30 font {}, which indicates selecting all elements of class as "30font.
• Id selector: starts.

Compound Type selector:

• Pseudo class selector: separated by ":", for example, for <a>, "a: link", "a: hover", and "a: active" (press the mouse), "a: visited"; or ". myClass: hover"
• Group selector: Separate them with commas (,) and select several elements, such as a, p, h3"
• Tag specifying selector: for example, p. aa indicates the p tag of class = "aa", p # aa indicates the p tag of id = "aa"
• Contains selector: separated by spaces, indicating B in A. For example, "# top a" indicates <a> label in id = "top ".
• Sibling adjacent selector: separated by "+". For example, "h1 + p" indicates the <p> tag adjacent to
• Property selector: separated by "[]". For example, "p [align]" indicates the <p> tag with the align attribute.
• Wildcard selector: "*", indicating to select all elements

Font and text attributes:

• Font-family: font name
• Font-size: font size, in pixels
• Font-weight: bold. Bold, bolder, lighter, 100,200,... 900 (100,200 ...)
• Font-style: font style. Normal, italic, and oblique (also italic, only valid for some special fonts)
• Font-variant: converts uppercase letters to uppercase letters. Normal: normal font, small-caps: small uppercase letter font
• Line-hight: Row Height
• Text-transform: capitalize: uppercase letters, uppercase: all uppercase letters, lowercase: All lowercase letters, none: UNCHANGED
• Text-decoration: text modifier. Underline, overline, line-through, blink, none, can be multiple, separated by Spaces
• Color: color
• Text-indet: indent of the first line (unit required)
• Text-align: text align, left, right, center, and justify)
• Letter-spacing: Word interval (in px)

Background attributes:

• Background-color: background color
• Background-image: background image (with priority over background color)
• Background-repeat: Specifies whether to tile the background image. Repeat (default), no-repeat, repeat-x, repeat-y (horizontal and vertical tile)
• Background-attachment: whether to move with the scroll bar. Fixed: no movement, scroll: Move (default)
• Background-position: Specifies the relative position of the origin coordinate (x, y) in the upper left corner of the background image, or right, left, top, bottom, center.

The background attributes can be co-written. attribute values are listed and 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 image by x or y axis (horizontal or vertical ).
Priority sorting: Default <label <class <ID
Box Model (or box model ):

• Inline object, display by row: display: inline, determined by line-hight Row Height. Such as <p> and <a>.
• Block object. display by block: display: block. The width and height are determined by width and height. The default value is one row. For example, <div>

• After the inline object is converted to a block object, the width and height attributes can be used: a {display: block; width = 10px; height: 20px ;}

• Padding: padding (top, bottom, left, right)
• Margin: margin (top, bottom, left, right)
• Border: border (top, bottom, left, right)
• Width: the width of the content.
• Height: Content height

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: width (unit: px)
• Color: color

It can be abbreviated to border: solid 1px # FFF. Separate an edge:

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

(Note: The preceding content will be overwritten later)
Settings of margin and padding:

• Margin: 1px (upper, lower, and lower)
• Margin: 1px 2px 3px 4px; (upper right bottom left)
• Margin: 1px 2px; (up and down)
• Margin: 1px 2px 3px; (upper left and lower right)

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

• Float to the upper layer of a normal stream
• Float: left. float backward to left until the left side touches the boundary or the right boundary of the same layer element.
• Float: right, float to the right until the border is reached on the right or the left border of the element on the same layer is reached.

Clear ):

• Make the floating layer continue to retain the placeholder in the normal stream
• Clear: both, left, right, applied to normal streams, so that the normal stream determines its position based on the placeholder situation of the previous layer.

Generally, a clear div can be directly added to the floating layer and the general stream to separate the layout, for example: <div class = "clear"> </div> <style type = "text/css">. clear {clear: both ;}</style>
Horizontal center of blocks:

1. About margin: auto (for example, margin: 0px auto ;)
2. The block must have a specific width value (width)

Note: The body contains 8 PX margin by default. The cancellation method is body {margin: 0px ;} Vertical center of blocks (rarely used ):

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

Text center in the block:

1. Horizontal center: text-align: center
2. Vertical center: Row height = box height, for example, height: 200px; line-height: 200px (a row is filled with the entire div)

Ul list:

• Padding and margin are available by default. The method for canceling the operation is ul {padding: 0px; margin: 0px ;}
• List-style: list style (none ,)
• List-style-image: url (images/a.jpg );
• Horizontal layout: li {float: left}
• Set the split line: li {background: url (images/1.png) no-repeat bottom center ;}

Position (using the position attribute ):

• Static: Default Positioning method. It is displayed by row or block.
• Relative: relative positioning, element offset a certain distance (use top, right, bottom, left to locate relative to the original location, the original space placeholder will not be released)
• Absolute: the element is completely deleted from the document stream (similar to float) and located relative to its parent box (using top, right, bottom, left ). For example: # aaa {position: absolute; top: 100px; left: 50px ;}
• Fixed: similar to absolute, the difference is that it is located at a distance from the browser window. (It Can Be Used for floating advertisements)

NOTE: If they overlap, you can use the z-index attribute to determine who is on the top and the value is greater.
Size:

• Fixed value: for example, width: 100px;
• Default Value: No
• Percentage: the percentage of the parent box, for example, width: 80%;
• Min-height, min-width: Minimum height and width of the element
• Max-height, max-width: the maximum height and width of an element.

Handling of content exceeding the parent box:

• Overflow: hidden: the excess content is cut
• Overflow: scroll: Always displays the scroll bar
• Overflow: auto: the scroll bar is displayed when the content is cut (the default value of body and textarea is auto)
• Overflow-x: hidden: Disable horizontal scroll bars
• Overflow-y: scroll: Always displays the vertical scroll bar

Note: If the parent box does not set the height, the parent box will be held high until it reaches the max-height.
Browser scroll bar settings:For example: html {scrollbar-base-color: # F00;} Note: It seems to be only valid for IE.


Photoshop cropping process:

1. Reference Line
2. Use slicing tools
3. Clear background to make the image transparent
4. Stored in the web format...
5. Save: Slice: all user slice
6. Save
7. Rename

Original article, reprinted please note