css教程:CSS文件应该保持整洁和统一

2016-02-19 23:14 6 1 收藏

人生本是一个不断学习的过程,在这个过程中,图老师就是你们的好帮手,下面分享的css教程:CSS文件应该保持整洁和统一懂设计的网友们快点来了解吧!

【 tulaoshi.com - Web开发 】

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)点击这里浏览本站 CSS 频道内容。

  一位网友遇到了一个头疼的问题。需要对经过若干次修改以后的网站进行重整,需要剔除冗余的代码,在CSS样式重整方面,比较头疼,不仅需要对现有的样式进行合并与精简,还需要为网站增加换肤功能。

  不难看出,这是一个令人感觉很烦躁的工作,面对一行一行代码头皮发麻。如果我们养成良好的习惯,或许可以让工作更容易一些。就此问题与经验,以下的文字或许有很大的参考价值:

  使用链接或者导入样式表的方法对于中阶或高阶的CSS开发人员来说都是再正常不过的事情,但是我在这里依然会强调一下这种方法的重要性。我见过的许多站点,在创站之初,CSS文件很整洁,组织的也井井有条,但是随着时间的推移,这些文档由于内嵌的甚至内联(inline)的样式出现而变得杂乱无章,一方面可能是由于给予的更新期限很短,另一方面或许就是纯粹的由于懒惰。

  你正忙于一个拥有成千上万条的渠道内容同时出现的网站的大面积更新,给你的期限很短,所以你就选择了使用内嵌或者内联样式这样一些快速修补的方法。一些年过去了,习惯依然,直到有一天你被告知这个站点需要重新设计,但是所有的内容仍然不变,这个时候而你只有一个星期去完成。想象一下,这将是一个怎样的境况。

  其实这是很普遍的情况,更新样式表是一个再简单不过的任务,在你几年的快速修补之后,这些样式遍布了整个站点,相信你根本没办法记住他们在那里。所以现在你面对的只有2个选择:A、在一个星期之内找出一个方法去清理规整这些样式;B、找一份新的工作吧。

  千万不要将你的工作变得愈来愈困难。使用链接和导入样式表是你的不二之选。规范的创建并保持样式表的整洁,你会活得更容易一些。

  提示:小心使用链接或导入的方法会在标记上添加冗余的样式。每次你创建新的样式表,你都会更新要不就是添加新的样式,过多的外联样式不只会使补丁的修复变得困难,也会使样式表更难于维护。因此可以理解为什么大型站点会为不同的区块部分而去分离样式表。小心不要玩过火了,过犹不及。

  这里很值得提及一下的是过多的样式表将会使HTTP的请求数增加。这些都会潜在的影响性能。因此,Internet Explorer将链接的样式表数限制在了32个。

  请特别注意,在实际工作中,注意保持CSS文件整洁与样式统一。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

来源:http://www.tulaoshi.com/n/20160219/1629485.html

延伸阅读
玄关风水怎么设计?玄关应该保持整洁 玄关风水怎么设计? 玄关一般被我们用来调整家居环境,常见的玄关有镜子、鞋柜、雨具存放隔断等。可以说拥有一个玄关对于我们的生活更方便。然而,玄关风水的存在是不容忽视的。 玄关风水怎么设计 1、玄关挂画风水:玄关是进门第一眼看到的地方,所以玄关的装饰在家居风水中至...
标签: Web开发
网页制作WEB文章简介:盒模型主要定义四个区域:内容(content)、内边框距(padding)、边框(border)和外边距(margin)。 自从1996年CSS1的推出,W3C组织就建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落、列表、标题、图片以及层div。 盒模型主要定义四个区域:内容(con...
标签: Web开发
成天都要与样式打交道的朋友,相信对CSS选择符(CSS Selectors)都不会陌生。不过对于刚接触或者还不是很熟悉css的朋友来说,能够找到一份对于CSS选择符的相关例子集合,还是会有一定帮助的。 虽然之前已经有不少对于CSS选择符的文章在网络上出现,不过我还是准备以自己的方式来写一写,这也是一种获得乐趣的途径。所以我小小的总结...
  CSS(Cascading Stylesheets,层叠样式表)是一种制作网页的新技术,现在已经为大多数的浏览器所支持,成为网页设计必不可少的工具之一。使用CSS能够简化网页的格式代码,加快下载显示的速度,也减少了需要上传的代码数量,大大减少了重复劳动的工作量。尤其是当你面对的是有数百个网页的站点时,CSS简直象是神对我们的恩赐!^_^ ...
标签: Web开发
这些小东西是我在网上看到的就把它记下来了,可能以后会有用的:          ?xml version="1.0" encoding="GB2312"?          ?xml-stylesheet type="text/css" href="resume.css"?          re...

经验教程

833

收藏

13
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部