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