Article content: notes, feeling and experience in the process of learningCopy the codeCSS3 new selector
1. Child selector
Element writing syntax for selecting elements with a specific parent element: element1 > element2
.box > p {
background-color: cyan;
}
Copy the codeNote: Element2 elements are not selected if they are not direct children of the parent element element1.
2. Sibling selector
(1) Adjacent sibling selectors
Use to select a sibling element immediately after another element that has the same parent element writing syntax: element1+element2
h2 + p {
background-color: royalblue;
}
Copy the code(a) select element element2 (b) select element element2 (C) select element element2 (D) select element element2 (D)
(2) Other sibling selectors
Matches all element2 elements after element1 in the same parent element writing syntax: element1~element2
h2 ~ p {
background-color: yellow;
}
Copy the codeNote: a) all element2 elements that appear after the selection of element1 elements b) both elements must have the same parent element, but element2 does not have to be immediately followed by element1 c) Spaces can be added after the ~ symbol
3. Structure pseudo-class selector
| The selector | Introduction to the |
|---|---|
| E:first-child | If the first child of the parent element is E, it matches, and E is not written |
| E:last-child | If the last child of the parent element is E, it matches, and E is not written |
| E:nth-child(n) | If the NTH child of the parent element is E, it matches, and E is not written |
| 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 |
Child (n) (1) the NTH –
- N can be a number, keyword, or formula
- If it’s a number, it’s the NTH one
- The common keywords even, odd odd
- Common formulas are as follows (calculate from 0, 0, 1, 2, 3.. Increasing all the way)
| The formula | The values |
|---|---|
| 2n | An even number |
| 2n+1 | An odd number |
| 3n | 3, 6, 9 |
| n+5 | Starting at number 5 (including number 5) to the end, 5, 6, 7, 8, 9 |
| -n+5 | The first five (including the fifth), 5, 4, 3, 2, 1, 0 |
Note: the 0th element or the number of excess elements is ignored
(2) Differences
E:nth-child(n) : matches if the NTH child of the parent element is E, and two conditions are met :nth-of-type(n) : matches the NTH sibling element E of the same type, and ignores other elements of the same type
4. Pseudo-element selector
| The selector | introduce |
|---|---|
| E::before | Insert an element before the inside of the E element |
| E::after | Insert an element after the inside of the E element |
| E::first-letter | Select the first letter in the E container |
| E::first-line | Select the first line of text in the E container |
Note:
- Pseudo-elements can only be added to double tags, not single tags
- Pseudo-element colons cannot be preceded by Spaces
- The pseudo-element must have the property content:” “;
- Before and after create an element that belongs to the inline element
- You can’t see the element you just created in the DOM, so it’s called a pseudo-element
5. Property selector
| The selector | Introduction to the |
|---|---|
| E[att] | Select the E element with the ATT attribute |
| E[att=”val”] | Select the E element that has the att attribute with an attribute value equal to val |
| E[att]^=”val” | Matches E elements that have the att attribute and a value starting with val |
| E[att]$=”val” | Matches the element E that has the att attribute and a value ending in val |
| E[att]*=”val” | Matches the element E that has the att attribute and a value containing val |
Selector weight
- Basic selectors: ID selector > Class selector > label selector > *
- Pseudo-class selectors and attribute selectors have weights equal to class selectors
- The weight of the pseudo-element selector is equal to the label selector
CSS3 box model
Box-sizing specifies the box model
| Attribute values | Introduction to the |
|---|---|
| content-box | Default, standard box model, box model is expanded. Width and height only include the width and height of the content |
| border-box | Weird mode, the box model is subtracted. Width and height include content, inner margin, and border, but not margins |
CSS3 new attributes
1. Common attributes
(1) Border rounded -radius
| Attribute values | instructions |
|---|---|
| x-radius/y-radius | / Split the attribute values of the two parts, the front is the horizontal radius, the back is the vertical radius, and the elliptic Angle is obtained |
| radius | A property value, then both horizontal and vertical are set to the same value, resulting in rounded corners |
Note: The property value is PX or percentage. Percentage refers to the percentage of the overall width and height of the box.
.box {
width: 200px;
height: 200px;
padding: 30px;
/* border-radius: 100px/50px; * /
/* The width is half of the box */
/* All four angles are the same */
/* border-radius: 130px; * /
/* border-bottom-right-radius: 130px; * /
/* border-bottom-left-radius: 130px; * /
/* border-top-right-radius: 130px; * /
/* border-top-left-radius: 130px; * /
/* Upper left upper right lower right lower left */
/* border-radius: 10px 20px 30px 40px; * /
/* Upper left upper right and lower left lower right/upper left and lower right upper right and lower left */
/* border-radius: 50px 100px 20px / 40px 60px; * /
border-radius: 50%;
background-color: plum;
}
Copy the codeNote: Internet Explorer 8 and below do not support this property
(2) Text-shadow
| Attribute values | Introduction to the |
|---|---|
| h-shadow | Required, horizontal shadow position, negative values allowed |
| v-shadow | Required, vertical shadow position, negative values allowed |
| blur | Optional, fuzzy distance |
| color | Optional, shadow color |
.word {
margin: 50px;
font: bold 30px/60px Microsoft Yahei;
/* Text shadow: horizontal position positive right negative left vertical position positive bottom negative top blur color */
/* text-shadow: 3px 3px 5px #f00; * /
/* Multilayer shadows */
text-shadow: 3px 3px #f00.6px 6px #0f0.9px 9px #00f;
}
Copy the code(3) Box-shadow
| Attribute values | Introduction to the |
|---|---|
| h-shadow | Required, horizontal shadow position, negative values allowed |
| v-shadow | Required, vertical shadow position, negative values allowed |
| blur | Optional, fuzzy distance |
| spread | Optional, shadow size |
| color | Optional, shadow color |
| inset | Optional, change the outer shadow to the inner shadow |
.box {
width: 200px;
height: 200px;
padding: 20px;
border: 10px solid #0ff;
margin: 50px;
background-color: plum;
/* Border shadow: horizontal position vertical position blur extent expand size color whether inner border shadow */
/* Note: External border shadows do not need to be set to the default */
/* box-shadow: 20px 20px 5px 20px #f00 inset; * /
box-shadow: 20px 20px 5px #f00.40px 40px 5px #0f0.60px 60px 5px #00f;
}
Copy the code2. Transition properties
You can animate A tween using Transition without using Flash or JavaScript, and you can animate A smooth transition between A and B as long as the current element has two states when its “properties” change. To see the effect easily, we use :hover toggle state.
| attribute | describe |
|---|---|
| transition | Short for 4 properties in a property |
| transition-property | The name of the CSS property to which transitions are applied. None indicates that there are no transitions. All indicates that all changed attributes are transitioned. Attribute name: Use specific attribute names, separated by commas |
| transition-duration | Define how long the transition effect takes. The default is 0. The unit of seconds is s, and 0s must be added |
| transition-timing-function | Specify the time curve for transition effects, default is “ease” |
| transition-delay | Specifies when the transition effect starts. Default is 0. The unit of seconds is s, and 0s must be added |
Transition-timing-function Time curve
| value | describe |
|---|---|
| linear | Specify the transition effect from beginning to end at the same speed |
| ease | Define the transition effect of starting slowly, then getting faster, then finishing slowly |
| ease-in | Specify the transition effect of a slow start |
| ease-out | Specify the transition effect of ending at a slow speed |
| ease-in-out | Specify the transition effect of a slow start and finish |
| cubic-bezier(x1,y1,x2,y2) | Define your own values in the Cubic – Bezier function. X1 and x2 are values between 0 and 1, y1 and y2 are arbitrary values, and the four values represent the two coordinates of the point being pulled |
Transition is supported by IE10, Firefox, Chrome, and Opera. Safari requires the prefix webkit. Note: IE9 and earlier versions do not support transition
3. 2D transform transform
Move, scale, rotate, stretch, or stretch elements. With the transition and upcoming animation knowledge, you can replace a lot of effects that were previously only possible with Flash
(1) Translate ()
.box img {
/* Horizontal and vertical displacement */
/* transform: translate(100px,50px); * /
/* There is only one value representing the horizontal displacement */
transform: translate(-100px);
}
Copy the code(2) Scale ()
.box img {
/* Scaling changes multiples of the width and height of the element, respectively */
/ * the transform: scale (1.5, 2); * /
/* Width and height are also scaled */
/ * the transform: scale (0.5); * /
/* Change the element width */
transform: scaleX(0.5);
/* Change the element height */
transform: scaleY(0.5);
}
Copy the codeRotate (3) rotate()
.box img {
/* Rotate positive number clockwise negative number counterclockwise */
/* transform: rotate(30deg); * /
/* 先旋转后位移 */
transform: rotate(30deg) translate(150px);
/* 先位移后旋转 */
transform: translate(150px) rotate(30deg);
}
Copy the codeNote: After the rotation of the element, the coordinate axis will also change, and the transformation effect will be different due to the different writing order of the transform.
(4) Skew ()
.box img {
width: 316px;
height: 170px;
/* Tilt horizontal and vertical tilt Angle the second value is not written. Default is 0 */
/ * the transform: skew (0, 30 deg); * /
transform: skew(30deg);
}
Copy the code(5) Datum transform-origin
.box img {
width: 316px;
height: 170px;
/* Set the base point horizontal and vertical */
/* Level: left, center, right, px, percentage */
/* Vertical: top, center, bottom, px, % */
transform-origin: left top;
Rotate the * / / *
transform: rotate(30deg);
}
Copy the code4. 3D conversion
(1) Perspective
Set it to the observation position of the z-axis focus of view to render a 2D plane 3D effect during the conversion process. Property Value The further the observation point is from the z-axis origin feature: Near, large, far and small Note: The perspective property needs to be set to the parent of the 3D changing element
.box {
width: 450px;
height: 300px;
border: 1px solid # 000;
margin: 150px auto;
/ * * / in perspective
perspective: 500px;
}
.box img {
transition: all 1s ease;
}
.box img:hover {
/* Rotate along the x axis */
/* transform: rotateX(60deg); * /
/* Rotate along the y axis */
/* transform: rotateY(-60deg); * /
/* Rotate along the z axis */
/* transform: rotateZ(-60deg); * /
/* Move along the x axis */
/* transform: translateX(200px); * /
/* Move along the Y-axis */
/* transform: translateY(-200px); * /
/* Move along the z axis */
/* transform: translateZ(200px); * /
/* Rotation and displacement can be set at the same time. But the order is different, resulting in different effects */
transform: translateX(200px) rotateY(60deg);
}
Copy the code(2) the transform – style
Use to set the nested child element to appear in the parent element’s 3D space. The child element retains its own 3D transformation axis. Note: Generally set to the parent element of 3D transform graphics. IE10, Firefox, and Opera support the transform attribute. Chrome and Safari require the -webkit- prefix, and IE9 requires the -ms- prefix.
.stage {
position: relative;
width: 200px;
height: 200px;
border: 1px solid # 000;
/* Set the inner child elements to display flat in 3D space and all child elements to display flat in 2D */
transform-style: preserve-3d;
/* Perspective the z-axis to see the 3D effect */
perspective: 5000px;
/ * * /
transition: all 4s ease;
}
Copy the code5, animation,
(1) @keyframes rule
Used to create animations to create effects that gradually change from one style to another, changing as many styles as you want as many times. Using percentages to specify when the change occurred, or using keywords from and to, is equivalent to 0% and 100%, where 0% is the start of the animation and 100% is the completion of the animation.
(2) the animation
Bind the animation created in @KeyFrames to a selector otherwise no animation will occur
.box {
width: 100px;
height: 100px;
border-radius: 50%;
margin: 200px auto;
background-color: skyblue;
/* Add binding animation animation name transition time speed curve animation times delay time first two must be set */
/* animation: move 1s linear 3 2s; * /
animation: move2 3s linear infinite;
}
/* Customize the animation process */
@keyframes move {
/* Start from scratch, preferably with the same state as the default style */
from {
transform: translateY(0);
}
/* to end position */
to {
transform: translateY(150px); }}/* Percentage defines animation details */
@keyframes move2 {
0% {
transform: translateY(0);
}
25% {
transform: translateY(150px);
}
50% {
transform: translateY(0px);
}
75% {
transform: translateY(-150px);
}
100% {
transform: translateY(0px);
}
Copy the codeA single attribute
| attribute | describe |
|---|---|
| animation-name | Specifies the name of the @keyframes animation |
| animation-duration | Specifies the number of seconds or milliseconds it takes for the animation to complete a cycle. The default is 0 |
| animation-timing-function | Specify the speed curve for the animation, which defaults to ease |
| animation-delay | Specifies when the animation starts. The default is 0 |
| animation-iteration-count | Specifies the number of times an animation can be played. The default is 1, and infinite is an infinite number of plays |
IE10, Firefox, and Opera support the @Keyframes rule and animation property. Chrome and Safari require the -webkit- prefix. IE9 and earlier versions do not.