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

What are the commonly used css style attributes? aiming at this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible method.

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

III. CSS symbol attributes

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

Fifth, 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;}

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

IX. CSS filter properties

Filter: add filter effects to the style. Because there is a lot of content about this property, we will introduce the filter separately in the next chapter.

1.Alpha: setting transparency

Alpha (Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)

Opacity: transparency level, ranging from 0 to 100 for completely transparent and 100 for completely opaque. FinishOpacity: when setting the transparency effect of a gradient, it is used to specify the transparency at the end of the gradient, which also ranges from 0 to 100. Style: sets the style of gradient transparency. A value of 0 represents a uniform shape, 1 represents a linear shape, 2 represents a radial shape, and 3 represents a rectangle. StartX and StartY: represent the starting X and Y coordinates of the gradient transparency effect. FinishX and FinishY: represents the X and Y coordinates at the end of the gradient transparency effect.

2.BlendTrans: the effect of fading in and out between images

BlendTrans (Duration=?) Duration: time to fade in or out. Note: this filter must work with JS to create a sequence of images in order to create an inter-image effect.

3.Blru: establishing blur effect

Blur (Add=?, Direction=?, Strength=?) Add: whether unidirectional blur, this parameter is a Boolean value, true (non-0) or false (0). Direction: sets the direction of the blur, where 0 degrees represents vertical upward, and then every 45 degrees is a unit. Strength: represents blurred pixel values.

4.Chroma: sets the specified color to transparent

Chroma (Color=?) Color: refers to the color to be set to transparent.

5.DropShadow: establishing shadow effect

DropShadow (Color=?, OffX=?, OffY=?, Positive=?) Color: specifies the color of the shadow. OffX: specifies the horizontal offset of the shadow relative to the element, an integer. OffY: specifies the vertical offset of the shadow relative to the element, an integer. Positive: is a Boolean value that indicates an outer shadow is established when the value is true (non-0) and an inner shadow is established when it is false (0).

6.FlipH: reverses elements horizontally

7.FlipV: reverses the element vertically

8.Glow: establishing outgoing light effects

Glow (Color=?, Strength=?)

Color: specifies the color of the glow.

Strength: the intensity of light can be any integer between 1 and 255. the larger the number, the greater the range of light.

9.Gray: remove the color of the image and display it as black and white

10. Invert: reverses the color of the image to produce a negative-like effect

11. Light: the effect of placing a light source, which can be used to simulate the projection effect of a light source on an object Note: this effect requires setting the position and intensity of the light with JS.

12. Mask: create a transparent mask

Mask (Color=?) Color: sets the background color so that the object obscures the transparency of the background color.

13. RevealTrans: establish the switching effect

RevealTrans (Duration=?, Transition=?)

Duration: is the switching time in seconds.

Transtition: is the switching mode, which can be set from 0 to 23.

Note: if you want to switch between pages, you can add a line of code to the area:. If the elements used in the page must be used in conjunction with JS.

14. Shadow: create another shadow effect Shadow (Color=?, Direction=?) Color: refers to the color of the shadow.

Direction: sets the direction of the projection. 0 degrees means vertical upward, and then every 45 degrees is a unit.

15. Wave: ripple effect

Wave (Add=?, Freq=?, LightStrength=?, Phase=?, Strength=?) Add: indicates whether the original object is displayed, 0 means not displayed, and non-0 indicates that the original object is to be displayed. Freq: sets the number of fluctuations. LightStrength: sets the light intensity of the wave effect, from 0 to 100. 0 is the weakest and 100 is the strongest. Phase: the initial phase angle of the wave. A percentage value from 0 to 100. (for example, 25 equals 90 degrees, while 50 equals 180 degrees. ) Strength: sets the magnitude of the wave swing.

16. Xray: show the outline of the picture, X-ray effect

Note: when using the CSS filter, you must use elements that have areas, such as tables, images, etc. Elements without regions such as text and paragraphs cannot use the CSS filter. For such elements, we can set the Height and Width styles or coordinates of the elements. "

This is the answer to the question about what the commonly used css style attributes are. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel to learn more about it.

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.