css3 new attribute API_html/css_WEB-ITnose

Written in front: Since the CSS5 standard has not yet been fully finalized, browsers with various cores have their own standards. In order not to confuse attributes, each browser adds the following in front of their own standards: a prefix.

-moz- mainly firefox

-webikt-mainly chrome google and safari

- o- Mainly used in browsers on Macs such as Opera

The following mainly summarizes the new attributes of CSS3 from the aspects of color, text, selector, etc.

Color

css1 and css2 can only express color in the following three ways

Color name

　eg:color:red

HEX mode

　　 (Syntax: #RRGGBB or #RGB The value range of each point is 00- FF)

RGB mode

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　logue 0%~200%)

CSS3 cannot express transparency in the above mode, and the following expression method has been added

RGBA mode

Syntax: RGBA(R,G,B,A) R red G green B blue A transparent

The value of each point is similar to RGB. The value of A is between 0 and 1

eg: rgba(255,0,0,0.5) represents translucent red

HSL mode (color wheel mode)

Syntax: HSL(H,S,L) H hue S saturation L brightness

The value of H is between 0 and 360. 0 or 360 means red, 120 means green and 240 means blue.

The values ​​of S and L are both between 0% and 100%

HSLA mode

The syntax and values ​​of each point are the same as those of HSL mode. The only difference is that the A at the end represents transparency

eg:hsl(360,50%,50%,0.5 ) Red

Secondly, you can use color:transparent and filter:alpha(opacity=50) in css3 (no filter is only limited to IE)

Text

The commonly used text attributes in css1 and css2 are

The commonly used text attributes in css3 are

The following will introduce a css3 text attribute

text-overflow attribute

Function: Set the text processing method when the content overflows.

Value:

clip: Default value

When the text in the object overflows, the omission mark (...) will not be displayed, but the overflowing part will be cropped. .

ellipsis:

Displays an ellipsis mark (...) when the text within the object overflows.

Note: This attribute needs to be used in conjunction with the over-flow:hidden attribute (out of processing) and white-space:nowrap (disable line breaks), otherwise the effect will not be seen

text-align Attribute

Function: Set text alignment

Value:

　left: Default value content is left aligned.

Center: The content is centered.

Right: Content is aligned to the right.

Justify: Justify the content on both ends. At the time of writing this document, only Firefox can see the correct effect

Start: The content is aligned to the starting boundary. (CSS3)

End: Content alignment end boundary. (CSS3)

text-transform attribute

Function: Set the capitalization and other forms of text conversion

Value:

none: Default value No conversion

capitalize: Convert the first letter of each word to uppercase

uppercase: Convert to uppercase

lowercase: Convert to lowercase

full-width: Set the left and right characters to full-width form (CSS3) not supported

full-size-kana: Convert all small kana characters to normal kana (CSS3) not supported For example: Turkish.

text-decoration attribute

Function: Set text decoration line.

Value:

[ text-decoration-color]:

specifies the color of text decoration.

[ text-decoration-line ]: does not support

Specify the type of text decoration line. Equivalent to the text-decoration attribute

[ text-decoration-style] in CSS1:

is not supported to specify the style of text decoration.

blink: The decoration of the specified text is blinking. Only opera and firefox

For example: text-decoration : overline CSS1 instance

text-decoration : #F00 double overline CSS3 instance

text-decoration-line attribute

Function: Set the position of the text modification line.

Value:

none: Default value

The specified text has no decoration

underline:

The decoration of the specified text is underline

overline:

The decoration of the specified text is an overline

line-through:

The decoration of the specified text is a through line

text-decoration-color attribute

Function: Set the color of text decoration lines

Value: Specify color.

text-decoration-style attribute

Function: Set the style of text decoration lines.

Values:

solid: default value solid line

double: double line

dotted: dotted line

dashed: Dotted line

wavy: Wavy line

text-shadow attribute

Function: Set the shadow effect of text

Value:

none: Default value 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 0: no blur, 10px: blur level 10 pixels

Set the color of the object's shadow.

text-fill-color attribute

Function: Text fill color, specify the color of the text fill part

Value: Color

Note: To use this attribute, you need to use the browser prefix

text-stroke attribute

Function: text border color, specify the color of the text stroke part

takes Value:

[ text-stroke-width]:

Set or retrieve the stroke thickness of the text in the object

[ text-stroke-color]:

Set or retrieve the stroke color of the text in the object

Note: Using this attribute requires using the browser prefix

text-stroke-width attribute

Function: Specifies the width of the stroke part of the text. The derived attribute of text-stroke

Value: length

Note: Using this attribute requires the browser prefix

The text-stroke-color attribute

functions: specifies the color of the stroke part of the text. The derived attribute of text-stroke

value: color

Note: required to use this attribute The browser seems to have the prefix

tab-size attribute

. Its function is to set the display length of a tab indent key on the page.

Value: Default value: 8 (length or integer value)

Explanation: Integer value: z-index:1 1 here is an integer value, no unit is needed, similar to a multiple .

Length: margin:10px where 10px is the length value.

Note: This attribute is only valid when displayed within the

 tag (preformatted state). Because the browser automatically ignores whitespace characters. 
 
 Opera and Firefox need to use browser private prefixes. 
 
word-wrap attribute
 
Function: How to handle overflow text (especially English-like text). 
 
 Values: 
 
normal: Default value 
 
 Allow content to push or overflow the specified container boundaries. 
 
break-word: The content will break within the boundaries. 
 
 Line breaks are allowed within words if necessary. 
 Selector
Element Selector
 
Relationship Selector
 
Pseudo-Class Selector
 
Attribute Selector
 
Pseudo-Object Selector
 
 css1 and css2 
 
css1&css2 element selector 
 
 
css1&css2 relationship selector 
 
 
css1&css2 pseudo-class selection 
 
 
css1&css2 attribute selector
 
 
css1&css2 pseudo-object selector
 
 
css3 relationship selector 
 
 
css3 pseudo-class selector
 
 
css3 attribute selector
 
 
css3 pseudo-object selector