20 classic CSS skills

I. CSS font attribute shorthand rules generally use CSS to set the font attributes as follows:
Font-weight: bold; font-style: italic; font-varient: Small-caps;
Font-size: 1em; line-Height: 1.5em; font-family: verdana, sans-serif
However, you can also write them all to one row: Font: bold italic small-caps 1em/1.5em
Verdana, sans-serif
Really good! Only one note: this shorthand method takes effect only when both the font-size and font-family attributes are specified. And if you do not set the font-
Weight, font-style, and font-varient, they will use the default value, which should be noted.

2. When two classes are used at the same time, only one class can be set for one element, but this does not mean that two classes cannot be used. In fact, you can: <p
Class = "text side">... </P>
At the same time, two classes are given to the P element, with an empty lattice in the middle. In this way, the attributes of all the text and side classes will be added to the P element. If the attributes in the two classes conflict, the subsequent settings take effect,
That is, the attribute of the class placed in the back of the CSS file takes effect.

3. The default value of CSS border can usually set the border color, width, and style, for example, border: 3px solid #000.
The border is displayed as 3 pixels wide, black, and solid. However, you only need to specify the style here.
If only the style is specified, the default value is used for other attributes. Generally, the default width of border is medium, which is generally 3 to 4 pixels. The default color is the text color. If
If the value is exactly the right one, you don't need to set that much.

4. CSS is used to print documents. Many websites have a version for printing, but it is not necessary because CSS can be used to set the printing style.
That is to say, you can specify two CSS files for the page, one for screen display and the other for printing: <link type = "text/CSS"
Rel = "stylesheet" href = "stylesheet.css" Media = "screen"/> <Link
Type = "text/CSS" rel = "stylesheet" href = "printstyle.css" Media = "print"
/> 1st rows are displayed, and 2nd rows are printed. Pay attention to the media attribute.
But what should I write in printed CSS? You can set it by designing common CSS. At the same time of design, you can set this CSS to display CSS to check its effect. Maybe you will use
Display: none command to turn off some decorative images, and then turn off some navigation buttons.

5. Image replacement skills
Generally, we recommend that you use standard HTML to display text instead of images. This is fast and readable. However, if you want to use some special fonts, you can only use images.
For example, you want to sell the entire icon, you use this picture: This is certainly acceptable, but for search engines, they are less interested in replacing text in alt than normal text, because many designers put a lot of keywords here to cheat the search engine. Therefore, the method should
This is the case: H1 {Background: url(widget-image.gif) No-Repeat; Height: Image Height
Text-indent:-2000px} note that the image
Change height to the height of the real image. Here, the image is displayed as a background, and the real text is Indented by the-2000 pixels, which will appear at 2000 on the left of the screen.
You can't see it. However, this may not be visible to anyone who closes the image.

6. Another adjustment technique for the CSS Box Model
The box model is adjusted mainly for IE browser before IE6. They calculate the boundary width and blank space on the element width. For example: # box {width: 100px;
Border: 5px; padding: 20px} calls it like this: <Div id = "box">... </div>
At this time, the full width of the box should be 150 points, which is correct in all browsers except IE6. However, in a browser like ie5, its full width is still 100 points. Can be used
Box Adjustment Methods invented by the predecessors to deal with this difference. However, CSS can achieve the same purpose to make them display the same effect. # Box {width: 150px}
# Box Div {border: 5px; padding: 20px} is called as follows: <Div
Id = "box"> <div>... </div>
In this way, no matter what browser, the width will be 150 points.

7. Align block elements if you want to make a fixed-width webpage and make the webpage horizontally centered, it is usually as follows: # Content {width: 700px;
Margin: 0 auto} You will use <Div id = "content">
To enclose all elements. This is very simple, but it is not good enough. This effect will not be displayed in earlier versions of IE6. Change CSS as follows: body {text-align: Center}
# Content {text-align: Left; width: 700px; margin: 0 auto}
This will center the webpage content, so text-align: Left is added to the content.

8. You can use CSS to process vertical alignment. You can use a table to conveniently set the table unit vertical-align: Middle.
You can. But this is useless for CSS. This attribute is useless if you want to set a navigation bar to 2 em and center the navigation text vertically.
What is the CSS method? By the way, set the Row Height of the text to 2em: Line-Height: 2em.
 
9. CSS positioning in the container
One advantage of CSS is that one element can be located at any time in a container. For example, for this container: # container {position: relative
} In this way, all elements in the container are relatively located. You can use <Div id = "Container"> <Div
Id = "navigation">... </div> If You Want To locate 30 points from the left and 5 points from the top, you can do this:
# Navigation {position: absolute; left: 30px; top: 5px}. Of course, you can also do this:
Margin: 5px 0 0 30px note that the order of the four numbers is: Top, right, bottom, left. Of course, sometimes the positioning method is better than the margin method.

10. Background Color directed to the bottom of the screen
CSS cannot control the vertical direction. If you want to direct the navigation bar to the bottom of the page like the content bar, It is very convenient to use a table, but if you only use this CSS:
# Navigation {Background: Blue; width: 150px}
A shorter navigation bar will not go straight to the bottom, and it will end when the half-way content ends. What should I do?
Unfortunately, you can only use spoofing to add a background image to the shorter column. The width is the same as the column width, and the color is the same as the Set background color. Body {
Background: url(blue-image.gif) 0 0 repeat-y}
In this case, EM cannot be used as the unit, because in this case, once the reader changes the font size, this trick will reveal the filling, and only PX can be used.

11. Comparison of block and inline elements all HTML elements belong to one of block and inline. The block element has the following features:
Always start on the new line; the height, the row height, and the top and bottom margins can be controlled; the default width is 100% of its container unless a width is set <div>,
<P>, <Li> is an example of block elements. On the contrary, the inline element has the following features: it is on one line with other elements; the height, the row height, and the top and bottom margins cannot be changed;
The width of a text or image cannot be changed. <Span>, <a >,< label>,
<Input>, , <strong>, and <em> are examples of inline elements.
Use Code class = "inline"> display: inline or display:
The block command can change this feature of an element. When do I need to change this attribute? Let an inline element start from a new line; keep the block element and other elements on one line;
Controls the width of the inline element (especially useful for navigation bars); controls the height of the inline element; you can set the background color of a block element with the same width as the text without setting the width.

12. Another box hacker Method
The reason why there are so many box hacking methods is that IE's understanding of box before 6 is different from that of others. Its width should contain the edge width and white space. To make ie5 consistent with other browsers, you can
To use CSS: padding: 2em; Border: 1em solid green; width: 20em;
Width/**/:/**/14em;
The first width is recognized by all browsers, but ie5.x does not recognize the width setting of line 2nd, because there is a blank comment on that line (what a stupid syntax analysis !), Therefore, ie5.x is reduced by 20.
Some blank, while other browsers will use the width of 14, because it is 2nd rows, will overwrite 1st rows.

13. Minimum page width
Min-width is a very convenient CSS command, which can specify that the element is at least or less than a certain width, so as to ensure correct layout. But IE does not recognize this, but it actually
Width is used as the minimum width. To enable this command to be used on IE, you can put <div> in <body>
Label, and then specify an ID for the DIV: <body> <Div id = "Container"> then CSS is designed as follows:
# Container {Min-width: 600px;
Width: expression (document. Body. clientwidth <600? "600px": "Auto ");
}
The first Min-width is normal, but the width of line 2nd uses JavaScript, which is recognized only by IE, which will make your HTML document not formal. It is actually accessible
Through JavaScript judgment to achieve the minimum width. In the same way, you can achieve the maximum width for IE:
# Container {Min-width:
600px; max-width: pixel PX; width: expression (document. Body. clientwidth
<600? & Quot; 600px & quot;: Document. Body. clientwidth & gt; 1200? "Pixel PX":
"Auto ");}

14. Questions about IE and width and height
IE does not recognize the Min-definition, but in fact it treats normal width and height as Min conditions. In this case, the problem is big. If only the width and height are used
These two values will not change. If only Min-width and Min-height are used, the width and height under IE are not set at all.
For example, to set a background image, the width is important. To solve this problem, you can:. Box {width: 80px; Height: 35px ;}
HTML> body. Box {width: auto; Height: auto; Min-width: 80px;
Min-Height: 35px ;}
All browsers can use the first box setting, but IE does not recognize the 2nd segment setting because the sub-Selector command is used. The 2nd settings are more special, so they will overwrite the 1st settings.

15. The text-transform command is very useful. It has three values: Text-transform: uppercase,
Text-transform: lowercase and text-transform:
Capitalize. The first half converts all texts into uppercase letters, the second half into lowercase letters, and the second half into uppercase letters. This is very useful for pinyin text. Even if the input is case-insensitive
No.

16. In ie, the image text disappears and sometimes the text or background image disappears suddenly. Refresh the image and it appears again, which is more likely to happen when it is close to floating elements (note: I have never seen it ). In this case, you can set position: relative for the elements that disappear. If not, specify a width for these elements.

17. Invisible text can be used for whatever reason you want some webpage text not to be displayed in the browser, for example, to print or to make some text invisible for a small screen
Display: none. This is very simple, but sometimes it is useless for some people. They can remove this control, then they need to use: Position: absolute;
Left:-9000px. This actually specifies that the text is displayed outside the page.

18. design special CSS for handheld devices
That is, small screen users such as mobile phones and PDAs can design a CSS to make the webpage display more comfortable. To this end, you can adjust the browser window to 150 to see the effect. Specify a dedicated handheld device
The CSS syntax is: <link type = "text/CSS" rel = "stylesheet"
Href = "handheldstyle.css" Media = "handheld"/> You can also read the availability of dedicated handheld devices.

19. If you want to create a button with a 3D effect and the button will change after you click it, you must use the image replacement method. Now CSS is ready: {
Display: block; Border: 1px solid; border-color: # AAA #000 #000 # AAA;
Width: 8em; Background: # fc0;} A: hover {position: relative; top: 1px;
Left: 1px; border-color: #000 # AAA #000;} You can adjust the effect by yourself.

20. Use the same navigation code on different pages
Many Web pages have navigation menus. when you enter a page, the corresponding menu items should be dimmed while other pages will be highlighted. To achieve this effect, you need to write a program or design each page.
CSS can achieve this effect. First, use the CSS class in the Navigation Code: <ul> <li> <a href = "#"
Class = "home"> Home </a> </LI> <li> <a href = "#"
Class = "about"> about us </a> </LI> <li> <a href = "#"
Class = "Contact"> Contact Us </a> </LI> </ul>
Then, specify an ID for the body of each page, with the same name as the class above. For example, <body id = "Contact">. Then design CSS as follows: # Home
. Home, # About. About, # About. About {commands for highlighted
Navigation go here}
Here, when the ID is set to home,. Home will take effect, that is, the navigation bar of the class set to home will display a special effect. This is also true for other pages.