网页设计中的CSS 技术及优化分析论文

2021-04-21 论文

  1 CSS 技术特点

  互联网刚兴起时,网页缺少动感,布局内容也有许多因素限制,设计起来难度较多。即使专业的HTML 技术人员,在网页设计中也需要通过不断测试,才能掌握网页中的信息排版,在这样的背景下,样式表应时而生,CSS技术具有以下特点。对网页中的元素进行精准定位。网页设计者在网页设计中,如同导演,网页中图片、文字就是演员,网页设计人员依据要求使“演员”扮演好自己的角色,操控起来十分简单。将网页中的格式控制与网页中的内容分离。网页浏览者在浏览过程中,面对是网站内容结构,为了帮助浏览者更好地查看网页中的信息,在设计中需要合理利用格式控制,将的内容与格局分离,从而对网页布局进行更加合理的控制,即将CSS 代码独立,从另一角度实现对页面布局和外观的控制。页面布局的控制。通过CSS 技术,能够事项对HTML的有效控制,并且可以在网页中对图像的位置进行准确定位。制作体积加载更快。体积更小的网页,CSS 样式只是简单的文本,在设计中不需要执行程序、图像、插件,在执行上就如同HTML 中的指令一样快。

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

  2.1 外部样式表

  外部样式主要适用网页中存在多个副面,外部样式表一文件存储的情况,通常情况下文件的扩展名为.css。网络页面中应用外部样式,可以将多个网页与.css 文件进行连接,通过改变一个.css 文件中的内容对整个网站的布局进行调整。例如m.css 需要将 添加到文档头部,将去作为标签,具体方式代码如下:

  css”/>

  . . . . . . . . .

  在网页设计过程中,可以通过外部文件,对编辑中的文本进行编辑,但是在编辑中需要注意,不能出现任何HTML中的代码,例如:

  p{color: red;font-size:14px;}

  body{background-color:#FFDFFD}

  其中color 为属性,red 为值;font-size 为属性,14px 为值;background-color 为属性,#FFDFFD 为值。

  2.2 内部样式表

  如果一个在网页设计中,不需要特殊样式,通常为简化,都采用内部样式,可以将

  p{color:red;font-size:14px;}

  body{background-color:#FFDFFD}

  ??

  内部样式与外部样式相比,更加简单实用,在网站页面头部,输入同一样式,可使网站中所有页面都呈现统一的样式。

  2.3 内联样式表

  网页设计中内连样式表,可以将style 参数直接加入到HTML中,添加的参数就是CSS 多属性与值,内嵌的样式如下:

  设计中,内联样式表与其它两种样式相比,使用率相对少,主要这种方式不容易在网页中重复使用,如果上述的p 元素在网页设计中重复式样,网页会将p 元素定义为完全重复,样式属性也会出现重复,会加大对网页的维护和阅读难度。

  3 优化CSS 代码

  在网页设计中,为了使网站能够快速的`显示出来,Web创建者在实际操作中,需要对网站中的图像文件进行压缩。CSS 样式表是纯文本文件,所占内存较小,在设计中不需要进行压缩,但在应用过程中,也有一些方法可以使其格式缩小20% ~ 50%。

  3.1 缩写性质

  利用专用性质名取代相关性质集合。例如,paddingtop、padding-left 等性质在CSS 带面中就可以进行缩写。在网页设计中可以通过以下代码代替复杂的代码。

  .body{margin:12px 18px 20px 24px;padding:4px 8px

  6px 5px

  Border-top: thin solid #000000;}

  此外,在对缩写性质进行应用中,属性之间的间隔通过空白完成。如果属性之间出现类似值时,要注重连续属性的顺序,属性由顶部开始,依照顺时针顺序进行。如果缩写性质相同,可以简单罗列单个属性,将后面的三项属性缩写。

  3.2 通过样式覆盖简化代码

  如下CSS 样式

  .a,

  .b,

  .c {font- size;10px;padding:10px;width:200px;

  background- color:black }

  .a {border:2px solid red;}

  .b {border:2px solid blue;}

  对以上这段CSS 样式进行分析,可以发现,三个样式边框属性,除了颜色之外其余并误差别,因此可以将无差别的属性进行归纳在一起,对颜色进行单独控制,优化的样式如下:

  .a,

  .b,

  .c {font- size;10px;padding:10px;width:200px;

  background- color:black;border:2px solid:red}

  .2 {border:2px solid blue;}

  .3 {border:2px solid black;}

  优化后代码能够实现与原代码一样的效果,代码的属性变得更加简单。

  3.3 提高代码重复率

  重复使用代码是CSS 在网页设计上的主要优势,多数网站设计中,对CSS 中的代码已经进行了重复利用,但受设计者自身影响,并没有得到合理的重复使用。在CSS 代码编写中,应当尽力避免重复的元素属性值多次编写。

  4 结 语

  现代网页设计中对CSS 技术的应用十分广泛,在应用CSS 技术过程中,不仅需要注意应用的合理性,同时应当通过分析,采取相应的方式,简化CSS 代码,使其变得更加合理、简洁。

【网页设计中的CSS 技术及优化分析论文】相关文章:

网页设计教学中DIV+CSS布局的运用论文11-11

网页设计中色彩的运用分析论文11-19

总图运输设计的技术优化分析论文07-02

“网页设计与制作”课程中的应用分析论文11-18

网页设计中的色彩搭配分析论文11-19

网页设计中的扁平化设计分析论文11-19

分析美学在网页设计中的表现手段论文11-13

中国元素在茶类网页设计中的应用分析论文11-14

网页设计中FLASH的运用论文11-19