DIV+CSS入门之经典教程

开发 前端
本文向大家介绍一下DIV+CSS技术入门基础,CSS是CascadingStyleSheets(层叠样式表单)的简称,它是一种设计网页样式的工具。

本文和大家重点讨论一下DIV+CSS技术的概念,CSS是CascadingStyleSheets(层叠样式表单)的简称,更多的人把它称作样式表。顾名思义,它是一种设计网页样式的工具。

网页制作学习:DIV+CSS技术如何入门

  CSS是CascadingStyleSheets(层叠样式表单)的简称。更多的人把它称作样式表。顾名思义,它是一种设计网页样式的工具。借助CSS的强大功能,网页将在您丰富的想象力下千变万化,越来越多的人在学习而很多初学者没有一个头绪,整理了一些学习的方法给大家。

一.CSS学习重在方法!

  要想掌握CSS,首先要学会HTML!

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

  阅读一本书,一般来说第一次要先把整个书通读一遍,不理解的也要往下看,在往下看的过程中你也许会找到那个问题的答案。看完后你有一个大概的印象,但一定有很多不明白的地方,没关系,继续往下看。第二遍你就要边看边做学习笔记了,把你认为是重点的部分写上,还有,你觉得有疑问的部分也要记下,带着疑问看下去,如果没有答案,你可以去BBS上发一个贴子,好心人还是很多的,提示一句:“一定要学会如何去问问题!”。你还要上机去练习书上的例子,最让你困惑的:“一是记不住,二是对概念的理解有误(这一条可能是书译的不好,另外就是你的理解不对)”,对于第一条你就要树立信心,坚持再坚持下去。当你到达终点时你回发现一切都是顺理成章的事。因为你努力了,努力了就会有回报,有结果。

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

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

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

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

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

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

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

  阶段三:可提前预防BUG,但样式表中大量应用了ID,CLASS,CSS译过来是重叠样式表,比如“DIVPSPAN”。这句代码是标明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(最新版本是ProV3.12)。

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

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

  先要把站点建好,目录建好,比如我们建好文件夹CSS,IMAGES,这两个是最其本的,然后新建一个HTML文件,一个style.css一个空的样式表,把HTML页连接到这个外部样式表。

  然后我们先写HTML中的最基本的布局部分,都是用DIV,然后直接在DIV里加入ID或CLASS,这些布局部分包括外套部分,头部分,中间部分,左,中,右,版权部分等。

  写好这些后,这时你可以到样式表中写样式,或者你在接着写布局里的部分,拿头部为例,在头部写入LOGO部分,NAV部分也同样加入ID或CLASS。其它同理。

  为什么说我们不可能一次性把HTML部分写好呢,因为人都是可能犯错误的,可能你的想法写的过程就是有问题的,或者为了浏览器的兼容性问题,有些是你由于经验的不足没有提前预料到的,所以当你写样式时发现了问题时就有可能要改动你的HTML的代码。大至的写法就是这样,你也可以HTML/CSS同时进行,都是可以的,看你的习惯。我们写代码时很多时候是边写代码边测试,也不是说写一句测试一句,而是写了一段代码后就进行浏览器的测试,一个优秀的制作师他们的代码多数情况写了很多时他们才测试一下,是因为一个人如果经验多的话,他们就会知道并提前预防浏览器错误显示的发生了!所以他们写代码的速度比没有经验的人快。他们已经经历过了你所要经历的错误,你第一次遇到错误的浏览器显示问题你要花时间去修补,而他们可提前防止或遇到了可立即解决问题!这就是你与他们的不同点之一。

  初学者与高手不同点之处还有一个就是高手们使用了大量的快捷键,所以一定要记住那些常用的快捷键,每一个小的细节都有一点提高,综合在一起就是很大的提高。另外提高自己的水平最好的方法就是多实践,多找一些比较好的HTML+CSS的模板进行编码实践,开始时要选一个简单点的,把页面截图,然后把这张图用自己的想法还原成HTML页面……

【编辑推荐】

  1. 两大方法实现DIV垂直居中
  2. DIV居中布局的三大实现方法
  3. 深入学习DIV+CSS之绝对定位和相对定位用法
  4. Div+CSS布局入门之写入整体层结构与CSS
  5. DIV+CSS开发过程中影响SEO的制作细节

 


 

责任编辑:佚名 来源: yesky.com
相关推荐

2010-08-16 15:19:35

DIV+CSS教程

2010-08-17 13:28:31

DIVCSS

2010-08-16 09:44:52

DIVCSS

2010-08-16 09:56:05

DivCSS

2010-08-16 10:37:29

DIVCSS

2010-08-16 09:32:01

DivCSS

2010-08-16 10:10:11

DIV+CSS

2010-09-03 10:58:45

DIVCSS

2010-08-25 09:11:57

DIVCSS

2010-08-30 10:46:13

DIV+CSS

2010-08-27 14:05:40

DIV+CSS

2010-08-25 12:47:40

DIVCSS

2010-08-30 13:09:40

DIVCSS

2010-08-24 10:32:34

DIV+CSS

2010-09-14 11:19:23

DIV+CSS技术

2010-08-24 11:25:06

DIVCSS

2012-08-06 09:40:36

DIV

2011-05-17 09:51:27

Div+CSS

2010-08-16 13:17:47

DIV+CSS

2010-08-30 11:08:53

DIV+CSS
点赞
收藏

51CTO技术栈公众号