New child selectors for CSS3 (5)

  • Note: How do I determine whether an element is an in-line or block-level element? Answer: add background color to check to know!

  1. Child selector

    • What it means: The child selector is used to select an element with a specific parent element.
    • Writing grammar: Element1 > Element2
    • Note: A label can be selected only when the parent-child relationship is satisfied. (Different from: descendant selectors)

  2. Sibling selector

    • Two kinds of written grammar

      The selector Introduction to the
      element1+element2 Matches the same parent element immediately following element1The one in the backElement2 elements
      element1~element2 Match the same element in element1Everything in the backElement2 elements

    • Adjacent sibling selector

      • What it means: The adjacent sibling selector can be used to select a sibling element (only one) immediately following another element, and both have the same parent element.
      • Note:
        1. Only the following element E2 can be selected
        2. If the element immediately following it is not the tag you wrote, the style does not take effect
        3. Spaces can be added before and after the + symbol
        4. Both have the same parent element

    • Other brother selectors

      • What it means: matches all element2 elements after element1 in the same parent element.
      • Writing grammar: element1~element2
      • You can add Spaces before and after ~

    • Conclusion :(satisfies two conditions)

      1. Same dad
      2. Brothers of type Element2 (following 1 / not necessarily following multiple)

  3. Structure pseudo-class selector

    • About selectors:

      The selector Introduction to the
      E:first-child Matches the first child element E in the parent element
      E:last-child Matches the last child element E in the parent element
      E:nth-child(n) Matches the NTH child element E in the parent element
      E:first-of-type Specifies the first of type E
      E:last-of-type Specifies the last of type E
      E:nth-of-type(n) Specifies the NTH of type E

    • nth-child(n)

      • N can be a number, keyword (even even, odd odd), or formula
      • A common formula is shown in the figure below
      • If it’s a formula, it starts at 0, and n is 0,1,2,3… Has been increasing
      • But the 0th element or the number of elements beyond that will be ignored

    • E:nth-child(n) is different from E:nth-of-type(n)

      • The difference between:
        1. The NTH element is the selection of the E element
        2. Is the NTH element of E
      • The instance

  4. Pseudo-element selector

    • Adding pseudo-elements

      The selector introduce
      E::before Insert an element in front of the E element inside
      E::after Insert an element inside E after the element
      E::first-letter I’ve selected the first letter in the container E
      E::first-line The first line of text in container E is selected

    • H5 writing method is different from traditional writing method

      1. Single colon E: before
      2. Double colon: E: before
      3. Browsers can recognize all of the above, and double colons are the syntax specification of H5.

    • Considerations for pseudo-elements

      1. Pseudo-elements can only be added to double tags, not single tags
      2. Pseudoelements must not be preceded by a space before the colon, such as E ::before
      3. You have to put the attribute content:”” inside the pseudo-element
      4. Before and after create an element that belongs to an inline element. Note: How do you determine whether an element is an inline element or a block-level element? Answer: add background color to check to know!
      5. We call it a pseudo-element because it is not visible in the JS DOM

  5. Property selector

    • Meaning: Used to select a label that contains the specified attribute
      The selector Introduction to the
      E[att] Select the E element with the ATT attribute
      E[att=”val”] Select the E element with an attribute of att and an attribute value equal to val
      E[att^=”val”] Select the att attribute and attribute valueBegin with valE element
      E[att$=”val”] Select the att attribute and attribute valueEnd with valE element
      E[att*=”val”] The match has the ATT attribute and attribute valueContained in the valE element
  • Selector weight
    • Base selector: ID selector > Class Selector > Tag Selector > *
    • Pseudo-class selectors and property selectors have weights equal to class selectors
    • The weight of the pseudo-element selector is equal to that of the label selector

    Note: Weight calculation of advanced selectors: number of ids, number of class selectors, number of label selectors

CSS 3 box model

  • Css3 Border rounded properties

    • Attribute name: border-radius

    • Attribute value: The pixel value or percentage. The percentage refers to the percentage of the overall width and height of the box

      Attribute values instructions
      x-radius/y-radius The front is the horizontal radius, the back is the vertical radius, and you get the Angle of the ellipse
      radius Attribute value, horizontal and vertical are set to the same value, resulting in rounded corners

    • Single attribute (Note: write vertical before horizontal)

      • Border – the top – left – the radius: the radius;
      • Border – top – right – the radius: the radius;
      • Border – bottom – left – the radius: the radius;
      • Border – bottom – right – the radius: the radius;

    • Shorthand method

      • Border-radius, like padding, can also be written in four different ways.
      • Upper left upper right lower right lower left
      • Upper left, upper right and lower left, lower right
      • Upper left and lower right upper right and lower left
      • The four angles are the same

    • If a slash appears in the border-radius attribute value of /, you can set four horizontal values before/and four vertical values after /. Example:Horizontal direction: ternary method; Vertical direction: two value method

    • Browsers compatible with Internet Explorer 8 and later browsers do not support the border-RADIUS attribute. Other browsers support the border-RADIUS attribute.

    • The practical application

      1. Round: border-radius is set to half of the width and height, and the width and height are the same
        div {
    width: 100px;
    height: 100px;
    padding: 20px;
    border-radius: 70px;
  }
Copy the code

  • Css3 Text shadow

    • Function: text-shadow applies a shadow to text. Attribute values allow you to specify horizontal and vertical shadows, blur distances, and the color of the shadows.

      Attribute values Introduction to the
      h-shadow A necessity. Position of horizontal shadow, negative value allowed.
      v-shadow A necessity. Vertical shadow position, negative value allowed.
      blur Optional. Fuzzy distance
      color Optional. Color of shadow

    • Text shadow grammar

        h1 {
    text-shadow: 4px 4px 5px #ccc;
  }
Copy the code

    • Multilayer shadow

      • What you do: You can add more than one shadow to the text. A comma separates the value of the shadow attribute. Note: In multiple shadows, the first written shadow is pressed over the second written shadow.

  • Css3 box shadow

    • What it does: The box-shadow property is used to add a shadow to the box border.

      Attribute values Introduction to the
      h-shadow A necessity. The position of the horizontal shadow. Allow the negative
      v-shadow A necessity. Vertical shadow position, negative value allowed
      blur Optional. A fuzzy distance
      spread Optional. Size of shadow
      color Optional. Color of shadow
      inset Optional. Change external shadow to internal shadow

    • Multilayer shadow

      • You can add more than one shadow to a box, with a comma separating the property values of the shadows. Note: In multiple shadows, the first shadow is overlaid on the second shadow.

  • conclusion

    • For both text shadows and box shadows, the negative and positive values of the attribute values need to follow the X and y coordinates

  • Css3 Transitional properties

    • Property name: Transition

    • What it does: Use transition to create A smooth transition between A and B without using Flash or JavaScript, and to create A smooth transition between A and B.

    • Syntax format

        transition: transition property transition time motion curve delay time;Copy the code

    • Single attribute writing

      attribute describe
      transition Shorthand properties
      transition-property Specifies the name of the CSS property to which the transition is applied
      transition-duration Define how long the transition effect takes. The default is 0
      transition-timing-function A time curve specifying the effect of the transition. The default is “ease”
      transition-delay Specifies when the transition effect begins. The default is 0

      1. Transition-property Specifies the transition property

        • None indicates that there is no property transition
        • All indicates that all changed properties are transitioned
        • Attribute names are specific attribute names, separated by commas

      2. time

        • The unit must be s, and 0s must be added.

      3. Tansition-timing -function Time curve

        value describe
        linear A transition effect that starts and ends at the same speed.
        ease Start slow, go fast, end slow
        ease-in A slow start
        ease-out End of the slow
        ease-in-out Slow start and end
        cubic-bezier(x1,y1,x2,y2) Define your own values in the function. X1 and x2 are values between 0 and 1, y1 and y2 are any values, and the four values represent the two coordinates of the pulled points.

      4. Bessel curve

    • Browser compatibility

      • IE10, Firefox, Chrome, and Opera support the Transition property
      • Safari requires the prefix -webkit-
      • Note: IE9 and earlier versions do not support the and Transition properties

The 2 d transformation

  • Understand what a 2D conversion is

    • Property name: Transform
    • Action: Move, scale, rotate, stretch, or stretch elements. With the transitions and animation knowledge you’re about to learn, you can replace a lot of the effects that were previously only possible with Flash.

  • The displacement of the translate ()

    • Writing grammar | | value that | | translate (x) | is only a number, said horizontal displacement | translate (x, y) | x, y, the distance of the displacement of the horizontal and vertical direction, respectively, for px value or percentage, distinguish between positive and negative

  • The zoom scale ()

    • Writing grammar:
      value instructions
      scale(x,y) X and y are multiples of the width and height of the element, respectively
      scale(n) There is only one value, which means the width and height are scaled n times at the same time
      scaleX(n) Change the width of the element
      scaleY(n) Change the height of the element

  • Rotate () : Finds the center point to rotate

    • Writing grammar: Rotate (number deg)
    • Deg is a unit of degrees. A positive number indicates clockwise rotation, and a negative number indicates counterclockwise rotation. 2D rotation has only one property value.
    • Note: When the element is rotated, the axes are also changed. Therefore, when multiple attribute values are set to transform at the same time, the transformation effect is different because of the writing order.
    • Example: It makes a difference whether the rotation or displacement is set firstcss .box img { <! -- rotate before displacement --> <! -- Now: after the first rotation, the X-axis becomes inclined to the lower right, so when the displacement, also to the lower right, rather than the right. --> transform: rotate(30deg) translate(50px); }

  • Tilt skew ()

    • Transform: skew(digital deg, digital deg);
    • The two attribute values indicate the horizontal and vertical tilt angles, respectively. The value of the attribute can be positive or negative, and the second value does not default to 0

  • conclusion

    • Angle plus or minus: clockwise, counterclockwise
    • Px value plus or minus: x and y axis

  • Transform-origin attribute

    • Similar to the background – position

    • Function: Adjusts the horizontal and vertical origin positions of elements

    • Property values: two, separated by a space

      Attribute values instructions
      x Define where the origin of the X-axis is. Possible values :left, center, right, pixel value, percentage
      y Define where the origin of the Y-axis is. Possible values :top, center, bottom, pixel value, percentage

    • Example: Changing a reference point

3 d conversion

  • The Transform property can not only achieve 2D transformation, but also create 3D three-dimensional transformation effect, which has an extra Z axis than the normal plane effect consisting of x and Y axes, as shown in the following figure

  • perspective

    • What it means: Perspective can transform a 2D plane into a 3D one
    • Features: near large far small
    • Perspective property Perspective
      1. Function: Set the observation position of the focus of the line of sight on the Z axis, so as to achieve the 3D viewing effect.
      2. Attribute value: Pixel value. The larger the value is, the farther away the observation point is from the origin of the Z axis, and the more complete the graphics effect is and close to the original size.
      3. Note: The perspective attribute needs to be set to the parent of the 3D changing element

  • 3 d rotation

    • The rotation Angle values for each of the three directions are required

      Attribute values instructions
      rotateX(angle) Define 3D rotation along the X-axis
      rotateY(angle) Define 3D rotation along the Y-axis
      rotateZ(angle) Define 3D rotation along the Z axis

    • Note: The Angle of the attribute value distinguishes between positive and negative.

      1. A positive number indicates clockwise rotation along the corresponding axes
      2. Negative numbers indicate counterclockwise rotation along the corresponding axes

  • The 3 d displacement

    • Attribute values
      value instructions
      translateX(x) Set the displacement of the X-axis
      translateY(y) Set the displacement of the Y-axis
      translateZ(z) Define the 3D displacement and set the displacement value for the Z axis
    • Attribute values are pixel values or percentages, positive and negative indicating the direction of displacement.
      1. Positive values move in the positive direction of the corresponding axis
      2. Negative values move in the negative direction of the corresponding axis

  • 3D cube case

  • The transform – style property

    • Function: sets the nested child element to display in the parent element’s 3D space. The child element retains its 3D transformation axis.
    • Attribute value: flat: All child elements are rendered on a 2D plane preserved-3D: 3d space is reserved

  • Browser compatibility

    • IE10, Firefox, and Opera support the Transform property
    • Chrome and Safari require the prefix -webkit-
    • IE9 requires the prefix -ms-

animation

  • What it does: CSS3 provides its own animation method, which can replace animated images, Flash animations, and JavaScript in multiple pages.

  • Css3 animation is divided into two steps: create animation, binding animation

    • Create the animation
      • The @keyFrames rule: Can create effects that change gradually from one style to another. You can change as many styles as you want as many times.
        1. Rule: You need to use percentages to specify when changes occur, or the keywords “from” and “to”, which equals 0% and 100%. 0% animation start, 100% animation finish.
        2. Writing methods
          @keyframesAnimation name {animation process, can add any percentage of animation details}Copy the code
    • The binding of animation

      • The animation property: binds the animation created in @KeyFrames to a selector, otherwise the animation effect will not occur

        1. grammar
        <! Animation name and transition time must be set, other properties can be set according to the needs -->div {
    animation: Animation name transition time Velocity curve animation times delay time; }Copy the code
        1. Single property list
          attribute describe
          animation-name The name of the animation
          animation-duration Specifies the number of seconds or milliseconds it takes the animation to complete a cycle. The default is 0
          animation-timing-function Specifies the velocity curve for the animation. The default is Ease
          animation-delay Specifies when the animation starts. Default is 0
          animation-iteration-count Specifies the number of times the animation will be played. The default is 1. Infinite indicates an infinite number of times

  • Browser compatibility

    1. IE10, Firefox, and Opera support the @KeyFrames rule and animation property
    2. Chrome and Safari require the prefix -webkit-
    3. IE9 and earlier versions do not support the @KeyFrames rule or the animation property.