CSS attribute list "turn"

This table only lists the commonly used CSS properties, and briefly introduces its main functions. To understand all attributes and specific usage, please refer to the relevant books. Of course, practice is the best improvement.

Property Name Property Function and Its Take Value Usage Description and Example Color with Background Color Set Text Color # RGB # rggbbrGB (255, 255, 255) RGB (100%, 100%, 100%) H1 {Color: RED} H1 {Color: # f00 } H1 {color: # ff0000} h1 {color: RGB (255, 0)} h1 {color: RGB (100%, 0%, 0%)} Background-Color Sets the background color, the format is the same. Body {Background-Color: Red} Body {Background-Color: # f00} Body {Background-Color: # ff0000} body {Background-Color: RGB (255, 0)} Body {Background-Color: RGB (100 %, 0%, 0%)} Background-Image Settings Background Image, URL (ImageUR) Body {Backround-Image: URL (Back.jpg);} Background-Repeat Settings Background Image Repeat: REPEAT-X (x-axis Repeated arrangement); Repeat-Y (Y-axis repeated alignment); no-repeat (no repeated alignment) body {background-repeat: repeat-x;} body {background-repeat: no-repeat;} background-attachment setting background Whether the picture is rolled, the default is rolled. Scroll (Coinches) Fixed Body {Background-Attachment: fixed;} Background-position Settings Background Images or Background Colors Start Displayed Location, Value Format: Top, Buttom, LEFT, Right, Center Keywords) 70px 10px (with length value) 50% 30% (percentage) body {background-position: Right Top;} body {background-position: 50px 10px;} body {background-position: 20% 50%;} Background Defines Background Integrated Properties, not requiring order, and each property value is separated by space. Body {Background: # ffcc00 URL (bg.jpg) Fixed Center} Dictionary class font-family sets the word type attribute, the value can be any type name, the default is a browser, you can set multiple comma (,) Separate, there is a space-free English-style available single quotes or double quotes. P {font-family: Song body, body, black body, "time new rom";} font-style set font styles: Normal, Italic, Objlique (slope) P {font-style: italic;} font- VARIANT Value: Normal (default), Small-Caps (if it is a Chinese pattern, zoom out of the display, if it is English, all changed to a smaller capital) H3 {font-variant: small-caps;} font- Weight Set the font thick, with the value: Normal (default), Bold, Lighter, Border, 100, 200 ... 900 Generally only used Normal and Bold attributes because both browser supports. P {font-weight: bold;} font-size set the size of the font; absolute size: XX-Small, X-Small, Small, MediumLarge, X-Large, XX-Large; Relative Size: Larger, Smaller; Number Representation Available units: pounds (PT), pixels (PX), inch (in), cm (cm); percentage representation.

H2 {font-size: 36pt;} p {font-size: 200%;} font sets the integrated property of the font, the order is as follows: {Font-Style Font-Variant Font-Weight Font-size / Line-Height Font -family;} p {bold 12PT / 14pt impact, arial;} text-class linkTer-spacing Settings text spacing. P {letter-spacing: 5pt;} text-decoration setting text plus underscore, delete line, etc. Word or picture vertical alignment: Baseline: Default Sub: subscript Super: Top: Vertical up alignment Middle: Vertical home Bottom: Vertical is aligned. TEXT-TRANSFORM converts English letters case: None: Default Capitalize: The first letters Uppercase: All English letters lowercase: All English letters lowercase. TEXT-Align Sets the horizontal alignment of text: Left: Left align Right: Right align CENTER: horizontal home Justify: left and right alignment. Text-Indent Settings Marking Elements The first line of text into the element, indent or cooperate with the margin-left attribute set the first line. Line-height sets high, declarative, standard travel, fixed value representation, high percentage, high-grade size ratio line. Listing List-style-type ordered number of ordered lists (by

tag): None: No Number DECIMAL: Arabic Digital Lower-Roman: lowercase Roman Digital Upper-Roman: uppercase Roman Digital Lower-Alpha: lowercase English Letters Upper-alpha: capital English letters. List-style-type symbolic list (for
): None: No Symbol DISC: Heart Circular Symbol Circle: Hollow Round Symbol Square: Heart Square Symbol. List-style-image unordered list of custom symbols: Format: URL (Image Name) ul {list-style-imag: URL (DD.GIF);} List-style-position setting list list symbol shrinkage properties: Outside: Rolling UL {List-Style-IMAG: URL (DD.GIF); List-style-position: Outside;} List-style list list of comprehensive settings, with spaces between properties . UL {list-style-imag: URL (DD.GIF) Inside;} The boundary of the boundary value of the dominant boundary value is the integrated setting of the boundary value of the MARGIN mark. (The rules see the right example) can also open the boundaries of each side by margin-top, margin-right, margin-bottom, margin-left. Declare 4 values, the order is upper, right, lower, left boundary, such as: div {margin: 12pt 15pt 20pt 16pt;} Declaration 3 values, the order is on, right, under, missing left boundary Side (right), such as: Div {margin: 12pt 15pt 16pt;} Declaration 2 values, the order is upper, right, missing, left boundary to take the side, such as: DIV {margin: 12pt 15pt;} declaration 1 value, the four boundaries are the same value, such as: div {margin: 15pt;} Padding Setting the comprehensive setting of the tag content and the marker border (the rule see the specification of the margin property).

Padding-top, padding-right, padding-bottom values ​​can also be set separately. A comprehensive setting of the Border-Width tag element border width (rule is similar to the Margin property). Border-top-width, Border-Bottom-Width, Border-LEFT-WIDTH values ​​can also be set separately. Border-Color Tag Element Border Color Comprehensive Settings (Rules Similar to Margin Attributes). The color is valued in the color property. It is also possible to set the value of Border-Top-Color, Border-Right-Color, Border-Bottom-Color, Border-Left-Color. A comprehensive setting of the Border-style tag element border pattern (the rule is similar to the margin property). Border patterns include Solid, Double, Goove, Ridge, INSET, OUTSET, etc. It is also possible to set the value of Border-Top-Style, Border-Right-Style, Border-Bottom-Style, Border-LEFT-STYLE. The Border tag element 4 borders can be declared separately, border width, border pattern, and border color, respectively. Div {border: 5pt solid # ff0000;} width Set the width of the tag element. Height setting the height of the tag element. Float sets the relative position between the tag element and the text (text winding method). Value: None: Show by default; Left: Tagged elements to left, text: Right: Tag elements on the right, text on the left wind row; Clear Set the relative position of the tag element and the relative position (with float) Different is that the moral elements are not winding on both sides). Value: None: Displayed by default; LEFT: Mark the elements against the left, right side without writing; Right: Tag elements right, no text winding row on the left; other class Z-Index setting the stack of tag elements, take The value is integer, or it can be a negative number, the value is large in the upper layer. Visibility settings the tag elements are visible, with: inherit: Make the default value Visible: Visible Hidden: Inaso (hidden) This table only lists the common CSS attributes, and briefly introduces its main features, to learn all properties For specific usage, please refer to the relevant books. Of course, practice is the best improvement.