网页设计中CSS技术的应用　

摘要：二十一世纪是电子信息技术大力发展的时代，进入二十一世纪，网络信息技术以势不可挡的力量成为了新兴技术，而人们的日日常生活、工作也与网络信息息息相关。人们可以从网络信息中获取工作指示、汲取知识，各种各样丰富多彩的网络软件、网络游戏等都对人们的日常娱乐生活产生了极大的影响。换言之，互联网信息技术涵盖了生活的方方面面，在这种大背景下，探究如何运用CSS技术优化网页设计显得相当必要且重要。

关键词：CSS技术；层叠样式表；计算机语言；网页设计；灵活性

CSS技术也被称之为层叠样式表单，是一种可以表现XML或者HTML等文件样式的计算机语言，是一种可以分离网页内容与表现的多样式设计语言。在计算机网页设计中运用CSS技术能够精确控制设计对象位置排版、有效添加网页链接、合理控制网页设计文件的大小，且CSS技术几乎能够支持所有字体字号样式，能够提升网页设计的灵活性，[1]保证网页设计的质量。

1网页设计结构类型

封面型、Flash型、上下框架型、国字型以及左右框架型是当前网页设计中最常用的网页设计结构类型。1.1封面型。通常来说，封面型就是人们日常见到的网站的首页，页面设计相当精美，会运用动画、图片、文字等进行综合设计编辑。而封面型网页结构里也常常会看到链接形式。网页中会设置点击即可进入其他页面的一些图片链接、文字链接等，进而转入其他页面，实现对浏览量地极大控制，提升用户对网站的访问粘性。1.2Flash型。Flash型网页结构通常出现于商业门户网站、校园招生网站、游戏网站等，需要网页内容载量大。Flash型与封面型的框架类似，Flash型接近于传统多媒体模式，具有良好的听觉效果与视觉效果，着重于惊艳用户的耳朵和眼睛，这就会对页面信息的丰富性、多样性以及审美性有更深的要求。[2]1.3国字型。在网页设计中，最常见的网页结构便是国字型，国字型是网页设计的基础型。基本结构模式为顶层铺列网络标题或者横幅广告，[3]中间正文为网站的主要内容，左右两侧分列小标题内容，底层为网站的基本信息、版权声明以及联系方式。1.4上下框架型。上下框架型网页结构与国字型相似，基本结构为上下分为两页的框架模式。1.5左右框架型。左右框架型指的是一种左右分别两页的框架设计结构，通常来说，左边为网站导航链接，左边为内容标题，右边是正文以及相应的内容。

2当前CSS技术所存在的不足之处

在当前网页设计中，CSS技术具有十分显著的设计优势，不仅能够有效缩减页面代码，易于编写，还可以有效控制网页设计大小，提升页面浏览速度，降低宽带运行成本，更好地提升设计效率与设计质量。[4]但CSS技术在实际使用中也存在一些问题：比如一旦出现书写不规范的现象时便会影响CSS技术的使用效果，降低网页设计质量。设计人员若在书写CSS技术时没有良好的书写习惯，规范命名，很容易导致出现多重定义，随之而来的浏览器兼容问题、不同的属性默认值问题均会使得CSS技术的使用效果大打折扣。故此，CSS技术的使用对设计人员的要求较高，要求设计人员必须正确规范地编写代码，认真检查、有效检验以规避有可能出现的问题。此外，CSS技术会经常性出现兼容问题，影响实用性。在网页设计中，使用CSS技术会出现个别网站不相容、不识别的情况。比如浏览同样一个网站的网页，在IE浏览器中可以识别，但是换了其他的浏览器就会出现网页内容全部或者部分不显示问题，这会极大地影响网页访问效果。故此，在进行设计时，书写代码要着重考量浏览器类别问题，以免出现不相容的问题进而影响浏览。

3CSS技术在网页设计中的应用

3.1灵活控制网页链接。如今网络信息铺天盖地，各种各样形式内容迥异的商用、生活娱乐用网站也层出不穷，如何根据内容、性质要求设计出各种功能性不同的网页，是当前设计人员亟待考虑的问题。在商用网站中经常遇到内容讯息过多而一个版面铺展不开的情况，这个时候就需要灵活运用CSS技术实现网页链接。在网页设计中，运用CSS技术不仅可以运用于当前所设计的网页中，还可以灵活进行链接。比如，可以将CSS技术运用于HTML页面中，也可以在外部文件中放入CSS代码，[5]从而有效调用各种设计元素，实现网页设计的功能性要求，比如优化配置网页设计内容、资源，实现缩短改版要求等。由上文可见，运用CSS技术灵活控制网页链接能够实现网页设计的多样性、功能性要求，提升网页设计的效率以及设计质量。3.2灵活控制。Web网页设计样式网站的多样性要求网页设计也同样兼具多样化，而运用CSS技术则可以灵活控制Web网页设计样式，很好地实现网页设计的多变性。在网页设计中，运用CSS技术可以布局网页、调整页面大小、设置网页背景、运用多样化字体字号，进而实现网页布局样式的多样性以及灵活性，实现理想设计效果。以上设计均可以通过完全代码实现，设计过程不会太冗杂。运用CSS技术一方面能够实现优化页面的效果，比如，CSS技术具有较强的控制字体的能力，运用CSS技术能够随网页设计内容和要求改变字体的颜色、样式等，不仅有助于排版，还能优化整体设计效果。另一方面运用CSS技术实现对新型网页布局的合理设计，创设CSS文件、创设表格并加以编辑，无需受到冗长密码的阻挡，[6]能实现对代码地有效控制，随时修改CSS文件。3.3灵活控制网页文件的大小。在网页设计中，网页文件大小会极大地影响网页展示效果，进而影响网页设计的整体质量。而运用CSS技术则可以有效实现对网页文件大小的控制，确保文件的质量，保证网页设计工作有序开展。在运用CSS技术灵活控制网页文件大小时需要注意两点：其一，运用CSS技术有效控制文件尺寸。在网页设计中可以运用CSS技术的页面压缩以及层叠功能实现对网页文件大小的有效控制，实现网页设计内容与样式之间的有效分离，进而节约文件设计尺寸，合理地缩小网页文件。其二，运用CSS技术能够有效控制图片大小。在网页设计中，经常会用到大量图形图片，以便实现网页设计的精美性，达到理想设计效果。但是，大量图片图形地使用会致使网页文件过大，加慢网页下载速度，影响浏览效果。故此，需要运用CSS技术控制图片大小，根据设计内容实现像素与大小之间的平衡，提升页面浏览速度，增加页面访问量，切实发挥CSS技术的设计优势。3.4使用外部CSS样式。由上文可知，在网页设计中，CSS技术发挥着不可估量的作用。运用CSS技术设计网页，不仅能够有效运用形式多样的字形字体、灵活控制Web网页设计样式，还可以实现对网页文件大小的灵活控制，能够美化网页页面，还可以实现设计风格的统一性，提升网页设计效果。CSS技术效果如此显著，在网页设计中尽量使用外部CSS样式也十分重要，不仅能够弥补CSS技术在设计过程中所存在的不足之处，还可以在结合不同网页设计特点、要求的基础上选择适合的网页结构，进而实现外部CSS样式的理想使用效果，同样可以帮助设计人员实现理想的网页设计效果，提升设计质量与效率。

在互联网信息技术大力发展的当今时代，网页设计被越来越重视以及关注。本文笔者结合日常工作经验先论述了网页设计的常用结构，并清晰分析了当前CSS技术所存在的不足之处，并在此基础上探究了如何在网页设计中更好地运用CSS技术，以供同行参阅。

参考文献

[1]李微.HTML5+CSS3在网页设计中的特性及优势[J].信息与电脑(理论版),2018(22):13-15.

[2]张静.CSS技术在网页设计中的应用研究[J].无线互联科技,2018,15(15):141-142.

[3]叶潮流,马林山.基于HTML5+CSS3+jQuery的响应式布局网页设计[J].梧州学院学报,2018,28(3):22-35.

[4]刘鹏.CSS链接样式在网页设计中的应用及分析[J].数字技术与应用,2018,36(02):162-163.

[5]张琳.浅析HTML5+CSS3在网页设计中的新特性及优势[J].西安文理学院学报(自然科学版),2017,20(6):82-84.

[6]王微.DIV+CSS技术在网页设计中的应用研究[J].电脑编程技巧与维护,2017(16):73-75.

吴晶 济南职业学院

 环境设计论文   实验设计论文   电路设计论文   造型设计论文   优化设计论文 室内设计论文   网页设计论文   平面设计论文   环境艺术设计论文   服装设计论文 广告设计论文   招贴设计论文   园林设计论文   园林景观设计论文   建筑设计论文 景观设计论文   字体设计论文   空间设计论文   方案设计论文   家具设计论文 网站设计论文   工程设计论文   系统设计论文   设计管理论文   路面设计论文 照明设计论文   环保设计论文   程序设计论文   结构设计论文   产品设计论文