Brother Jin found that many of the articles are very classic, so can not help to turn two more, as a note.
Concise CSS2.1 Reference manual
Author: Jin Bu
Copyright Notice
The writer is a free software enthusiast, so this article, though not software, is published in the spirit of the GPL. Any person may freely use, reproduce, reproduce and redistribute, but must retain the author's signature, and shall not make any modification to any of the terms in the declaration, nor shall he attach any other conditions. You are free to link, download, and disseminate this document, provided that the full text is reproduced, including complete copyright information and translator's statement. Other works
The author of this article is very willing to share the fruits of labor with others, if you are interested in my other translation works or technical articles, you can view the list of existing works in the following locations: Jin Bu work list bug report, discuss and explore
Because of the limited level of the author, it is not guaranteed that the content of the work is accurate, please identify yourself in the reading. If you find mistakes in your work, please write to me, even if it is a typo, any suggestion to improve the quality of the work will be accepted humbly. If you are willing to work on the relevant content with me to further explore and discuss, you are also welcome to contact me. Contact Way: msn:csfrank122@hotmail.comways to import style sheets (demo)<style type= "Text/css" media= "All" title= "styles applied to all media" >
@import URL (/style/css/global.css); /* Global Style * *
@import URL (/style/css/skyblue.css); /* Personalized Style * *
Body {background:url (img/body_bg.gif);}/* Document-level style * *
</style> the current browser-supported device types are only: all, print (printer), screen (computer monitor) must be in the external style file with the form @charset "gb2312"; At rule to specify the character set that it uses. @import must be placed before a regular style, whether in <style> or in an external style sheet.TerminologyReplaces elements that are outside the scope of the CSS formatter. IMG, input, textarea, select, object are alternate elements in HTML. All replacement elements have an intrinsic dimension only if they have replacement elements. Block-level elements are visually formatted as blocks of elements. Elements with floating elements and display properties equal to block or List-item are blocks-level elements. Inline elements do not form elements of new content blocks. The display property equals inline elements are inline elements. Positioned element position property is not equal to static element.Selection CharacterSimple selector [e|*][# ID] (. Class) *[: link][: visited][: hover][: Active] pseudo element s[: first-letter][: first-line] nesting S1 S2 ... O group A1, A2, ... An symbol meaning: E (Element), S (simple selector), O (simple selector | pseudo element), A (simple selector | pseudo Element | nested) vertical bar "|" Representation or relationship, the square brackets [] is optional, and parentheses "()" is used for regular grouping. All identifiers (element names, classes, IDS) cannot begin with a number, hyphen, or underscore, but you can use Chinese characters. Pseudo classes are available only for hyperlinks. Pseudo elements are available only for block elements. The nesting order can be mixed with other elements. Attributes that are allowed for pseudo elements are only: Font properties, Text properties, foreground background properties. In addition, the first word is also available: Box model properties and FLOAT attributes Cascade weights:!important > ID > (Pseudo) class > (pseudo) Element > *the data type of the property value Length absolute length in mm or pt units (1 pt=0.353 mm). Pixel lengths are measured in px (96dpi) and can take only integer values. The relative length is in EM (equal to the current font-size computed), and the computed value is used when inheriting. Percentages use nn%, which is relative to the value of another value, using computed values when inheriting. URLs are represented by URLs (URLs), which must be encoded with "%XX" (parentheses/commas/quotes, etc.), relative to the URL of the style sheet. The color is represented by #rrggbb or #rgb hexadecimal notation, the value is based on the sRGB color space, and the gamma value is 2.2. Font list comma-separated font name precedence list (order: English → Chinese → series), the font name contains spaces must be defined in quotation marks. Secure English serif (with serif) series fonts: Georgia "Palatino Linotype" "Times New Roman" safe English Sans-serif (sans Serif) series fonts: Arial Taho Ma "trebuchet MS" Verdana security English monospace (equal width) series fonts: "Courier New" "Lucida Console" security English cursive (analog handwriting) series fonts : "Comic Sans MS" Safe Chinese font: XXFarEastFont-Arial imitation _gb2312 blackbody Italics _gb2312 border Style enumeration value: None (default) | Dotted | Dashed | Solid | Double | Groove | Inset | Outset built-in list item icon enumeration value: Disc (solid circle) | Circle (Hollow Circle) | Square (square) | Decimal (Digital) | Lower-roman (lowercase roman numerals) | Upper-roman (capital Roman numerals) | Lower-alpha (Small Letter) | Upper-alpha (capital Letter) | None (none) pointer Style enumeration value: auto| crosshair| Default| pointer| move| Wait| help| progress| Not-allowed
[note] For shorthand properties, the unspecified part is considered to have specified a default value. Font Properties
| Font shorthand |
Font:font-style font-weight font-size font-family |
| Inherited |
Applicable: All elements |
| Font italic |
Font-style:normal|italic |
| Inherited |
Applicable: All elements |
| Font weight |
Font-weight:normal|bold |
| Inherited |
Applicable: All elements |
| Font size |
Font-size: Length |
| Inherited |
Applicable: All elements |
| Font family |
Font-family: Font list |
| Inherited |
Applicable: All elements |
Text Properties
| Text underline |
text-decoration:none| (Underline‖overline‖line-through) |
| Non-inherited |
Applicable: All elements |
| Character Spacing |
letter-spacing:normal| length |
| Inherited |
Applicable: All elements |
| Case conversion |
Text-transform:none|capitalize|uppercase|lowercase |
| Inherited |
Applicable: All elements |
| First Line Indent |
text-indent:0| length |
| Inherited |
Apply: block element/table cell/inline block |
| Row height |
Line-height:normal| Scaling Factor | length | percent |
| Inherited |
Applicable: All elements |
| The scaling factor is inherited by the specified value |
| Percent: Font-size property value relative to itself |
| Row height = text height + top and bottom blank; Normal is about the same as the 1.1~1.2 scaling factor. |
| Horizontal alignment |
Text-align:left|right|center |
| Inherited |
Apply: block element/table cell/inline block |
| Vertical alignment |
Vertical-align:baseline|sub|super|top|text-top|middle|bottom|text-bottom| Length | percent |
| Non-inherited |
Apply: inline elements/table cells |
| Percent: Line-height property value relative to itself |
| The length and percentage represent the offset of the current element's baseline relative to the parent element's baseline (negative at the top, and the bottom line with no baseline). |
foreground and Background properties
Foreground: Content + border. Background: Background image + back color. Background area: Content + filler + border. Transparency: Filler/border voids/boundaries.
| Foreground color |
Color: Colors |
| Inherited |
Applicable: All elements |
| The HR element does not perform inheritance by default. The table and picture borders do not inherit because of IE errors. |
| Background shorthand |
Background: (transparent| color) (none| URL)? (0% 0%| (length |%) {2})? (repeat|repeat-x|repeat-y|no-repeat)? (scroll|fixed)? |
| Non-inherited |
Applicable: All elements |
| Shorthand meaning: Background color background image background Chart position background Tuping background map scrolling |
| Percentage: Relative to the contents of the box and the size of the filler area, align the background image with the same offset point of the background area. |
List Properties
| List Item Style |
List-style: Built-in list item icon (none| URL) (Outside|inside) |
| Inherited |
Applicable: List Item elements |
| Shorthand meaning: Built-in list item icon custom list item icon location |
Table Properties
| Table layout algorithm |
Table-layout:auto|fixed |
| Non-inherited |
Applicable: Table element |
| Cell Border Model |
Border-collapse:separate|collapse |
| Inherited |
Applicable: Table elements |
Pointer Properties
| Pointer style |
Cursor: pointer style |
| Inherited |
Applicable: All elements |
Box Model PropertiesFrom inside to outside the level: Content → filler → border → boundary from top to bottom level: Border → content + filler → background map → background color → border
| Content Width | height |
width|height:auto| Length | percent |
| Non-inherited |
Apply: block element/replacement element |
| Percent: Width|height property value relative to the containing box |
| The height of the inline box has nothing to do with the Height property |
| Filler width |
padding:0| (Length |%) {1,4} |
| Non-inherited |
Apply: Display is not equal to table-* all elements |
| Percent: Width property value relative to the containing box |
| Boundary width |
margin:0| (length |% |auto) {1,4} |
| Non-inherited |
Apply: Display is not equal to table-* all elements |
| Percent: Width property value relative to the containing box |
| The upper and lower boundary widths are not valid for the non-replacement inline element. Setting the left and right edges to auto is the correct way to center a block element. |
| Border shorthand |
Border|border-top|border-bottom|border-left|border-right: Border Style length (color |transparent)? |
| Non-inherited |
Applicable: All elements |
| Shorthand meaning: Border style border width border color |
| When the border style style is none, the border width is automatically forced to zero. |
border overlap
Boundary overlap refers to two or more boxes (which may or may not be nested) adjacent boundaries (in which no non-empty content, fillers, borders) coincide together to form a single boundary.
Vertical contiguous boundaries of two or more block-level boxes in a regular stream coincide. The boundary width of the result is the largest value in the adjacent boundary width. If a negative boundary is present, the maximum negative boundary of the absolute value is subtracted from the maximum positive boundary. If there is no positive boundary, subtract the absolute maximum negative boundary from zero. Note: Adjacent boxes may not be generated by a parent-child relationship or a sibling element.
But there are exceptions to the overlap: horizontal boundaries never overlap. Floating boxes, absolute positioning boxes, inline block boxes, and the boundaries of the root box never overlap. The overflow property is not equal to the boundary between the visible element and its non floating child elements. Display Properties
| Display Type |
Display:inline|block|list-item|table-header-group|table-footer-group|none |
| Non-inherited |
Applicable: All elements |
| Visibility of |
Visibility:visible|hidden |
| Inherited |
Applicable: All elements |
| Overflow mode |
Overflow:visible|hidden|scroll|auto |
| Non-inherited |
Non-replacement block element/table cell/inline block |
positioning and Layout Properties
| Positioning mode |
Position:static|relative|absolute |
| Non-inherited |
Applicable: All elements |
| Boundary offset |
Top|bottom|left|right: Length | percent |auto |
| Non-inherited |
Applicable: Positioned elements |
| Percent: Vertical | Horizontal relative to the Height|width property value of the containing box |
| The absolute positioning offset is relative to the original position relative to the content edge of the positioned box at the previous level. |
| Floating |
Float:none|left|right |
| Non-inherited |
Applicable: All elements |
| The floating box must have an explicit width (specified by the Width property, or with an inherent width for the replacement element), and any floating box becomes a block box. |
| Avoidance floating |
Clear:none|left|right|both |
| Non-inherited |
Apply: Block Element |
| Z-Axis Order |
z-index:auto| integer |
| Non-inherited |
Applicable: Positioned elements |
The interrelationship between display, position, and float:If display equals none, the client must ignore position and float. In this case, the element does not produce a box. Otherwise, if position equals absolute, both display and float are coerced to none (List-item remains unchanged). The position of the box is determined by the boundary offset. Otherwise, if float is not equal to none or the element is the root element, display is forced to block (List-item remains unchanged). Otherwise, the specified display property is used.
HTML Default Style
Html,body,div, H1,h2,h3,h4,h5,h6,p, OL,UL,DL,DT,DD,
Frame,frameset,form,fieldset, Blockquote,address,hr,pre {display:block}
Button,textarea,input,select {Display:inline-block}
Li {Display:list-item}
Head {Display:none}
Table {display:table}
Caption {display:table-caption}
thead {Display:table-header-group}
tbody {Display:table-row-group}
tfoot {Display:table-footer-group}
TR {Display:table-row}
Col {Display:table-column}
Colgroup {Display:table-column-group}
td,th {Display:table-cell}
Caption {Text-align:center}
th {font-weight:bolder; Text-align:center}
Body {margin:8px}
blockquote {margin-left:40px; margin-right:40px}
H4,P,BLOCKQUOTE,UL,FIELDSET,FORM,OL,DL {margin:1.12em 0}
h1 {font-size:2em; Margin:0.67em 0}
h2 {font-size:1.5em; Margin:0.75em 0}
h3 {Font-size:1.17em; Margin:0.83em 0}
h5 {font-size:0.83em; Margin:1.5em 0}
h6 {font-size:0.75em; Margin:1.67em 0}
Pre {White-space:pre}
H1,h2,h3,h4,h5,h6,strong {Font-weight:bolder}
cite,em,var,address {Font-style:italic}
Pre,code,kbd,samp {Font-family:monospace}
Sub,sup {font-size:. 83em}
Sub {vertical-align:sub}
sup {Vertical-align:super}
Table {border-spacing:2px;}
Thead,tbody,tfoot {Vertical-align:middle}
TD, Th {Vertical-align:inherit}
del {Text-decoration:line-through}
INS {Text-decoration:underline}
HR {border:1px inset}
OL, UL, DD {margin-left:40px}
OL {List-style-type:decimal}
OL UL, ul OL, UL UL, ol ol {margin-top:0; margin-bottom:0}
: Link,: visited {text-decoration:underline}
Br:before {content: "/A"}
: Before,: after {white-space:pre-line}
: Focus {Outline:thin dotted invert}
