This is probably the most complete CSS font and style!

 

Background attributes: (background)

Picture {background-image: url();}

Color {background-color: #FFFFFF;}

Repeat {background-repeat: no-repeat;}

Scroll {background-attachment: fixed;}(fixed) scroll;(Scroll)

Position {background-position: left;}(horizontal) top(vertical);

Shorthand method {background:#000 url(..) repeat fixed left top;} /*shorthand·This often appears in reading code, so you should study it carefully*/

Font attributes: (font)

Size {font-size: x-large;} (extra large) xx-small; (very small) Generally not used in Chinese, as long as the value is used, unit: PX, PD

Style (font-style: oblique;) (italic) italic; (italic) normal; (normal)

Line height {line-height: normal;} (normal) Unit: PX, PD, EM

(Font-weight: bold;)(Bold) lighter;(Thin) normal;(normal)

Variant (font-variant: small-caps;) (small caps) normal; (normal)

(Text-transform: capitalize;) (first letter uppercase) uppercase; (uppercase) lowercase; (lowercase) none; (none)

Modification (text-decoration: underline;)(underline) overline;(upline) line-through;(strikethrough) blink;(flashing)

Border attributes: (Border)

border-style: dotted; (dotted) dashed; (dashed) solid; double; (double line) groove; (groove line) ridge; (ridge) inset; (depressed) outset;

border-width:; border width

border-color:#;

Shorthand method border: width style color; /*shorthand*/

List attributes: (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;

位置list-style-position: outside;(外) inside;

Image list-style-image: url(..);

Positioning attributes: (Position)

Position: absolute; relative; static;

visibility: inherit; visible; hidden;

overflow: visible; hidden; scroll; auto;

clip: rect(12px,auto,12px,auto) (cut)

CSS text attributes:

color: #999999; /*Text color*/

font-family: Times New Roman, 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 words*/

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; /*Add underline*/

text-decoration:none; /*Delete link underline*/

text-transform: capitalize; /*Capitalize the first word*/

text-transform: uppercase; /*English uppercase*/

text-transform: lowercase; /*English lowercase*/

text-align:right; /*Text align right*/

text-align:left; /*Text align left*/

text-align:center; /*The text is aligned in the center*/

text-align:justify; /*The text is scattered and aligned*/

vertical-align property

vertical-align:top; /*Align vertically upward*/

vertical-align:bottom; /*Align vertically downward*/

vertical-align:middle; /*Vertical center alignment*/

vertical-align:text-top; /*Text is aligned vertically upwards*/

vertical-align:text-bottom; /*Text is aligned vertically downward*/

CSS symbol properties:

list-style-type:none; /*No number*/

list-style-type:decimal; /*Arabic numbers*/

list-style-type:lower-roman; /*lowercase roman numerals*/

list-style-type:upper-roman; /*Uppercase Roman numerals*/

list-style-type:lower-alpha; /*lowercase English letters*/

list-style-type:upper-alpha; /*Uppercase English letters*/

list-style-type:disc; /*filled circle symbol*/

list-style-type:circle; /*hollow circle symbol*/

list-style-type:square; /*Solid square symbol*/

list-style-image:url(/dot.gif); /*Picture-style symbol*/

list-style-position: outside; /*凸排*/

list-style-position:inside; /*Indentation*/

Specify background position

background-position: 90% 90%; /*The position of the background image x and y axis*/

background-position: top; /*Align up*/

background-position: buttom; /*Align down*/

background-position: left; /*Align left*/

background-position: right; /*Align right*/

background-position: center; /*Center alignment*/

CSS border blank

padding-top:10px; /*Leave blank top border*/

padding-right:10px; /*Leave a blank right border*/

padding-bottom:10px; /*Leave the bottom border blank*/

padding-left:10px; /*Leave the left border blank

CSS background style:

background-color:#F5E2EC; /*Background color*/

background:transparent; /*Perspective background*/

background-image: url(/image/bg.gif); /*background image*/

background-attachment: fixed; /*Watermark fixed background*/

background-repeat: repeat; /*Repeat arrangement-webpage default*/

background-repeat: no-repeat; /*do not repeat arrangement*/

background-repeat: repeat-x; /*Repeat arrangement on the x axis*/

background-repeat: repeat-y; /*Repeat arrangement on the y axis*/

CSS connection properties:

a /*All hyperlinks*/

a:link /*Hyperlink text format*/

a:visited /*Browse link text format*/

a:active /*Click the link format*/

a:hover /*mouse to go to link*/

Mouse cursor style:

CURSOR: hand

Cross cursor:crosshair

Arrow down cursor: s-resize

Cross arrow cursor:move

Arrow pointing right cursor:move

Add a question mark cursor:help

The arrow points to the left cursor: w-resize

The arrow points upward cursor: n-resize

The arrow points to the upper right cursor:ne-resize

The arrow points to the upper left cursor: nw-resize

Text type I cursor:text

Arrow diagonally lower right cursor:se-resize

Arrow diagonally lower left cursor: sw-resize

Funnel cursor:wait

Cursor pattern (IE6) p {cursor:url("cursor file name.cur"),text;}

List of CSS borders:

border-top: 1px solid #6699cc; /*Upper frame line*/

border-bottom: 1px solid #6699cc; /*under border*/

border-left: 1px solid #6699cc; /*Left frame line*/

border-right: 1px solid #6699cc; /*right frame line*/

The above is the recommended way of writing, but you can also use the conventional way as follows:

border-top-color: #369 /*Set the top color of the upper border*/

border-top-width :1px /*Set the top width of the upper border line*/

border-top-style: solid/*Set the top style of the upper frame*/

Other frame styles

solid /*solid line frame*/

dotted /*dotted frame*/

double /*Double wire frame*/

groove /*Three-dimensional inner convex frame*/

ridge /*Three-dimensional relief frame*/

inset /*concave frame*/

outset /*convex frame*/

CSS border style:

margin-top:10px; /*upper margin*/

margin-right:10px; /*Right margin value*/

margin-bottom:10px; /*lower boundary value*/

margin-left:10px; /*Left margin value*/

CSS property: Font Style (Font Style)

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:number|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:number;}

7 Shadow color {text-shadow: 16-bit color value}

8 Font line height {line-height: numeric value|inherit|normal;}

9 Word spacing {letter-spacing:number|inherit|normal}

10 Word spacing {word-spacing:number|inherit|normal}

11 Font variant {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-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}

Text Style

1 line spacing {line-height: number|inherit|normal;}

2 Text decoration {text-decoration:inherit|none|underline|overline|line-through|blink}

3 Space at the beginning of paragraph {text-indent:numerical 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

1 background color {background-color:number}

2 Background image {background-image: url(URL)|none}

3 Background repeat {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}

4 Fixed background {background-attachment:fixed|scroll}

5 Background positioning {background-position: number|top|bottom|left|right|center}

6 Back view style {background: background color | background image | background repeat | background attachment | background position}

Post a Comment

0 Comments