1. Meta characters use:
[]: all options
||: tie
|: Multiple choice
?: 0 or one
*: 0 or more
{}: Scope
2. CSS3 attribute selector:
E[attr]: There is an attr attribute;
E[attr=val]: The attribute value is exactly equal to val
E[attr*=val]: The attribute value contains the val character and is in "any" position
E[attr^=val]: The attribute value contains the val character and is at the "start" position
E[attr$=val]: The attribute value contains the val character and is at the "end" position
3. CSS3 pseudo-class selector:
P:first-child: The first child element of the parent element of the P element (the first element must be a p tag, otherwise it is invalid)
P:last-child: The last child of its parent element
P:nth-child(n): The nth child element of its parent element (n follows a linear change, and its value is 0, 1, 2, 3, 4...)
P:nth-last-child(n): the nth child element of its parent element (counting backwards)
4. Pseudo class:
E:empty : Empty pseudo-class; selects the E element without any child nodes; (not very widely used)
E:target : target pseudo-class; used in conjunction with the anchor point, the element at the current anchor point will be selected;
E:not(selector) : exclude pseudo-classes; elements other than selectors (arbitrary selectors) will be selected;
5. Pseudo elements:
1. The first word or character of E::first-letter text (such as Chinese, Japanese, Korean, etc.)
2. E::first-line The first line of text;
3. E::selection can change the style of the selected text;
4. E::before and E::after: Create an element at the start position and end position inside the E element. This element is an inline element and must be used in conjunction with the content attribute.
6. Color:
RGBA: Red, Green, Blue, Alpha (red, green, blue, transparency)
HSLA: Hue, Saturation, Lightness, Alpha (Hue (0-360), Saturation (0%~100%), Lightness (0%~100%), Transparency (0~1))
Note: Alpha transparency is not inheritable compared to opacity and will not affect the transparency of child elements.
Regarding CSS transparency:
1. Opacity can only set the transparency for the entire box, and the sub-box and content will inherit the transparency of the parent box;
2, transparent can not adjust the transparency, always completely transparent
7. Text shadow text-shadow (horizontal offset, vertical offset, blur, color)
Such as: text-shadow: 2px 2px 2px #CCC; (the blur cannot be negative)
8. Box Model
1. box-sizing: border-box box size is width
2. box-sizing: content-box box size is width + padding + border
9. Border rounded border-radius
10. box-shadow (horizontal offset, vertical offset, blur, color)
Such as box-shadow: 5px 5px 5px #CCC (blur can not be negative; inset can set inner shadow)
11. Border image border-image
Detailed parameter explanation
1、border-image-source
Specify image path
2、border-image-repeat
Specify the tiling method of the cropped virtual image
a) round will automatically adjust the size and display the full frame picture
b) The repeat is simply tiled, and the excess part will be "cropped" and cannot be displayed completely.
3、border-image-slice
4、border-image-width
Sets the size of the border background area. The size of this value does not affect the size of the box.
12. Background
1.background-size: background image size
Its parameters are set as follows:
a) You can set the length unit (px) or percentage (when setting the percentage, refer to the width and height of the box)
b) When set to cover, the zoom ratio will be automatically adjusted to ensure that the image always fills the background area, and if there is overflow, it will be hidden.
c) Setting to contain will automatically adjust the zoom ratio to ensure that the image is always completely displayed in the background area.
2. background-origin: The reference origin of the background image positioning (background-position)
parameter:
border-box takes the border as the reference origin;
The padding-box uses the inner margin as the reference origin;
content-box takes the content area as a reference point;
3. background-clip: Crop the background area and change the size of the background area
parameter:
The border-box cuts the border as the background area;
padding-box clips the background area within the padding;
content-box clips the content area as the background area;
13. Gradients
1. Linear gradient (horizontal): linear-gradient [necessary elements: direction, starting color, ending color, gradient distance]
2. Radial gradient (spreading from a center point): radial-gradient [necessary elements: circle radius, center point, starting color, ending color, gradient range]
Note:
Note: a about the center point
The center position refers to the upper left corner of the box. For example, background-image: radial-gradient(120px at 0 0 yellow green) has the center point as the upper left corner, and background-image: radial-gradient(120px at 0 100% yellow green) has the upper left corner. The center of the circle is the lower left corner.
b About the radiation range
The radius can be unequal, that is, it can be an ellipse. For example, background-image: radial-gradient(120px 100px at 0 0 yellow green) will be an ellipse (horizontal axis 120px, vertical axis 100px) gradient.
14. transition transition
Details of transition properties:
Set transition properties: transition-property: all;
Set the transition time: transition-duration: 2s;
Transition delay: transition-delay: 3s;
Transition speed: transition-timing-function: linear;
15. 2D Transformation
1. Move translate (the distance moved in the X axis direction, the distance moved in the Y axis direction), the unit pixel value or 100%, when it is a percentage, it is relative to its own width and height;
2. Zoom scale (horizontal zoom, vertical zoom), the value can take decimals.
3. Rotate rotate(deg) : positive value is clockwise, negative value is counterclockwise;
4. Skew skew(deg, deg) can make the element skew at a certain angle, which can be negative. The second parameter is not written and defaults to 0.
5. Matrix() combines all 2D transformations together and requires 6 parameters (understand).
6.transform-origin can adjust the origin of element transformation
Consecutive: transform: translate() rotate() scale() The order will affect the effect of the transformation.
16. 3D Transformation
rotateX: rotate around the X axis
rotateY: rotate around the Y axis
rotateZ.: Rotate around the Z axis
translateX: move on the X axis
translateY: move on the Y axis
translateZ: move on the Z axis
Usage: transform: rotateX(180deg); means to rotate 180 degrees around the X axis
other:
Perspective: perspective:
a) As an attribute, set to the parent element, acting on all 3D transformed child elements
b) as a value of the transform attribute, applied to the element itself
transform-style: preserve-3d; let the element display in 3D space
backface-visibility: Set whether the back of the element is visible
Learning documents: CSS3 animation library; animate.css
17. CSS3 animation
Principle: Set up multiple nodes to precisely control one or a group of animations.
1. Necessary elements:
a. Specify the animation sequence through @keyframes;
/*Define animation sequence*/
@keyframes rotate {
0% {
transform: rotateZ(0deg) scale(1);
}
50% {
}
100% {
transform: rotateZ(360deg) scale(2);
}
}
b. Divide the animation sequence into multiple nodes by percentage;
c. Define each attribute in each node separately
d. Apply the animation to the corresponding element through animation;
2. Key attributes
a, animation-name sets the animation sequence name
b, animation-duration animation duration
c, animation-delay animation delay time
d, animation-timing-function animation execution speed, linear, ease, etc.
e, animation-play-state animation playback state, running, paused, etc.
f, animation-direction animation reverse broadcast, alternate, etc.
g. Status after animation-fill-mode animation is executed, forwards, backwards, etc.
h, animation-iteration-count animation execution times, inifinate, etc.
i, steps(60) means that the animation is divided into 60 steps to complete
3.连写：animation: rotate 3s infinite linear;
18. Retractable layout display: flex
1. Necessary elements:
a. Specify a box as a telescopic box display: flex
b. Set properties to adjust the layout of the child elements of this box, such as flex-direction
c. Clarify the main side axis and direction
d. The main side shaft can be interchanged, and the direction can also be changed
2. Detailed explanation of each attribute
a, flex-direction adjusts the main axis direction (the default is the horizontal direction)
b, justify-content adjusts the main axis alignment
c, align-items to adjust the alignment of the lateral axis
d. flex-wrap controls whether to wrap
e, align-content stack (independent line generated by flex-wrap) alignment
f, flex-flow is a short form of flex-direction, flex-wrap
g. The scaling ratio of flex sub-items on the main axis, if the flex attribute is not specified, it will not participate in the expansion and contraction allocation
h, order controls the arrangement order of sub-items, sorted in positive order, from small to large
19. Web Fonts
Five font types:
A .ttf
B .otf
C .woff
D .eot
E .svg
Websites to find Chinese fonts: http://www.zhaozi.cn/, http://www.youziku.com/
20. Font Icons
usage:
1. Define the font and name it at will
Such as: @font-face {
font-family: peach;
/* Specify the font file to ensure that all browsers can recognize it */
src: url(../fonts/MiFie-Web-Font.ttf) format("truetype"), url(../fonts/MiFie-Web-Font.svg) format("svg"), url(../fonts/MiFie-Web-Font.woff) format("woff")
}
2. Use garbled characters
.icon-mobilephone::before {
content: "\e908";
}
refer to:
Introduction to Font Awesome
http://fontawesome.dashgame.com/
Customize your own font icon library:
Process: UI pours out svg format images (vector graphics) --> upload to iconfont.cn/other --> generate font icons --> generate font files
other:
http://iconfont.cn/
https://icomoon.io/
SVG material
http://www.iconsvg.com/
Refuse to reprint, infringing copy......