Shulou(Shulou.com)06/01 Report--

This article mainly explains "what are the basic knowledge points of css3". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what are the basic knowledge points of css3".

Div > p Select all child elements whose parent element is div

Div + p selects all child elements immediately after div

[target] Select the element a [target] {...} with the target attribute

[target=_blank] Select all child elements whose target is _ blank

[title~=flower] Select the element whose title attribute contains the word flower

[lang | = en] Select all elements whose lang attribute begins with en

[p:first-letter] Select all initials at the beginning of the p element

[p:first-line] Select the first line of each p element

[p:first-child] Select each of the first child elements that belong to its parent element

An element is the first p that must be declared compared to all p elements under a parent element

[p:before] insert content p:before {content: "lines:";}:: css3 before each p element: css2

[p:after] insert content after each p element

[p:lang (it)] Select each with the value of the lang attribute starting with "it"

element

[p~ul] Select the front

Each element of an element

A [src ^ = "https"] Select the ^ representation where src begins with https in all an attributes

A [src$= ".pdf"] Select the $ending with pdf for all attributes src in a

A [src*= "abc"] Select all elements in a whose attribute src contains abc

The first p element p under div p:first-of-type div may not be the first.

The last p element under div p:last-of-type div

There is only one p element in div p:only-of-type div that can contain other elements

Only one p element in div p:only-child div cannot contain other elements ie does not support

The second p element under div p:nth-child (2) div

The penultimate p elements Odd and even under div p:nth-last-child (2) div are keyword usage formulas (an + b) that can be used to match child elements where the subscript is odd or even. Description: indicates the length of the period, n is the counter (starting at 0) and b is the offset value.

Under div p:nth-of-type (2) div, the second p 2 can be used with odd and even numbers and formulas.

The penultimate p under div p:nth-last-of-type (2) div

The last p under div p:last-child div is equivalent to div p:nth-last-child (1).

P:empty selects each that does not have child elements

Elements (including text nodes)

# news:target Select the currently active # news element.

Input:enabled input:disabled input:checked (only Opera supports: checked selector.)

Input [type= "text"]: enabled sets the background color for all enabled input elements of type= "text":

: not (p) Select all non

Elements:

:: selection selects the part of the element selected by the user. Mouse selection discoloration

:: selection::-moz-selection

The animation property is an abbreviated property that sets six animation attributes:

Animation-name specifies a name for @ keyframes animation: mymove

Animation-duration defines how long it takes for an animation to complete a cycle, in seconds or milliseconds

Animation-timing-function specifies the speed curve of the animation liner ease ease-in ease-out ease-in-out

Animation-delay defines when the animation starts

Animation-iteration-count specifies the number of times the animation is played n | infinite;n | unlimited times

Animation-direction defines whether the animation should be played in reverse in turn normal | alternate; positive | negative

Animation-play-state specifies whether the animation is running or paused paused | running

Animation-fill-mode specifies whether the animation is visible before or after the animation is played.

None | forwards keeps the last attribute | backwards start attribute | both before and after both

@-moz- Firefox @-webkit- Google and Apple @-o-Opon

Example:

@ keyframes mymove

From {top:0px;}

To {top:200px;}

@-moz-keyframes mymove / * Firefox * /

From {top:0px;}

To {top:200px;}

@-webkit-keyframes mymove / * Safari and Chrome * /

From {top:0px;}

To {top:200px;}

@-o-keyframes mymove / * Opera * /

From {top:0px;}

To {top:200px;}

Div

{width:100px

Height:100px

Background:red

Position:relative

Animation:mymove 5s infinite

-webkit-animation:mymove 5s infinite; / * Safari and Chrome*/

The translate () prime moves from its current position, according to the given left (x coordinates) and top (y coordinates).

Translate defines 2d conversion xy to number x positive right negative left y positive bottom negative upper

Translate3d (xperiary z) defines 3D transformations

Scale () method, the size of the element increases or decreases, depending on the given width (X axis) and height (Y axis) parameters

Scale (XMagol y) defines 2D conversion x y as a multiple

Scale (2) converts width to twice the original size and height to four times the original height.

The rotate () method rotates the element clockwise at a given angle. Negative values are allowed and the element will be rotated counterclockwise

Rotate (30deg) means to rotate 30 degrees.

Matrix () method

Skew defines a 2D tilt transformation along the X and Y axes.

The transition-property attribute specifies the name of the CSS attribute to which the transition effect is applied, such as: width

Transition-property: none | all | property

The transition-duration property specifies the time (in seconds or milliseconds) it takes to complete the transition effect.

The transition-timing-function property specifies the speed curve of the transition effect.

Transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-

Bezier; ease: start slowly, then get faster.

The transition-delay attribute specifies when the transition effect begins.

Example:

Div

{width:100px

Height:100px

Background:blue

Transition:width 2s

-moz-transition:width 2s; / * Firefox 4 * /

-webkit-transition:width 2s; / * Safari and Chrome * /

-o-transition:width 2s; / * Opera * /

Div:hover

Width:300px

Box-sizing: content-box | border-box | inherit

Box-sizing:content-box, calculated according to the W3C box model, content + inner margin + border = element size

This is to build building blocks, three building blocks to build a house, any building block size changes, the structure of the house is unstable, manifested as expanding the elements.

Box-sizing:border-box, calculated according to the traditional IE box model, element size = content + inner margin + border

This is to build a house, set the size in advance, build a house, and put three building blocks in it. You three can change whatever you want, as long as it does not exceed the size of the house.

Flex-direction:row | row-reverse | column | column-reverse; horizontal | reverse horizontal | Vertical | reverse Vertical

Flex-wrap: nowrap | wrap | wrap-reverse; does not wrap | Line break | Line break. The first line is below

Flex-flow: flex-flow: | |

Justify-content: alignment on the spindle.

Flex-start | flex-end | center | space-between | space-around

Left alignment | right alignment | Middle | alignment at both ends | Equal interval

Align-items: attributes define how items are aligned on cross axes.

Flex-start | flex-end | center | baseline | stretch

Alignment of the start of the cross axis | alignment of the end | alignment of the midpoint | alignment of the baseline of the first line of text | height is not set or set to auto occupies the height of the entire container

Align-content: the alignment of multiple axes. If the project has only one axis, this property does not work

Flex-start | flex-end | center | space-between | space-around | stretch

Six properties of the project:

Order: defines the order in which items are arranged. The lower the number, the higher the arrangement, and the default is 0.

Flex-grow: the attribute defines the magnification of the project. The default is 0, that is, if there is any space left, the magnification is not magnified by 1.

Flex-shrink: defines the reduction scale of the project, which defaults to 1, that is, if there is not enough space, the project will shrink.

Flex-basis: the attribute defines the principal axis space (main size) occupied by the project before allocating excess space. Based on this property, the browser calculates whether the spindle has extra space. Its default value is auto, which is the original size of the project.

It can be set to the same value as the width or height property (such as 350px), and the project will occupy a fixed space.

Flex: attribute is short for flex-grow, flex-shrink and flex-basis. The default value is 0 1 auto.

The align-self: self attribute allows individual items to be aligned differently from other items, overriding the align-items attribute. The default value is auto, which inherits the align-items attribute of the parent element. If there is no parent element, it is equivalent to stretch.

@ media screen and (max-width:480px) {}

@ media (min-device-width:600px) {

Img [data-src-600px] {

Content: attr (data-src-600px,url)

@ media (min-device-width:800px) {

Img [data-src-800px] {

Content:attr (data-src-800px,url)

Background: radial-gradient (center, shape size, start-color,..., last-color)

The center of the gradient is center (for the center point), the shape of the gradient is ellipse (for oval), and the size of the gradient is farthest-corner (for the farthest corner).

# grad {

Background:-webkit-radial-gradient (red, green, blue); / * Safari 5.16.0 * /

Background:-o-radial-gradient (red, green, blue) / * Opera 11.6-12.0 * /

Background:-moz-radial-gradient (red, green, blue); / * Firefox 3.615 * /

Background: radial-gradient (red, green, blue); / * Standard syntax * /

Thank you for your reading, these are the contents of "what are the basic knowledge points of css3". After the study of this article, I believe you have a deeper understanding of what are the basic knowledge points of css3, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.