20 Tips on Using CSS_CSS/HTML

1. CSS字体属性简写规则

一般用CSS设定字体属性是这样做的：

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

但也可以把它们全部写到一行上去：

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

真不错！只有一点要提醒的：这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且，如果你没有设定font-weight, font-style, 以及 font-varient ，他们会使用缺省值，这点要记上。

2. 同时使用两个类

一般只能给一个元素设定一个类（Class），但这并不意味着不能用两个。事实上，你可以这样：

...

同时给P元素两个类，中间用空格格开，这样所有text和side两个类的属性都会加到P元素上来。如果它们两个类中的属性有冲突的话，后设置的起作用，即在CSS文件中放在后面的类的属性起作用。

3. CSS border的缺省值

通常可以设定边界的颜色，宽度和风格，如：

border: 3px solid #000

这位把边界显示成3像素宽，黑色，实线。但实际上这里只需要指定风格即可。

如果只指定了风格，其他属性就会使用缺省值。一般地，Border的宽度缺省是medium，一般等于3到4个像素；缺省的颜色是其中文字的颜色。如果这个值正好合适的话，就不用设那么多了。

4. CSS用于文档打印

许多网站上都有一个针对打印的版本，但实际上这并不需要，因为可以用CSS来设定打印风格。

也就是说，可以为页面指定两个CSS文件，一个用于屏幕显示，一个用于打印：

第1行就是显示，第2行是打印，注意其中的media属性。

但应该在打印CSS中写什么东西呢？你可以按设计普通CSS的方法来设定它。设计的同时就可以把这个CSS设成显示CSS来检查它的效果。也许你会使用 display: none 这个命令来关掉一些装饰图片，再关掉一些导航按钮。要想了解更多，可以看“打印差异”这一篇。

5. 图片替换技巧

一般都建议用标准的HTML来显示文字，而不要使用图片，这样不但快，也更具可读性。但如果你想用一些特殊字体时，就只能用图片了。

比如你想整个卖东西的图标，你就用了这个图片：

这当然可以，但对搜索引擎来说，和正常文字相比，它们对alt里面的替换文字几乎没有兴趣这是因为许多设计者在这里放许多关键词来骗搜索引擎。所以方法应该是这样的：

Buy widgets

但这样就没有特殊字体了。要想达到同样效果，可以这样设计CSS：

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

注意把image height换成真的图片的高度。这里，图片会当作背景显示出来，而真正的文字由于设定了-2000像素这个缩进，它们会出现在屏幕左边2000点的地方，就看不见了。但这对于关闭图片的人来说，可能全部看不到了，这点要注意。

6. CSS box模型的另一种调整技巧

这个Box模型的调整主要是针对IE6之前的IE浏览器的，它们把边界宽度和空白都算在元素宽度上。比如：

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

这样调用它：

...

这时盒子的全宽应该是150点，这在除IE6之前的IE浏览器之外的所有浏览器上都是正确的。但在IE5这样的浏览器上，它的全宽仍是100点。可以用以前人发明的Box调整方法来处理这种差异。

但用CSS也可以达到同样的目的，让它们显示效果一致。

#box
{
width: 150px
}

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

这样调用：

...

这样，不管什么浏览器，宽度都是150点了。

7. 块元素居中对齐

如果想做个固定宽度的网页并且想让网页水平居中的话，通常是这样：

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

你会使用

来围上所有元素。这很简单，但不够好，IE6之前版本会显示不出这种效果。改CSS如下：

body
{
text-align: center
}

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

这会把网页内容都居中，所以在Content中又加入了
text-align: left 。

8. 用CSS来处理垂直对齐

垂直对齐用表格可以很方便地实现，设定表格单元 vertical-align: middle 就可以了。但对CSS来说这没用。如果你想设定一个导航条是2em高，而想让导航文字垂直居中的话，设定这个属性是没用的。

CSS方法是什么呢？对了，把这些文字的行高设为 2em：line-height: 2em ，这就可以了。

9. CSS在容器内定位

CSS的一个好处是可以把一个元素任意定位，在一个容器内也可以。比如对这个容器：

#container
{
position: relative
}

这样容器内所有的元素都会相对定位，可以这样用：

...

If you want to locate 30 points from the left and 5 points from the top, what can you do? BR>
#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 4 numbers is: up, right, down, left. Of course, sometimes positioning rather than margins is better.

10. Background color straight to the bottom of the screen

Control in the vertical direction is beyond the capabilities of CSS. If you want the navigation bar to go straight to the bottom of the page like the content bar, using a table is very convenient, but if you only use CSS like this:

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

A shorter navigation bar will not go straight to the bottom, it will end when the content ends halfway. What to do?

Unfortunately, the only way to cheat is to add a background image to the shorter column, with the same width as the column width, and make it the same color as the set background color.

body
{
background: url(blue-image.gif) 0 0 repeat-y
}

You cannot use em as the unit at this time, because then the trick will be revealed once the reader changes the font size, and you can only use px.

11. Comparison between Block and inline elements
All HTML elements are either block or inline. The characteristics of the block element are:
Always start on a new line;
Height, line height and top and bottom margins can all be controlled;
The width defaults to 100% of its container unless a width is set

,

,

,

,

and
• are examples of block elements. On the contrary, the characteristics of the inline element are:
  and other elements on the same line;
  Height, line height and top and bottom margins cannot be changed;
  The width is the width of its text or image and cannot be changed.
  , , , , , and are examples of inline elements.

  Use code class="inline">display: inline or display: block command to change this feature of an element. When do you need to change this attribute?
  Let an inline element start on a new line;

  Keep block elements on one line with other elements;

  Control the width of inline elements (especially useful for navigation bars);

  Control the height of inline elements;

  You can set a background color with the same width as the text for a block element without setting the width.

  12. Another box hacking method

  The reason why there are so many box hacking methods is because before IE 6, the understanding of box was different from others. Its width should include the edge width and white space. To make IE5 consistent with 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. Use 20 to subtract some white space, while other browsers will use the width of 14 because it is line 2 and will cover line 1.

  13. Minimum width of page

  min-width is a very convenient CSS command. It can specify that the minimum width of an element cannot be less than a certain width, so as to ensure that the layout is always correct. But IE doesn't recognize this, and it actually treats width as the minimum width. In order to make this command work on IE, you can put a

  under the tag, and then specify a class for the div:
  

  
  

  
  

  Then the CSS is designed like this:
  

  #container
  {
  min-width: 600px;
  width:expression(document.body.clientWidth }
  

  The first min-width is normal; but the width in the second line uses Javascript, which is only recognized by IE, which will also make your HTML document less formal. It actually implements the minimum width through Javascript judgment.

  The same method can also be used to achieve the maximum width for IE:
  

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

  14. Problems with IE and width and height

  IE does not recognize the definition of min-, but in fact it treats normal width and height as if there is min. This is a big problem. If you only use width and height, these two values ​​​​will not change in a normal browser. If you only use min-width and min-height, the width and height are not set at all under IE.

  For example, if you want to set a background image, this width is more important. To solve this problem, you can do this:
  

  .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 second paragraph of setting because it uses a sub-selector command. The second setting is more specific, so it will override the first setting.

  5. Font transformation command

  The text-transform command is useful, it has 3 values: text-transform: uppercase, text-transform: lowercase and text-transform: capitalize. The first will change the text to all uppercase, the second to all lowercase, and the third to capitalize the first letter. This is very useful for pinyin text. Even if there are capitalization errors when typing, they will not be visible on the web page.

  16. The problem of text disappearing in pictures in IE

  Sometimes you encounter the problem of text or background images suddenly disappearing and reappearing after refreshing. This is more likely to happen when you are close to floating elements (Note: I have never seen it). At this point, you can set: position: relative for the disappearing elements. If that doesn't work, consider specifying a width for these elements.

  17. Invisible text

  No matter why you want some webpage text not to be displayed in the browser, such as for printing or small screen, you can use display: none . This is very simple, but sometimes it's a bit useless for some people, and they can remove this control, and then use: position: absolute; left: -9000px .

  This actually specifies the text to be displayed outside the page.

  18. Design specialized CSS for handheld devices

  That is, users with small screens such as mobile phones/PDAs can specially design a CSS to make the web 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 handheld-specific CSS is:

  Exclusive handheld device availability can also be read.

  19. 3D effect button

  In the past, if you wanted to create a button with a 3D effect that would change when you click it, you had to use image replacement. Now CSS is enough:
  

  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 also adjust it yourself.

  20. Use the same navigation code on different pages

  Many web pages have navigation menus. When entering a certain page, the corresponding item on the menu should turn gray, while other pages should light up. Generally, to achieve this effect, you need to write a program or design specifically for each page. Now you can achieve this effect with CSS.

  First, use CSS classes in your navigation code:
  

  
  
  • Home
  
  
  • About us
  
  
  • Contact us
  
  

  
  

  Then specify an id for the Body of each page, which has the same name as the above class. Such as

  .

  Then design the 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 row with the class set to home will display special effects. The same goes for other pages.