Classic CSS skills!

1. Simplified CSS font attributes

In general, CSS is used 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

But you can also write all of them to one line:

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. Also, if you do not set font-weight, font-style, and font-varient, they will use the default value, which should be noted.

2. Use two classes at the same time

Generally, 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 of the two classes conflict, the subsequent settings take effect, that is, the attributes of the classes placed in the CSS file take effect.

3. Default Value of CSS border

You can usually set the border color, width, and style, such:

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 this value is correct, you don't need to set that much.

4. CSS for document printing

Many websites have a printing version, but this is not actually required, because you can use CSS 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 attributes.

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 usedisplay: noneThis command is used to turn off some decorative images and then some navigation buttons. For more information, see "Print differences.

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, if you want to use the entire selling icon, you can use this image:

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. The method should be as follows:

However, there is no special font. To achieve the same effect, you can design CSS as follows:


h1
{
background: url(widget-image.gif) no-repeat;
height: image height
text-indent: -2000px
}


Change the Image Height to the actual image height. Here, the image is displayed as a background, and the real text is Indented by setting-2000 pixels. They will appear at 2000 on the left of the screen and will not be seen. 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
}

Call 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. The box adjustment method invented by the predecessors can be used 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
}

Call this method as follows:

<div id="box"><div>...</div></div>

In this way, no matter what browser, the width will be 150 points.

7. Align block elements in Center

If you want to build a fixed-width webpage and make the webpage horizontally centered, it is usually like this:

#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 the content is added
text-align: left.

8. Use CSS to process Vertical Alignment

Vertical alignment can be easily implemented using tables to set table units.vertical-align: middleYou 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. Position CSS 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, and can be used as follows:

<div id="container"><div id="navigation">...</div></div>

If you want to locate at 30 to the left and 5 to 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.

1. Comparison of block and inline Elements
All HTML elements belong to one of block and inline. The block element has the following features:

• Always starts on a new line;
• Height, row height, and top and bottom margins can be controlled;
• The default width is 100% of its container, unless a width is set.

<div>,<p>,,<form>,<ul>And<li>Is an example of block elements. On the contrary, the inline element features:

• And other elements are on one line;
• High, the Row Height and top and bottom margins cannot be changed;
• The width of a text or image cannot be changed.

<span>,<a>,<label>,<input>,,<strong>And<em>Is an example of the inline element.

Use Code class = "inline"> display: inline ordisplay: blockCommand to change this feature of an element. When do I need to change this attribute?

• Start an inline element from a new line;
• Keep block elements and other elements on one row;
• Controls the width of inline elements (especially useful for navigation bars );
• Controls the height of the inline element;
• You can set a background color that is the same as the text width for a block element without setting the width.

2. 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 use the CSS method:

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 uses 20 to remove some white space, while other browsers use 14 because it is 2nd rows and will overwrite 1st rows.

3. 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 uses width as the minimum width. To enable this command to be used on IE, you can<div>Put in<body>Label, and then specify a class for the DIV:


<body>
<div class="container“>


Then CSS is designed like this:


#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 actually achieves the minimum width through javascript judgment.

In the same way, you can achieve the maximum width for IE:


#container
{
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? ”1200px“ : ”auto");
}


4. 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, the values in the normal browser 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.

5. Font deformation command

text-transformThe command is very useful. It has three values:text-transform: uppercase,text-transform: lowercaseAndtext-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, it cannot be seen on the webpage.

6. Image text disappears in IE

Sometimes the text or background image disappears suddenly, and it appears again after refreshing, which is more likely to happen when it is near the floating element (Note: I have never seen it before ). In this case, you can set the elements to disappear:position: relativeIf not, try to specify a width for these elements.

7. Invisible text

For whatever reason, you can usedisplay: none. This is very simple, but sometimes it is useless for some people. They can remove this control and then use it:position: absolute; left: -9000px.

This actually specifies that the text is displayed outside the page.

8. Design specialized 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. The syntax for specifying CSS for a dedicated handheld device is:

<link type="text/css" rel="stylesheet" href="handheldstyle.css" media="handheld" />

You can also read the availability of dedicated handheld devices.

9. 3D effect buttons

In the past, to create a button with a 3D effect that will change after you click it, you must use the image replacement method. Now CSS is ready:


a
{
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 #aaa #000;
}


You can adjust the effect on your own.

10. 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 specifically. Now you can achieve this effect by using CSS.

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.