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

This article mainly explains "what are the skills for using CSS DIV". Friends who are interested may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "what are the skills for using CSS DIV?"

Abbreviated rules of 1.css font

When we write font styles, we might write like this.

Font-size: 1em; line-height: 1.5mm; font-weight: bold; font-style: italic; font-variant: small-caps; font-family: verdana,serif

In fact, it is completely superfluous to write like this. I can just use font to write OK.

For example:

Font: 1em/1.5em bold italic small-caps verdana,serif2. Write several class attributes together.

Usually it is written that the class in the property has only one value, but this is not an accident that you can only give it

If you assign one class name, we can assign more than 2. such as

...

However, it is important to note that they are separated by spaces in class, not ",", which requires attention. If this is used, then the class of text and side will be applied to the p element.

Default value of border for 3.CSS

Border is the value of the border. When I am doing project development, I am used to doing this:

Border:1px solid red

The first refers to the size of the box, the second refers to the style, and the third refers to the color. However, not all three are required, and you have to use the border style. The other two have default values.

For example, you write like this:

Border: solid

If you write this, the default value for the first size is: medium (relative to 3px or 4px) and color refers to the color in the text.

4. Neglect will be ignored in IE

Because of the incompatibility between browsers, when we write css, in order to ensure that the website can be in each

Browsers are compatible, so we need to use the property! important.

If you use this in css, it takes precedence over attributes of the same name.

This is for browsers other than IE.

such as

Margin-top: 3.5em! important; margin-top: 2em

What I mean above is that the browser other than IE is 3.5em and IE is 2em. This is very useful.

Alt property of 5.Image

When we are developing websites, we are often advised to use HTML tags to display text instead of images. This makes the site faster to load and more accessible. For example, if you develop a website, you want to put a "buy item" at the top of every page on your site. Now that you're a seller, you expect your items to be found by search engines, and maybe you'll do this:

It has been achieved, but it should be noted here that search engines do not pay attention to the keywords in the img tag alt because many sellers are like this now), so it is useless. So, we can use css instead.

It is as follows:

Buy goods

Then define css:

H2 {background: url (widget-image.gif) no-repeat;} H2 span {position: absolute; left:-2000px}

This is OK, catering to the taste of search engines. So, search engines really can't afford to get hurt.

6. Box model hack problem

This question is more difficult, but to tell you the truth, there are fewer opportunities to use it now. Because it involves the IE5 problem, who dares to say that it is still using IE5? Take it out and shoot it.

In any case, there is no harm in learning about it.

IE5 and other browsers (IE 6 +, chrome, etc.) calculate borders differently. What can I say? Please look at the picture below.

CSS box model

DIVCSS box

Figure 1 is what we now understand correctly, that is, the width value of the entire box box is the sum of the three values of the width+padding+boder of the content.

However, this is not the case in IE5. Please take a look at the picture above. It only contains 170px. So there's a problem.

For example, the code description:

# sidebar {width: 200px; padding: 10px; border: 5px solid black;}

Set the width to 200 pixels, but the sidebar actually requires 230 pixels of space, except for IE5 for Windows. The IE5 for Windows sidebar takes up a total of 200 pixels, including internal patches and borders. Figure 2 shows that when the width property is specified as 200 pixels, borders and internal patches take up content space, not outside.

For IE5 for Windows, you need to specify a width of 230 pixels (plus the width of the patch and border on both sides), and then cover it with 200 pixels so that standard-compliant browsers get the correct width.

# sidebar {padding: 10px; border: 5px solid black; width: 230px; / * for IE5/Win * / voice-family: "\"}\ "; voice-family: inherit; width: 200px; / * actual value * /}

Note that the value of IE5 for Windows appears first, followed by several rules that make IE5 for Windows think that the declaration is over. Here we use the voice-family attribute, simply because the browser recognizes it will not change the visual effect, and finally specify the actual width, overriding the original width rule, the second width rule will be ignored by IE5 for Windows.

The result should look exactly the same on IE5 for Windows and all other CSS2-compatible browsers. Without this hack, IE5 for Windows users will see a column width that is thinner than the design.

7. Centering effect of block-level elements

Block level elements? No, you don't even understand this. I don't understand, I'll just talk about it, that is, elements like div, H2 and table. The corresponding are inline elements, such as label and so on.

The popular point is that one will occupy a row (without the support of other attributes, of course), and the other will not. OK .

Generally speaking, for div in the middle, I would write the following words:

# content {width: 700px; margin: 0 auto;}

Then, we are very happy to be able to achieve the effect in the normal browser, please note that I said normal 2, which also means that there are abnormal circumstances? What's going on? Like the sixth point above, it is also the problem of IE5. Under IE5, it doesn't understand this at all. Do you think it can solve the problem?

So, we have to do this as follows:

Body {text-align: center;} # content {text-align: left; width: 700px; margin: 0 auto;}

OK, so can be very good compatibility.

8. Vertical adjustment (vertical aligning)

What if we need to center the contents of a column when we are using table? You don't have to ask, of course, with the following line:

Vertical-align: middle

Most of the time, it works like this, but there are always exceptions. For example, you now have a navigation menu whose height is 2em. If you insert this command, sorry, it will not be executed and will put the text at the top.

Then how to solve it? It's simple.

You only need to specify the height of the line-height of the box model as the same. As follows:

Line-height: 2em

9. Absolute positioning and relative positioning

This should be the more difficult part of the css tutorial, it is really difficult to say clearly all of a sudden, those who are interested can look for materials to see. Give me an example:

# container {position: relative}

...

Then I set the style of navigation inside.

# navigation {position: absolute; left: 30px; top: 5px}

This shows that the navigationo inside is positioned relative to the CSS on the outside.

10. There is no need to quote the path of the background picture.

For example:

Background:url ("images/***.gif") # 333

You should remove the quotation marks from the CSS background attribute

Background:url (images/***.gif) # 333

If you add quotation marks, it will cause some browser errors.

At this point, I believe you have a deeper understanding of "what are the skills for the use of CSS DIV?" you might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.