CSS Common Properties Summary four

CSS Common Properties *********

"Font"

Font Sets or retrieves the text attributes in an object. This property is a composite property.

The first method of declaring parameters must be in the same order as above, and font-size and font-family are not negligible. Only one value is allowed per parameter. Ignores the default value of the standalone property whose arguments correspond to.

: Specify text font style

: Specifies whether the text is a small uppercase letter

: Specifies the thickness of the text font

: Specify text font size

: Specifies the line height of the text font

: Specifies that the text uses a font or a font sequence

Caption: Using text fonts (such as buttons, menus, etc.) for system controls with captions (CSS2)

Icon: Font (CSS2) using icons tags

Menu: Using the font of the menus (CSS2)

Message-box: Text font using the Info dialog box (CSS2)

Small-caption: Using the font of the Gizmo (CSS2)

Status-bar: Using the font of the window's status bar (CSS2)

--------------------------------------------------------------------

Font-family: Sets or retrieves a sequence of font names for the text in the object.

Default value: Determined by user agent

The sequence can contain embedded fonts.

Generic font references can be unquoted, and if the font name contains spaces, numbers, or symbols (such as connectors), enclose the quotation marks to avoid throwing an error.

The user agent iterates through the defined font sequence until it matches a font.

Body{font-family:helvetica,verdana,sans-serif;}

As in the font definition, if you do not have a Helvetica font on your machine, but you have Verdana, you will see your text in Verdana.

: Font name. Ranked in order of precedence. separated by commas. If the font name contains spaces or Chinese, you should enclose it in quotation marks

: the font sequence name.

-----------------------------------------------------------------------------------------------

Font-size: Sets or retrieves the font size in an object.

: Adjusts according to the font of the object. Optional parameter value: Xx-small | X-small | Small | Medium | Large | X-large | Xx-large

With medium as the base reference, Xx-small is equivalent to Medium 3/5 (H6), X-SMALL:3/4,SMALL:8/9 (H5), Medium:1 (H4), LARGE:6/5 (H3), X-LARGE:3/2 (H2), X X-LARGE:2/1 (H1),

: Relative adjustment relative to the font size of the parent pair image. Calculated using proportional em units. Optional parameter value: smaller | Larger

: Specifies the text size with a length value. Negative values are not allowed.

: Specifies the text size in percent. The percentage value is based on the size of the font in the parent object. Negative values are not allowed.

----------------------------------------------------------------------------------------------------

Font-stretch: Sets or retrieves whether the text in an object is stretched horizontally.

The stretch of the text is relative to the normal width of the font displayed by the browser.

Ultra-condensed: 4 cardinality narrower than normal text width.

Extra-condensed: 3 cardinality narrower than normal text width.

Condensed: 2 cardinality narrower than normal text width.

Semi-condensed: 1 cardinality narrower than normal text width.

Normal: Text width

Semi-expanded: 1 Bases wider than normal text width.

Expanded: 2 bases wider than normal text width.

Extra-expanded: 3 Bases wider than normal text width.

Ultra-expanded: 4 Bases wider than normal text width.

------------------------------------------------------

Font-style: Sets or retrieves the font style of text in an object.

Normal: Specifies that the text font style is normal

Italic: Specifies that the text font style is italic. For special fonts that do not have italic design, apply oblique if you want to use italic appearance

Oblique: Specifies that the text font style is italic. Artificially tilt the text instead of selecting italic characters in the font

---------------------------------------------------------------------------------------------

Font-variant: Sets or retrieves whether the text in the object is a small, uppercase letter.

Normal: Regular font

Small-caps: Small Caps font

----------------------------------------------------------

Font-weight: Sets or retrieves the thickness of the text font in an object.

The effect is determined by a specific font variable mapping of the fonts installed by the client system. The system selects the most recent

The. In other words, the user may not see the difference between different values.

Normal: the proper font. Equivalent to number 400

Bold: Bold. Equivalent to number 700.

Bolder: Extra bold. It's also equivalent to strong and B objects.

Lighter: Fine body

: Indicates the text font weight with a number. Value Range: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

----------------------------------------------------------------------------------------------------

*************************************************************************************************************** *****

Display:inline the element that appears in the row as a block, into a line display

The function of Display:inline is to set the object as the inline element display, and inline is the default value of the inline object.

DIV1

DIV2

Here DIV1 and DIV2 are on one line, but you changed them after you added the attributes.

DIV1

DIV2

DIV1 and DIV2 are on the same line now.

Display:block is the display of elements as block-level elements.

Display:inline-block objects are presented as inline objects, but the contents of the objects are presented as block objects. Adjacent inline objects are presented in the same line, allowing spaces.

--------------------------------------------------------------------------------------------------------------- ----------

*************************************************************************************************************** ****

The "border" composite property. Sets the properties of the object border.

If you use this composite property to define its individual parameters, the default values for the other parameters will unconditionally override the respective individual property settings.

Border-color: Sets or retrieves the border color of an object.

If you provide all four parameter values, the top, right, bottom, and left orders are used for four edges.

If only one is provided, it will be used for all four sides.

If two is provided, the first one is for top, bottom, and second for left and right.

If three is supplied, the first one is used on, the second one is for left, right, and the third is for the next.

If Border-width equals 0 or Border-style is set to none, this property is ignored.

-----------------------------------------------------------------------------------

Border-image Composite properties. Sets or retrieves the border style of an object using an image to fill.

Use the image instead of Border-style to define the border style. When Border-image is None or the image is not visible, the border style effect defined by Border-style is displayed.

[Border-image-source]: Sets or retrieves whether the border of an object defines the style or image source path with an image.

[Border-image-slice]: Sets or retrieves the way the border background of an object is split.

[Border-image-width]: Sets or retrieves the border thickness of an object.

[Border-image-outset]: Sets or retrieves an extension of the bounding background of an object.

[Border-image-repeat]: Sets or retrieves the way the object's border image is tiled.

------------------------------------------------------------------

Border-radius Sets or retrieves objects using rounded borders. 2 parameters are provided, 2 parameters are separated by "/", each parameter is allowed to set 1~4 parameter values, the 1th parameter represents the horizontal radius, and the 2nd parameter represents the vertical radius, as the 2nd parameter is omitted, the default equals the 1th parameter

Horizontal radius: If all four parameter values are supplied, the order of the upper left (top-left), upper right (top-right), lower right (bottom-right), lower left (bottom-left) is used for Four corners.

If only one is provided, it will be used for all four corners.

If two is provided, the first one is for upper left (top-left), lower right (bottom-right), and the second is for upper right (top-right), lower left (bottom-left).

If three is supplied, the first is used on the left (Top-left), the second is for the upper right (top-right), the lower left (Bottom-left), and the third for the bottom right (bottom-right).

The vertical radius also follows the 4 points above.

: Sets the fillet radius length of the object with the length value. Negative values are not allowed

: Sets the fillet radius length of the object in percent. Negative values are not allowed

----------------------------------------------------------------------

Border-width Sets or retrieves the border width of an object.

If you provide all four parameter values, the top, right, bottom, and left orders are used for four edges.

If only one is provided, it will be used for all four sides.

If two is provided, the first one is for top, bottom, and second for left and right.

If three is supplied, the first one is used on, the second one is for left, right, and the third is for the next.

If Border-style is set to none, this property will lose its effect.

: Defines the thickness of the border with a length value. Negative values are not allowed

Medium: Defines the bounding rectangle for the default thickness.

Thin: Defines a border that is thinner than the default thickness.

Thick: Defines a border that is thicker than the default thickness.

-----------------------------------------

Border-left-style Sets or retrieves the left border style of an object.

If Border-width equals 0, this property loses its effect.

None: No contour. Border-color and Border-width will be ignored

Hidden: Hides the border. IE7 and below are not yet supported

Dotted: dot-shaped outline. IE6 shown as dashed effect

Dashed: Dashed outline.

Solid: Solid Line profile

Double: two-line outline. Two single line with its interval and equal to the specified Border-width value

Groove:3d Groove profile.

Ridge:3d Convex groove profile.

Inset:3d Concave Edge profile.

Outset:3d Convex edge profile.

-------------------------------------------------------

Border-top Composite properties. Sets the properties of the top border of an object.

If you use this composite property to define its individual parameters, the default values for the other parameters will unconditionally override the respective individual property settings.

[Border-top-width]: Sets or retrieves the width of the top border of an object.

[Border-top-style]: Sets or retrieves the top border style of an object.

[Border-top-color]: Sets or retrieves the top border color of an object.

----------------------------------------------------------------

Box-shadow Sets or retrieves the object shadow.

Multiple sets of effects can be set, with each set of parameter values separated by commas.

None: No shadows

①: The 1th length value is used to set the shadow horizontal offset value of an object. Can be a negative value

②: The 2nd length value is used to set the shadow vertical offset value of an object. Can be a negative value

③: A 3rd length value is used to set the shadow blur value of the object. Negative values are not allowed

④: A 4th length value is used to set the shadow Epitaxy value of the object. Can be a negative value

: Sets the color of the object's shadow.

Inset: Sets the shadow type of the object to be an inner shadow. When the value is empty, the shadow type of the object is an outer shadow

--------------------------------------------------------------------------------

Transparency

Written:

{Filter:alpha (opacity=10);  For IE}

This will basically enable transparency in all browsers

The above is the CSS commonly used properties summary four content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

