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

2011-10-27巩恩伟

中国科技信息 2011年24期

关键词：样式网页文档

巩恩伟

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如下所示：