CSS在网页开发中的运用技巧

巩恩伟

CSS在网页开发中的运用技巧

巩恩伟

本文首先介绍了CSS的基本格式和添加层叠样式表的三种方法，然后介绍了几种用CSS定义网页中的样式的技巧，最后用一个实例展示了用CSS定义网页的方法。

CSS ；样式；实例

随着网页制作技术的发展，CSS技术越来越被广大网页设计人员运用。CSS的全称是Cascading Style Sheets，中文翻译为“层叠样式表”，简称样式表。它们控制Web页内容的外观。CSS样式使用户可以控制许多仅使用HTML无法控制的属性。例如，可以指定自定义列表项目符号并指定不同的字体大小和单位（像素、点数等）。通过使用CSS样式和以像素为单位设置字体大小，还可以控制网页中块级别元素的格式和定位。利用CSS可以使制作出来的网页易于改版，也有利于网页标准化。

1、样式的基本格式

CSS的每条定义都是由三个部分组成的：选择符（Selector）、属性（property）和属性

取值（value）。基本格式如下：

选择符{属性: 属性值}

1.1 选择符：可以是HTML的标识符，例如＜TABLE＞、＜h1＞、＜font＞等。

1.2 属性：就是指选择符中要修改的属性。

1.3 属性值：相应属性的取值。

2、添加层叠样式表的方法

2.1 内联样式

内联样式可称为局部样式。内联样式是混合在HTML标识符里使用的，在标识符中加入style属性,后面跟一些属性及属性的值,

如＜div style="height:500px;width:66px;"＞内联样式表＜/div＞。

内联样式具有局部性，因为它只能影响被定义的标识符，而且在每个需要样式的标签中都要进行定义,这样大量使用style属性使代码变得难以维护,所以建议尽量少用。

2.2 整页套用样式

将所有样式定义集中起来放在HTML文档＜head＞＜/head＞之间,使用标签＜style＞＜/style＞将其包含起来。如:

这种样式表只能在HTML文档的内部定义与使用,每个HTML文档内都需要单独定义一套样式规则,不利于样式的重用,维护起来也相对麻烦,不宜大量使用。

2.3 外部样式表

将所有样式定义放在一个以.css为扩展名，结尾的文件中,与HTML文件分开存放。这样一个样式表文件可以被多个HTML文档引用,CSS文件通过网络单独下载,一直都可以使用,甚至可以使用其他样式表。

要在HTML文档中使用外部样式表有两种方式,都是在head部分加入相应代码:

2.3.1 通过链接的方式。

加入＜l i n k h r e f="c s s/c s s 1.css"rel="stylesheet"type="text/css"/＞代码来对CSS文件夹下css1.css样式表的引用。

2.3.2 通过引入的方式。

加入＜style＞@import url(css/css1.css);＜/style＞。代码来对CSS文件夹下css1.css样式表的引用。

通过链接或引入的方式调用css1.css外部样式表,我们就可以在HTML文档中任意使用css1.css中定义的样式。这种样式表维护起来是最方便的,也显著减少了HTML文档大小,使得网页的下载速度更快。所以我们推荐外部样式表。

3、用CSS定义网页中的样式

3.1 用css 实现图片等比例缩放

按比例缩小或者放大到某个尺寸，对于标准浏览器（如Firefox），或者最新都IE7,ie8浏览器，直接使用max-width,maxheight；或者min-width,min-height的CSS属性即可。

如：img{max-width:100px;max-height:100px;}img{min-width:100px;min-height:100p

对于IE6及其以下版本的浏览器，则可以利用其支持的expression属性，在css code中嵌入javascript code来实现图片的缩放,

如下：.thumbImage {max-width: 100px;max-height: 100px;} /* for Firefox & IE7*/* html .thumbImage { /* for IE6 */width: expression(this.width ＞ 100&& this.width ＞ this.height ? 100: auto);height:expression(this.height ＞ 100? 100: auto);}

3.2 让背景图案静止不动

当网页不能在一屏全部显示时，我们往往借助于水平滚动条和竖直滚动条来浏览屏幕以外的内容，移动滚动条时一般图像和文字是一起移动的，那么我们有没有办法使背景图像不随文字一起“滚动”呢？利用CSS就可以实现这样的目的，我们只要把下面这段源代码直接放在网页的与标签之间就可以了，其中bg.jpg就是网页中的背景图像，大家可以把它换成自己需要的背景图像：

3.3 CSS用于文档打印

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

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

第1行就是显示，第2行是打印，注意其中的media属性。但应该在打印CSS中写什么东西呢？你可以按设计普通CSS的方法来设定它。设计的同时就可以把这个CSS

设成显示CSS来检查它的效果。也许你会使用 display: none 这个命令来关掉一些装饰图片，再关掉一些导航按钮。

3.4 让网页自动进行“首行缩进”

用DreamWeaver来设计网页的用户知道，在DreamWeaver中输入空格不是那么的方便，我们可以利用css来设计“首行缩进”功能来弥补这个缺憾。打开DreamWeaver的设计界面，在该界面中找到CSS的属性定义对话框（Style Definition for .style1)，在该对话框的“Block”标签下的“text-indent”属性定义设置项中来设置“首行缩进”功能，在这里要注意的是，所谓“首行”是指每段内容的第一行，也就是直接按回车键就形成了一个新的段落。缩进最好以“em”（字符）为单位，比如：汉字编排要求每段开始缩进两个汉字，设置好的CSS如下所示：

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

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

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

3.6 图片替换技巧

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

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

＜h1＞＜img src="widget-image.gif"alt="Buy widgets" /＞＜/h1＞

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

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

4、 用CSS设计网页的实例

下面我们用CSS制作一个效果，在正常状态下链接是一个静止不动的图片，当鼠标移到链接区域，即在鼠标的悬停状态下，背景图片变换成为另外一张图片。

原理是利用a:hover改变图片的显示属性。当鼠标不在图片上时，是一个正常图片，当鼠标移动到图片上时，a:hover发挥作用，图片采用a:hover的样式设计的内容，变成另外一张图片。

HTML代码部分入下：

CSS编码说明：

menu部分，设置div容器的宽度为150px，设置上下外边距为50px，左右为自动实现水平居中对齐。

menu a部分，将链接元素转换为块元素，设置其宽度与高度。设置文本缩进为160px，将链接文字“推”到了可视区域以外，但仅这样做实现不了隐藏链接文本，紧接着设置强制文本在一行内显示，溢出为隐藏。设置链接的背景图片为btn1.gif，不重复，位于00坐标。

menu a:hover部分，设置链接的悬停状态，仅将背景图片改为btn2.gif。

5.结语

笔者介绍了CSS样式的基本概念、引入方式、简单效果等，随着网页制作技术的不断进步，会有更多更好的网页设计技术出现，这就要求在以后的学习中要不断总结,不断掌握新的技术，及时把握网页设计的发展动向，多从实践中注意总结经验，这样可以成为一个合格的网页设计人员。

[1]于鹏.网页设计语言教程（HTML/CSS）[M].北京：电子工业出版社，2003

[2]张月玲.网页设计与编程[M].西安：西北工业大学出版社，2004

[3]王晓雨.CSS技术在WEB设计中的应用,2008.6

10.3969/j.issn.1001-8972.2011.24.044