Common css property records and css attributes

Source: Internet
Author: User

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}

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.