当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 学DIV+CSS技术,如何入门?

CSS样式表
CSS网页设计 IE8和IE7共存
CSS2 打印属性让打印HTML文档不出问题
制作网页中设计段落缩进的方法
CSS border 属性使用说明
CSS border-style 属性使用方法
CSS border-color 属性使用方法
CSS border-width 属性使用教程
CSS padding属性定义边内补白
CSS margin 属性定义边外补白
网页布局教程 掌握CSS网页布局属性
css 背景样式属性说明
span margin 设置生效
html 滚动条在IE6和IE7中兼容性问题
IE6 两个div有间隙的问题(IE 3px bug)
CSS 数字和字母将容器撑大问题解决
换个角度看页面重构中的语义化
DIY属于个人开发使用的CSS Reset
CSS 空格引起网页布局间距问题
CSS 网页制作时遇到问题的快速参考技巧
css li 去掉点的样式写法

CSS样式表 中的 学DIV+CSS技术,如何入门?


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-13   浏览: 157 ::
收藏到网摘: n/a

引言:

引用一本书中的一段文字:“当我第一次开始学习汉语时,我的家庭老师老王给了我一本汉英字典、一本汉语语法书和一本初级教程。但是,他将这些书放 在一个书筐里,并说到下周才能派上用场。在第一周,他只教我听和记一些短语。在开始严格有序的学习前,他要我学会如何复述一些短评。“请问,哪里有餐 馆?”。“请给我来点米饭”。“这件衣服多少钱?”。在那个星期,我不得不无条件地接受知识、句子结构、发音和语法。然而,到了星期五我居然可以去一家中 餐馆要了一碗米饭并付了账。没有理论,没有解释,就是这些简单的短语给了我做这件事的足够的语法和词汇。

不知从何时开始,CSS开始为国人重视起来。许多人都开始学习CSS,但又不知从何入手,所以此文就是给那些初学者所写,带他们踏上CSS列车。

一. CSS学习重在方法!

学习任何东西都是一样,从小学、中学、大学,除了学习知识外就是去学习方法!

要想掌握CSS, 首先要学会HTML,我刚开始是从零开始学习的,花了一个月时间学习HTML,没有老师,书就是我唯一的老师,也没有上网的条件!一个月过后,我就开始学习CSS,刚开始看的第一本CSS书是《CSS网页样式设计》看了几天后发现根本看不懂!,之后换了一本《HTML参考大全》,这本书是网页制作师的案头常备之书!之所以更换这本书来学习CSS,是因为这里面有一部分是CSS,就成了我的CSS启蒙书。看了几段后,觉得外国人写的教程很有条理,由浅入深,一步一步引领你向前走,让你明白他们在说什么,而不是象国内的书讲的深浅不一,缺乏条理,好象怕你不知道他很有学问!就象前面所说的那本书《CSS网页样式设计》当时看了,对于初学CSS的我来说,真的不知道它在说什么!

再来谈一下学习过程中的细节,因为一个样式它是不可能脱离HTML页面的,HTML不与样式结合的话, CSS就失去了存在的意义。所以一般书中都会举一个例子,然后让你上机测试效果,这是笔者想让你有对样式表CSS有一个初步的印象,告诉你CSS能做什么。一个小例子:“麻雀虽小,五脏俱全”,你可能看不懂每一个语句的真正意思。但是你可以记得例子的模式,以后在实践中不断地用,不断用的过程就是不断记的过程,所以不能恢心,不能总认为自己记忆力不好,但不管你骑的是牛也好,千里马也罢,只要有恒心,一定会到达终点的。

阅读一本书,一般来说第一次要先把整个书通读一遍,不理解的也要往下看,在往下看的过程中你也许会找到那个问题的答案。看完后你有一个大概的印象,但一定有很多不明白的地方,没关系,继续往下看。

第二遍你就要边看边做学习笔记了,把你认为是重点的部分写上,还有,你觉得有疑问的部分也要记下,带着疑问看下去,如果没有答案,你可以去BBS上发一个贴子,好心人还是很多的,提示一句:“一定要学会如何去问问题!” 这里就不说了。你还要上机去练习书上的例子,最让你困惑的:“一是记不住,二是对概念的理解有误(这一条可能是书译的不好,另外就是你的理解不对)”,对于第一条你就要树立信心,坚持再坚持下去。当你到达终点时你回发现一切都是顺理成章的事。因为你努力了,努力了就会有回报,有结果。

有好多人也看了,但是没有什么进步,我分析主要有以下几个原因:

原因一:压力不够,因为有不少人比如美工学CSS,因为是看别人学,所以学之,不学就没优势!这样的压力是很小的,学不好还有美工这碗饭。

原因二:只是业余学习,这样学还只是玩一玩,因为你不一定非要以这门技术吃饭。

原因三:方法不对,有的人只是在看教程,但他不动手去做,我以前就是看的太多,做的太少,所以有了实践你才能把理论的东西揉进去。

二. 掌握CSS的四个学习阶段

有一次我问一个网友,学CSS难吗?她说:“不难”我说你学多久了?她说:“刚学”。其实她说的也没错!如果有人问我学CSS 难吗?我会说:“难!”为什么我会说难呢?
学CSS可以分成以下几个阶段:

阶段一:不去想浏览器的兼容性问题的情况下能做出页面,但页面里到处用TABLE的 模式DIV写出的页面。

阶段二:想到了兼容性问题,但无法提前预防,只会修补问题,大量使用HACK技术(我对HACK技术只是知道,但用的很少)

阶段三:可提前预防BUG,但样式表中大量应用了ID,CLASS,CSS译过来是重叠样式表,比如“DIV P SPAN”。这句代码是标明DIV子元素中P的子元素SPAN,这样写就可以定义SPAN的样式了,不用在SPAN中加入CLASS了。这也就是CSS的优点所在,为什么不好好利用而一定要定义一个CLASS呢!

阶段四:这一阶段是最难的,良好的HTML语义结构、合理的CSS、可重复利用的样式。良好的语义有这方面的文章,合理的CSS,这两方面以后一定会写专题来研究。

三. CSS初学者常见问题:

让我们一步步来。第一个要求是缩图的正下方要有个标题。作法相当直接了当:在你的 HTML 里放上图片,接着一个断行 (BR),再把标题放在一个段落 (P) 里并且置中 (利用 CSS)。

接着我们要让这些缩图跟标题成对地排列在浏览器窗口里。使用表格排版时,这一对对的缩图跟标题会被分别放置在 TD 里。在使用 CSS 排版时,我们要把它们分别放置在 DIV 里。为了让它们能水平排列在窗口上,我们用 CSS 让这些 DIV 往左浮动 (FLOAT)。

问题1:学CSS应该选什么样书来读?

先推荐几本:

CSS权威指南》

《网站重构》

《网站布局实录》

HTML参考大全》

问题2:用什么软件编辑CSS代码?

说了这些好象还没有说到主题:

只要已经能达到会手写的程度,用什么软件都可以,推荐使用DreamWeaver外挂TopStyle(最新版本是Pro V3.12)。

问题3:先写HTML还是先写CSS

网上有很多种答案:先写HTML后写CSS;先写CSS后写HTML;两者同时写。我倾向于两者一起写,先写CSS或者先写HTML对于初学者都不是恰当得的方法。如果让一个人编写代码,你告诉他先写HTML,写完后 HTML不能修改了,然后你写CSS,如果他可以写出来,那这个人一定是一个水平非常高的Builder了!所以对于初学者,多数情况下我建议同时编写,具体我说一下步骤:

  1. 先要把站点建好,目录建好,比如我们建好文件夹CSS,IMAGES,这两个是最其本的,然后新建一个HTML文件,一个style.css一个空 的样式表,把HTML页连接到这个外部样式表。
  2. 然后我们先写HTML中的最基本的布局部分,都是用DIV,然后直接在DIV里加入ID或CLASS,这些 布局部分包括外套部分,头部分,中间部分,左,中,右,版权部分等。
  3. 写好这些后,这时你可以到样式表中写样式,或者你在接着写布局里的部分,我们拿头部为例,在头部写入LOGO部分,NAV部分也同样加入ID或CLASS。其它同理。

初学者与高手不同点之处还有一个就是高手们使用了大量的快捷键,所以一定要记住那些常用的快捷键,每一个小的细节都有一点提高,综合在一起就是很大的提高。

另外提高自己的水平最好的方法就是多实践,多找一些比较好的HTML+CSS的模板进行编码实践,开始时要选一个简单点的,把页面截图,然后把这张图用自己的想法还原成HTML页面……

最后祝愿大家学习进步。