CSS common style properties detailed description

For beginners of CSS, will certainly feel so many styles are not good to remember, but also remember that it is easy to forget, in fact, just at the beginning we do not have to remember so many of the style, it is really remember also will forget, just start to remember some commonly used on it, and then in the process of slowly using to contact and learn some advanced points This is a reliable step-by-step process, the following list some CSS Common properties, for reference only

There are 8 items in the Type property:
1, "Font" (font-family), when set, you need to consider the browser is not the font.
2, "Size" (font-size), note the unit of measure.
3, "thickness" (font-weight), in addition to normal (normal), bold (bold), bolder (extra thick), lighter (fine), there are 9 units in pixels as a measure of the setting.
4, "style" (Font-style), that is, the font.
5, "Row High" (Line-height), is the line spacing. Note that line spacing can only be a font size value of
6, "deformation" (font-variant), the normal text can be half-size after capital display, but IE currently does not support this property.
7, "Case" (text-transform), this property can easily control the letter case, with the first word capitalization (capitalize, uppercase (uppercase), lowercase (lowercase) and none (none, so that all inherited text and deformation parameters are ignored, Text will be displayed in normal form) and so on 4 kinds.
8, "modifier" (text-decoration), used to control the display pattern of the link text, there is an underscore (underline), no underscore (overline), Strikethrough (Line-through), flashing (Blink) and none (None, So that none of the above effects will occur) and so on 5 kinds of decoration methods. However, IE4 does not support text flicker.


There are 6 items in the Background property:
1, "Background color" (background-color), set the background color.
2, "Background image" (Background-image), set the page background image.
3, "repeat" (background-repeat), control the background image of the flat way, there is no repetition (no-repeat), repetition (repeat, horizontal, vertical tile), transverse repetition (repeat-x, The image is tiled horizontally) and is repeated vertically (repeat-y, tiled vertically along the image), among other 4 choices.
4, "Attach" (background-attachment), to control whether the background image will scroll along with the page scrolling. There are two choices of fixed (fixd, text scrolling, background image shelf fixed) and scrolling (scroll, background image scrolling with text content).
5, "Horizontal position" (background-position), determine the level of the background image. A total of left, right, top (top), bottom (bottom), center (center), and value (the start position of the custom background image to give the user more precise control over the position of the background image)
6, "vertical position" (background-position), determines the vertical position of the background image. A total of left, right, top (top), bottom (bottom), center (center), and value (the start position of the custom background image to give the user more precise control over the position of the background image)

There are 6 items in the "chunk" attribute:
1, "Word spacing" (word-spacing), mainly used to control the distance between the text. There are two choices of normal (normal) and value (custom interval values). When you select a value, the available units are in inches (in), centimeters (cm), millimeters (mm), Points (PT), 12pt (PC), font height (em), and font x have high (ex) pixels (px).
2, "Letter spacing" (letter-spacing), its effect is similar to the character spacing, also has the normal (normal) and the value (custom interval value) Two kinds of choice way.
3, "Vertical alignment" (vertical-align), controls the vertical position of the text or image relative to its parent element. If you align a 2x3 pixel GIF image vertically with the top of its parent element text, the GIF image will appear at the top of the line text. A common baseline (baseline, which aligns the baseline of the element with the base line of the parent element), subscript (sub, displays the element as the subscript), superscript (super, displays the element above the elements), top (top, aligns the top of the element with the highest parent element), Top text alignment (Text-top, aligns the top of the element to the top of the parent element text), centerline alignment (middle, aligns the midpoint of the element to the midpoint of the parent element), the bottom (bottom, aligns the bottom of the element with the lowest parent element), and the value (custom) 9 choices.
4, "Text alignment" (text-align), sets the horizontal alignment of the block. There are 4 options, such as left, right, center, and evenly (justify).
5, "Text indent" (text-indent), control the extent of the block indentation.
6, "white space" (white-space), in HTML, the space is omitted, in the CSS, the use of attributes (White-space) control the input of the space. There are 3 options, such as normal, reserved (pre), and non-newline (nowrap).


There are 6 items in the Box property:
1, "Wide" (width), determine the width of the box itself, you can make the width of the box does not depend on what it contains.
2, "High" (height), determine the height of the box itself.
3. Float to set the floating effect of the block element.
4, clear to clear the floating effect of the setting.
5, margin (margin), controls the size of the margin around the border. It contains 4 properties: Margin-top controls the width of the top margin, margin-right controls the width of the right margin, margin-bottom controls the width of the bottom margin, and margin-left controls the width of the left margin.
6, "Boundary" (padding), determines the number of spaces around the block element, which contains 4 properties "Padding-top control the width of white, padding-right control the width of the right left white, Padding-bottom control left white width, Padding-left controls the width of left white.

The properties of the border have 3 items:
1, "Wide" (border-width), control the width of the border, which is divided into 4 properties: Border-top-width The width of the top border, the width of the border-right-width right box, the width of the border-bottom-width bottom border , border-left-width the width of the left border.
2, "Color" (Border-color), set the color of each border. To display a different color for the sides of the border, you can list them separately in the settings. For example, p{: #ff0000 #009900 #0000ff #55cc00}, the browser understands four colors in turn: The top, right, bottom, and left borders (clockwise from the beginning).
3, "style" (Border-style), set the style of the border, there is no (none), dashed (dotted), dotted line (dotted), dash (dashed), solid line (solid), double line (double), Groove (Grove), There are 9 kinds of ridges (ridge), depressions (inset) and convex (outset).


There are 3 items in the List property:
1, "type" (List-style-type), determines the symbol used before each item in the list, a total of dots (disc), Circle (Circle), Square (square), Number (decimal), lowercase roman numerals (Lower-roman), 8 kinds of uppercase Roman numerals (upper-roman), lowercase letters (LOWER-ALPHA), and uppercase letters (UPPER-ALPHA).
2, "Project Image" (List-style-image), its role is to change the symbol before the list as a graphic.
3, "position" (list-style-position), used to describe the position of the list, there are both inside (outside) and outside (inside) choice.

There are 6 items in the "Positioning" property:
1, "type" (position), used to determine the type of positioning, a total of absolute (absolute), relative (relative) and Static (Statics) and other 3 options.
2, "Z-axis" (Z-index), which controls the stacking order of block elements in a Web page, sets the overlap effect for the elements. The parameter value of this property uses a pure integer with a value of 0 o'clock, and the element is at the lowest level for an absolutely positioned or relatively positioned element.
3, "display" (visibility) Use this property to hide the elements in the Web page, there are 3 choices such as inheritance (inherit, the visibility of the parent feature), visible (visible), and hidden (hidden).
4, "Overflow" (overflow), after determining the height and width of the element, if the area of the element cannot display all the contents of the element, the property does one day the monk hit the clock to play a role. There are 4 options such as visible (visible, enlarging the area to show everything), hiding (hidden, hiding out-of-scope content), scrolling (scroll, displaying a scrollbar on the right side of the element), and auto (auto, which displays scrollbars when the content exceeds the element area).
5, "positioning", when an absolute positioning type is determined for an element, the group property determines the exact location of the element in the page. The Group property contains 4 sub-attributes, "left" (the property is named "Ieft", the start position to the left of the control element),
6, "Up" (the property is named "Top", the starting position above the control element), "wide" or "high" (same as the properties of "width" or "high" in the Box class properties panel). clip, when the element is specified as an absolute anchor type, this property can cut the element area into various shapes, but currently provides only a square one. The property value is rect (top right bottom left), which is: rect (top right bottom left), and the unit of the property value is any one length unit.

There are 3 items in the Extended property:
1, "paging", where two properties of the role is to set page breaks for printed pages. "Before" (Page-break-before); "After" (Page-break-after). Visual effects, where two properties are applied to special effects on elements in a Web page.
2, "cursor" (cusor), you can specify the cursor shape to use on an element, a total of 15 choices, representing the mouse in the various shapes of the Windows operating system. In addition, it can also specify the URL address of the pointer icon;
3, "Filter" (fiter), can be applied to the elements of the Web page a variety of wonderful filter effects, a total of 16 kinds of filters.

Reference: http://www.lai18.com/content/312979.html

CSS common style properties detailed description