CSS样式表在网页制作的优点与特效实现

沙茉

【摘 要】互联网时代，网页已经成为公司、个人展示自我的最好途径和手段，网站、网页制作是目前最常用的展示个人能力的手段和方法，文章通过介绍CSS（层叠式样式表）网页制作流程，并与传统的frontpage网页制作进行对比，总结更好的网页制作技巧。

【关键词】CSS样式表;网页设计;表格

【中图分类号】TP393.092 【文献标识码】A 【文章编号】1674-0688（2019）04-0211-02

0 引言

样式表CSS的英文名为Cascading Style Sheets，又翻译为层叠式样式表，在很多网页制作的课程中都提及如何使用CSS样式表实现网页制作的特定效果的技巧，通过CSS的定义，可以定义整体网页的显示定位、字体的格式大小、元素定位、超级链接的样式，还便于导航栏的制作，能实现图片、文字环绕等一些特定的网页展示效果，既能减少代码量，又可以增强设计效果，而且页面也更灵活多变。

1 CSS相较传统Table制作的优点

通常，CSS可以嵌入html页面中，但是通常的做法是生成一个.css的脚本文件，然后通过html调用该.css文件，如<link href="*.css" type="text/css" rel="stylesheet">。

CSS一般会配合DIV一起使用，在结构上的优势主要体现在以下几个方面。

（1）设计手段灵活，可将表现与设计分离，网站建设形式更为灵活。我们在建设网站的时候，可以将页面进行单独的CSS设计，各功能也只需要进行文字的显示即可。

（2）布局更规范、代码更清晰易懂，有利于网站管理员的维护与操作。当网站的整体基调需要变换颜色时，可以直接在css文件里调整布局的颜色;同样，当某几个栏目位置需要变动时，也仅需要在页面将对应的div的位置重新定位;调整某些栏目时，只需修改若干样式文件。这种区域化、“块”理念的设计大大减轻了网站维护人员的工作量，为以后网页的设计、改版打下了良好的基础。

（3）具备更好的控制结构排版能力。我们通过框架结构定位需要显示的元素的位置，可以有效修正原html表格中一些实现起来比较困难的地方，比如整体页面的定位、表格内容的显示等，在传统html中经常会出现错位的情况，因此对行间距的设置、行数的设置都需要非常精确，否则设计的页面表格就会出现错位偏差。

（4）更易于维护及改版工作。上述特点决定了使用样式表格在维护和改版时，修改的工作量可以集中到某一点，避免重复的设计和布局，大大减轻代码设计人员的工作量。

2 利用CSS制作特效

2.1 滤镜效果

简单来说，滤镜就是类似于我们Photoshop里面的图文特效，CSS的滤镜属性的标识符是Filter，我们通过对Filter各属性的配置数值的不同[如brightness（）设置亮度，blur（）设置模糊度，contrast（）设置对比度，drop-shadow（）设置阴影效果]，将多个属性值配合，就可以实现很多我们意想不到的效果。

在遇到特殊的纪念日时，如南京大屠杀纪念日或某些特别的日子，我们需要将网页页面设置成灰色，这时可以使用CSS，通过其中的Gray滤镜就可以轻松实现这一效果（如图1所示）;结合Javascript和滤镜技术我们还可以制作许多动态的效果，如自定义鼠标移动到特定区域位置或离开时显示不同效果图或背景颜色。

2.2 文字特效

针对显示信息的网站，其对文字经常会有一些特效要求，如阴影、3D特效、霓虹灯、凸出浮雕效果等。而在在html中没有太多可展示文字特色的手段，只有字体、大小、下划线几种表现手段，但是如果使用CSS样式应就不同了，其属性text-shadow有两个作用，产生阴影和模糊主体，不同的属性取值可以表达出多种文字效果，即使不使用图片，也可以给文字增加质感。

2.3 动态下拉菜单效果

在网站的首页导航栏，经常需要通过下拉菜单的方式实现二级页链接打开，具体表现为当鼠标放在导航菜单上时，出现下拉菜单选项，这时可点击链接进入二级页，当鼠标移走时，下拉菜单消失（如图2、图3所示）。

一些网页制作论坛上经常有介绍一些特效的实现方法，但是通过CSS最容易实现一些特定的特效。CSS可以通过设置二级列表标签ul的display属性实现特定特效，初始状态的display属性设为none代表初始不显示，通过修改二级菜单对应的一级菜单项的hover状态的display属性值，配合ul，li标签的属性设置就可以很快地实现下拉菜单，比传统的JavaScript及jQuery实现起来更快捷、简单。

多个属性的结合使用在CSS设计时，效果特别显著，一些网页制作论坛还介绍了很多有趣的特效，我们可以根据实际的需求选择应用。

3 结语

总之，CSS+DIV的网页设计和使用，在很大程度上解决了传统html表格设计网站页面的某些缺陷，诸如响应速度较慢、页面定位难、网页布局迁移难、规范度较低、代码灵活性差等;同时，CSS使用“块”设计的理念和思路使网站结构更具框架性、版面更清晰、网站功能更完善、页面表现形式更富。区域化设计、代码缩减、样式文件定义等手段使网页设计更规范，同時大大减轻了网站管理员的工作量，方便网站改版及维护、操作。

参 考 文 献

[1]钱勇萍，王光杰.CSS+DIV布局方法在网页制作中的应用[J].现代制造技术与装备，2014（3）.

[2]高娟，阎知知，黄龙.网页制作中下拉菜单的制作方法解析[J].数码世界，2017（10）.

[3]张英.DIV+CSS网站设计的研究和探讨[J].电子技术与软件工程，2013（24）.

[责任编辑：高海明]