Common CSS style Properties Daquan (Chinese note)

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: #F5E2EC; /* 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. List of CSS wireframe lines
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. Application of CSS Forms
text box
Button
check box
Select button
Multi-line text box
Drop-down menu option 1 option 2
Eight, 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 */

ix. CSS Filter Properties

Filter: Add a filter effect to the style. Because this property is more informative, we'll go to the next chapter to introduce the filters separately.
1.Alpha: Set Transparency
Alpha (opacity=, finishopacity=, style=?, startx=?, starty=?, finishx=?, finishy=?)
Opacity: Transparency level, range is 0-100, 0 is fully transparent, and 100 is completely opaque. Finishopacity: When you set the transparency effect of a gradient, you specify the transparency at the end, ranging from 0 to 100. Style: Sets the style of the gradient transparency, with a value of 0 for the uniform shape, 1 for the line, 2 for the radial, and 3 for the rectangle. StartX and Starty: Represents the start x and y coordinates of the gradient transparency effect. Finishx and Finishy: represents the coordinates of the gradient transparency effect ending with x and Y.
2.BlendTrans: Fade-in and fade-out effects between images
Blendtrans (duration=?) Duration: Time to fade in or fade out. Note: This filter must be combined with JS to create a sequence of images to make the effect between pictures.
3.BLRU: Create a blur effect
Blur (add=, direction=?, strength=?) ADD: Whether single direction blur, this parameter is a Boolean value, True (not 0) or False (0). Direction: Sets the direction of the blur, where 0 degrees represents a vertical upward and then every 45 degrees is a unit. Strength: Represents the blurred pixel value.
4.Chroma: Set the specified color to transparent
Chroma (color=?) Color: Refers to the colors to be set to transparent.
5.DropShadow: Create Shadow Effect
DropShadow (color=, offx=, offy=?, positive=?) Color: Specifies the colors of the shadow. OFFX: Specifies that the shadow is offset in the horizontal direction relative to the element, Integer. Offy: Specifies that the shadow is offset in the vertical direction relative to the element, Integer. Positive: Is a Boolean value that is true (not 0) when it is represented as an established vulva shadow; False (0), which is expressed as an inner shadow.
6.FlipH: Invert the element horizontally
7.FlipV: Invert the element vertically
8.Glow: Create an external luminous effect
Glow (color=, strength=?)
Color: is the colour that specifies the glow.
Strength: The intensity of light, which can be any integer between 1 and 255, the larger the number, the greater the luminous range.
9.Gray: Remove the color of the image and display it as a black and white image
Invert: Invert the color of the image to produce a film-like effect
Light: The effect of placing lights, which can be used to simulate the projection effect of light sources on objects Note: This effect requires JS to set the position and intensity of the light.
Mask: Create a transparent matte
Mask (color=?) Color: Sets the background to allow the object to cover the part of the background with transparency.
Revealtrans: Creating a toggle Effect
Revealtrans (duration=, transition=?)
Duration: Is the switching time, in seconds.
Transtition: Is the switch mode, can be set from 0 to 23.
Note: If you make a switch between pages, you can add a line of code to the Shadow: Create another Shadow effect Shadow (color=?, direction=?) Color: Refers to the colour of the shadow.
Direction: is the direction in which the projection is set, 0 degrees represents the vertical upward, and then every 45 degrees is one unit.
Wave: Ripple Effect
Wave (add=, freq=, lightstrength=?, phase=?, strength=?) ADD: Indicates whether the original object is displayed, 0 is not displayed, and not 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 represents the weakest and 100 is the strongest. Phase: The starting phase angle of the wave. A percentage value from 0 to 100. (For example: 25 equals 90 degrees, and 50 equals 180 degrees.) ) Strength: Sets the amplitude of the wave swing.
Xray: Showing the outline of the image, the X-ray effect
Note: When using CSS filters, you must use the elements that are in the area, such as tables, pictures, and so on. Instead of using CSS filters for elements that have no area, such as text or paragraphs, we can set the element's height and width style or coordinates. "

Common CSS style Properties Daquan (Chinese note)