CSS3 New Property API

Written in front: because the CSS5 standard has not been completely set down, so the various kernel browser has its own standards, in order not to confuse the attributes, so the home before the respective standard prefix added.

• -moz-is mainly Firefox Firefox
• -webikt-is mainly chrome Google and Safari
• -o-is primarily used on Mac browsers like opera

The following mainly from the color, text, selectors and other aspects to summarize the CSS3 new properties

Color

Css1 and CSS2 can only represent colors in the following three ways

• Color name

Eg:color:red

• Hex mode

(Syntax: #RRGGBB或 #rgb The value range of the points is 00-ff)

• RGB mode

(Syntax: RGB (R,G,B) points have a value range of 0~255 or 0%~200%)

CSS3 does not represent transparency for the above pattern, and adds the following representation

Rgba Mode

Syntax: RGBA (r,g,b,a) R red G Green B Blue A Transparent

The value of each point is similar to the RGB a value of 0~1

Eg:rgba (255,0,0,0.5) indicates translucent red

HSL mode (color wheel mode)

Syntax: HSL (h,s,l) H-tone S satiety L brightness

H is 0~360 between 0 or 360 means red 120 means green 240 means blue

The S and L values are between 0% and 100%.

Hsla Mode

Syntax and the value of each point with HSL mode, the only difference is that the following a indicates transparency

EG:HSL (360,50%,50%,0.5) Red

Second, you can use the color:transparent in CSS3 and use the filter Filter:alpha (opacity=50) (not filter mirror only limited to IE)

text

The text attributes commonly used in CSS1 and CSS2 are

The text attributes commonly used in CSS3 are

Here's a CSS3 Text property, respectively.

Text-overflow Property

Function: Sets the text processing mode under the content overflow state.

Value:

Clip: Default value

Omit tags (...) are not displayed when text inside an object overflows. ), instead of cutting out the overflow part.

Ellipsis:

An ellipsis mark (...) is displayed when text inside an object overflows. ）。

Note: This property needs to be used in conjunction with the Over-flow:hidden property (out of processing) and white-space:nowrap (no line wrapping), otherwise you cannot see the effect

Text-align Property

Function: Set the text alignment

Value:

Left: The contents of the default value are aligned.

Center: Content Center-aligned.

Right: the content is justified.

Justify: Content is justified on both sides. Only Firefox can see the correct effect when writing this document

Start: Content snaps to the start boundary. (CSS3)

End: Content aligns to the end boundary. (CSS3)

Text-transform Property

Function: Set the conversion of the text in the form of the case

Value:

None: Default Value No conversion

Capitalize: Converts the first letter of each word to uppercase

Uppercase: Convert to uppercase

Lowercase: Convert to lowercase

Full-width: The left and right word subscript character for full-width form (CSS3) does not support

Full-size-kana: Converting all small kana characters to ordinary pseudonyms (CSS3) is not supported for example: Turkish.

Text-decoration Property

Function: Sets the text decoration line.

Value:

[Text-decoration-color]: not supported

Specifies the color of the text decoration.

[Text-decoration-line]: not supported

Specifies the kind of text decoration line. Text-decoration property equivalent to CSS1

[Text-decoration-style]: not supported

Specifies the style of the text decoration.

Blink: Specifies that the decoration of the text is blinking. Opera and Firefox only

Example: Text-decoration:overline CSS1 Instance

Text-decoration: #F00 Double overline CSS3 instance

Text-decoration-line Property

Function: Sets the position of the text decoration line.

Value:

None: Default value

Specify text without decorations

Underline:

The decoration of the specified text is underlined

Overline:

The decoration of the specified text is underlined

Line-through:

The decoration of the specified text is a penetrating line

Text-decoration-color Property

Function: Sets the color of the text decoration line

Value: Specifies the color.

Text-decoration-style Property

Function: Sets the style of the text decoration line.

Value:

• Solid: Default Solid Line
• Double: two-wire
• Dotted: dot-like line
• Dashed: Dashed line
• Wavy: Wavy Line

Text-shadow Property

Function: Sets the shadow effect of the text

Value:

None: Default Value No Shadow

• <length> the 1th length value is used to set the shadow horizontal offset value of the object. Can be a negative value
• <length> the 2nd length value is used to set the shadow vertical offset value of the object. Can be a negative value
• <length> Sets the shadow blur value for an object if a 3rd length value is provided. Negative value not allowed 0: no blur, 10px: Blur degree 10 pixels
• <color> sets the color of the object's shadow.

Text-fill-color Property

Effect: Text fill color, specifying the color of the text fill part

Value: Color

Note: Using this property requires a browser-like prefix

Text-stroke Property

Effect: text border color, specifying the color of the text stroke part

Value:

• [Text-stroke-width]:

Sets or retrieves the stroke thickness of text in an object

• [Text-stroke-color]:

Sets or retrieves the stroke color of text in an object

Note: Using this property requires a browser-like prefix

Text-stroke-width Property

Function: Specifies the width of the text Stroke section, Text-stroke derived property

Value: Length

Note: Using this property requires a browser-like prefix

Text-stroke-color Property

Function: Specifies the color of the text stroke portion, Text-stroke derived property

Value: Color

Note: Using this property requires a browser-like prefix

Tab-size Property

Function: Sets a tab indent key to display the length of the page.

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

Explain: integer value: z-index:1 here 1 is the integer value, no units, similar multiples.

Length: margin:10px The 10px here is the length value.

Note: This property is only visible within the <pre> tab (pre-formatted state). Because the browser automatically ignores whitespace characters.

Opera and Firefox need to use the browser's private prefix.

Word-wrap Property

Effect: The way in which the overflow text (especially the English type) is handled.

Value:

• Normal: Default value

Allows the content to open or overflow the specified container boundary.

• Break-word: Content will be wrapped within the boundary.

If necessary, word breaks are allowed inside words.

Selector Selector

Element Selector

Relationship Selector

Pseudo class Selector

Property Selector

Pseudo-Object selectors

Css1 and CSS2

css1&css2 Element Selector

css1&css2 Relationship Selector

css1&css2 Pseudo class selector

Css1&css2 Property Selector

css1&css2 Pseudo-Object selector

CSS3 Relationship Selector

CSS3 Pseudo class selector

CSS3 Property Selector

CSS3 Pseudo-Object selector

CSS3 New Property API