在制作Xhtml页面时是先写HTML代码还是先写CSS代码

转载 (原文地址) marty 随笔 待整理 3261阅读 2010-11-25 14:20:51 举报

<div>
<p>相信很多喜欢用DIV+CSS技术开发重构网页的爱好者朋友,在开始学习DIV+CSS的时候都会想一个问题,想知道DIV+CSS高手或有经验者在开发制作html页面的时候,到底是先写html还是先写css?带着这个问题我们将来讲解到底先写CSS好还是先写html。<br><br><strong>网上有很多种对此的答案:先写HTML后写CSS;先写CSS后写HTML;两者同时写。</strong><br><br>我在平时做html页面是选择的两者同时进行,首先先建立好网站大致目录文件,如imges:存放页面图片;js: 存放JS脚本语言,而CSS文件我建议直接放到images文件夹里,这样好处以免,在调用图片背景时候把图片路径搞错了,再是就是方便维护图片名称;自然html页面则放到根目录下。 <span .="Rje854"></span><br><br>然后我们先写HTML中的最基本的布局部分,都是用DIV,然后直接在DIV里加入ID或CLASS(ID与CLASS区别),这些布局部分包括外套部分,头部分,中间部分,左,中,右,版权部分等。其中头部、中间、底部基本都是大概页面的通用部分,大部分网页都是由这3个大部分组成。我们把这些部分用ID或class命名好后,再到css样式文件里写对应的css样式属性。而在css写前我们要把全局全站的div、h1、h2、字体、字体大小、li等等样式定义好这里不就不详细讲了,如想了解请进我用的全局定义<strong>css模板</strong>了解下载使用,这样以来就不用每次新做网站的时候而重新定义,而直接拷贝通用的基本CSS样式定义模板即可使用。<br><br>一般在制作DIV+CSS的时候新手最好是同时进行html与CSS,这样可以减少错误。在制作中如果经验不是很好的时候,希望在制作过程中多种不同的品牌版本浏览器中测试是否兼容有没有出现在这个浏览器中显示正常,而在另外浏览器却出现显示不全错乱等。从而解决和了解掌握基本兼容问题,积累宝贵的DIV+CSS技术经验,并习惯做上笔记,以免日后忘记。
</p><div .="Rje854"></div><br><br><font size="3"><strong>下面我们了解下先写html然后再写css:</strong></font><br>为什么说有些有经验者对新手说我们不可能一次性把HTML部分写好呢?因为人都是可能犯错误的,可能你的想法写的过程就是有问题的,或者为了浏览器的兼容性问题,有些是你由于经验的不足没有提前预料到,所以当你写样式时发现了问题时就有可能要改动你的HTML的代码。如果先把html写好后可能页面大了后,会忘记你在html中想到的对css属性布局选择。<br><br><strong><font size="3">接着我们了解下先写CSS然后再写html:</font></strong><br>对应有经验的CSS制作者来说,这种是比较有可行性的比起先写html后写css来说。为什么呢?我们知道CSS的继承父级属性特点是相当好,这样以来我们可以通过这点来先写CSS。但是对于新手来说不能这样,如果你先写好CSS后在回到html页面写是回头看你写的css及会忘记怎么调用选择了,因对CSS兼容问题没有经验而同时这样兼容性也相当差。而有经验者通过父级继承特点来排版css文件代码,而返回html时调用CSS中class类和id时很清楚不容易出错。
<div .="Rje854"></div><br><br>通过以上对先后的写法都作出了介绍与解释,但是值得说的一般制作页面时候我们通常是采用两者同时进行+浏览器测试进行。两者同时或半先写css再写html或相反的半先写html再写css是非常好的,这样不容易出错,以免出错后浪费时间修改。<br><br>以上的说法不一定完全是正确但是通过以上想告诉DIV+CSS制作开发者,无论是先写html还是先写CSS这个并不重要,重要是你对div+css的喜爱加在日常不停的练习,你也可以HTML/CSS同时进行,都是可以的,看你的习惯。但你开发制作多了自然会总结出适合自己,而开发快的方法来。希望以上对你有帮助-<a href="http://www.hey521.com"; target="_blank">www.hey521.com</a>原创。请转载朋友留下出处与链接!谢谢分享! </div>

评论 ( 10 )
最新评论
阳朔人 5F 2010-11-30 22:04:30 10F

可以说,先结构再样式是9层以上的前端开发人员的习惯。

karen 5F 2010-11-30 13:56:38 9F

我也是先结构再样式,感觉这样条理更清晰一些

ailelf 5F 2010-11-26 22:32:27 8F

很详细呢说明呢 ,呵呵
只是 ,把css文件放到图片文件夹里,这个办法的作用还不是很明白....

大神M 5F 2010-11-26 05:02:49 7F

先结构再样式,这是我的习惯。

marty 5F 2010-11-12 16:39:47 6F

蒽!大家一起学习!

羊羊 2F 2010-11-12 15:08:21 5F

把css文件放到图片文件夹里,这个办法极好,记住了

marty 2F 2010-11-08 09:25:36 4F

蒽!这种方法不错!而且结构清楚!也有条有理!

marty 2010-11-08 09:24:51 3F

刚学那会儿就是结构不知道是什么!直写样式!0.0  现在感觉好没有目的!

yaotaiyang99 2010-11-08 09:19:27 2F

两个一起写效率太低了~开发时我喜欢写把html大结构写完,再写css

大神M 2010-11-07 19:51:54 1F

先结构,再样式,针对初学者可以两者同时进行~