CSS style Daquan

Source: Internet
Author: User
Tags border color

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 {}

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


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 */

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


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 {Color:rgb (Wuyi, Wuyi, Wuyi); line-height:25px; " >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 Daquan

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.