Shulou(Shulou.com)06/01 Report--

This article is about what the css style code is about. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Font properties: (font)

Size {font-size: XLLLAGE;} (extra large) xx-small; (very small) is generally not needed in Chinese, as long as you can use a numeric value, in units:

PX 、 PD

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

Row height {line-height: normal;} (normal) unit: PX, PD, EM

Weight {font-weight: bold;} (bold) lighter; (fine) normal; (normal)

Variant {font-variant: small-caps;} (small uppercase) normal; (normal)

Uppercase {text-transform: capitalize;} (first letter uppercase) uppercase; (uppercase) lowercase; (lowercase) none

(none)

Modify {text-decoration: underline;} (underline) overline; (overline) line-through; (delete line) blink

(flashing)

Common fonts: (font-family)

"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica

Sans-serif, Verdana

Background attribute: (background)

Color {background-color: # FFFFFF;}

Picture {background-image: url ();}

Repeat {background-repeat: no-repeat;}

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

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

Abbreviated method {background:#000 url (..) Repeat fixed left top;} / * shorthand this is often used in reading code.

Now, it is necessary to seriously study * /

Block attribute: (Block) / * this attribute is recognized for the first time, so you need to study more * /

Character spacing {letter-spacing: normal;} value / * this attribute seems to be useful, more practice * /

Align {text-align: justify;} (align both ends) left; (align left) right; (align right) center; (Center)

Indent {text-indent: numeric px;}

Align {vertical-align: baseline;} (baseline) sub; (subscript) super; (subscript) top; text-top; middle vertically

Bottom; text-bottom

Word spacing word-spacing: normal; number

Space white-space: pre; (reserved) nowrap; (no line wrapping)

Display {display:block;} (block) inline; (embedded) list-item; (list item) run-in; (append) 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 label

Question) / * the understanding of display attribute is very vague * /

Box property: (Box)

Width:; height:; float:; clear:both; margin:; padding:; order: top right, bottom left

Border property: (Border)

Border-style: dotted; (dotted line) dashed; (dashed line) solid; double; (double line) groove; (slot line) ridge; (ridge)

Inset; (depression) outset

Border-width:; border width

Border-color:#

Abbreviated method border:width style color; / * abbreviated * /

List attribute: (List-style)

Type list-style-type: disc; (dot) circle; (circle) square; (square) decimal; (number) lower-roman; (small

Code number) upper-roman; lower-alpha; upper-alpha

Location list-style-position: outside; (outside) inside

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

Positioning attribute: (Position)

Position: absolute; relative; static

Visibility: inherit; visible; hidden

Overflow: visible; hidden; scroll; auto

Clip: rect (12pxMagitem12pxMagol auto) (cutout)

A complete Collection of css attribute codes

A CSS text attribute:

Color: # 999999; / * text color * /

Font-family: Arial style, sans-serif; / * text font * /

Font-size: 9pt; / * text size * /

Font-style:itelic; / * text italics * /

Font-variant:small-caps; / * small font * /

Letter-spacing: 1pt; / * distance between words * /

Line-height: 200%; / * set line height * /

Font-weight:bold; / * bold text * /

Vertical-align:sub; / * subscript * /

Vertical-align:super; / * superscript * /

Text-decoration:line-through; / * add delete line * /

Text-decoration: overline; / * add top line * /

Text-decoration:underline; / * underlined * /

Text-decoration:none; / * remove link underline * /

Text-transform: capitalize; / * initial capitalization * /

Text-transform: uppercase; / * English capital * /

Text-transform: lowercase; / * lowercase * /

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

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

Text-align:center; / * text center alignment * /

Text-align:justify; / * text decentralized alignment * /

Vertical-align attribute

Vertical-align:top; / * align vertically up * /

Vertical-align:bottom; / * align vertically down * /

Vertical-align:middle; / * Vertical Center alignment * /

Vertical-align:text-top; / * text alignment vertically up * /

Vertical-align:text-bottom; / * text is vertically aligned down * /

2. CSS frame is blank

Padding-top:10px; / * leave the top border blank * /

Padding-right:10px; / * leave a blank on the right side * /

Padding-bottom:10px; / * the bottom border is left blank * /

Padding-left:10px; / * leave the left border blank

3. CSS symbol attribute:

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; / * Capital Roman numerals * /

List-style-type:lower-alpha; / * lowercase letter * /

List-style-type:upper-alpha; / * capital letters * /

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

List-style-position:inside; / * indent * /

4. CSS background style:

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

Background:transparent; / * Perspective background * /

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

Background-attachment: fixed; / * floating watermark fixed background * /

Background-repeat: repeat; / * repeat arrangement-web default * /

Background-repeat: no-repeat; / * No repetitive arrangement * /

Background-repeat: repeat-x; / * repeat on the x-axis * /

Background-repeat: repeat-y; / * repeat on the y-axis * /

Specify background location

Background-position: 90% 90%; / * position of the x and y axes of the background image * /

Background-position: top; / * align up * /

Background-position: buttom; / * align Down * /

Background-position: left; / * align to the left * /

Background-position: right; / * align to the right * /

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

5. CSS connection attributes:

A / * all hyperlinks * /

A:link / * hyperlink text format * /

A:visited / * browsed link text format * /

A:active / * Press the link format * /

A:hover / * Mouse to link * /

Mouse cursor style:

Link finger CURSOR: hand

Ten-font cursor:crosshair

Arrow down cursor:s-resize

Cross Arrow cursor:move

Arrow to the right, cursor:move

Add a question mark cursor:help

Arrow to the left, cursor:w-resize

Arrow up, cursor:n-resize.

Arrow up right, cursor:ne-resize.

Arrow up left, cursor:nw-resize.

Text type I cursor:text

Arrow oblique to the bottom right cursor:se-resize

Arrow oblique bottom left cursor:sw-resize

Funnel cursor:wait

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

6. List of CSS frames and lines:

Border-top: 1px solid # 6699cc; / * Top frame * /

Border-bottom: 1px solid # 6699cc; / * bottom frame * /

Border-left: 1px solid # 6699cc; / * left frame * /

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

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

Border-top-color: # 369 / * set the upper frame line top color * /

Border-top-width: 1px / * set the width of the upper frame line top * /

Border-top-style: solid/* sets the upper frame line top style * /

Other frame styles

Solid / * solid wireframe * /

Dotted / * dashed frame * /

Double / * double wireframe * /

Groove / * solid convex frame * /

Ridge / * three-dimensional relief frame * /

Inset / * concave frame * /

Outset / * Bump * /

7. Application of CSS form:

Text box

Button

Check box

Select button

Multiline text box

Drop-down menu option 1 option 2

8. CSS boundary style:

Margin-top:10px; / * upper boundary * /

Margin-right:10px; / * right boundary value * /

Margin-bottom:10px; / * Lower boundary value * /

Margin-left:10px; / * left bound * /

CSS attribute: font style (Font Style)

Serial number Chinese description tag syntax

Font style {font:font-style font-variant font-weight font-size font-family}

Font type {font-family: "font 1", "font 2", "font 3",...}

Font size {font-size: numeric | inherit | medium | large | larger | x-large | xx-large | small | smaller |

X-small | xx-small}

Font style {font-style:inherit | italic | normal | oblique}

Font weight {font-weight:100-900 | bold | bolder | lighter | normal;}

Font color {color: numeric;}

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

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

Spacing {letter-spacing: numeric | inherit | normal}

Word spacing {word-spacing: numeric | inherit | normal}

Font distortion {font-variant:inherit | normal | small-cps}

English translation {text-transform:inherit | none | capitalize | uppercase | lowercase}

Font distortion {font-size-adjust:inherit | none}

Font {font-stretch:condensed | expanded | extra-condensed | extra-

Expanded | inherit | narrower | normal | semi-condensed | semi-expanded | ultra-

Condensed | ultra-expanded | wider}

Text style (Text Style)

Serial number Chinese description tag syntax

Interline spacing {line-height: numeric | inherit | normal;}

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

The space at the beginning of the paragraph {text-indent: value | inherit}

Horizontal alignment {text-align:left | right | center | justify}

Vertical alignment {vertical-align:inherit | top | bottom | text-top | text-

Bottom | baseline | middle | sub | super}

Writing mode {writing-mode:lr-tb | tb-rl}

Background style

Serial number Chinese description tag syntax

Background color {background-color: numeric}

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

Duplicate background {background-repeat:inherit | no-repeat | repeat | repeat-x | repeat-y}

Background is fixed {background-attachment:fixed | scroll}

Background location {background-position: value | top | bottom | left | right | center}

Back shadow style {background: background color | background image | background duplicate | background attachment | background position}

Frame style (Box Style)

Serial number Chinese description tag syntax

The boundary is left blank {margin:margin-top margin-right margin-bottom margin-left}

Blanking {padding:padding-top padding-right padding-bottom padding-left}

Border width {border-width:border-top-width border-right-width border-bottom-width

Border-left-width}

Width value: thin | medium | thick | value

Border color {border-color: numeric value} numerical value: represents top, right, bottom, left, respectively

Color value

Border style {border-

Style:none | hidden | inherit | dashed | solid | double | inset | outset | ridge | groove}

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}

Width {width: length | percentage | auto}

Height {height: value | auto}

Float {float:left | right | none}

Clear {clear:none | left | right | both}

Classified list

Serial number Chinese description tag syntax

Controls the display of {display:none | block | inline | list-item}

Control blank {white-space:normal | pre | nowarp}

Symbol list {list-style-type:disc | circle | square | decimal | lower-roman | upper-roman | lower-

Alpha | upper-alpha | none}

Drawing list {list-style-image:URL}

Location list {list-style-position:inside | outside}

Directory list {list-style: catalog style type | Catalog style location | url}

Mouse shape {cursor:hand | crosshair | text | wait | move | help | e-resize | nw-resize | w-resize | s-

Resize | se-resize | sw-resize}

Thank you for reading! This is the end of this article on "what are the css style codes?". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.