初学者来看:学习网页技术CSS怎么入门?

css|初学|网页

引言:

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

不知从何时开始,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参考大全》

如果对HTML还不太了解的话,可以先读读《HTML参考大全》这本书,这本书即是一本教学书同时也是一本很好的用来查询HTML的工具书。最近出版的《精通CSS》、 《无懈可击的Web设计》都是非常好的书,但不适合没有有CSS基础的人读,要想成为一个优秀的CSS Builder,还要有扎实的英文基础,那样你就可以去阅读国外的CSS教程,参与相关的论坛,有人说,不懂英语可以只看代码,但事实上,他们的书中论述的不仅仅是代码,更重要的,是他们会告诉我们编码的思想和编码的方法,这些都是我们值得去学习和领会的。另外我推荐的中文教程是:《HTML and CSS Standard》、苏沈小雨《CSS2中文手册》、电子版《网页设计师》;外英文版的电子书很多,就不一一举例。看电子书是一件很乏味的事,我本人就不习惯看电子版的,所以经常买书看。

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

这个问题好象是问过频率最高的!先说我自己吧,刚开始是用DreamWeaver写代码,由于DreamWeaver软件本身是一个很耗CPU和内存的软件,运行时编辑的速度就可想而知了。走了好长一段时间之后我才过度到了“半手写”状态,“半手写”就是利用DW提供的代码提示功能,当你写“F”时有关“F”的样式就会立刻在后面提示出来,方便你选取。如果再写上几个字母,你要的那个样式就很快找到了,这样可以加快你的写样式的速度,但有一个坏处就是如果你脱离了代提示的编辑软件你就不会写样式了,比如你在程序员那里修改微调样式时,他用的可不一定是你用的那个软件,不一定有代码提示功能,所以你只能回到自己的机器上编辑好了然后发给程序员!这样做显然是不专业的!所以如果想成为优秀的人就要做到够专业!

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

只要已经能达到会手写的程度,用什么软件都可以,推荐使用DreamWeaver外挂TopStyle(最新版本是Pro V3.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同时进行,都是可以的,看你的习惯。我们写代码时很多时候是边写代码边测试,也不是说写一句测试一句,而是写了一段代码后就进行浏览器的测试,我是同时用IE6与FF一起测试。一个优秀的制作师他们的代码多数情况写了很多时他们才测试一下,是因为一个人如果经验多的话,他们就会知道并提前预防浏览器错误显示的发生了!所以他们写代码的速度比没有经验的人快。他们已经经历过了你所要经历的错误,你第一次遇到错误的浏览器显示问题你要花时间去修补,而他们可提前防止或遇到了可立即解决问题!这就是你与他们的不同点之一。

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

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

最后祝愿大家学习进步。

时间: 2024-08-26 03:38:23

初学者来看:学习网页技术CSS怎么入门?的相关文章

初学者来看:学习网页技术CSS从何入手技术?

css|初学|网页 引言: 引用一本书中的一段文字:"当我第一次开始学习汉语时,我的家庭老师老王给了我一本汉英字典.一本汉语语法书和一本初级教程.但是,他将这些书放 在一个书筐里,并说到下周才能派上用场.在第一周,他只教我听和记一些短语.在开始严格有序的学习前,他要我学会如何复述一些短评."请问,哪里有餐 馆?"."请给我来点米饭"."这件衣服多少钱?".在那个星期,我不得不无条件地接受知识.句子结构.发音和语法.然而,到了星期五我居然

入门知识:介绍学习网页技术CSS样式的方法

css|网页 从开始认识CSS(DW4)那时起,我就知道了CSS的强大,但从未用CSS排版过,因为我曾经尝试过学习,但感觉太难了 而且用DW的表格,所见及所得,做起页面来非常的快,排版也容易的多,由于最近求职,很多公司都要求DIV,CSS,所以我再次尝试学习 1.学习方式 我以为,看别人的代码是一个非常好的学习方式(前提是你需要有点基础知识),在查看别人的代码时可以去除一些重复的,或者一些于CSS无关的代码,将更利于我们分析,你可以从中了解到别人是怎么做的,更深一点,你可以考虑为什么要这样做,当

个人学习总结:如何学习网页技术CSS

css|网页 总结以下5点,大家可以看看参考下. 1.读写 读书读上面我推荐的贴子.网站和blog.互联网的宗旨在于共享和传播,那些接触技术比较早的理解和实践比较深入的朋友给我们提供经验和教程.要静下心来,不能仅仅为了一个效果或者一个布局的实现去找答案.而是去理解教程给我们带来的实现思路.要系统地读书也要针对性的搜集某个问题的方法去总结提取.读到的时候就要写,写一些代码片断,一些布局结构,一些效果的实现.哪怕是照着书敲出代码来,加深记忆和理解,效果要比单纯的度过效果要好得多. 2.改动 改,不是

学习网页技术CSS样式表整理的20个技巧

css|技巧|网页|样式表 1. CSS字体属性简写规则 一般用CSS设定字体属性是这样做的: font-weight: bold;font-style: italic;font-varient: small-caps;font-size: 1em;line-height: 1.5em;font-family: verdana,sans-serif 但也可以把它们全部写到一行上去: font: bold italic small-caps 1em/1.5em verdana,sans-serif

新手来学习网页技术CSS的语法基础

css|网页|语法 1. 基本语法 CSS的定义是由三个部分构成:选择符(selector),属性(properties)和属性的取值(value). 基本格式如下: selector {property: value} (选择符 {属性:值}) 选择符是可以是多种形式,一般是你要定义样式的HTML标记,例如BODY.P.TABLE--,你可以通过此方法定义它的属性和值,属性和值要用冒号隔开: body {color: black} 选择符body是指页面主体部分,color是控制文字颜色的属性

学习网页技术CSS实现自动换行功能

css|网页 自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法 对于div,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行html<div id="wrap">正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义</div>css#wrap{white-spa

深入学习网页技术CSS中选择符的应用

css|网页 一.选择符模式 模式/含义/内容描述 * 匹配任意元素.(通用选择器) E 匹配任意元素 E (例如一个类型为 E 的元素).(类型选择器) E F 匹配元素 E 的任意后代元素 F .(后代选择器) E > F 匹配元素 E 的任意子元素 F .(子选择器) E:first-child 当元素 E 是它的父元素中的第一个子元素时,匹配元素 E .(:first-child 伪类) E:link E:visited 如果 E 是一个目标还没有访问过(:link)或者已经访问过(:v

学习网页技术CSS应用在特定场合的规则

css|网页 At-rules分装不同的CSS规则,应用在特定场合. Importing import@规则引用另外的样式.例如,如果你想添加另外样式到现在的样式,可以这样: @import url(addonstyles.css); 这很像使用link元素连接CSS到HTML,本质上说有一个内容样式像下面: <style type="text/css" media="all">@import url(monkey.css);</style>

初学:认真学习网页技术CSS的选择符

css|初学|网页 通配选择符 语法: * 说明: 选定文档目录树(DOM)中的所有类型的单一对象.假如通配选择符不是单一选择符中的唯一组成,"*"可以省略.目前IE5.5+尚不支持此种选择符. 示例: *[lang=fr] { font-size:14px; width:120px; } *.div { text-decoration:none; } 类型选择符 语法: E1 说明: 以文档语言对象类型作为选择符. 示例: td { font-size:14px; width:120