The ten carefully organized items must know CSS + DIV skills and cssdiv skills.

The ten carefully organized items must know CSS + DIV skills and cssdiv skills.

1. Simplified css font rules

When we write a font style, we may write it like this.

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

In fact, writing in this way is completely redundant. I can only use font to write it.

For example:

    font: 1em/1.5em bold italic small-caps verdana,serif 

 

2. Write several class attributes together.

Normally, the class in the attribute has only one value, but it is not surprising that you can only give it

Assign a class name. We can assign more than two class names. For example

<P class = "text side">... </p>

However, it should be noted that the class uses spaces to separate them, rather. In this way, the class of text and side will be applied to the p element.
3. Default Value of the CSS border-TOP

Border is also the border value. When I am doing project development, I am used to the following practices:

Border: 1px solid red;

The first is the frame size, the second is the style, and the third is the color. However, not all three of them are required. The border style must be used. The remaining two have default values.

For example, you write:

Border: solid

If you do, the default value of the first size is medium (relative to about 3px or 4px) and color refers to the color in the text.
4 .! Important will be ignored in IE 

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

Ensure compatibility between browsers, so we need to use it! Important.

If you use this in css, its priority is higher than that of its attribute with the same name.

This is for browsers other than IE.

For example

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

As mentioned above, the browser except IE is 3.5em, While IE is 2em. This is useful.

 
5. alt attribute of the Image

During website development, we are often advised to use HTML tags to display text, rather than images. In this way, the website can be loaded faster and accessible. For example, if you develop a website, you want to put a "purchase item" at the top of each page of your website ". Now you are a seller, So you expect your items to be found by the search engine. Maybe you will do this:

<H1>
However, it is worth noting that the search engine does not pay attention to the keywords in the img Tag alt because many sellers currently do this. Therefore, we can use css instead.

As follows:

<H1> <span> purchase items </span>
Then define css:

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

This is OK, catering to the taste of the search engine. So, the search engine really cannot afford to hurt.

6. hack of the Box Model 

This problem is difficult, but there are still few opportunities to be honest. Because it involves the IE5 issue, who dares to say they are still using IE5? Pull it out.

In any case, we also know that there is no harm.

IE5 is different from other browsers (IE 6 + and chrome) in border calculation. How can this problem be solved?
For example, Code Description:

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

 

Set the width to 200 pixels, but the sidebar actually requires 230 pixels, except for IE5 for Windows. in IE5 for Windows, the sidebar occupies 200 pixels in total, and the internal patch and border are included. figure 2 shows that when the width attribute is set to 200 pixels, the border and internal patches occupy content space, rather than outside the content space.

For IE5 for Windows, you need to specify the width to 230 pixels (with the width of the patch and border on both sides), and then overwrite it back with 200 pixels, make the browser compliant with the standard 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 values of IE5 for Windows appear first, and then use the voice-family attribute here to let IE5 for Windows think that the Declaration has ended, the reason is simply that the browser does not change the visual effect if it recognizes it, and finally specifies the actual width to overwrite the original width rule. The second width rule will be ignored by IE5 for Windows.

The results should look exactly the same on IE5 for Windows and all other browsers compatible with CSS2. If this hack is not used, IE5 for Windows users will see a thinner Bar Width than the design.
7. Center Effect of block-level elements

Block-level elements? You don't understand this. If you don't understand it, you just need to say that it refers to elements such as div, h1, and table. It corresponds to the inline element, such as label.

In layman's terms, one occupies one row (of course not supported by other attributes), and the other does not. OK.

In general, if the div is centered, I will write the following statement:

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

Then, we are very happy to be able to achieve the effect in a normal browser. Please note that I have said that the two are normal, which also indicates that there is an abnormal situation? What is the situation? Like the above 6.1, it is also the problem of IE5. In IE5, it does not understand this at all. Do you say it can solve the problem ?.

Therefore, we have to follow the following steps:

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

OK.

8. vertical aligning)

When we are using a table, what should we do if we need to center the content of a column? You don't have to ask. We naturally use the following line:

Vertical-align: middle

Most of the time, this can work, but there are always exceptions. For example, you now have a navigation menu with a height of 2em. If you insert this command, sorry will not execute it and put the text to the top.

How can this problem be solved? Very simple.

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

Line-height: 2em
9. absolute and relative positioning

This should be a difficult part of the css tutorial. It's hard to say clearly at once. If you are interested, you can look for information. Here is an example:

<style>     #container { position: relative }     </style>     <div id="container"><div id="navigation">...</div></div> 

Then I set the navigation style.

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

This shows that the navigationo is used to position CSS relative to the outside.

10. You do not need to quote the path of the background image. 

For example:

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

You should remove the CSS background attribute quotation marks.

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

If you add quotation marks, some browser errors may occur.