CSS3 Common Properties

1. Pseudo-class selector pseudo-classes selectors

Selectors Selector	CSS Version Version	Description Brief introduction
E:link	CSS1	Sets the style of hyperlink a before it is accessed.
e:visited	CSS1	Sets the style of hyperlink A in which the link address has been accessed out of date.
E:hover	Css1/2	Sets the style of the element when it hovers over it.
E:active	Css1/2	Sets the style of an element when it is activated by the user (an event that occurs between mouse clicks and releases).
E:focus	Css1/2	Sets the style of the element when it becomes the input focus (the onfocus event of the element occurs).
E:lang (FR)	CSS2	Matches an e element that uses a special language.
E:not (s)	CSS3	Matches an element that does not contain an S-selector e.
E:root	CSS3	Matches the E element in the document's root element.
E:first-child	CSS2	Matches the first child element of the parent element, E.
E:last-child	CSS3	Matches the last child element of the parent element, E.
E:only-child	CSS3	Matches only one child element of the parent element, E.
E:nth-child (N)	CSS3	Matches the nth child element e of the parent element.
E:nth-last-child (N)	CSS3	Matches the inverse nth child element e of the parent element.
E:first-of-type	CSS3	Matches the first sibling element in the same type, E.
E:last-of-type	CSS3	Matches the last sibling element in the same type, E.
E:only-of-type	CSS3	Matches only one sibling element of the same type, E.
E:nth-of-type (N)	CSS3	Matches the nth sibling element e in the same type.
E:nth-last-of-type (N)	CSS3	Matches the reciprocal nth sibling element e in the same type.
E:empty	CSS3	Matches the element e without any child elements, including the text node.
E:checked	CSS3	Matches the selected element e in the user interface. (used when input type is radio and checkbox)
E:enabled	CSS3	Matches the element e that is in the available state on the user interface.
E:disabled	CSS3	Matches element E in the disabled state on the user interface.
E:target	CSS3	Matches the E element pointed to by the related URL.
@page: First	CSS2	Sets the style used for the first page of the page container. For @page rules only
@page: Left	CSS2	Sets the style that the page container uses for all pages on the left side of the gutter. For @page rules only
@page: Right	CSS2	Sets the style used by all pages in the page container to the right of the gutter. For @page rules only

2, resize

Grammar:

Resize: none | both | Horizontal | Vertical

default value : None

applies to : all sets the overflow except the visible element

Inheritance : None

Value:

None

The user is not allowed to resize the element.

Both

The user can adjust the width and height of the element.

Horizontal:

The user can adjust the width of the element

Vertical

the user can adjust the height of the element.

Description Sets or retrieves whether the area of an object allows user scaling to adjust the element size.

• If you want this property to take effect, you need to set the object's overflow property, which can be either auto,hidden or scroll.
• The corresponding script attribute is resize.

Case:

<style>
. Test{overflow:auto;width:200px;height:100px;resize:both;background: #eee;}
</style>

<div class= "Test" >
<ul>
<li> News list </li>
<li> News list </li>
<li> News list </li>
</ul>
</div>

3,Outline-offset

Grammar:

Outline-offset:<length>

default value : 0

applies to : all elements

Inheritance : None

Value:

<length>:

defines the contour offset with a length value. Negative values are allowed. 0 is based on the border boundary as the reference point, positive value from the border boundary to the extension, negative values from the border boundary toward the contraction.

Description Sets or retrieves the value of the line outline offset container outside the object. See Outline properties.

• The corresponding script attribute is outlineoffset.

Case:

<style>
. test{width:220px;padding:10px;outline:1px dashed #333; outline-offset:4px;border:3px solid #333;}
</style>
<div class= "Test" > Note the distance of the dashed contour offset container <br/>outline-offset:4px;</div>

4.transform(transform)

Grammar:

transform: none | Matrix (<number>,<number>,<number>,<number>,<number>,<number>)? Translate (<LENGTH>[,<LENGTH>])? TranslateX (<length>)? Translatey (<length>)? Rotate (<angle>)? Scale (<NUMBER>[,<NUMBER>])? ScaleX (<number>)? ScaleY (<number>)? Skew (<ANGLE>[,<ANGLE>])? Skewx (<angle>) | | Skewy (<angle>)?

default value : None

applies to : all block-level elements and some inline elements

Inheritance : None

Value:

None

No conversion

Matrix (<number>,<number>,<number>,<number>,<number>,<number>):

Specifies a 2D transformation in the form of a (a,b,c,d,e,f) transformation matrix with a value of six, equivalent to applying a [a,b,c,d,e,f] transformation matrix directly

Translate (<length>[, <length>]):

Specifies the 2D translation (2D translation) of the object. The first parameter corresponds to the x-axis, and the second parameter corresponds to the y-axis. If the second parameter is not provided, the default value is 0

TranslateX (<length>):

Specifies the pan of the x-axis (horizontal orientation) of the object

Translatey (<length>):

Specifies the translation of the y-axis (vertical direction) of the object

Rotate (<angle>):

2D rotation (2D rotation) of the specified object, preceded by the definition of the Transform-origin attribute

Scale (<number>[, <number>]):

Specifies the 2D scale (2D scaling) of the object. The first parameter corresponds to the x-axis, and the second parameter corresponds to the y-axis. If the second parameter is not provided, the value of the first parameter is taken by default

ScaleX (<number>):

Specifies the (horizontal) scaling of the x-axis of an object

ScaleY (<number>):

Specifies the (vertical) scaling of the y-axis of an object

Skew (<angle> [, <angle>]):

specifies the object skew transformation (skew-cut skew). The first parameter corresponds to the x-axis, and the second parameter corresponds to the y-axis. If the second parameter is not provided, the default value is 0

Skewx (<angle>):

Specifies the (horizontal) distortion of the x-axis of an object

Skewy (<angle>):

Specifies the (vertical) distortion of the y-axis of an object

Description Sets or retrieves the transformation of an object.

• The corresponding script attribute is transform.

* Transform-origin

Grammar:

transform-origin: [<percentage> | <length> | left | center①|] [<percentage> | <le ngth> | Top | center②| Bottom]?

default value : 50% 50%, effect equal to center center

applies to : all block-level elements and some inline elements

Inheritance : None

Value:

<percentage>:

Specifies the coordinate value in percent. Can be a negative value.

<length>:

Specifies the coordinate value with the length value. Can be a negative value.

Left

Specify the horizontal axis of the origin to be left

Center①:

Specifies the horizontal axis of the origin point as center

Right

Specify the horizontal axis of the origin to right

Top

Specify the vertical axis of the origin as top

Center②:

Specify the ordinate for the origin point as center

Bottom

specifies that the ordinate of the origin point is bottom

Description Sets or retrieves an object to be converted at an Origin point.

• This property provides a value of 2 parameters.
• If two is supplied, the first one is for the horizontal axis and the second is for the ordinate.
• If only one is provided, the value will be used for the horizontal axis, and the ordinate will default to 50%.
• The corresponding script attribute is transformorigin.

5,transition

Grammar:

transition: [Transition-property] | | [Transition-duration] | | [Transition-timing-function] | | [Transition-delay]

Default value : see each individual property

applies to : all elements, including pseudo-objects: after and: Before

Inheritance : None

Value:

[Transition-property]:

Retrieves or sets the properties of a participating transition in an object

[Transition-duration]:

Retrieving or setting the duration of an object transition

[Transition-timing-function]:

Retrieves or sets the animation type for transitions in an object

[Transition-delay]:

retrieving or setting the time for object delay transitions

Description Composite properties. Retrieves or sets the transition when an object is transformed.

• You can define transition effects for multiple properties of the same element. Example:

  Abbreviated mode:

  transition:border-color .5s ease-in .1s, background-color .5s ease-in .1s, color .5s ease-in .1s;

  Split mode:

  transition-property:border-color, background-color, color;transition-duration:.5s, .5s, .5s;transition-timing-function:ease-in, ease-in, ease-in;transition-delay:.1s, .1s, .1s;

• If more than one transition property is defined, and the other property has only a single parameter value, then all properties that require a transition apply the same parameter value. Thus, the above example can be abbreviated:

  Split mode:

  transition-property:border-color, background-color, color;transition-duration:.5s;transition-timing-function:ease-in;transition-delay:.1s;

• If you need to define multiple transition properties and you do not want to specify which attribute transitions are specific, and if the other properties have only one parameter value, then the above example can be abbreviated:

  Abbreviated mode:

  transition:all .5s ease-in .1s;

  Split mode:

  transition-property:all;transition-duration:.5s;transition-timing-function:ease-in;transition-delay:.1s;

• The corresponding script attribute is transition.

6, Animation Animation

Properties Property	CSS Version Version	Inherit from Parent Description of inheritance	Brief introduction
Animation	CSS3	No	Composite properties. Retrieves or sets the animation effect applied to an object
Animation-name	CSS3	No	Retrieves or sets the name of the animation to which the object is applied
Animation-duration	CSS3	No	Retrieves or sets the duration of an object animation
Animation-timing-function	CSS3	No	Retrieves or sets the transition type of an object animation
Animation-delay	CSS3	No	Retrieves or sets the time the object animation is delayed
Animation-iteration-count	CSS3	No	Retrieves or sets the number of cycles for an object animation
Animation-direction	CSS3	No	Retrieves or sets whether the object animation moves backwards in the loop
Animation-play-state	CSS3	No	Retrieves or sets the state of an object animation
Animation-fill-mode	CSS3	No	Retrieves or sets the state outside the object's animation time

7. User-selectGrammar:

user-select: none | Text | All | Element

Default value : Text

applies to : all elements except the replacement element

Inheritance : None

Value:

None

Text cannot be selected

Text

You can select text

All

Can be selected when all content is as a whole. If you double click or click on a child element in the context, the selected part will be the highest ancestor element that is backtracking upward with that child element.

Element

You can select text, but the selection is constrained by the bounds of the element

Description Sets or retrieves whether the user is allowed to select text.

• ie6-9 does not support this property, but it supports the use of label properties onselectstart= "return false;" To achieve the user-select:none effect; Safari and chrome also support this tag property;
• Until Opera12.5 still does not support this property, but like Ie6-9, the use of the private label property unselectable= "On" is supported to achieve the effect of User-select:none Another value of unselectable is off;
• In addition to Chrome and Safari, in other browsers, if the text is set to -ms-user-select: none; , the user will not be able to start selecting text in that block of text. However, if the user starts selecting text in another area of the page, the user can still select the area text that sets the text to -ms-user-select:none; ; the
• corresponding script attribute is Userselect .

Case Study:<style>
. Testselect1{padding:10px;-webkit-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none; Background: #eee;}
. Testselect2{padding:10px;-webkit-user-select:none;-moz-user-select:text;-o-user-select:none;user-select:none; Background: #eee;}
. Testselect3{padding:10px;-webkit-user-select:none;-moz-user-select:all;-o-user-select:none;user-select:none; Background: #eee;}
</style>

<div class= "TestSelect1" > Choose I try, you will find how also choose not to me, wow haha </div>
<div class= "TestSelect2" onselectstart= "return false;" unselectable= "on" > I am normal </div>
<div class= "TestSelect3" onselectstart= "return false;" unselectable= "on" > select I'll try and you'll find we're a whole, wow haha </di

8 . New Border Properties

Properties	Description	CSS
Border-image	Sets the shorthand property for all border-image-* properties.	3
Border-radius	Sets the shorthand properties for all four Border-*-radius properties.	3
Box-shadow	Add one or more shadows to the box.	3

CSS3 Common Properties