Basic knowledge of CSS3

some basic knowledge about CSS3 :

A. UI element State selector:

1. e:checked (selected) The value of an Li is triggered when the mouse is in the midpoint of the browser

2. e:enabled (available status) controls for entering text

3. E:selection (Status when selected) after the program runs, in the browser, with the mouse to select a thing triggered by the state (this state can be set background color Background-color,color font color)

4. E:not (s) (negation Pseudo-Class) matches all E elements that are not s-selectors

5. E:target (target pseudo-class selector) matches the corresponding address area

6. E~f (sibling Element) Select all F elements that follow the E element in the sibling

7. E+f (adjacent elements) from the top down, and the e element adjacent to the F element, if an e element is next to an element F, the f element is selected. If there are some e elements next to an F element, then these f elements are selected

Two. Pseudo-class selector:

Pseudo-Class selector: (the parentheses are followed by any number n, here I instantiate, easy to understand)

1. E:nth-child (2) matches the 2nd element of E in the parent element

Explanation: If the 2nd element of the parent element of element e is not an e element, then no element is selected

2. E:nth-last-child (2) matches the 2nd element in the parent element that is E

Explanation: If the second-to-last element of the parent element of element e is not an e element, then no element is selected

3. E:nth-of-type (2) matches the 2nd E element of a sibling in the parent element

Explanation: Matches a homogeneous element and is the 2nd e element of the sibling, only the e element, not E, is skipped until the 2nd sibling's e element is found to be selected

4. E:nth-last-of-type (2) matches the 2nd element of a sibling in the parent element

Explanation: Matches the same element and is the 2nd e element of the same sibling, only the e element, not E, is skipped until the e element of the penultimate 2nd sibling is found to be selected

5. E:last-child matches the last E element of a sibling in the parent element

Explanation: If the last element in the parent element is not an e element, no element is selected

6. E:first-of-type matches the first E element of a sibling in a parent element

Explanation: If the first element element in the parent element is not E, and the second element is E, the second one is selected

7. E:only-child matches only one E element in the parent element

Explanation: The parent element can have only one child element, and the child element can be selected only for the E element

8. E:only-of-type matches only one element E in the same class, it is selected

Explanation: The parent element may have multiple elements, but the e element can only have a unique ability to be selected, and if there are multiple e elements, no element will be selected

9. E:empty matches elements without any child elements E

Explanation: Select the e element without any child elements (only the element with line breaks or spaces is not an empty element, because a newline or a space is counted as a text element)

Three. Text style settings:

The effect of the text:

1. Text Shadow text-shadow:10px 20px 30px red;

10px represents the horizontal shadow value

20px represents the vertical shadow value

30px represents the blur value of the shadow

Red represents the color of the shadow

2. Text overflow: Text-overflow is like the following two attribute values:

Clip: The ellipsis is not displayed when representing the text overflow object frame, why the overflow part overflows directly

Ellipsis: Overflow section shows three ellipses when representing text overflow object frame

White-space:nowrap text is displayed in one line, not wrapped

Text-overflow to be used in conjunction with white-space,overlfow:hidded to display only three ellipses in the overflow section when the text overflows the box

3. Continuous text wrapping Word-wrap: There are two property values

Normal sets consecutive text (without spaces) in the object frame without wrapping

Break-word to set contiguous text (without spaces) to wrap within the object frame

Word-wrap are generally used in English letters, because each character will have a break (a space)

4. outline:10px solid red; Set the outer edge of text it has no effect on the actual dimensions of the element, as with the borderd visual effect, but border affects the width of the element)

10px represents the width of the outer line

Solid represents the style of the outer line

Red represents the color of the outer line

Four. Setting of the background style:

Positioning of the background, clipping, linear

1. Background-origin sets the location from which to start displaying the picture, with the following three values:

Border-box: Start displaying pictures from the outer border

Borer-padding: Displays a picture from the outer edge of the border

Border-content: Starting from the content picture area of the border

2. Background-clip: Sets the position from which to start cropping the picture, like the following three values:

Border-box: Crop a picture from the outer border

Padding-box: Crop a picture from the outer edge of the inner margin

Content-box: Crop a picture from the content area

3. Background-size: Set the size of the picture to make the picture fill the entire area

4. Multiple background: Set multi-layered background image (here is 3 pictures, it is three layers, the following number is the value of absolute top and left)

URL ("Path to Picture 1") noreppeat scroll 10px 10px;

URL ("Path to Picture 2") norepeat scroll 20px 20px;

URL ("Path to Picture 3") norepeat scroll 30px 30px;

Five. String matching:

CSS3 String Matching selector:

1. e:[att^=value] The attribute value of the Att property that matches element e is first the E element of value
Example: p:[class^= "a"]
The first element p that represents the property value of the selected class property, "a" (for example, "a" for Class= "abc")



2.e:[att$=value] The last digit of the property value that matches the att attribute of the element is the E element of value
Example: P:[class$= "C"]
Element P that represents the first "C" of the property value for the selected class property (for example, class= "ABC" has a trailing bit "C")



3. E:[att*=value] The attribute value of the Att property of the matching element contains the E element of value
Example: p:[classs= "abc"]
The attribute value that represents the selected class property contains the E element with "ABC"



4. E:[att=value] The attribute value of the Att property of the matching element equals the E element of value
Example: p:[class= "abc"]
The E element that represents the attribute value of the selected class property equals "abc"

Six. Style of the border:

. div{Background-color:rgba (0,0,0,.5);} Set the transparency of the background

CSS3 settings for Border styles:

1. Border Shadow: Box-shdow 10px 20px 30px 40px Red inset

1OPX: Shadow value representing the horizontal direction

20px: Shadow value that represents the vertical direction

30p: The Blur value that represents the shadow

40px: Blur extension value for shadows

Red: The color that represents the shadow

Inset: Represents the inner shadow


2. Rounded border: border-radius:10px represents the corner radius of the four corners of the top right lower left of the border is 10px

border-radius:10px 20px for top left and bottom right corner radius is 10px, upper right bottom left is 20px

border-radius:10px 20px 30px represents top left 10px, lower right is 30px, upper right lower left is 20px



3. Picture border: Border-image set a picture to make a border

Basic knowledge of CSS3