CSS3 partial knowledge and new features

The selector

Property selector

• [attr] Selects the element with the attr attribute
• [attr= “value”] Selects the element whose attribute value is equal to value
• [attr^= “value”] selects each element with the specified attribute name and an attribute value starting with value
• [attr= “value”] selects all elements with the specified attribute name and an attribute value starting with value
• [attr*= “value”] selects each element with the specified attribute name and attribute value [containing value]

Structural pseudo-class selector

• The: last-Child selector matches each element that belongs to the last child of its parent element
• : nth-Child (n) selector: matches the NTH child of its parent element
• : nth-last-Child (n) selector: matches each element belonging to the penultimate NTH child of its element
• :first-of-type(n) Selects each element of the first child of a particular type of its parent element
• :last-of-type(n) Selects each element of the last child of a particular type of its parent element.
• :nth-of-type(n) : the selector matches the NTH child of a specific type belonging to the parent element.
• :nth-last-of-type(n) : the selector matches each element of the penultimate NTH child of a specific type belonging to the parent element

N can be a number, a keyword odd(even odd), or a formula

Element state, user behavior pseudo classes

• : The style of the link a tag before it is accessed
• :visited a outdated style in which the tag has been visited
• :hover hover style
• :active Specifies the mode when the mouse is pressed down
• The :focus element becomes the style of the input focus
• : Checked Radio or checkBox style when checked
• :enabled Indicates the available status of form elements
• :disabled Indicates the disabled state of form elements

Pseudo elements

• ::before

What it does: Generates content at the “start” position inside the element — after the start tag, the Content attribute must be defined

• ::after

Action: The Content attribute must be defined before the content-closing tag is generated at the last position inside the element

• ::placeholder

This allows developers/designers to change the style of text placeholders. The default text placeholder is light gray

A border

Rounded corners

• Border-top-left-radius defines the radian at the top left corner
• Border-top-right-radius defines the radians in the upper right corner
• Border-bottom-right-radius defines the radian in the lower right corner
• Border-bottom-left-radius defines the radian in the lower left corner
• Border-bottom-left-radius defines the radian in the lower left corner

If the value is a percentage, it is calculated relative to the width and height of the border box

• border-radius
  • Whitespace separated
    • Four values: top left, top right, bottom right, bottom left horizontal and vertical radius
    • Three values: upper left, upper right, and lower left, lower right
    • Two values: upper left and lower right, upper right and lower left
    • One value: All corners have the same value
  • Separated by “/”
    • Horizontal radius (1-4 values)/vertical radius (1-4 values)

shadow

Box-shadow: X-axis offset Y-axis offset Blur radius diffusion radius Shadow color inner shadow;

background

.box {
    background-image: url("public/a.png"), url("public/b.png");
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
}
Copy the code

• The higher the writing order, the higher the display
• Different background images can be separated by commas. You can also set different properties for different images (such as background position, background repetition, etc.).

Background-origin Specifies the starting point of the background image

• Padding-box: The starting point of the background image starts from the padding area. (Default value)
• Border-box: The starting point of the background image starts from the border area.
• Content-box: The background image starts from the width,height region.

Background-clip Draws the background area

• Role: Specifies the background drawing region
• Values:
  • Border-box [default] Draws the background to the border box area
  • The padding-box background is drawn to the inner margin box area
  • The Content-box background is drawn to the content box area

Background-size Specifies the size of the background image

• Px: Specifies the size of the background image with the length value. Negative values are not allowed.
• Percentage: Specifies the background image size as a percentage. Negative values are not allowed. Refer to the size of background-Origin area of the background image for conversion
• Auto: The true size of the background image.
• Cover: Scale the background image equally to completely cover the container. The background image may exceed the container.
• Contain: Scale the background image to the same width or height as the container. The background image is always contained inside the container. There may be white space in the container

Short form:

Background: Image position/size repeat origin clip color

The gradient

linear-gradient()

.box {
    background-image: linear-gradient(red 0, red 50px, blue 60px, pink);
}
Copy the code

repeating-linear-gradient()

.box {
    background: repeating-linear-gradient(red 0, red 10px, green 10px, green 20px);
}
Copy the code

• From left to right
• From the bottom up
• From the bottom up
• From top to bottom
• From right to left
• To the right top direction
• B: It’s toward the bottom left corner

.box {
    background: linear-gradient(to right, red, blue);
}
Copy the code

• 0deg is equivalent to to top
• 90deg is equivalent to to right

.box {
    background: linear-gradient(90deg, red, blue);
}
Copy the code

• 【 comma 】 separate
• The higher the writing order, the higher the display.

.box {
    background-image: linear-gradient(red, blue), linear-gradient(yellow, pink);
    background-size: 50px 50px.100px 100px;
    background-repeat: no-repeat;
    background-position: center center;
}
Copy the code

radial-gradient()

Radial gradient() is used to create an image that represents a radial gradient of two or more colors. The radial gradient is defined by the center point.

• Syntax: radial-gradient(color node 1, color node 2, color node 3…)

repeating-radial-gradient()

• background:repeating-radial-gradient(red 0,red 10px,blue 10px,blue 20px);

The user interface

resize

• Effect: Specifies whether the size of an element can be resized by the user.
• The values
  • None does not allow resizing.
  • Both allows resetting width and height.
  • Horizontal allows you to reset the width.
  • Vertical Allows you to reset the height

It needs to be valid with overflow property. The value can be auto, hidden, or scroll.

box-sizing

• Function: Specify box composition mode
• The values
  • Content-box: Define width and height [excluding] inside margins and borders [standard box model]
  • Border-box: define width and height [including] inside margins and borders [weird box model]

Multi-column layouts

CSS3 supports establishing the number of columns in a layout, how content flows between the columns, the size of the gap between the columns, and column rules.

The column width attributes

• Function: specify the width of the column.
• The values
  • Number Specifies the column width.
  • Auto Indicates automatic. The value is determined by other attributes, such as “column-count”.

The column – count property

• Function: Specifies the number of columns
• The values
  • Auto determines the number of columns by other attributes, such as “column-width”.
  • The number indicates the number of columns.

The column – gap properties

• Function: specify the interval between columns.
• The values
  • Normal the default value is 1em.
  • Length value (px,em) Specifies the length value

The column – rule properties

• Effect: Sets column border width, style, and color rules.

The column – span attribute

• Function: Set column hurdle merge
• The values
  • The default value of 1
  • All in all

The font

Font shadows

.box:nth-child(4) {
    text-shadow: 10px 10px red, 20px 20px green, 30px 30px pink;
}
Copy the code

Custom fonts

/* Define the font */
@font-face {
    font-family: "myfont";
    src: url("Http://font file 1.woff");
}

/* Apply the font */
.box {
    font-family: "myfont", serif;
}
Copy the code

Media queries

Customize the display for different device types and screen characteristics without changing the page structure

.media_test {
    background-color: #95cc68;
}

@media all and (min-width: 600px) {
    .media_test {
        background-color: #68ccba; }}@media all and (min-width: 900px) {
    .media_test {
        background-color: #688bcc; }}@media all and (min-width: 1200px) {
    .media_test {
        background-color: #cc68c7; }}@media all and (min-width: 1536px) {
    .media_test {
        background-color: #cc686b; }}Copy the code

@media Media type and (media feature expression){// CSS code}

• Media Type
  • Screen used on a screen (a computer, tablet, smartphone, etc.)
  • All All devices
  • Print works for paging material and documents viewed on the screen in print preview mode
  • Speech is primarily used in speech synthesizers
• Media Features
  • Min-width,min-height Specifies the minimum value greater than or equal to the specified value
  • Max-width,max-height The maximum value must be smaller than or equal to the specified value
  • Orientation Screen Orientation
    • Horizontal landscape
    • The vertical portrait

Use the media attribute of the link label to query media

<link rel="stylesheet" media="Media type and (Media property expression)" href="./style/index.css">
Copy the code

<link rel="stylesheet" href="./style/index.css" media="screen and (min- width:1000px)">

<link rel="stylesheet" href="./style/index.css"
      media="screen and (min-width:600px) and (max-width:1000px)">

<link rel="stylesheet" href="./style/index.css" media="screen and (max- width:600px)">

Copy the code

Elastic box

Elastic box is a new layout mode for CSS3. The elastic box layout model was introduced to provide a more efficient way to arrange, align, and allocate empty space among the children of a container. (Make page elements capable of adapting to different screen sizes)

Container attribute

display

• Display: Inline-flex line-level elastic box (equivalent to a line-level block)
• Display: Flex block level elastic box

flex-direction

Function: Describe the spindle direction of the elastic box (the arrangement direction of items)

• Row: main axis alignment (default left to right)
• Row-reverse: Indicates the reverse of row
• Column: side axis arrangement (default: top down)
• Column-reverse: indicates that the column is reversed

justify-content

Function: Alignment of items along the main axis

• Flex-start: start point alignment. [Default value]
• Flex-end: end alignment.
• Center: center
• Space-around: An equal amount of free space on both sides of a project, twice as much space between projects as between the project and the container
• Space-between: The remaining space of a container is between items
• Space-instituted: Project and container, projects that have equal space between them

align-items

Function: Set the alignment of the side axis

• Flex-start: align the starting position of the side axis
• Flex-end: align the end of the side axis
• Center: the side axis is centered and aligned
• Baseline: baseline alignment.
• “Stretch” : stretch to fill up the side axis: this parameter is valid when the size of the side axis is auto

flex-wrap

Function: Specifies the line wrap mode for the child elements of an elastic box

• Nowrap – Do not change [default]
• Wrap (start at top)
• Wrap-reverse reverses wrap (start point below)

align-content

Function: Alignment of multiple axes. This function is valid only when the item is wrapped on multiple lines

• Stretch – Default. Project stretch fills the row
• Flex-start line start alignment.
• Flex-end – Line end alignment
• Center – Align the rows in the center
• Space-between Indicates the space between the remaining lines of the container
• There is twice as much space between rows as between the container and the row
• The remaining space of the container will be evenly distributed between rows and between rows and projects

The project properties

order

Purpose: Use numerical values to define the order of items

• The lower the value, the higher the value
• The values are equal, depending on the sequence of structures
• The default value of 0
• It can be negative.

align-self

Used to set the alignment of the project itself on the side axis

• Auto: automatic — is the align-items value of the element’s parent,
• Flex-start: start alignment
• Flex-end: align the end position
• Center: center
• Baseline: baseline alignment
• “Stretch” : stretches to fill up the side axis. This parameter is valid when the side axis is auto

flex-grow

Project growth rate

• The default value is 0, which means that the remaining space is not growing
• Value without units – indicates the number of copies of the remaining space
• Negative values are not allowed
• This parameter is valid when the container has free space

flex-basis

The initial size of the Flex element in the main axis — (The elastic box project reference value is the final value involved in the calculation ————1. Calculate the remaining space of the container based on it. 2.

• Auto defaults to refer to my width and height properties
• No length value [px, percentage, etc.]
• Negative values are not allowed

Note: Flex-basis takes precedence over the width and height of an item when they exist together

flex-shrink

Define the shrinkage rate of the project

• The default value is 1 and shrinks by default when the container space is insufficient
• 0 means that the container does not shrink even if it runs out of space
• Negative values are not allowed

Note: Only valid when the container space is insufficient

flex

The flex-grow flex-shrink flex-basis property is a short property

• none
  • Elements are sized according to their width and height. It is completely inelastic: it neither shortens nor elongates to fit the Flex container. Equivalent to setting the property to Flex: 0 0 AUTO.
• auto
  • Elements will be sized according to their width and height, but will stretch and absorb the extra free space in the Flex container, and will shorten themselves to fit the Flex container. This is equivalent to setting the property to Flex: 1 1 Auto

Note: Only valid when the container space is insufficient

Calc function

Calc, short for Calculate, is a new feature in CSS3. Calc () is used to dynamically calculate length values

.box {
    width: calc(100% - 100px);
}
Copy the code

• Any length value can be computed using the calc() function;
• The calc() function supports “+”, “-“, “*”, “/”;
• The calc() function uses the standard mathematical precedence rule — (multiply and divide before addition and subtraction, parentheses raise precedence)
• Leave a space before and after the operator, for example: width: calc(100%-10px);

The transition transition

With CSS3, you can add effects to an element when it transitions from one style to another without using Flash animations or JavaScript. The Transition property is a shorthand property for setting the following four transition properties

• transition-property
• transition-duration
• transition-timing-function
• transition-delay

The length of the transition delay of a time function;

.box {
    transition: width 1s linear 1s;
}

.box2 {
    transition: width 1s linear 1s, height 1s ease-in 1s;
}
Copy the code