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; (dot line) dashed; (dashed) solid; 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|bolder|lighter|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 style properties