CSS Usage Tips 20 _css/html

1. CSS font Properties shorthand rules

The general use of CSS to set font properties is to do this:

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 them all in one line:

Font:bold Italic small-caps 1em/1.5em Verdana,sans-serif

That's great! There is only one point to be reminded: this shorthand method only works if you specify both the Font-size and Font-family properties. Also, if you do not set Font-weight, Font-style, and font-varient, they will use the default values, which should be remembered.

2. Use two classes at a time

Typically you can only set a class for one element, but that doesn't mean you can't use two of them. In fact, you can do this:

...

The P element is also given two classes, the middle is opened with an empty space, so that all text and side two class attributes will be added to the P element. If there are conflicting attributes in their two classes, the latter setting works, that is, the properties of the class that are placed in the CSS file are in effect.

3. Default values for CSS border

You can usually set the color, width and style of the boundary, such as:

BORDER:3PX Solid #000

This shows the border as 3 pixels wide, black, solid line. But in fact, you just need to specify the style.

If only the style is specified, the default values are used by the other properties. Generally, the border width defaults to medium, typically 3 to 4 pixels, and the default color is the color of the text in it. If the value is just right, you don't have to set that much.

4. CSS for document printing

Many web sites have a print-ready version, but this is not really necessary because you can use CSS to set the print style.

That is, you can specify two CSS files for the page, one for the screen display, and one for printing:

Line 1th is the display, line 2nd is print, note the media properties.

But what should I write in the printed CSS? You can set it up by designing a common CSS method. At the same time, the CSS can be set to display CSS to check its effect. Perhaps you will use the Display:none command to turn off some decorative pictures, and then turn off some of the navigation buttons. To learn more, you can look at the "Print differences" article.

5. Photo Replacement Tips

It is generally recommended that you display text in standard HTML instead of using a picture, which is faster and more readable. But if you want to use some special fonts, you can only use pictures.

For example, you want the entire sale of the icon, you use this picture:

Of course, but for search engines, compared to normal text, they have little interest in alt text, because many designers here put a lot of keywords to cheat search engines. So the method should be this:

Buy Widgets

But then there is no special font. To achieve the same effect, you can design css like this:

H1
{
Background:url (widget-image.gif) no-repeat;
Height:image height
Text-indent: -2000px
}

Be careful to change the image height to the true picture. Here, the picture will be shown as the background, and the real text because of the set-2000 pixels of this indentation, they will appear on the left side of the screen 2000 points, it is not visible. But this is for the person who closes the picture, may not see all, this should pay attention to.

6. Another adjustment technique for CSS box models

The box model is mostly tuned for IE before IE6, which calculates the width of the boundary and the space between the elements. Like what:

#box
{
width:100px;
border:5px;
padding:20px
}

Call it this way:

...

At this point the full width of the box should be 150 points, which is correct on all browsers except for the IE browser before IE6. But on a browser like IE5, its full width is still 100 points. This difference can be handled using the box adjustment method previously invented by people.

But using CSS can also achieve the same goal, so that they show the same effect.

#box
{
width:150px
}

#box Div
{
border:5px;
padding:20px
}

This is called:

...

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

7. Center-aligned block elements

If you want to make a fixed-width page and want the page to be centered horizontally, this is usually the case:

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

You will be used to surround all the elements. This is simple, but not good enough, IE6 the previous version will not show this effect. Change the CSS as follows:

Body
{
Text-align:center
}

#content
{
Text-align:left;
width:700px;
margin:0 Auto
}

This will center the contents of the page, so in the content is added
Text-align:left.

8. Use CSS to handle vertical alignment

The Vertical alignment table can be easily implemented, and the table cell Vertical-align:middle can be set. But it doesn't work for CSS. Setting this property is useless if you want to set a navigation bar that is 2em high and you want the navigation text to be centered vertically.

What is a CSS method? By the 2EM:LINE-HEIGHT:2EM, you can set the line height of these words to be the same.

9. CSS positioning within the container

One of the benefits of CSS is that you can position an element arbitrarily, within a container. For example, for this container:

#container
{
Position:relative
}

This allows all elements in the container to be positioned relative to each other so that they can be used:

...

If you want to position to the left 30 points, 5 against the tip of the gallery?br>
#navigation
{
Position:absolute;
left:30px;
top:5px
}

Of course, you can also:

margin:5px 0 0 30px

Note that the order of 4 numbers is: top, right, bottom, left. Of course, it is sometimes better to locate the method rather than the margin.

10. Background color through to the bottom of the screen

In the vertical direction is the control is not the CSS. If you want the navigation bar and the content bar to pass directly to the bottom of the page, it is convenient to use the table, but if you only use CSS like this:

#navigation
{
Background:blue;
width:150px
}

A shorter navigation bar won't pass through to the bottom, and it will end when the content ends. What should we do?

Unfortunately, you can only use deception, give the shorter column a background, width and column width, and let its color and set the background color.

Body
{
Background:url (blue-image.gif) 0 0 repeat-y
}

Do not use EM at this time, because then, once the reader changes the font size, the trick will be revealed, only use PX.

Block and inline element comparison
All HTML elements are part of block and inline. The block element is characterized by:
Always start on a new line;
Height, row height and top and bottom margin can be controlled;
The width defaults to 100% of its container unless a width is set
,

,

,

,

And
• is an example of a block element. Conversely, the inline element is characterized by:
  And the other elements are on one line;
  Height, row height and top and bottom margin can not be changed;
  Width is the width of the text or picture, and it cannot be changed.
  , ,,, ,Andis an example of an inline element.

  This feature of an element can be changed by using the code class= "inline" >display:inline or Display:block command. When do I need to change this attribute?
  Let an inline element start from the new line;

  Keep The block elements 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 to the same width as the text without having to set a width.

  12. One More box hack method

  There are so many box hacker methods, because IE before 6 to the box understanding of the same as others, its width to include edge width and white space. To make IE5 the same as other browsers, you can 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, just because there is a blank comment symbol on that line (What a stupid parsing!). ), so ie5.x minus a few blanks with 20, and the other browser will use the width of 14, because it is line 2nd and will overwrite the 1th line.

  13. Minimum width of the page

  Min-width is a handy CSS command that allows you to specify that the element should be minimal or less than a certain width, so that the layout is always correct. But IE doesn't recognize this, and it actually puts width as the minimum width. To make this command available on IE, you can put one on the tab and then specify a class for the DIV:
  

  
  
  

  Then the 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 only IE recognizes, which also makes your HTML document less formal. It actually achieves the minimum width by JavaScript's judgment.

  The same approach can also be used to achieve the maximum width of IE:
  

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

  Internet Explorer vs. width and height issues

  IE does not recognize the definition of min-, but in fact it treats the normal width and height as a condition of min. This problem is big, if only with the width and height, the normal browser of these two values will not change, if only with Min-width and min-height, ie, the following is not set width and height.

  For example, to set the background image, this width is more 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 paragraph because it uses the child selector command. The 2nd setting is more special, so it overrides the 1th setting.

  5. Font Warp command

  The Text-transform command is useful, and it has 3 values: Text-transform:uppercase, Text-transform:lowercase, and Text-transform:capitalize. The 1th one will turn the text into all capitals, the 2nd to all lowercase, and the 3rd to the first capitalization. This is useful for phonetic text, even when the input is case-insensitive, and is not visible on the Web page.

  The problem of missing picture text in IE

  Sometimes there is a sudden disappearance of text or a background image, and a refresh appears again, which is more likely to occur near the floating element (note: not seen). At this point, you can set the missing element: Position:relative, if not, then consider specifying a width for the elements to try.

  17. Invisible Text

  For whatever reason you want some Web text not to appear in the browser, for example, to print or to make certain text appear for a small screen, you can use Display:none. This is very simple, but sometimes for some people this is a bit useless, they can remove this control, then need to use: Position:absolute; Left: -9000px.

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

  18. Designing specialized CSS for handheld devices

  That is, mobile phone/pda and other small screen users, you can specifically design a CSS to make the page display more comfortable. To do this, you can adjust the browser window to 150 points wide to see the effect. The syntax for specifying a dedicated handheld device's CSS is:

  You can also read the availability of specialized handheld devices.

  3D buttons for effects

  Before you want to create a 3D effect, and click Down will change the button, you have to use the image replacement method, now CSS can be:
  

  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;
  }
  

  As for the effect, you can adjust it yourself.

  20. Use the same navigation code on different pages

  Many pages have navigation menus, and when you enter a page, the corresponding item on the menu should be dimmed while the other pages are lit up. Generally to achieve this effect, you need to write programs or specifically for each page design, now rely on CSS to achieve this effect.

  First, use CSS classes in your navigation code:
  

  
  
  • Home
  
  
  • About Us
  
  
  • Contact Us
  
  
  
  

  The body of each page is then assigned an ID, with the same name as the class above. Such as.

  Then design the CSS as follows:
  

  #home. Home, #about. About, #about. About
  {
  Commands for highlighted navigation go
  }
  

  Here, when the ID is set to home,. Home will work, that is, the row navigation bar set to home will show a special effect. The same is true for other pages.

• 