CSS Tags Daquan

CSS Common tags

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 of the unit: PX, PD
style: font-style:oblique; (oblique body) italic; (italic) normal; (normal)
row Height: line-height:normal; (normal) unit: PX, PD, EM
Weight: font-weight:bold; (bold) lighter; (fine body) normal; (normal)
variant: font-variant:small-caps; (small capital letter) normal; (normal)
case: text-transform:capitalize; (capital letter) 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;
Photo: Background-image:url ();
repeat: ackground-repeat:no-repeat;
scrolling: ackground-attachment:fixed; (fixed) scroll; (scrolling)
Position: ackground-position:left (horizontal) Top (vertical);
Shorthand method: background: #000 URL (..) repeat fixed left top;
　　
Block attribute: (block)
word spacing: etter-spacing:normal; value
align: xt-align:justify; (justify) left; (Align right) center; (center)
indent: ext-indent: value px;
vertical alignment: ertical-align:baseline; (baseline) Sub; (subscript) Super; (subscript) top; Text-top; Middle; Bottom Text-bottom;
word spacing: ord-spacing:normal; value
space: Hite-space:pre; (reserved) nowrap; (No line break)
display: Isplay:block; (block) inline; (inline) 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)
　　
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), double (two lines), Groove (Groove), Ridge; (ridge) inset; (SAG) outset;
border-width:; Border width
border-color:#;
Shorthand method border:width style color;
　　
List properties: (List-style)
type: List-style-type:disc; circle circle; (circle) square; (square) decimal; (number) Lower-roman; (Small code number) Upper-roman; Lower-alpha; Upper-alpha;
location: ist-style-position:outside; (outside) inside;
Image: Ist-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: Arial, 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 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 vertical up /down */
vertical-align:text-bottom./* Text vertically downward * /
　　
Second, CSS border blank
padding-top:10px; * * Upper Border Left blank * /
padding-right:10px/* Left Border blank * /
padding-bottom:10px;/* Bottom Border left blank * /
padding-left:10px/* Left box 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-type symbol */
list-style-position:outside; * * Convex rows * /
list-style-position:inside; * * Indent * /
　　
Four, CSS background style:
background-color: #F5E2EC;/* Background color */
background:transparent; * * Perspective background * /
Background-image:url (/image/bg.gif); */* Background image */
background-attachment:fixed; * * Floating watermark Fixed background * /
background-repeat:repeat;/* Repeating arrangement-page default */
background-repeat:no-repeat; * * Do not repeat the arrangement * /
background-repeat:repeat-x/* Repeat in X-axis * /
background-repeat:repeat-y/* Repeating arrangement on y-axis * /
Specify background position
background-position:90% 90%/* background picture x and Y axis position */
background-position:top;/* Upward alignment * /
background-position:buttom;/* Downward alignment * /
background-position:left; * * Left alignment * /
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
10 Font 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;/* Down border * /
border-left:1px solid #6699cc;/* Left Border * /
border-right:1px solid #6699cc;/* Right Border * /
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 Words {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}
　　
Word-wrap is the control of line wrapping. When you use Break-word, the line break is forced. There is no problem in Chinese, and the English sentence is fine. But for long strings of English, it doesn't work. Break-word is the control of word breaking. Normal is the default and English words are not opened. Break-all, is to break the word. The next letter is automatically to the next line when the word is to the border. It mainly solves the problem of long strings of English. Keep-all, refers to Chinese, Japanese, and Korean constant words. That is, only use this time, do not word-wrap, Chinese will not be changed line. (The English statement is normal.) ie: use Word-wrap:break-word; all is normal. FF: If none of these 2 are used, the Chinese will not have any problems. There is no problem with the English sentence. However, long strings of English can be problematic. In order to solve the long string of English, generally with word-wrap:break-word;word-break:break-all; However, this approach causes the words in the normal English sentence to be broken (ie also). At present the main problem exists in long strings of English and English words are disconnected. In fact, long string of English is a relatively long word. Should the English word should not be disconnected? The problem is obvious and obviously should not be disconnected. For a long string of English, is malicious things, naturally do not have to tube. However, there are ways to keep the container from getting bigger. Use: Overflow:auto; ie, the long string will automatically fold the line. FF, the long string will be covered. Therefore, the best way is to Word-wrap:break-word; Overflow:hidden, not word-wrap:break-word;word-break:break-all;

CSS Tags Daquan