Font properties: (font)
Size {font-size: x-large;} (King) xx-small; (minimum) is generally less than Chinese, can be as long as the value, unit: PX, PD
Style {font-style: oblique;} (skew body) Italic; (italics) Normal; (normal)
Row Height {line-height: normal;} (normal) Unit: PX, PD, EM
Thickness {font-weight: bold;} (bold) Lighter; (Serif) Normal; (normal)
Variant {font-variant: small-caps;} (small capital letters) Normal; (normal)
Case {text-transform: capitalize;} (initials) UPPERCASE; (uppercase) lowercase; (lowercase) none; (no)
Modified {text-decoration: underline;} (underlined) overline; (overlined) line-through; (strikethrough) Blink; (flashing)
Common font: (font-family)
"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana
Background properties: (background)
color{}
Image {background-image: url ();}
Repeat {background-repeat: no-repeat;}
Scroll {background-attachment: fixed;} (fixed) Scroll; (scrolling)
Position {background-position: left;} (horizontal) Top (vertical);
Shorthand method {background: # 000 url (..) repeat fixed left top;} / * * This often abbreviated code reading, serious study to * /
Block attributes: (Block) / * this property first met, to a lot of research * /
Word spacing {letter-spacing: normal;} value / * This property appears to be useful, the more practice * /
Alignment {text-align: justify;} (Justify) left; (left-justified) right; (right alignment) Center; (middle)
Indent {text-indent: numerical px;}
Vertical alignment {vertical-align: baseline;} (baseline) Sub; (subscript) Super; (subscript) top; text-top; middle; bottom; text-bottom;
Word spacing word-spacing: normal; value
Spaces white-space: pre; (reserved) nowrap; (not wrapped)
Show {display: block;} (block) inline; list-item (embedded); (list item) run-in; (additional portion) 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 header) / * Learn display attribute very vague * /
Block attributes: (Box)
width :; height :; float :; clear: both; margin :; padding :; order: right lower left
Border properties: (Border)
border-style: dotted; (dotted line) Dashed; (dashed line) solid; double; (double) Groove; (slot line) Ridge; (ridge) the inset from; (recess) OUTSET;
border width border-width :;
border-color:#;
Shorthand method border: width style color; / * shorthand * /
A list of attributes: (List-style)
The type of list-style-type: disc; (dots) Circle; (circles) Square; (squares) decimal; (number) lower-roman; (Ronaldinho digit number) upper-roman; lower-alpha; upper-alpha;
位置list-style-position: outside;(外) inside;
The 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 Complete
A CSS text attributes:
color: # 999999; / * text color * /
font-family: Arial, sans-serif; / * text font * /
font-size: 9pt; / * size of the text * /
font-style: itelic; / * character italic * /
font-variant: small-caps; / * small fonts * /
letter-spacing: 1pt; / * * distance between word /
line-height: 200%; / * set the row height * /
font-weight: bold; / * Bold text * /
vertical-align: sub; / * index word * /
vertical-align: super; / * superscript characters * /
text-decoration: line-through; / * * strikethrough /
text-decoration: overline; / * Add the top line * /
text-decoration: underline; / * underlined * /
text-decoration: none; / * Delete underlined links * /
text-transform: capitalize; / * first word capitalized * /
text-transform: uppercase; / * capital * /
text-transform: lowercase; / * English lower case * /
text-align: right; / * right-align text * /
text-align: left; / * Left text * /
text-align: center; / * Align Text * /
text-align: justify; / * * Distribute text /
vertical-align property
vertical-align: top; / * * aligning up /
vertical-align: bottom; / * downward vertical alignment * /
vertical-align: middle; / * vertically centered * /
vertical-align: text-top; / * * aligning up text /
vertical-align: text-bottom; / * Text downward vertical alignment * /
Two, CSS border blank
padding-top: 10px; / * the top border left blank * /
padding-right: 10px; / * the right side of the box left blank * /
padding-bottom: 10px; / * bottom border left blank * /
padding-left: 10px; / * left border left blank
Three, CSS symbol attributes:
list-style-type: none; / * not * Number /
list-style-type: decimal; / * Arabic * /
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; / * * capital letters /
list-style-type: disc; / * solid round mark * /
list-style-type: circle; / * hollow circle symbols * /
list-style-type: square; / * filled square symbols * /
list-style-image: url (/dot.gif); / * pictorial symbols * /
list-style-position: outside; /*凸排*/
list-style-position:inside; /*缩进*/
Four, CSS background styles:
/*background color*/
background: transparent; / * background * perspective /
background-image: url (/image/bg.gif); / * background image * /
background-attachment: fixed; / * background * fixed watermark /
background-repeat: repeat; / * repeatedly arranged - the default page * /
background-repeat: no-repeat; / * Unique alignment * /
background-repeat: repeat-x; / * repeatedly arranged in the x-axis * /
background-repeat: repeat-y; / * repeatedly arranged in a y-axis * /
Specifies the background-position
background-position: 90% 90%; / * background image location x and y-axis * /
background-position: top; / * * aligned up /
background-position: buttom; / * * aligned Down /
background-position: left; / * Left alignment * /
background-position: right; / * Right alignment * /
background-position: center; / * centered * /
Five, CSS connection properties:
a / * all hyperlinks * /
a: link / * hyperlinked text format * /
a: visited / * visited link text format * /
a: active / * Press link format * /
a: hover / * mouse to link * /
Mouse Cursor Style:
Links finger CURSOR: hand
Ten fonts cursor: crosshair
Down arrow cursor: s-resize
Cross arrow cursor: move
Arrow to the right cursor: move
Plus a question mark cursor: help
Left arrow cursor: w-resize
Pointing upwards cursor: n-resize
The rightward arrow cursor: ne-resize
The left arrow cursor: nw-resize
Text I cursor: text
Arrow lower right cursor: se-resize
Lower left oblique arrow cursor: sw-resize
Funnel cursor: wait
Cursor pattern (IE6) p {cursor: url ( "cursor file name .cur"), text;}
Six, CSS border list:
border-top: 1px solid # 6699cc; / * * the border /
border-bottom: 1px solid # 6699cc; / * * the border /
border-left: 1px solid # 6699cc; / * left border * /
border-right: 1px solid # 6699cc; / * right border * /
These are the recommended way of writing, but also can be used in a conventional manner as follows:
border-top-color: # 369 / * Set the top border Color * /
border-top-width: 1px / * Border width is provided on top * /
border-top-style: solid / * Set the top border style * /
Other border style
solid / * solid boxes * /
dotted / * dashed box * /
double / * double line * /
Groove / * * perspective inner rim /
Ridge / * perspective relief block * /
inset / * recessed box * /
OUTSET / rim * * /
Seven, CSS form to use:
Text box
Push button
Check box
Select button
Multi-line text box
Drop-down menu Option 1 Option 2
Eight, CSS border style:
margin-top: 10px; / * on the boundary * /
margin-right: 10px; / * right boundary value * /
margin-bottom: 10px; / * lower limit value * /
margin-left: 10px; / * left boundary value * /
CSS property: font style (Font Style)
No. Chinese description tag syntax
A font style {font: font-style font-variant font-weight font-size font-family}
2 font type {font-family: "Font 1", "2 font", "font 3", ...}
3 字体大小 {font-size:数值|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 | bolder | lighter | normal;}
6 font color {color: value;}
7 color shading {text-shadow: 16-bit color value}
Font 8 rows high {line-height: the value | inherit | normal;}
9 word spacing {letter-spacing: value | inherit | normal}
Word spacing 10 {word-spacing: value | inherit | normal}
11 font transform {font-variant: inherit | normal | small-cps}
12 English Conversion {text-transform: inherit | none | capitalize | uppercase | lowercase}
13 font transform {font-size-adjust: inherit | none}
14 字体 {font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}
Text styles (Text Style)
No. Chinese description tag syntax
1 Row Spacing {line-height: the value | inherit | normal;}
2 modified text {text-decoration: inherit | none | underline | overline | line-through | blink}
The first section of the space 3 {text-indent: value | inherit}
4 horizontal alignment {text-align: left | right | center | justify}
5 垂直对齐 {vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}
6 notation {writing-mode: lr-tb | tb-rl}
Background Style
No. Chinese description tag syntax
1 Background Color {Microsoft YaHei "; font-size: medium;"> 2 background image {background-image: url (URL) | none}
3 背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}
4 fixed background {background-attachment: fixed | scroll}
BACKGROUND Location 5 {background-position: value | top | bottom | left | right | center}
6 back style {background: Background Color | background image | background repeat | BACKGROUND Accessories |} BACKGROUND position
Frame Style (Box Style)
No. Chinese description tag syntax
1 边界留白 {margin:margin-top margin-right margin-bottom margin-left}
2 补 白 {padding:padding-top padding-right padding-bottom padding-left}
3 边框宽度 {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: Numerical Value Value Value Value}: representing the top, right, bottom, left color value
5 边框风格 {border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}
6 边 框 {border:border-width border-style color}
上 边 框 {border-top:border-top-width border-style color}
右 边 框 {border-right:border-right-width border-style color}
下 边 框 {border-bottom:border-bottom-width border-style color}
左 边 框 {border-left:border-left-width border-style color}
7 Width {width: length | percentage | auto}
8 Height {height: value | auto}
9 Floating {float: left | right | none}
10 清 除 {clear:none|left|right|both}
Category List
No. Chinese description tag syntax
1 controls the display {display: none | block | inline | list-item}
2 Control Blank {white-space: normal | pre | nowarp}
3 符号列表 {list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none}
4 graphical list {list-style-image: URL}
5 position list {list-style-position: inside | outside}
6 directory list {list-style: style directory type | style directory location | url}
7 鼠标形状 {cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}