Concise CSS2.1 reference manual and HTML default style __html

Source: Internet
Author: User
Tags border color lowercase
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}

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.