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

网页设计中的CSS 技术及优化分析论文 1CSS技术特点 互联网刚兴起时，网页缺少动感，布局内容也有许多因素限制，设计起来难度较多。即使专业的HTML技术人员，在网页设计中也需要通过不断测试，才能掌握网页中的信息排版，在这样的背景下，样式表应时而生，CSS技术具有以下特点。对网页中的元素进行精准定位。网页设计者在网页设计中，如同导演，网页中图片、文字就是演员，网页设计人员依据要求使“演员”扮演好自己的角色，操控起来十分简单。将网页中的格式控制与网页中的内容分离。网页浏览者在浏览过程中，面对是网站内容结构，为了帮助浏览者更好地查看网页中的信息，在设计中需要合理利用格式控制，将的内容与格局分离，从而对网页布局进行更加合理的控制，即将CSS代码独立，从另一角度实现对页面布局和外观的控制。页面布局的控制。通过CSS技术，能够事项对HTML的有效控制，并且可以在网页中对图像的位置进行准确定位。制作体积加载更快。体积更小的网页，CSS样式只是简单的文本，在设计中不需要执行程序、图像、插件，在执行上就如同HTML中的指令一样快。 2CSS技术在网页设计中的应用 2.1外部样式表 外部样式主要适用网页中存在多个副面，外部样式表一文件存储的情况，通常情况下文件的扩展名为.css。网络页面中应用外部样式，可以将多个网页与.css文件进行连接，通过改变一个.css文件中的内容对整个网站的布局进行调整。例如m.css需要将添加到文档头部，将去作为标签，具体方式代码如下： css”/ . 在网页设计过程中，可以通过外部文件，对中的文本进行，但是在中需要注意，不能出现任何HTML中的代码，例如： pcolor:red;font-size:14px; bodybackground-color:#FFDFFD 其中color为属性，red为值;font-size为属性，14px为值;background-color为属性，#FFDFFD为值。 2.2内部样式表 如果一个在网页设计中，不需要特殊样式，通常为简化，都采用内部样式，可以将 pcolor:red;font-size:14px; bodybackground-color:#FFDFFD ? 内部样式与外部样式相比，更加简单实用，在网站页面头部，输入同一样式，可使网站中所有页面都呈现统一的样式。 2.3内联样式表 网页设计中内连样式表，可以将style参数直接加入到HTML中，添加的参数就是CSS多属性与值，内嵌的样式如下： 设计中，内联样式表与其它两种样式相比，使用率相对少，主要这种方式不容易在网页中重复使用，如果上述的p元素在网页设计中重复式样，网页会将p元素定义为完全重复，样式属性也会出现重复，会加大对网页的维护和阅读难度。 3优化CSS代码 在网页设计中，为了使网站能够快速的显示出来，Web创建者在实际操作中，需要对网站中的图像文件进行压缩。CSS样式表是纯文本文件，所占内存较小，在设计中不需要进行压缩，但在应用过程中，也有一些方法可以使其格式缩小20%50%。 3.1缩写性质 利用专用性质名取代相关性质集合。例如，paddingtop、padding-left等性质在CSS带面中就可以进行缩写。在网页设计中可以通过以下代码代替复杂的代码。 .bodymargin:12px18px20px24px;padding:4px8px 6px5px Border-top：thinsolid#000000; 此外，在对缩写性质进行应用中，属性之间的间隔通过空白完成。如果属性之间出现类似值时，要注重连续属性的顺序，属性由顶部开始，依照顺时针顺序进行。如果缩写性质相同，可以简单罗列单个属性，将后面的三项属性缩写。 3.2通过样式覆盖简化代码 如下CSS样式 .a, .b, .cfont-size;10px;padding:10px;width:200px; background-color:black .aborder:2pxsolidred; .bborder:2pxsolidblue; 对以上这段CSS样式进行分析，可以发现，三个样式边框属性，除了颜色之外其余并误差别，因此可以将无差别的属性进行归纳在一起，对颜色进行单独控制，优化的样式如下： .a, .b, .cfont-size;10px;padding:10px;width:200px; background-color:black;border:2pxsolid：red .2border:2pxsolidblue; .3border:2pxsolidblack; 优化后代码能够实现与原代码一样的效果，代码的属性变得更加简单。 3.3提高代码重复率 重复使用代码是CSS在网页设计上的主要优势，多数网站设计中，对CSS中的代码已经进行了重复利用，但受设计者自身影响，并没有得到合理的重复使用。在CSS代码编写中，应当