Shulou(Shulou.com)06/03 Report--

This article mainly explains the "CSS selector skills", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "CSS selector skills" bar!

What are: before and after? How to use them?

: before is a pseudo element in css that can be used to insert something before an element.

: after is a pseudo element in css that can be used to insert something after an element.

Let's run a simple code to test the effect:

CSS Code copies content to the clipboard

P:before {

Content: "H" / *: before and: after must bring skills, importance is more than 5 stars * /

}

P:after {

Content: "d" / *: before and: after must bring skills, importance is more than 5 stars * /

}

Ello Worl

The above code will show "Hello World" on the page. What we see through the browser's "censorship elements" is:

XML/HTML Code copies content to the clipboard

:: before

"ello Worl"

:: after

One is inserted in front of the content inside the p tag: the before pseudo element, which contains "H", and the content inside the p tag is followed by a: after pseudo element, which contains "d". As a qualified programming monkey, it is necessary to defend the complete existence of "Hello World".

Since the notes are mainly aimed at: before and: after, it is certainly not just the above brief introduction. Let's take a look at how to use them normally.

1. Write the style of a dialog box with border.

This animal will split the above sentence into two parts: combined with border, write a dialog box style.

Since it is combined with border, let's turn to a small topic and briefly introduce how to use border to draw triangles (this triangle is needed when writing dialog box styles):

CSS Code copies content to the clipboard

.triangle {

Width: 0

Height: 0

Border-left:50px solid red

Border-bottom:50px solid blue

Border-top:50px solid black

Border-right:50px solid purple}

The above code will show a square on the page, with a red triangle on the left, a purple triangle on the right, a black triangle above and a blue triangle below. Then some people will ask, don't we want triangles? Beast, are you kidding me by drawing a square?

Let's make some changes to the above style:

CSS Code copies content to the clipboard

.triangle {

Width: 0

Height: 0

Border:50px transparent solid; / * here we set the width of the border of the element to 50px, which means the border color is transparent, and solid means that the border is solid * /

Border-top-color: black; / * here we only set the color of the top border to black. As we all know, the style code after css overrides the same style code before, but the other three sides are still transparent * /

/ * border-bottom-color: black; / * set the bottom border to black * /

Border-left-color: black; / * set the left border to black here * /

Border-right-color:black*/ / * the right border is set to black here * /

}

Then we will see a triangle downward in the direction of the top. The explanation has been written in detail in css style notes.

Next we add: before:

CSS Code copies content to the clipboard

. test-div {

Position: relative; / * Daily relative positioning * /

Width:150px

Height:36px

Border-radius:5px

Border:black 1px solid

Background: rgba (245 and 245)}

. test-div:before {

Content: ""; / *: before and: after must bring skills, importance is more than 5 stars * /

Display: block

Position: absolute; / * Daily absolute positioning * /

Top:8px

Width: 0

Height: 0

Border:6px transparent solid

Left:-12px

Border-right-color: rgba (245, 245, and 1)

}

Through the above code, we will see a dialog box style similar to Wechat / QQ, but the only problem is that the border around the dialog box is not complete, but in the prominent triangle of the dialog box there is no frame on the transient cold field, how should we do? Let's summon: after is wearing a cotton-padded coat to come to the rescue.

Complete code:

CSS Code copies content to the clipboard

. test-div {

Position: relative; / * Daily relative positioning * /

Width:150px

Height: 36px

Border:black 1px solid

Border-radius:5px

Background: rgba (245 and 245)}

. test-div:before,.test-div:after {

Content: ""; / *: before and: after must bring skills, importance is more than 5 stars * /

Display: block

Position: absolute; / * Daily absolute positioning * /

Top:8px

Width: 0

Height: 0

Border:6px transparent solid

}

. test-div:before {

Left:-11px

Border-right-color: rgba (245, 245, and 1)

Z-index:1}

. test-div:after {

Left:-12px

Border-right-color: rgba (0re0j0j0pl 1)

Z-index: 0}

Okay, a complete dialog box style is presented in front of us. As for the direction of the small triangle of the dialog box, I believe you all know what to do with the code introduced by border in the previous paragraph. Yes, it is to change the position of position and the position of border display color. (this animal does not like to post pictures, understand the forehead, you can copy the code to run directly to see the effect, making wheels is not just building wheels. It can also make people more impressive and better understand)

two。 Translucent background layer as content

For example, our requirement is to make a translucent login box (which is also explained by comments in the code):

XML/HTML Code copies content to the clipboard

Body {

Background: url (img/1.jpg) no-repeat left top / * here the animal adds a picture background to distinguish between the translucency of the background and the complete opacity of the content * /

}

. test-div {

Position: relative; / * Daily relative positioning (important, also described below) * /

Width:300px

Height: 120px

Padding: 20px 10px

Font-weight: bold

}

. test-div:before {

Position: absolute; / * Daily absolute positioning (important, which will be briefly described below) * /

Content: ""; / *: before and: after must bring skills, importance is more than 5 stars * /

Top:0

Left: 0

Width: 100%; / * same width as content * /

Height: 100%; / * the same height as the content * /

Background: rgba (255pcm.5); / * given white background, 50% transparency /

Z-index:-1 / * Daily element stacking order (important, which will be described a little bit below) * /

}

Name

Password

Copy the above code and add a picture to test the effect.

Of course,: bofore and: after also have other clever uses, which are not listed here. Here is a link to use these two pseudo elements plus css3 animation to achieve some good-looking and practical dynamic effects: HoverEffectIdeas.

That's it: before and: after, let's talk a little bit about other css styles and layout precautions (maybe you don't pay much attention to it, which leads to some layout and style problems).

The problem of position location

The position attribute specifies the positioning type of the element, which defaults to static.

This property can also have the following values:

Absolute: an element that generates absolute positioning, relative to the first parent element other than static positioning.

Fixed: generates absolutely positioned elements that are positioned relative to the browser window.

Relative: a relative positioning element is generated and positioned relative to its normal position.

Inherit: specifies that the value of the position attribute should be inherited from the parent element.

Code:

CSS Code copies content to the clipboard

Body {

Height: 2000px / * the height of body is set to 2000px to distinguish between absolute and fixed * /

}

. test-div {

Position:absolute

Left:50px

Top:50px}

Hello World

Body {

Height: 2000px / * the height of body is set to 2000px to distinguish between absolute and fixed * /

}

. test-div {

Position:fixed

Left:50px

Top:50px}

Hello World

. out-div {

Width: 300px

Height: 300px

Background: purple; / * A background is defined here to let us know where the div is * /

Margin:50px 0px 0px 50px

Position: relative}

. in-div {

Position:absolute

Left:50px

Top:50px}

Hello World

Z-index element stack sort

Z-index is used to set or retrieve the stacking order of objects, and the corresponding script property is zIndex.

The higher the value of z-index, the higher the stacking level of the element.

Code:

CSS Code copies content to the clipboard

. first-div {

Width: 300px

Height: 300px

Background: purple; / * A background is defined here to let us know where the div is * /

Position: absolute

Left:50px

Top:50px

Z-index: 1}

. second-div {

Position:absolute

Left:80px

Top:80px

Width:50px

Height: 50px

Background: white

Z-index: 2}

Here we put the first div and the second div together to see the effect of z-index. The style of the above code is a purple square with a small white square inside. Because the z-index of the small square is larger than the z-index of the big square, it can show that when we set the z-index of .first-div to 3, we can not see the small white square, it is mercilessly blocked by the big purple square..

Zoom element scale

Zoom applies to all elements and is used to set or retrieve the scale of the object. The corresponding script property is zoom, and the value of the original ratio is 1.

CSS Code copies content to the clipboard

Div {

Width: 100px

Height: 100px

Float: left}

. first-div {

Background: purple

Zoom:1.5}

. second-div {

Background: black

Zoom:1}

. third-div {

Background: red

Zoom:.5}

The above code will show the purple-black-red div, which is 1.5x, 1x and 0.5x the size of 100px, respectively.

What are em and rem?

1em is equal to the current font size, and a change in value means that the font size is adjusted. Em inherits this feature, that is, the outer parent element defines the em size of the font, and the inner child element inherits the style of this attribute.

Rem = root em. As the name implies, root is the root and the top. That is, the em of the root, which refers to the HTML root element. So the size of the rem is to adjust the relative size of the font according to the size of the HTML root element.

CSS Code copies content to the clipboard

Body {

Font-size: 12px

}

/ * html {

Font-size: 12px

} * /

Div {

Width: 200px

Height: 100px

Float:left}

. first-div {

Font-size: 1em}

. second-div {

Font-size: 2em}

. third-div {

Font-size: 1rem}

. fourth-div {

Font-size: 2rem}

Hello World

Hello World

Hello World

Hello World

Thank you for your reading, the above is the content of "the skills of CSS selector", after the study of this article, I believe you have a deeper understanding of the skills of CSS selector, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.