CSS Encyclopedia _ the most common CSS code

Font properties: (font)
size {font-size:x-large;} (Extra-Large) xx-small; (very small) general Chinese can not be used, as long as the value is possible, units: PX, PD
style {Font-style:oblique;} (oblique body) italic; (italic) normal; (normal)
Row height {line-height:normal;} (normal) units: PX, PD, EM
thickness {font-weight:bold;} (in bold) lighter; (fine body) normal; (normal)
Variant {font-variant:small-caps;} (Small capital Letter) normal; (normal)
case {text-transform:capitalize;} (uppercase) uppercase; (uppercase) lowercase; (lowercase) none; (none)
modifier {text-decoration:underline;} (underline) overline; (dash) Line-through; (strikethrough) blink; (flashing)

Common fonts: (font-family)
"Courier new", Courier, monospace, "Times New Roman", Times, Serif, Arial, Helvetica, Sans-serif, Verdana

Background properties: (background)
Color {background-color: #FFFFFF;}
Picture {Background-image:url ();}
repeat {background-repeat:no-repeat;}
scroll {background-attachment:fixed;} (fixed) scroll; (rolling)
Location {background-position:left;} (horizontal) Top (vertical);
Shorthand method {background: #000 URL (..) repeat fixed left top;}/* Shorthand this is often seen in the reading code, so study it carefully.

Block attributes: (block)//This property is the first time to know, to study * *
Word spacing {letter-spacing:normal;} value/* This property seems to be useful, more practice */
align {text-align:justify;} (justified) left; (aligned) right; center; (center)
Indent {text-indent: value px;}
Vertical alignment {vertical-align:baseline;} (baseline) Sub; (subscript) Super; (subscript) top; Text-top; Middle; Bottom Text-bottom;
Word spacing word-spacing:normal; Numerical
Space white-space:pre; (reserved) nowrap; (No line break)

show {Display:block;} (block) inline, (embedded) List-item; (list item) run-in; (additional) compact; (compact) marker; (mark) table; inline-table; Table-raw-group; Table-header-group; Table-footer-group; Table-raw; Table-column-group; Table-column; Table-cell; table-caption; (table title) The understanding of the/*display property is very vague */

Box Properties: (Box)
Width:; Height:; float:; Clear:both; margin:; padding:; Order: Upper right Down left
Border properties: (Border)
border-style:dotted; (dotted line) dashed; (dashed) solid (solid line); Double, (two lines) groove, (Groove Line) ridge; (ridge) inset; (SAG) outset;
Border-width:; Border width
border-color:#;

Shorthand method border:width style color; /* Shorthand */

List properties: (List-style)
Type list-style-type:disc; (dot) circle; (circle) square; (square) decimal; (number) Lower-roman; (Small Luo code number) Upper-roman; Lower-alpha; Upper-alpha;
Position list-style-position:outside; (outside) inside;
Image List-style-image:url (..);
Positioning properties: (Position)
Position:absolute; Relative Static
Visibility:inherit; Visible Hidden
overflow:visible; Hidden Scroll Auto
Clip:rect (12px,auto,12px,auto) (cut)

CSS Property Code Daquan
A CSS Text property:
Color: #999999; /* Text color */
Font-family: Song body, Sans-serif; /* Text font */
font-size:9pt; /* Text Size */
Font-style:itelic; /* Text Italic */
Font-variant:small-caps; /* Small Font */
letter-spacing:1pt; /* distance between characters */
line-height:200%; /* Set Line Height */
Font-weight:bold; /* Text Bold */
Vertical-align:sub; /* Subscript word */
Vertical-align:super; /* Superscript word */
Text-decoration:line-through; /* Add Strikethrough */
Text-decoration:overline; /* Add top Line */
Text-decoration:underline; /* Underline */
Text-decoration:none; /* Delete Link underline */
Text-transform:capitalize; /* First Letter Capital */
Text-transform:uppercase; /* English Capital */
Text-transform:lowercase; /* English lowercase */
Text-align:right; /* Text Right-aligned */
Text-align:left; /* Text left aligned */
Text-align:center; /* Text Center Align */
text-align:justify; /* Text Scatter alignment */
Vertical-align Property
Vertical-align:top; /* Vertical up alignment */
Vertical-align:bottom; /* Vertical Downward alignment */
Vertical-align:middle; /* Vertical Center Alignment */
Vertical-align:text-top; /* Text vertically up-aligned */
Vertical-align:text-bottom; /* Text vertically downwards */
Second, CSS border blank
padding-top:10px; /* Top Border left blank */
padding-right:10px; /* Leave blank in the right box */
padding-bottom:10px; /* Lower Border left blank */
padding-left:10px; /* Left Border blank
Third, CSS symbol properties:
List-style-type:none; /* Not numbered */
List-style-type:decimal; /* Arabic numerals */
List-style-type:lower-roman; /* Lowercase roman numerals */
List-style-type:upper-roman; /* Capital Roman numerals */
List-style-type:lower-alpha; /* Lowercase English letters */
List-style-type:upper-alpha; /* Uppercase English Alphabet */
List-style-type:disc; /* Solid Circle symbol */
List-style-type:circle; /* Hollow Circle symbol */
List-style-type:square; /* Solid square symbol */
List-style-image:url (/dot.gif); /* Picture symbol */
List-style-position:outside; /* Convex row */
List-style-position:inside; /* Indent in */
Four, CSS background style:
Background-color: #F5E2EC; /* Background color */
Background:transparent; /* Perspective Background */
Background-image:url (/image/bg.gif); /* Background picture */
background-attachment:fixed; /* Floating watermark Fixed background */
Background-repeat:repeat; /* Repeat Arrangement-page default */
Background-repeat:no-repeat; /* Do not repeat the arrangement */
Background-repeat:repeat-x; /* Repeat arrangement on X axis */
Background-repeat:repeat-y; /* Repeat arrangement on y-axis */
Specify background position
background-position:90% 90%; /* background picture x and Y axis position */
Background-position:top; /* Align up */
Background-position:buttom; /* Downward alignment */
Background-position:left; /* Align Left */
Background-position:right; /* Align Right */
Background-position:center; /* Center Alignment */
Five, CSS connection properties:
A/* All hyperlinks */
A:link/* Hyperlink text Format */
a:visited/* Visited link text Format */
A:active/* Press the format of the link */
A:hover/* Mouse go to link */
Mouse cursor Style:
Link Finger cursor:hand
Cross Body Cursor:crosshair
Arrow facing down Cursor:s-resize
Cross Arrow Cursor:move
Arrow facing right Cursor:move
Add a question mark Cursor:help
Arrow facing left Cursor:w-resize
Arrow facing up Cursor:n-resize
Arrow to top right cursor:ne-resize
The arrow is facing up to the left Cursor:nw-resize
Text I type Cursor:text
Arrow Oblique Right Bottom cursor:se-resize
Arrow Oblique left Lower cursor:sw-resize
Funnel cursor:wait
Cursor pattern (IE6) p {cursor:url ("cursor filename. cur"), text;}
Vi. CSS Frame Line list:
border-top:1px solid #6699cc; /* Upper Frame line */
border-bottom:1px solid #6699cc; /* Bottom Border */
border-left:1px solid #6699cc; /* Left Border line */
border-right:1px solid #6699cc; /* Right Border line */
This is the way the proposal is written, but it can also be used in the usual way:
Border-top-color: #369/* Set upper Border top Color */
BORDER-TOP-WIDTH:1PX/* Set upper Border top Width */
border-top-style:solid/* set upper Border top style */
Other wireframe Styles
Solid/* Solid wireframe */
Dotted/* Dashed box */
Double/* Dual wireframe */
Groove/* Stereoscopic inner convex frame */
Ridge/* Stereoscopic Relief Frame */
Inset/* Concave frame */
Outset/* Convex frame */
VII. Application of CSS forms:
text box
Button
check box
Select button
Multi-line text box
Drop-down menu option 1 option 2
Viii. CSS Boundary style:
margin-top:10px; /* Upper Border */
margin-right:10px; /* Right Boundary value */
margin-bottom:10px; /* Lower boundary value */
margin-left:10px; /* Left boundary value */

CSS Properties: Font style
Ordinal Chinese description Tag syntax
1 font style {Font:font-style font-variant font-weight font-size font-family}
2 font type {font-family: "Font 1", "Font 2", "Font 3",...}
3 Font Size {font-size: numeric |inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| Xx-small}
4 font style {Font-style:inherit|italic|normal|oblique}
5 font weight {font-weight:100-900|bold (bold) |bolder (extra coarse) |lighter (fine) |normal (normal);}
6 Font Color {color: value;}
7 Shadow color {text-shadow:16 bit color value}
8 Font Line Height {line-height: numeric |inherit|normal;}
9 Word Spacing {letter-spacing: Value |inherit|normal}
10 word Spacing {word-spacing: Value |inherit|normal}
11 font warp {Font-variant:inherit|normal|small-cps}
12 English Conversion {Text-transform:inherit|none|capitalize|uppercase|lowercase}
13 font Warp {Font-size-adjust:inherit|none}
14 Font {font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed| Semi-expanded|ultra-condensed|ultra-expanded|wider}
Text Style
Ordinal Chinese description Tag syntax
1 line Spacing {line-height: numeric |inherit|normal;}
2 text decoration {Text-decoration:inherit|none|underline|overline|line-through|blink}
3 Segment First Space {text-indent: Value |inherit}
4 horizontal Alignment {text-align:left|right|center|justify}
5 vertical Alignment {Vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}
6 Writing method {WRITING-MODE:LR-TB|TB-RL}
Background style
Ordinal Chinese description Tag syntax
1 background Color {background-color: value}
2 background picture {Background-image:url (URL) |none}
3 background Repeat {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}
4 background Fix {Background-attachment:fixed|scroll}
5 background Positioning {background-position: Value |top|bottom|left|right|center}
6 Figure Style {background: background color | background image | Background repetition | background attachment | background position}
Frame style (Box style)
Ordinal Chinese description Tag syntax
1 boundary left White {margin:margin-top margin-right margin-bottom margin-left}
2 Filler {padding:padding-top padding-right padding-bottom padding-left}
3 Border Width {border-width:border-top-width border-right-width border-bottom-width border-left-width}
Width Value: thin|medium|thick| value
4 border Color {border-color: Numeric numeric numeric value} value: Represents top, right, bottom, left color values respectively
5 border Style {Border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}
6 Border {border:border-width Border-style color}
Top Border {border-top:border-top-width Border-style color}
Right Border {border-right:border-right-width Border-style color}
Bottom Border {border-bottom:border-bottom-width Border-style color}
Left Border {border-left:border-left-width Border-style color}
7 Width {width: length | percent | auto}
8 Altitude {height: value |auto}
9 Float {Float:left|right|none}
10 Clear {Clear:none|left|right|both}
Category List
Ordinal Chinese description Tag syntax
1 control display {Display:none|block|inline|list-item}
2 control blank {White-space:normal|pre|nowarp}
3 symbol list {List-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none}
4 Graph list {List-style-image:url}
5 location list {List-style-position:inside|outside}
6 directory list {list-style: Directory style type | directory style location |url}
7 mouse shape {cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}

CSS Properties Daquan

There are six items in the [Background] property:

Background color (Background-color) to set the background color.
Background image (Background-image) to set the page background image.
Repeat (background-repeat), controls how the background image is tiled, has no repetition (no-repeat), repeats (repeat, tiles horizontally, vertically), repeats horizontally (repeat-x, The image is tiled horizontally) and is repeated vertically (repeat-y, tiled vertically along the image), among other 4 choices.
Attach (Background-attachment), which controls whether the background image scrolls along with the scrolling of the page. There are two choices of fixed (fixd, text scrolling, background image shelf fixed) and scrolling (scroll, background image scrolling with text content).
Horizontal position "/" Vertical position (background-position), determines the horizontal and vertical position of the background image
。 There are 6 options, such as left alignment, right alignment, Top (top), bottom (bottom), center (center), and value (the start position of the custom background image, which gives you more precise control over the position of the background image).

There are nine items in the [Type] property:

"Font" (font-family), when set, you need to consider the browser is not the font.
"Size" (font-size), note the unit of measure.
"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 how to set.
"Style" (Font-style), which is the typeface.
Row height (line-height) is the line spacing. Note that line spacing can only be a font size value of
Morph (font-variant), you can display the normal text in half size, but IE does not currently support this property.
"Case" (text-transform), this property can easily control the case of letters, 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.
Text-decoration, which controls the display pattern of link text, with underscores (underline), no underscore (overline), Strikethrough (Line-through), Flicker (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 six items in the [chunk] attribute:

Word spacing (word-spacing), which is used primarily to control the distance between words. 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 with high (ex) pixels (px).
The letter spacing (letter-spacing), which acts like a character spacing, also has two options: normal (normal) and value (custom interval value).
Vertical alignment (vertical-align), which 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.
Text alignment (text-align) to set the horizontal alignment of the block. There are 4 options, such as left, right, center, and evenly (justify).
Text indent (text-indent), which controls how much the block is indented.
Blank spacing (white-space), in HTML, spaces are omitted, and in CSS, the input of a space is controlled by using the attribute (White-space). There are 3 options, such as normal, reserved (pre), and non-newline (nowrap).

The [Border] property has 3 items:

Border-width, which controls the width of the border, is divided into 4 properties: the width of the border-top-width 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.
Color (Border-color) to 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. Such as
p{: #ff0000 #009900 #0000ff #55cc00}
The browser understands four colors in turn: The top, right, bottom, and left borders (clockwise from the beginning).
Style (Border-style), sets the style of the border, has no (none), dashed (dotted), dotted line (dotted), dash (dashed), solid (solid), double line (double), Groove (Grove), There are 9 kinds of ridges (ridge), depressions (inset) and convex (outset).

There are 6 items in the Box property:

width, which determines how wide the box itself is, so that the width of the box does not depend on how much content it contains.
High (height) to determine the height of the box itself.
Float to set the floating effect of the block element.
Clear to clear the floating effect of the setting.
Margin, which 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.
Boundary (padding), determines the amount of padding around the block element, which contains 4 properties "padding-top controls the width of the left white, the width of the padding-right control left white, the width of the Padding-bottom control, Padding-left controls the width of left white.

There are 3 items in the List property:

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).
Project Image (List-style-image), which is the function of changing the symbol in front of the list to a graphic.
List-style-position, which is used to describe the position of the list, with both internal (outside) and external (inside) choices.

There are 6 items in the [Positioning] property:

"Type" (position), used to determine the type of positioning, total absolute (absolute), relative (relative), and static 3 options.
"z axis (Z-index), which controls the stacking order of block elements in a Web page, sets the overlap effect for the element. 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.
Display (visibility) uses this property to hide elements in a Web page, with 3 choices such as inheritance (Inherit, the visual setting for inheriting parent features), visible (visible), and hidden (hidden).
"Overflow" (overflow), after determining the height and width of an element, if the area of an element cannot display the contents of the element in its entirety, the attribute is made one day when the monk hit the clock. 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).
Positioning, when an absolute anchor type is determined for an element, the Group property determines where the element is located in the Web page. The Group property contains 4 sub-attributes, the "left" (the property named "left", the start position to the left of the control element), the "Top" (the property named "top", the starting position above the control element), "wide" or "high" (the 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), the unit of the property value is any one length unit.

There are two parts to the [Extended] property:

Paging, where two of the properties are set to 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. Cursor (cusor), you can specify the cursor shape to use on an element, with 15 choices, representing the various shapes of the mouse in the Windows operating system. In addition, it can also specify the URL address of the pointer icon, "filter" (fiter), you can apply a variety of wonderful filter effects to the elements of the Web page, including 16 kinds of filters

CSS Encyclopedia _ the most common CSS code