Common CSS Properties

Source: Internet
Author: User
Tags border color compact

CSS Common Properties:

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)
Line height line-height:normal; (normal) unit: PX, PD, EM
Thickness 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
Picture Background-image:url ();
Repeat background-repeat:no-repeat;
rolling background-attachment:fixed; (fixed) scroll; (scrolling)
Position Background-position:left (horizontal) Top (vertical);
Shorthand method background: #000 URL (..) repeat fixed left top;
Chunk Properties: (Block)
Word spacing letter-spacing:normal; Numerical
To Liu Text-align:justify; (justify) left; (Align 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)
Display Display: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; (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;
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 */
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 {
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}

Common CSS Properties

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.