HTML5 basics 01 and html501

HTML5 basics 01 and html501
I. selector:

It can be divided into relationship selector, attribute selector, and pseudo class selector.

1.1 Relationship Selector  

Descendant selector ul li Selects all descendant Elements

Child selector ul> li selects ul's son

Adjacent to the selector. box + li select a li element behind the. box

Sibling selector. box ~ Li: select all the li elements behind the. box.

1.2 Attribute selector: select the corresponding element through the attribute

(1) E [attribute name]: select all the eElements with this attribute

(2) E [attribute name = value]: select all the eElements with this 'attribute = Corresponding value '.

(3) E [attribute name ~ = Value]: select all the eElements that contain this 'Property = Corresponding value '.

Newly Added in css3:

(4) E [attribute name ^ = value]: matches the Eelement of the 'attribute = Corresponding value' from the beginning.

(5) E [attribute name $ = value]: matches the Eelement of the 'attribute = Corresponding value' from the end.

(6) E [attribute name * = value]: matches the Eelement of the 'attribute = Corresponding value' from any location

1.3 Pseudo-class selector

We have learned before after a: link before.

(1) E: first-child find the element whose first child is E from the parent level (css2)

(2) E: last-child finds the last child E element (css3) from the parent level)

(3) E: nth-child (N) Find the element whose nth child is E from the parent level (css3)

TIPS:

(1) even controls an even number of odd controls an odd number

(2) nth-child (5n + 1): N starts from 0 and goes one by one.

(3) There is a selector nth-of-type () that is particularly similar to nth-child ()

1.4 Others Selector

(1) input: focus {}=> select the form for obtaining the focus

(2) input: enabled {}=> select the controllable form Element

(3) input: disabled {}=> select an unmanageable form

(4) E: target {}=> select the current Eelement to jump to through the anchor

(5) E: empty {}=> select an E element without a subnode, including a text node (not required)

(6) Input: checked => select the selected checkbox form

Ii. pseudo element before   After

Purpose: render a virtual label and insert it to the front or back of the current element.

Summary:

(1) pseudo elements are in-row elements by default, which can be converted. In actual work, they are used to simulate small labels for decoration.

(2) Because pseudo elements do not exist, they cannot be obtained directly using JS (classes can be used to overwrite previous styles)

(3) the underlying principle of clearing floating: It is to clear floating with a pseudo element (because the pseudo element does not occupy dom memory), thus saving dom memory.

(4) text-indent does not work for pseudo classes

(5th when the pseudo class uses iconfontto open iconfont.css to get the corresponding value in the content

(6) When a pseudo element requires a hover effect, the hover cannot directly use the parent-level statement: parent: hover: pseudo element.

(7) content must not be omitted, even if there is no content in it

3. font usage

URL: http://www.iconfont.cn/Ali

Http://www.youziku.com/font

Compatible: supports all browsers

Step: (the use of Alibaba's web Fonts is listed here)

(1) Go to the official website and click webfont.

 

(2) enter the corresponding text and select "add font ".

 

Just copy the code.

 

(4) change the path and add the corresponding class to the text.

Iv. rounded corners

Broder-radius: Value

Value description:

 

 

 

 

(1) A value is set to the horizontal and vertical radius of the four corners of the box.

(2) Each angle can be set independently. The value sequence is clockwise in the upper left, upper right, lower left, and lower right corner.

(3) the abbreviated logic is the same as that of padding and margin.

(4) The Unit supports pixels and percentages (the width and height are referenced)

(5) You can use the horizontal or vertical radius to independently control the radius, and each radius can be separately controlled.

( 5 ) Shadow

Syntax: box-shadow: Value

Value description:

(1) first value: Npx shadow shifted to the horizontal direction N pixels positive to right negative to left

(2) second value: Npx shadow shifts N pixels to the vertical direction and goes up to a negative number.

(3) third value: feather size (Fuzzy size)

(4) fourth value: shadow size

(5) fifth value: the default color is black.

(6) sixth parameter: internal and external shadows are inset by default.

(7) You can write Multiple shadows separated by commas (,).

(8) Shadows can be abbreviated, but note that some values need to be supplemented with 0.

Text shadow

Syntax: text-shadow: horizontal offset vertical offset feather size color

Clever Use can make text concave and convex Effects

( 6 ) Border Image

Syntax: border-image: Value

Follow the Nine-phase grid cut chart, and each of the top, bottom, and left

Value description:

(1) border-image-source: url('border.png '); image path

(2) border-image-slice: 26; image cutting, with no unit, follow the Nine-cell Cutting Method (one knife for top, bottom, and left)

(3) border-image-repeat: round, stretch, or repeat; round is flawless, stretch is stretched by default, repeat is tiled (may be defective)

(4) Abbreviation: border-image: url('border.png ') 26 round;

Conclusion: The plot is cut in a nine-square format.

( 7 ) Background Series ( 7. 1) baseline of the background image

Syntax: background-origin: Value

Value description:

(1) border-box: Ignore the border directly from the beginning of the border 0, 0 point Tile

(2) padding-box: default value. Ignore the padding and directly tile from the starting point 0 and 0 of the padding.

(3) content-box: it is related to padding to tile from the content part.

( 7.2 ) Multiple backgrounds

Note: Background images are separated by commas (,). You can write multiple groups. The first rendered image may cover the rendered image.

( 7. 3) control the size of the background image

Syntax: background-size: Value

Value description:

(1) when there is only one value, the width is stretched and the height is equal to the ratio. px or percentage is supported. The percentage refers to the width of the box.

(2) When there are two values, the width and height will be stretched to the corresponding value, which may be deformed. px or percentage is supported, percentage refers to the width of the box.

(3) contain: when the image width or height is scaled, there is a "hitting" the edge of the box, and the changes are stopped.

(4) ensure that no white is left on the basis of contain. This is the effect of cover.

( 8 ) Box Subtraction --- Important

The actual width of our box is actually width = width + padding + border, and the inner subtraction attribute will automatically help us with the padding and border values, therefore, the actual width of the box with the inner Subtraction is equal to width. The values of padding and border are automatically subtracted from width.

In actual work, the internal minus percent layout is one of the ways to achieve the mobile terminal layout.

(9) Gradient ( 9. 1) linear gradient

Background:-webkit-linear-gradient (starting position, color 1, color 2, color 3 );

Conclusion: (1) You need to add a private prefix.

(2) We recommend that you use the azimuth nouns to control the start position.

( 9. 2) radial gradient

Background:-webkit-radial-gradient (starting position, color 1, color 2, color 3 );

Summary:

(1) The starting position can be an azimuth term or an angle. The angle is mainly an angle of the gradient line. The gradient line defaults to a horizontal direction arrow to the right, and the positive value is a negative clockwise rotation. (linear gradient)

(2) angle does not support pixel and azimuth nouns (radial gradient)

( 9.3 ) Private prefix

The prefix of the corresponding Browser needs to be added to each css3 attribute to ensure its compatibility.

Google Apple:-webkit-

Firefox:-moz-

IE:-ms-

O:-o-

Small details: on the mobile phone end, generally only one webkit is required (for most mobile terminals in China)

Add location: most of them are directly added to the front, and all the attributes not available in css2 are added to the front. Some of them are attributes of css2 that are added to the back (background: -webkit-linear-gradient ())