如何运用这十个CSS技巧提升你的网页设计效果？

常用的十个CSS经典技巧

CSS字体属性简写规则

使用CSS设定字体属性时，可以将多个属性合并为一行。

font: bolditalic smallcaps 1em/1.5em verdana, sansserif;

需要注意的是，这种方法只在同时指定fontsize和fontfamily属性时才生效。

同时使用两个类

可以给一个元素同时应用两个类，中间用空格分隔。

<p class="text side">...</p>

这样，text和side两个类的属性都会应用到该元素上，如果两个类有冲突的属性，后写的类会覆盖前者。

CSS边框的缺省值

通常设置边界的颜色、宽度和风格时，只需要指定风格即可，其他属性将使用缺省值：

border: 3px solid #000; /* 宽度为3像素，黑色实线 */

缺省情况下，宽度为medium，颜色为文本颜色。

CSS用于文档打印

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

<link type="text/css" rel="stylesheet" href="stylesheet.css" media="screen"/>
<link type="text/css" rel="stylesheet" href="printstyle.css" media="print"/>

打印样式表中可以使用display: none关闭装饰图片或导航按钮等。

图片替换技巧

建议使用标准HTML来显示文字，但有时需要特殊字体时可以用图片替代文字：

h1 {background: url(widgetimage.gif) norepeat; height: imageheight; textindent: 2000px;}

这样，图片作为背景显示，文字通过负缩进隐藏。

CSS盒模型调整技巧

针对IE6之前的浏览器，它们会把边界宽度和空白都算在元素宽度内，可以通过调整盒子大小来解决此问题：

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

这样，不管什么浏览器，盒子的全宽都是150点。

块元素居中对齐

固定宽度的网页水平居中，可以使用以下方法：

body {textalign: center;}
#content {textalign: left; width: 700px; margin: 0 auto;}

这会使网页内容居中显示。

垂直对齐处理

垂直对齐可以通过设置行高来实现：

lineheight: 2em; /* 使导航条文字垂直居中 */

CSS在容器内定位

可以在容器内任意定位元素：

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

这样可以精确控制元素的位置。

直通到屏幕底部的背景色

为了让背景色延伸到页面底部，可以使用以下方法：

body {margin: 0; height: 100vh; background: #f0f0f0;}

这会使背景色充满整个视窗高度。

FAQs

1. 如何在CSS中同时使用两个类？

答：可以在HTML标签中通过空格分隔两个类名来同时使用两个类，如class="text side"，这样，两个类的属性都会应用到该元素上。

2. CSS中的字体属性简写规则是什么？

答：CSS的字体属性简写规则允许将多个字体属性合并为一行书写，font: bolditalic smallcaps 1em/1.5em verdana, sansserif;，这种方法只有在同时指定fontsize和fontfamily时才有效。