静态网页设计

杜黎强

摘要：互联网技术发展越来越迅猛，其应用技术也越来越广泛，因此互联网技术所依托的技术平台之一——网站开发也越来越重要，其中尤其包括网站前端开发技术之CSS样式的应用。

关键词：互联网；网站前端开发；CSS样式

中图分类号：TP37 文献标识码：A 文章编号：1009-3044（2016）01-0215-02

现代社会互联网技术的发展和广泛应用，快速推动了人类社会信息时代的发展，由此带动和影响了现代社会各方面技术的变革和发展，因此对于互联网技术本身依托的技术和平台在其应用过程中也是非常关键，下面就以笔者所教授的课程《静态网页设计》所涉及的网站前端开发技术中CSS样式的应用进行阐述。

《静态网页设计》这门课程是针对互联网技术专业学生的静态网页制作及编程的基础课，是知识性和技能性相结合的课程，此课程任务是要求讲解网页制作标记语言及脚本语言的相关理论知识，以及实际操作。达到熟练掌握HTML、XHTML、CSS等标记语言及Web标准布局的基本应用。课程目标是能熟练掌握静态网页页面布局及代码的编写。课程的主要内容包括：1、HTML超文本标记语言及XHTML可扩展超文本标记语言。2、CSS即“层叠样式表”，使用样式控制页面中的元素。

CSS也叫层叠样式表，它现在是网站前端开发不可或缺的一部分。程序开发者可以对任何页面中的任意元素使用CSS，使之前认为不可能的效果成为可能。在本课程讲述到CSS应用部分时，因为CSS的属性非常多，所以学生在静态网页设计中使用起来记不清楚或者容易混淆，比如本文中所要讲述的“如何使用CSS属性控制网页上超链接文本的格式”，因为超链接在网页上使用的频率非常高，因此超链接文本格式的设计也非常重要，CSS可控制超链接文本格式的样式如下：

a：link是超级链接的初始状态

a：visited是访问过后的情况

a：hover是把鼠标放上去时悬停的状况

a：active 是鼠标点击时

如上所示在CSS中也把设置超链接文本格式样式的属性称作伪类，下面列举超链接样式案例：

1）使用CSS标记选择符设置整个网页超链接文本格式的样式a{color：#339；text-decoration：none； }

//对整个网页有链接的文字颜色样式设置为color：#939；并超链接文本初始状态无下划线text-decoration：none；

如下代码视图和效果图：

2）使用CSS类选择符设置网页超链接文本格式的样式

.linkyangshi{color：#339；text-decoration：none； }

//对整个网页有链接的文字颜色样式设置为color：#339；并超链接文本初始状态无下划线text-decoration：none；

对应HTML代码：

超链接文本

通过这样的设置可以控制链接内的CSS类名为“linkyangshi”超链接的样式。

如下代码视图和效果图：

3）使用CSS伪类设置超链接文本格式的样式

a：link{ color：#399；text-decoration：none；}

//是超级链接的初始状态：超链接文本颜色为#399，并且文字无下划线；

a：visited{ color：#939；text-decoration：none；}

//是鼠标点击超链接文本时的状态：超链接文本颜色为#939，并且文字无下划线；

a：hover{ color：#999；text-decoration：underline；}

//是把鼠标放在超链接文本上的状态：超链接文本颜色为#999，并且文字带下划线；

a：active{ color：#d33；text-decoration：underline；}

//是鼠标点击超链接文本时的状态：超链接文本颜色为#d33，并且文字带下划线；

如下代码视图和效果图：

初始状态：

指向链接：

激活链接：

访问过后：

由上所述，CSS层叠样式在网页设计中的使用非常灵活，仅就上述实例的应用可以使用多种方法，虽然其在网站前端开发设计中只是其中的一部分，但就其对前端设计中网页的标准布局和修饰前端设计的作用真是必不可少。

参考文献：

[1] 网页设计中重要并且简单易用的CSS，51CTO.COM，2012.10.11.

[2] HTML 网页制作从入门到精通[M].人民邮电出版社.

[3] Web程序设计[M].2版.电子工业出版社，2005.