Summary of Common CSS Properties Four-CSS Tutorial-php.cn

******* Common CSS properties *********

##【font】

font Sets or retrieves text properties in an object. This property is a composite property.

Parameters using the first declaration method must be arranged in the order shown above, and font-size and font-family cannot be ignored. Only one value is allowed per parameter. If omitted, the default value of the independent property corresponding to its parameter will be used.

: Specify the text font style

: Specify whether the text is small uppercase letters

: Specify the thickness of the text font

: Specify the text font size

: Specify the line height of the text font

: Specify the text to use a certain font or font sequence

caption: Use the text of a titled system control Font (such as buttons, menus, etc.) (CSS2)

icon: Use the font of the icon label (CSS2)

menu: Use the font of the menu (CSS2)

message- box: Use the text font of the information dialog box (CSS2)

small-caption: Use the font of the small control (CSS2)

status-bar: Use the font of the window status bar (CSS2)

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

font-family： Set or retrieve for A sequence of font names for the text in the object.

Default value: determined by user agent

The sequence can contain embedded fonts.

Generally, font references can be quoted without quotation marks. If the font name contains spaces, numbers or symbols (such as connectors), quotation marks are required to avoid causing errors.

The user agent will traverse the defined font sequence until a certain font is matched.

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

As above font definition, assuming that you do not have the helvetica font on your machine, but you have verdana, this Your text will be displayed in verdana.

: Font name. In order of priority. Separate with commas. If the font name contains spaces or Chinese characters, it should be enclosed in quotation marks

: Font sequence name.

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

font-size: Set or retrieve the font size in the object.

: Adjust relative to the font size in the parent object. Calculated using proportional em units. Optional parameter value: smaller | larger

: Use the length value to specify the text size. Negative values are not allowed.

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

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

font-stretch: Set or retrieve whether the text in the object is stretched horizontally.

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

ultra-condensed: 4 bases narrower than normal text width.

extra-condensed: 3 bases narrower than the normal text width.

condensed: 2 bases narrower than the normal text width.

semi-condensed: 1 base narrower than normal text width.

normal: Normal text width

semi-expanded: 1 base wider than the normal text width.

expanded: 2 bases wider than the normal text width.

extra-expanded: 3 bases wider than the normal text width.

ultra-expanded: 4 bases wider than normal text width.

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

font-style: Set or retrieve the text font style in the object.

normal: Specify the text font style as normal font

italic: Specify the text font style as italic. For special fonts that are not designed with italics, oblique will be applied if you want to use an italic appearance

oblique: Specifies the text font style to be an italic font. Artificially slant the text instead of selecting the italics in the font

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

font-variant: Sets or retrieves whether the text in the object is small uppercase letters.

normal: Normal font

small-caps: Small uppercase font

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

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

The role is determined by the specific font variable mapping of the fonts installed on the client system. The system selects the nearest

match. That is, users may not see the difference between different values.

normal: Normal font. Equivalent to number 400

bold: Bold. Equivalent to number 700.

bolder: Extra bold. It is also equivalent to the role of strong and b objects

lighter: Thin body

: Use numbers to indicate the text font thickness. Value range: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

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

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

display:inline Let the elements displayed as blocks inline be displayed inline

The function of display:inline is to set the object to be displayed as an inline element. inline is the default value of the inline object

DIV1

DIV2

Here DIV1 and DIV2 occupy one line respectively, but after you add attributes to them, they change

DIV1

#DIV2

DIV1 and DIV2 are now displayed on the same line

display:block is to display the element as a block-level element.

display:inline-block renders the object as an inline object, but the content of the object is as Block object rendering. Adjacent inline objects will be rendered on the same line, allowing spaces.

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

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

【border】 Composite attribute. Sets the properties of the object's border.

If you use this composite attribute to define a single parameter, the default values of other parameters will unconditionally override the corresponding single attribute settings.

border-color: Set or retrieve the border color of the object.

If all four parameter values are provided, the four sides will be applied in the order of upper, right, lower, and left.

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

If two are provided, the first one is for up and down, and the second one is for left and right.

If three are provided, the first one is for top, the second one is for left and right, and the third one is for bottom.

If border-width is equal to 0 or border-style is set to none, this attribute will be ignored.

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

border-image composite attribute. Sets or retrieves the object's border style to fill with an image.

Use images instead of border-style to define border styles. When border-image is none or the image is invisible, the border style effect defined by border-style will be displayed.

[ border-image-source ]: Set or retrieve whether the object's border uses an image definition style or image source path.

[ border-image-slice ]: Set or retrieve the segmentation method of the object's border background image.

[ border-image-width ]: Set or retrieve the border thickness of the object.

[ border-image-outset ]: Sets or retrieves the extension of the object’s border background image.

[ border-image-repeat ]: Set or retrieve the tiling method of the object's border image.

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

border-radius Set or retrieve objects using rounded corners frame. Provide 2 parameters, separated by "/". Each parameter allows 1 to 4 parameter values to be set. The first parameter represents the horizontal radius, and the second parameter represents the vertical radius. If the second parameter is omitted, then The default is equal to the first parameter

Horizontal radius: If all four parameter values are provided, the top-left, top-right, and bottom-right ( The order of bottom-right) and bottom-left (bottom-left) acts on the four corners.

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

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

If three are provided, the first one is used for top-left, the second one is used for top-right, bottom-left, and the third one is used for Bottom-right.

The vertical radius also follows the above 4 points.

: Set the object’s fillet radius length with a length value. Negative values are not allowed

: Sets the object’s corner radius length as a percentage. Negative values are not allowed

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

border- width sets or retrieves the object's border width.

If all four parameter values are provided, they will be applied to the four sides in the order of upper, right, lower, and left.

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

If two are provided, the first one is for up and down, and the second one is for left and right.

If three are provided, the first one is for top, the second one is for left and right, and the third one is for bottom.

If border-style is set to none, this attribute will have no effect.

: Use the length value to define the thickness of the border. Negative values are not allowed

medium: Defines the default thickness of the border.

thin: Define a border that is thinner than the default thickness.

thick: Defines a border thicker than the default thickness.

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

border-left-style Set or retrieve the left border style of the object.

If border-width is equal to 0, this attribute will have no effect.

none: No outline. border-color and border-width will be ignored

hidden: Hide the border. IE7 and below do not yet support

dotted: dotted outline. Displayed as dashed effect under IE6

dashed: dashed outline.

solid: solid outline

double: double line outline. The sum of two single lines and their interval is equal to the specified border-width value

groove: 3D groove outline.

ridge: 3D convex groove profile.

inset: 3D concave edge contour.

outset: 3D convex edge outline.

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

border-top Composite attribute. Sets the properties of the object's top border.

If you use this composite attribute to define a single parameter, the default values of other parameters will unconditionally override the corresponding single attribute settings.

[ border-top-width ]: Set or retrieve the top border width of the object.

[ border-top-style ]: Set or retrieve the top border style of the object.

[ border-top-color ]: Set or retrieve the top border color of the object.

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

box-shadow Sets or retrieves the object shadow.

You can set multiple sets of effects, and each set of parameter values is separated by commas.

none: No shadow

①: The first length value is used to set the horizontal offset value of the object’s shadow. Can be a negative value

②: The second length value is used to set the vertical offset value of the object's shadow. Can be a negative value

③: If the third length value is provided, it is used to set the shadow blur value of the object. Negative values are not allowed

④: If the fourth length value is provided, it is used to set the shadow extension value of the object. Can be negative

: Sets the color of the object's shadow.

inset: Set the shadow type of the object to inner shadow. When the value is empty, the shadow type of the object is outer shadow

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

Transparency

is written as:

{
filter: alpha(opacity=10);  //针对ie
 
}

Copy after login

This way it can basically be used in all browsers Achieving transparency

The above is the summary of the fourth common CSS properties. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!