CSS样式在网页设计中的应用

摘要：CSS样式是一种可以丰富网页内容的网页设计技术，以前的网页是没有现在网页那么动感和华丽，有了CSS样式融入进来以后，网页的界面开始变得丰富，而且当今社会的人们对网页的要求也越来越高，如果还是按照以前的方式来设计网页，显然是不合适的。本文主要内容就是阐述CSS样式在网页设计中的应用，要想做出漂亮的网页出来，一定离不开CSS样式，而且CSS样式应用对网页的美观性有很多程度的提高。

关键词：CSS样式；网页设计；DIV；网页技术

中图分类号：TP393.092 文献标识码：A 文章编号：1007-9599 （2013） 02-0000-02

随着社会的不断进步，网页设计的技术水平日渐提高，在我们日常生活当中时刻都有网页设计的影子。网页设计是很多元素的载体，包括媒体、动画、图像和技术等内容，网页内容在不断的丰富和增加，内容增加的同时，如何让这么多内容互相保持一个统一的风格呢？传统的设计可能已经有点跟不上社会发展的节奏。随着互联网技术的日趋成熟，网页作为一个可以宣传的工具，很多企业和个人都有自己的网站，网站可以承载的东西实在是太多了，而且传播的速度也非常快。国内上网用户每年都有一个非常大的层次上涨，用户每天都在增加，如何能够吸引到用户浏览网站，CSS样式在网页界面设计中起到了决定性作用，它能够给网页带来更多的元素进来。

过去设计网页都是通过HTML来进行设计，HTML是一种超文本标记语言，里面有很多的代码需要编写者去熟记，而且非常费时，一个页面有的时候要做一个礼拜，所以后期人们开发出来了可视化的网页设计工具，包括FrontPage，Dreamweaver等，这些工具目前还有很多的来进行运用。有了工具的引入之后，有很多技术开始应运而生，其中就包括CSS样式，CSS样式是1996年开始正式进入到网页设计当中来的，它是一种网页制作的新技术，它的全称是级联样式表，即Cascading Style Sheets的缩写，又称之为风格样式表单。CSS样式可以满足当今网络用户的基本要求，能够适应当今互联网发展的需求，接下来我们就来简单的阐述下CSS在网页设计中的应用。

1 CSS样式概述

在前面已经提到，CSS样式又称之为风格样式表单，它能够改变网页的风格，可以保持整个网页的风格统一，让网页变得更加的漂亮，所以目前设计网页没有谁不会用到CSS样式的，可以说是一个比较成熟的网页设计技术。目前用的做多的一种技术就是DIV+CSS，DIV是把网页元素分成不同的块，然后给这些块单独来设计结构和背景。通过这样的方式来设计网页非常轻松，对于网页中的元素也比较容易控制，在这个块里面的元素是由DIV的属性来进行控制就可以了。

那么这两种技术如何结合起来应用到网页当中呢？我们首先要看看CSS样式的语法规则，CSS的语法是非常简单的，主要是有3个部分构成，分别是：选择符（selector），属性（properties）和属性的取值（value）。选择符主要是定义HTML里面的标签，所以用到这种的时候一定要对HTML里面的标记要很熟悉，比如说TABLE是代表表格，H1是代表标题1，FONT代表是字体等等，如果对标记不是很熟悉，用起来就很别扭，不过HTML里面的很多标记是网页设计里必须要会的，因为网页的后台语言大部分还是通过HTML来识别的，所以有时候要通过手工来修改代码的时候如果对HTML不熟悉是很困难的。属性是跟在标记后面的值，比如说用到颜色，颜色在标记在HTML里面是用COLOR表示的，那么要表示的话就是h1 {color： red； font-size：14px；}，red和14px就分别是颜色和字体的属性的取值value，而color和font-size就是代表属性，H1就是代表选择器，这个CSS样式的意思就是颜色是红色，大小为14像素的字体。按照CSS样式的语法来进行网页字体和其他对象的格式设定是非常方便的，而且可以让网页的每个界面看过去都非常的工整和干净，可以保持网页的整体风格不变，让浏览者非常舒服的可以浏览到网页。

2 CSS样式的应用

2.2 文本方面。在网页设计当中最重要的就是文本，因为在页面当中90%都是文本，所以文本的处理显得非常重要，而CSS样式可以很彻底的解决这个问题。在网页中最适合的文本大小一般控制在12磅左右，有的可能还要小点，不能用太大的字体，太大的字体会直接影响到网页的美观性，而且字体的显示要有层次感，不能大小不一，该用到突出的字体可以大点，如果控制的不好可以直接采取同样大小的字体来进行，如果能控制的住，大字体用在网页特别需要强调的地方，小字体用在友情链接或者辅助信息上面，其他的放到正常文本上就可以了。字体大小的选择直接影响到网页的整体美感，有的时候也要根据网站的主题来进行，比如说有些网站需要一些特殊字体的可以进行使用，有些是清新风格的就不需要那些突出的字体了，有的时候要根据实际情况来决定，总体要求就是不能影响到网页的美观性。

上述谈到的是字体大小，还有一个CSS样式可以控制的就是文本的排版，在网页设计中，文本的排版也是非常关键的，说的在简单点就是文本的位置，多个文本就构成了一个段落，各个段落之间的排版关系到整个网页架构的排版，排版方式主要有：两端对齐，这种方式主要是文字从左到右都很工整，左右两边都是对齐的，这种方式段落显得都很工整；居中对齐，这种对齐方式是对称的，以页面中心为中心，这种方式显得文字更加突出和对称；左对齐和右对齐，这个是用的最多的一种方式，一般都采用左对齐，符合国人的审美要求和习惯，用的比较多，这样的排版方式比较自由，特别是左对齐，大部分网页都采用这样的排版方式，右对齐有的相对来说比较少，这样的排版方式让人感觉很有节奏，让网页产生美感，虚实有度。最后一种是绕图排列，也就是有图片的方式让字体放到图片边缘围绕起来，让人感到很温馨。上面说到的几种排列方式可以根据自己的页面结构来进行选择，只要能符合整个页面布局就可以了。

2.3 样式布局。页面的布局是可以通过前面提到的DIV+CSS样式来进行的，整个是目前用的最多的一种技术手段，页面的布局是非常重要的，布局成功的网页会让人感觉非常漂亮，有眼前一亮的感觉，布局不好可能整个网站就是失败的，很多人不明白页面布局是一个非常重要的工作，要足够的重视起来。

通过CSS样式来进行布局，能够让整体界面变得非常的工整，但是很多在布局的时候并没有用到它，大部分还是在用表格来进行布局，表格当然也可以用来进行布局，但是表格在很多细节部分没有CSS样式细腻，在很多地方没有CSS样式方便，所以在用起来不是特别的顺手，我希望通过我的这篇文章能够让更多的人来用到CSS样式，更了解到CSS样式在网页设计中的用法。

3 总结

对于同一个页面视觉效果，采用CSS+DIV重构的页面容量要比TABLE编码的页面文件容量小得多，代码更加简洁，前者一般只有后者的1/2大小。对于一个大型网站来说，可以节省大量带宽。并且支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是IE7或者是火狐又或者是360，您的网站都能很好的兼容。所以，希望大家能够掌握好CSS样式用法，在网页设计中能够融入进去，真正能体会到CSS样式的作用，能够熟练的掌握它，这个就是我写这篇文章的目的。

参考文献：

[1]彭莹.基于CSS技术在网页设计中的应用[J].硅谷.2009（08）

[2]官彬彬.利用DIV+CSS方法进行网页快速架构的初探[J].硅谷.2011（14）

[3]司丽丽.网页设计中的文字版式设计探讨[J].硅谷.2011（16）

[4]郝丽霞，常淑凤.应用WEB标准进行网站重构的探讨[J].硅谷.2009（22）

[作者简介]汪（1978- ），女，汉族，甘肃民勤人，硕士，兰州职业技术学院，讲师，研究方向：信息管理。