This is the 15th day of my participation in the August More text Challenge. For details, see more text Challenge

css3

css3

Css3 some changes: box model

Elastic box

Media queries

Background change:

The transition:

Deformation of the transform:

Animation, animation

Rounded corners

Box shadows and text shadows.

Adding selectors

Css3 is used without any declaration. HTML can use CSS3, and HTML5 can use CSS3.

Browsers for cSS3 do not know the new properties will not report an error using silent processing.

Property selector

Select elements by tag attribute []

For example:

img[src="images/1.jpg"] {
    border-color: red;
}
Copy the code

The beginning matches: ^=

For example:

 a[href ^= "html"] {
  color: red;
}
Copy the code

End match: $=

For example:

 a[href $= "html"] {
  color: green;
}
Copy the code

Any match: *=

For example:

 a[href *= "2"] {
  color: red;
}
Copy the code
  • Group matching:~ =

Attribute values must be independent units (only one attribute value exists and must be separated by a space).

Html5 can customize attributes to data-

  • Short cross match:| =

The selected element must begin with the attribute value, and if there are any other attribute values, they must be separated by a short bar

Note:

Attribute selectors do not have to start with a tag. It is also legal to omit labels

Property selectors can also use continuous intersections

For example:

img[src="images/2.jpg"][alt="Image loading failed"] {
  border-color: green;
}
Copy the code

Son sequence selector

Son order selector: select by son rank in the parent element, only care about son rank in the parent box does not care about the son tag type.

Element :first-child {select the first child in the parent element}

Element :last-child {last son}

Element: nth-child (n) {arbitrary} n starts at 1

Element: nth-child(an + b) {consecutive multiple}

Element: nth-last-child(n) {the number of sons from the bottom} n also starts from the bottom

Son type sequence selector

Emphasize ranking within the same label (meaning of type)

:first-of-type Indicates the first-born of the same label

:last-of-type Indicates the last one

:nth-of-type(n) Any sequence number starts with 1

:nth-of-type(an + b)

: the NTH – last – of – type (n) bottom

Relational node selector

Div p {}

Child selector > Selected elements must be son nodes cannot select grandchildren and other descendants of elements

+ first sibling (same parent)

~ All the brothers behind

CSS 3 pseudo-classes

Previously, only the A tag had a legal pseudo-class

a:link  a:visited   a:hover  a:active

Any tag can be written with the hover pseudo-class

For example:

 .box:hover {
 /* Mouse hover pseudo-class */
 background-color: red;
}
Copy the code

Form element pseudo-class

The :focus form gets the focus pseudo-class

:disabled Indicates that the form pseudo-class is unavailable

:enabled Indicates the available form pseudo-class

Forms can be set to a property, disabled (unavailable forms), and all forms are available by default

The :checked form is selected pseudo-class

Node pseudo-classes

:only-child The selected element must be the only child node pseudo-class of an element

:empty empty node pseudo-class (tags with no content inside Spaces, indents, line breaks, etc.)

Range of pseudo element

::before

Inserts before the existing content

An attribute that must be written The value of the attribute can write the content to be added or “”

Inline elements cannot be set width and height, want to set width and height of the block

::after

Adds after the existing content

Exactly the same as before

border-radius

Rounded corners

* Pixel representation

border-radius: 20px 30px 40px 50px;

You can break it down by Angle: top/bottom, left/right

Round: half side length (limit)

Fillet four angles are set, close to the short side (limit is half the short side) capsule type

div:nth-child(3) {
  width: 400px;
  height: 200px;
  /* The limit is half the short side */
  border-radius: 100px;
}
Copy the code

If some angles are not rounded, more edges will be rounded, and the limit is all short edges. (semicircle)