Web front end Getting started knowledge; CSS style Daquan

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;}/* Abbreviated */

Word spacing {letter-spacing:normal;} values/* Sets the spacing between words and letters */

align {text-align:justify;} (justified) left; (aligned) right; center; (center)

Indent {text-indent: value px;}/* General set 2EM for paragraph, indent two characters */

Vertical alignment {vertical-align:baseline;} (baseline) Sub; (subscript) Super; (subscript) top; Text-top; Middle; Bottom Text-bottom;

Word spacing word-spacing:normal;/* Sets the word spacing of text, essentially controlling the spacing between spaces */

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 value of the/*display property has a lot, can be more research */

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 (the default positioning of the element);

Visibility:inherit; Visible Hidden (sets the visibility of the element, which is the default visible hidden)

overflow:visible; Hidden Scroll auto; (set overflow section, respectively visible hidden scrolling and adaptive)

Clip:rect (12px,auto,12px,auto) (Crop properties)

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. 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 {margin:20px 0px; list-style:none; font-size:18px; Color:rgb (Wuyi, Wuyi, Wuyi); line-height:32px; Font-family:sans -serif; text-align:justify; Word-wrap:break-word!important; " >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}

Learn the Web front-end to the Http://www.zhihaijiangku.com, System course system + Project Combat + employment guidance, one-stop to achieve high-paying employment.

Web front end Getting started knowledge; CSS style Daquan