Common css property records and css attributes

Common css property records and css attributes

Common CSS attributes:

Font attributes:( Font)
Size font-size: x-large; (Extra large) xx-small; (very small) generally cannot be used in Chinese, as long as the value is used, unit: PX, PD
Style font-style: oblique; (italic) italic; (italic) normal; (normal)
Line-height: normal; (normal) Unit: PX, PD, EM
Font-weight: bold; (bold) lighter; (fine) normal; (normal)
Variant font-variant: small-caps; (small capital letters) normal; (normal)
Case-sensitive text-transform: capitalize; (uppercase) uppercase; (uppercase) lowercase; (lowercase) none; (none)
Modify text-decoration: underline; (underline) overline; (upper line) line-through; (strikethrough) blink; (blinking)
Common fonts: (font-family)
"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana
Background attributes: (Background)
Color
Image background-image: url ();
Repeated background-repeat: no-repeat;
Rolling background-attachment: fixed; (fixed) scroll; (rolling)
Position background-position: left (horizontal) top (vertical );
Shorthand for background: #000 url (...) repeat fixed left top;
Block attributes: (Block)
Character spacing letter-spacing: normal; Value
For Liu text-align: justify; (both ends are aligned) left; (left aligned) right; (right aligned) center; (center)
Indent text-indent: Numeric px;
Vertical Alignment vertical-align: baseline; (baseline) sub; (subscript) super; (subscript) top; text-top; middle; bottom; text-bottom;
Word spacing word-spacing: normal; Value
Space white-space: pre; (Reserved) nowrap; (no line feed)
Display: block; (block) inline; (embedded) list-item; (list item) run-in; (append part) compact; (compact) marker; (TAG) 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)
Box attributes: (Box)
Width:; height:; float:; clear: both; margin:; padding:; Order: upper right bottom left
Border attributes: (Border)
Border-style: dotted; (DOT line) dashed; (dotted line) solid; double; (double line) groove; (trough line) ridge; (ridge) inset; (SAG) outset;
Border-width:; border width
Border-color :#;
Abbreviated method border: width style color;
List attributes: (List-style)
Type list-style-type: disc; (DOT) circle; (circle) square; (square) decimal; (number) lower-roman; (lower code number) upper-roman; lower-alpha; upper-alpha;
Position list-style-position: outside; (outer) inside;
Image list-style-image: url (..);
Positioning property: (Position)
Position: absolute; relative; static;
Visibility: inherit; visible; hidden;
Overflow: visible; hidden; scroll; auto;
Clip: rect (12px, auto, 12px, auto) (cropping)

Css attribute code Daquan
I. CSS text attributes:
Color: #999999;/* text color */
Font-family:, sans-serif;/* text font */
Font-size: 9pt;/* text size */
Font-style: itelic;/* italic text */
Font-variant: small-caps;/* small font */
Letter-spacing: 1pt;/* distance between words */
Line-height: 200%;/* set the Row height */
Font-weight: bold;/* bold text */
Vertical-align: sub;/* subscripts */
Vertical-align: super;/* superscript */
Text-decoration: line-through;/* strikethrough */
Text-decoration: overline;/* Top Line */
Text-decoration: underline;/* underline */
Text-decoration: none;/* Delete link underline */
Text-transform: capitalize;/* uppercase letters */
Text-transform: uppercase;/* uppercase letters */
Text-transform: lowercase;/* lowercase letters */
Text-align: right;/* right-aligned text */
Text-align: left;/* left-aligned text */
Text-align: center;/* align text in center */
Text-align: justify;/* scatter and alignment of text */
Vertical-align attributes
Vertical-align: top;/* vertical and upward alignment */
Vertical-align: bottom;/* vertically aligned down */
Vertical-align: middle;/* vertical center alignment */
Vertical-align: text-top;/* vertical and upward alignment of text */
Vertical-align: text-bottom;/* vertical and downward alignment of text */
Ii. CSS border Blank
Padding-top: 10px;/* Leave the upper border blank */
Padding-right: 10px;/* left blank on the right Border */
Padding-bottom: 10px;/* Leave the bottom border blank */
Padding-left: 10px;/* left Border Blank
Iii. CSS symbol attributes:
List-style-type: none;/* No number */
List-style-type: decimal;/* arabic numerals */
List-style-type: lower-roman;/* lowercase roman numerals */
List-style-type: upper-roman;/* uppercase roman numerals */
List-style-type: lower-alpha;/* lowercase letters */
List-style-type: upper-alpha;/* uppercase letters */
List-style-type: disc;/* Solid circular symbol */
List-style-type: circle;/* hollow circle symbol */
List-style-type: square;/* solid square symbol */
List-style-image: url (/dot.gif);/* image symbol */
List-style-position: outside;/* convex */
List-style-position: inside;/* indent */
Iv. CSS background style:
/* Background Color */
Background: transparent;/* view background */
Background-image: url (/image/bg.gif);/* background image */
Background-attachment: fixed;/* float watermark fixed background */
Background-repeat: repeat;/* repeat-default page */
Background-repeat: no-repeat;/* no duplicates */
Background-repeat: repeat-x;/* repeat on the x axis */
Background-repeat: repeat-y;/* repeat the y axis */
Specify the background position
Background-position: 90% 90%;/* position of the background image x and Y axis */
Background-position: top;/* align upwards */
Background-position: buttom;/* align downward */
Background-position: left;/* align to left */
Background-position: right;/* align to the right */
Background-position: center;/* center alignment */
V. CSS connection attributes:
A/* All hyperlinks */
A: link/* hyperlink text format */
A: visited/* URL text format browsed */
A: active/* Format of the pressed link */
A: hover/* move the cursor to the link */
Mouse and cursor style:
Link finger CURSOR: hand
Cross cursor: crosshair
Arrow down cursor: s-resize
Cross arrow cursor: move
Arrow toward right cursor: move
Add a question mark (cursor: help)
Arrow toward left cursor: w-resize
Arrow up cursor: n-resize
Arrow toward top right cursor: ne-resize
Arrow toward top left cursor: nw-resize
Text I-type cursor: text
Arrow oblique lower right cursor: se-resize
Down-left arrow cursor: sw-resize
Funnel cursor: wait
Cursor pattern (IE6) p {cursor: url ("cursor file name. cur"), text ;}
Vi. List of CSS borders:
Border-top: 1px solid # 6699cc;/* upper box line */
Border-bottom: 1px solid # 6699cc;/* bottom line */
Border-left: 1px solid # 6699cc;/* left frame line */
Border-right: 1px solid # 6699cc;/* right frame line */
The above is the recommended writing method, but you can also use the conventional method as follows:
Border-top-color: #369/* set the top color of the upper box line */
Border-top-width: 1px/* set the top width of the upper box line */
Border-top-style: solid/* set the top style of the upper box line */
Other box style
Solid/* solid box */
Dotted/* dotted box */
Double/* double box */
Groove/* three-dimensional convex box */
Ridge/* stereo relief frame */
Inset/* concave box */
Outset/* convex box */
VII. CSS form application:
Text Box
Button
Check box
Selection button
Multi-line text box
Drop-down menu option 1 option 2
VIII. CSS border style:
Margin-top: 10px;/* upper boundary */
Margin-right: 10px;/* right boundary value */
Margin-bottom: 10px;/* bottom boundary value */
Margin-left: 10px;/* left boundary value */

CSS attributes: Font Style)
Serial number Chinese description mark 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 value | 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 width {font-weight: 100-900 | bold | bolder | lighter | normal ;}
6 font color {color: value ;}
7 shadow color {text-shadow: 16-digit color value}
8 font Row height {line-height: Numeric value | inherit | normal ;}
9-byte distance {letter-spacing: Value | inherit | normal}
10 word spacing {word-spacing: Value | inherit | normal}
11 font deformation {font-variant: inherit | normal | small-cps}
12 English conversion {text-transform: inherit | none | capitalize | uppercase | lowercase}
13 font deformation {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)
Serial number Chinese description mark syntax
1-line spacing {line-height: Value | inherit | normal ;}
2 text modifier {text-decoration: inherit | none | underline | overline | line-through | blink}
3 leading 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 mode {writing-mode: lr-tb | tb-rl}
Background Style
Serial number Chinese description mark syntax
1 Background Color {
2 background image {background-image: url (URL) | none}
3. Duplicate background {background-repeat: inherit | no-repeat | repeat-x | repeat-y}
4. fixed background {background-attachment: fixed | scroll}
5 background position {background-position: Value | top | bottom | left | right | center}
6. Back Style {background: background color | background image | duplicate background | background attachment | background position}
Frame Style)
Serial number Chinese description mark syntax
1 margin white {margin: margin-top margin-right margin-bottom margin-left}
2 fill in the white {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: thin | medium | thick | value
4 border color {border-color: Numeric value} value: top, right, bottom, left color values respectively
5 border style {border-style: none | hidden | inherit | dashed | solid | double | inset | outset | ridge | groove}
6-side frame {border: border-width border-style color}
Top frame {border-top: border-top-width border-style color}
Right side frame {border-right: border-right-width border-style color}
Bottom Frame {border-bottom: border-bottom-width border-style color}
Left side frame {border-left: border-left-width border-style color}
7 width {width: length | percentage | auto}
8 height {height: Value | auto}
9 float {float: left | right | none}
10 division {clear: none | left | right | both}
CATEGORY list
Serial number Chinese description mark 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. image 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}