Top Ten Tips for CSS Style Sheets_html/css_WEB-ITnose

　1.css font abbreviation rules

When using css to define fonts you may do this:

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

You can actually abbreviate these properties:

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

It’s much better now, but there’s one thing to note: to use this abbreviation you must at least specify font-size and font-family attributes. Other attributes (such as font-weight, font-style, font-varient) will automatically use default values ​​if not specified.

　2. Use two classes at the same time

Usually we only specify one class for attributes, but this does not mean that you can only specify one. In fact, you want You can specify as many as you want, for example:

...

By using two classes at the same time (separated by spaces instead of commas), this paragraph will apply the rules specified in both classes at the same time. rule. If any of the rules overlap, the latter one will take precedence.

　The default value of border in 3.css

When writing a border rule, you usually specify the color, width and style (in any order Can). For example: border: 3px solid #000 (3 pixels wide black solid border). In fact, the only value that needs to be specified in this example is the style. If you specify the style as solid, then the remaining values ​​will use the default values: the default width is medium (equivalent to 3 to 4 pixels); the default color is the text color in the border. If this is exactly what you want, you don't have to specify it in css.

　4.!important will be ignored by IE

　In css, usually the last specified rule will get priority. However, for browsers other than IE, any statement marked with !important will get absolute priority, for example:

　　margin-top: 3.5em !important; margin-top: 2em

In all browsers except IE The top margin of both browsers is 3.5em, while IE is 2em. Sometimes this is useful, especially when using relative margin values ​​(like this example), to show the subtle differences between IE and other browsers.

　(Many people may have also noticed that CSS sub-selectors are also ignored by IE)

　5. Image replacement techniques

Use It's often wiser to display text in standard html rather than images, resulting in better usability in addition to faster downloads. But if you decide to use a font that may not be available on your visitor's machine, you can only choose images.

For example, you want to use the title "Buy widgets" at the top of each page, but you also want it to be discovered by search engines. For the sake of beauty, you use a rare font. Then you You have to use pictures to display it:

Of course this is correct, but there is evidence that search engines value real text far more than alt text (because too many websites already use alt text as keywords), so , we have to use another method:

　　Buy widgets　　，那你的漂亮字体怎么办呢?下面的css可以帮上忙：　　h1　　{　　background: url(/uploadfile/200806/17/96162027360.gif) no-repeat;　　}　　h1 span　　{　　position: absolute;　　left:-2000px;　　}

Now you have both a beautiful image and a good hiding of the real text?? With css, the text is positioned at Left side of screen - 2000 pixels.

　Another option for 6.css box model hack

　The css box model hack is used to solve browser display problems before IE6, versions before IE6.0 The border value and padding value of an element will be included in the width (rather than added to the width value). For example, you might use the following css to specify the size of a container:

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

Then apply it in html: ...

The total width of the box It is 150 pixels in almost all browsers (100 pixels wide, two 5-pixel borders and two 20-pixel padding), except in browsers before IE6 it is still 100 pixels (the border value and padding value are included in the width value), the box model hack is designed to solve this problem, but it will also cause trouble. A simpler way is as follows:

　　css:　　#box　　{　　width: 150px;　　}　　#box div {　　border: 5px;　　padding: 20px;　　}　　html:　　...

This way the total width of the box will be 150 pixels in any browser.

　7. Center the block element

Assuming that your website uses a fixed-width layout and all content is placed in the center of the screen, you can use the following css:

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

You can place any item within the body of the html, and the item will automatically obtain equal left and right boundary values ​​to ensure centered display. However, this is still a problem in browsers before IE6 and will not be centered, so it must be modified as follows:

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

Setting the body will cause the body content to be centered. , but even all the text is centered, which is probably not the effect you want. For this reason, the div of #content also needs to specify a value: text-align: left

　 8. Use css to achieve it Center vertically

　　垂直居中对表格来说是小菜一碟，只需指定单元格为vertical-align: middle即可，但这在css布局中不管用。假设你将一个导航菜单的高度设为2em，然后在css中指定垂直对齐的规则，文字还是会被排到盒的顶部，根本没有什么区别。

　　要解决这一问题，只需将盒的行高设为与盒的高度相同即可，以这个例子来说，盒高2em,那么只需在css中再加入一条：line-height: 2em 就可实现垂直居中了!

　　9. 容器内的css定位

　　css的最大优点之一就是可以将对象定位在文档的任何位置，同样的也可以将对象在某容器内进行定位。只需要为该容器添加一条css规则：

　　#container　　{　　position: relative;　　}

　　则容器内的任何元素的定位都是相对于该容器的。假定你使用以下html结构：

　　...

　　如果想将navigation定位在容器内离左边界30像素，离顶部5像素，可以使用以下css语句：

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

　　10.延伸至屏幕底部的背景色

　　css的缺点之一是缺乏垂直方向的控制，从而导致了一个表格布局不会遇到的问题。假设你在页面的左侧设定了一列用于放置网站的导航。页面为白色背景，但你希望导航所在的列为蓝色背景，使用以下css即可：

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

　　问题在于导航项不会一直延伸到页面的底部，自然它的背景色也不会延伸到底部。于是左列的蓝色背景在页面上被半路截断，浪费了你的一番设计。怎么办呢?很不幸我们现在只能用欺骗的办法，即将body的背景指定为与左列同颜色同宽度的图片，css如下：

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

　　背景图应为宽150像素的蓝色图片。这一办法的缺点是没法使用em来指定左列的宽度，当用户改变文字的大小导致内容的宽度扩张时，背景色的宽度不会随之改变。