搜档网
当前位置:搜档网 › DIV+CSS入门教程完整篇

DIV+CSS入门教程完整篇

DIV+CSS入门教程完整篇
DIV+CSS入门教程完整篇

第一章:应知道

1.1 DIV+CSS的叫法是不准确的

我想凡是来到“这个专题”的同学,很大部分是冲着DIV+CSS来的,目的就是学习DIV+CSS 的,说的再直接一些就是学习如何用DIV+CSS布局页面,如何从一张图片制作成标准的DIV+CSS页面。

如果你看完第一段还没有发现错误的话,那你就很有必要,接着往下看。

DIV+CSS这种叫法其实是一种很错误的叫法,这是国人一厢情愿的叫法,而标准的叫法是什么呢?

呵呵,没错,是xHTML+CSS,不理解吧,我来细细给你说,如果下面的你能理解,保证面试的时候会有很大的帮助,同时也可以让你后面的学习更轻松。

为什么国人将这种页面布局的方法叫做DIV+CSS?

因为过去布局页面基本上都是用Table布局,也可以说是Table+CSS,而现在布局页面呢,用DIV,所以叫DIV+CSS,听起来也挺合理,认为这样布局出来的页面也就是标准页面,甚至有些人走了个极端,看到其他网站用到Table,就会嘲笑页面做的不够标准,好似用不用Table成为了页面是否标准的一个标尺。现在我可以告诉大家,凡是有着这种行为的,都学得不咋样,很皮毛!

用了Table页面就不标准了?!纯粹无稽之谈,那什么才是标准页面呢?先看一个专业概念,WEB标准,然后我会问三个问题,你来回答:

WEB标准不是某一个标准,而是一系列标准的集合。网页主要由三部分组成:结构(Structure)、表现(Presentation)和行为(Behavior)。对应的标准也分三方面:结构化标准语言主要包括XHTML和XML,表现标准语言主要包括CSS,行为标准主要包括对象模型(如W3C DOM)、ECMAScript等。这些标准大部分由W3C起草和发布,也有一些是其他标准组织制订的标准,比如ECMA(European Computer Manufacturers Association)的ECMAScript标准。

看明白了没有?问题来了~先不要看答案,从上面的概念中找出

问题一:WEB标准有几部分组成?

问题二:结构化标准语言是什么?

问题三:表现标准语言是什么?

答案一:三部分,结构、表现、行为

答案二:XHTML和XML

答案三:CSS

看完上面三个问题,哪什么是标准页面呢?呵呵,说白了就是按照WEB标准制作的页面,从第二个问题和第三个问题中,我们又可以说,用XHTML和CSS制作的页面就是标准页面,也就是说xHTML+CSS制作的页面就是标准页面。怎么样,理解了吧

为什么不说XML+CSS呢?

很简单,因为XML过于复杂,且当前的大部分浏览器都不完全支持XML。所以就不用它来布局页面喽~

既然xHTML+CSS制作页面就是标准页面了,又因为xHTML中不只有DIV标签,还有span、p、a、ul、li、dl、dt、dd….,即使我不用DIV,用其他标签(比如:ul、li)制作出来的页面也是标准页面!所以说用DIV+CSS来制作标准页面这句话就很狭隘喽~如果满屏全部都是DIV那也算不上标准页面,曾经由一个朋友告诉我,说他的页面全部用的DIV,每个模块,每个功能区域,就连一条线都是纯DIV实现,并且相当自豪的告诉我,没有人比他做的页面更标准的了,他不但对WEB标准页面的理解有差错还犯了一个很大的错误,xHTML 中的每一个标签都有其作用,各司其职,各守其责,要用的恰到好处,这才算是标准页面,DIV不是万能的哟~!

说到这里大家应该明白,这种Web2.0时代的布局页面的方法,叫DIV+CSS是不准确的,应该叫xHTML+CSS。

凡是看到这节的同学们,以后尽可能说xHTML+CSS,不要再说DIV+CSS喽,如果非要说,也要加上一句说明哟,比如

面试官:你对DIV+CSS了解么?

应聘者:DIV+CSS准确的说应该叫xHTML+CSS,我对这种页面布局方法非常了解!……第二章

使用Table布局页面为什么是不明智的?

大家看到标题,不要误解认为在页面中不能使用Table,而是可以使用Table,但是尽量不要用Table去布局页面,为什么这么说呢,因为使用Table布局页面会使页面失去灵活性,怎么个灵活法呢,比如今天你好不容易做出来的页面,第二天老板说我不喜欢登录模块

放到右边,还是放到左边,通知板块放到右侧去,页面风格最好一个月换一种,如果遇到这种老板,提出这种要求,并且你的页面是用Table布局的,那么你会崩溃的,工作量那是大大滴~,如果不相信的话,你们自己可以找个页面,用Table布局出来,然后变换板块和风格,你就会体会到Table布局的不灵活性,这是为什么呢,因为Table的诞生是为存储数据用的,功能和Execel差不多,不是用来布局用的,只不过后来大家发现用Table可以把想放的页面元素,比如图片,放到任何自己想放的地方,且做出来的页面可以兼容多种浏览器,于是Table就承担起了布局页面的重担,这一做就是好几年... ...直到Web2.0时代的到来,Table才从布局页面的工作中逐渐解脱,专心的去存储数据^_^

既然Table是为存储数据诞生的,那谁的诞生是为了页面布局呢?

答案就是:DIV,DIV就是为布局页面而诞生的,只不过一直不被人认同,原因就是DIV去布局页面需要CSS的配合,使用比较繁琐,还不如Table拖拖拽拽页面就布局OK了,感觉还不如Table方便,从而DIV被人们放置在一个无人问津的昏暗角落里,暗暗的等待着伯乐的出现,直到2003年美国加州Scott Design公司参加了在旧金山举办的有关网页排版和设计的一个研讨会上的演讲,使DIV看到了阳光,走出了阴霾... ..

说了那么多,我们对比一下Table布局页面和DIV布局页面的优缺点使用表格进行页面布局会带来很多问题:

* 把格式数据混入你的内容中。这使得文件的大小无谓地变大,而用户访问每个页面时都必须下载一次这样的格式信息,带宽并非免费。

* 这使得重新设计现有的站点和内容极为消耗劳力 (且昂贵)。

* 这还使我们保持整个站点的视觉的一致性极难,花费也极高。

* 基于表格的页面还大大降低了它对残疾人和用手机或 PDA 浏览者的亲和力。

而使用CSS进行网页布局,它会:

* 使你的页面载入得更快

* 降低你的流量费用

* 让你在修改设计时更有效率而代价更低

* 帮助你的整个站点保持视觉的一致性

* 让你的站点可以更好地被搜索引擎找到

* 使你的站点对浏览者和浏览器更具亲和力

* 在世界上越来越多人采用 Web 标准时,它还能提高你的职场竞争实力 (事实上也就是降低失业的风险)。

网上有一篇文章,转过来,文章着重介绍DIV三点优势,也许看完文章后,就像社区元老heflyaway说的感觉作者比较迷恋Table,每篇文章都不可避免的带有个人色彩,而转出来的目的,其实就是想给大家降降DIV+CSS的温度,免得“走火入魔”,视DIV+CSS是为万能的,如果想学好CSS布局页面,就要从多个方面看它,好了,不多说了,下面是作者对CSS布局页面的三点优势及理解:

1、内容和形式分离,网页前台只需要显示内容就行,形式上的美工交给CSS来处理。生成的HTML文件代码精简,更小打开更快。

2、改版网站更简单容易了,不用重新设计排版网页,甚至于不用动原网站的任何HTML 和程序页面,只需要改动CSS文件就完成了所有改版。对于门户网站来说改版就像换件衣服一样简单容易。

3、搜索引擎更友好,排名更容易靠前。

第一点、内容和形式分离

网页前台只需要显示内容就行,形式上的美工交给CSS来处理。生成的HTML文件代码精简,更小打开更快。

这个是DIV+CSS技术最显著的特点,也是CSS存在的根源。完全的颠覆现在传统(table)网页设计的技术。所有现在用table制作的内容,都可以用CSS来解决掉,而且解决的更完美,更强大。不需要大家再表格套表格,让生成的网页文件大小更精简,更小。table时代,一个页面表格达到10个以上是非常普遍的事情,但是现在用DIV+CSS,一个table都可以不用,就完全达到之前的效果,这就直接导致网页文件大小比使用table时减少50%-80%,更节约各位站长的硬盘空间,访问者打开网页时更快,而且用div+CSS时,不像以往使用table时,必须把全部table读取完了才显示页面内容,现在是可以读一个div就显示一个效果,大家打开网页不用等。好处真是明显而强大。

这个优点的确是显著的,凡是使用传统table建的网页,内容多的话,有时候达到30K 左右都有可能,文件打了打开时,肯定就有0.0几秒的延迟。使用DIV+CSS,你前台打开看到的全是直接内容,CSS文件都是导入链接的,是另一个文件,根本和HTML文件大小没关系,这种生成的HTML文件,一个也就10K左右大小。

第二点,改版网站更简单容易了

不用重新设计排版网页,甚至于不用动原网站的任何HTML和程序页面,只需要改动CSS 文件就完成了所有改版。

DIV+CSS对于门户网站来说改版就像换件衣服一样简单容易,改版时,不用改动全站HTML页面,只需要重新写CSS,再用新CSS覆盖以前的CSS就可以实现改版了。方便吧。

第三点,搜索引擎更友好,确实能够对SEO起到一定的帮助。

通过DIV+CSS对网页的布局,可以让一些重要的链接、文字信息,优先让搜索引擎蜘蛛爬取。这对于SEO也有帮助。

综上所述,个人感觉DIV+CSS不能太迷信它的很好很强大,它作为制作网页,美化网页的一个重要辅助是很强大方便的。可以弥补table制作框架和表格时的很多不足和美工上的缺点,但是完全只用它来做,太费时费力,对于全国中小型网站长来说,真的不太适合。我个人觉得用table+DIV+CSS是最好的组合,也是最省时省力的办法。

还需要再说明一下,本节讲得是Table布局页面和CSS布局页面的问题,讨论的是“布局页面”上用谁更好,并不是说在CSS布局的页面内不能用Table,真正厉害的人物是DIV、Table、CSS用得恰到好处,他们三个各做各的事情,DIV布局页面,Table存储数据,CSS给页面穿衣服!

第三章

xHTML+CSS与SEO的内容,后面章节会详细给大家介绍,这里就先说一些,让大家对xHTML+CSS与SEO有一定的认识,为后面制作页面打基础,毕竟我们做出来的页面还是要给搜索引擎看的,所以不能不提提xHTML+CSS与SEO的关系。

1)将页面中最重要的内容用h1标签括起来,h1的内容就和页面title很自然的包含了站点或者页面的核心关键词,搜索引擎很重视h1标签的内容哟

2)合理的运用h2、h3等标题标签,他们对于页面来说就是文章不同的等级或者不同的功能区域的标志性元素

3)页面meta信息不可忽视,一定要包含页面核心的内容

4)为了便于搜索引擎更方便的抓取,要尽可能的保证HTML页面代码纯净,强调一下,既然是xHTML+CSS布局页面,所以CSS代码要单独写在一个文件内,保证CSS部分和HTML 部分彻底分离;html页面中使用id和class,尽可能的避免style="";尽量使用标准的CSS 命名规范,从这里就可以看出你这个页面重构师是否专业哟;尽量使用CSS的缩写以节省代码,例如padding:10px 20px 10px 20px;缩写为padding:10px 20px;最好不要在HTML页面用font、center这种标签。

5)在HTML页面中strong标签是可以使用的,可以进一步强化关键词和相应的文字信息。

6)页面中的javascript代码会对搜索引擎分析页面内容产生干扰,可以将javascript 代码封装在一个.js文件中外部调用。

7)尽可能的加入alt注释,因为百度和google都有搜索图片的功能,如果加了alt,就更方便搜索蜘蛛的爬行,搜索相应关键词,就可能出现你网站上的图片,点击图片不就进入你的网站了嘛,就又多了点流量吧。

第四章

本节主要讲解,两个内容,

第一:CSS如何控制页面样式,有几种方式;

第二:这些方式出现在同一个页面时的优先级。

使用xHTML+CSS布局页面,其中有个很重要的特点就是内容与表象相分离,内容指HTML页面代码,表象就是CSS代码了,如果把页面看成穿着衣服的人的话,人就是HTML,是内容,而衣服呢就是CSS,是表

象,现在出现的问题是,如何让CSS去控制页面?或者说,如何让衣服穿在人身上,好体现出人得风格特点;不同的CSS就可以使页面出现不同的风格适用不同的网站,而不同的衣服,人穿上后就会体现

出不同的职业。

第一:如何让CSS去控制HTML页面效果呢?

有这么4种方式,行内方式、内嵌方式、链接方式、导入方式

1)行内方式

行内方式是4种样式中最直接最简单的一种,直接对HTML标签适用style="",例如:

1.

虽然这种方法比较直接,在制作页面的时候需要为很多的标签设置style属性,所以会导致HTML页面不够纯净,文件体积过大,不利于搜索蜘蛛爬行,从而导致后期维护成本高。

2)内嵌方式

内嵌方式就是将CSS代码写在之间,并且用进行声明,例如:

1.

"https://www.sodocs.net/doc/a67737408.html,/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2.

3.

4.

5.无标题文档

6.

12.

13.

14.

src="https://www.sodocs.net/doc/a67737408.html,/index/images/ico/2days.gif" />

15.全国的CSS爱好者汇聚于此,如果不来,你就OUT喽~我们的口号是:

16.“分享自己的欢乐与痛苦,分享自己的经验与心得,分享自己的资料与资源”

17.如果您也愿意,就加入我们吧~

18.

19.

内嵌方式,大家应该也能意识到,即使有公共CSS代码,也是每个页面都要定义的,如果一个网站有很多页面,每个文件都会变大,后期维护也大,如果文件很少,CSS代码也不多,这种方式还是很不错

的。

3)链接方式

链接方式是使用频率最高,最实用的方式,只需要在之间加上

1.

,就可以了,这种方式将HTML文件和CSS文件彻底分成两个

或者多个文件,实现了页面框架HTML代码与美工CSS代码的完全分离,使得前期制作和后期维护都十分方便,并且如果要保持页面风格统一,只需要把这些公共的CSS文件单独保存成一个文件,其他的页

面就可以分别调用自身的CSS文件,如果需要改变网站风格,只需要修改公共CSS文件就OK了,相当的方便,这才是我们xHTML+CSS制作页面提倡的方式。

HTML代码

1.

"https://www.sodocs.net/doc/a67737408.html,/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2.

3.

4.

5.无标题文档

6.

7.

8.

9.

src="https://www.sodocs.net/doc/a67737408.html,/index/images/ico/2days.gif" />

10.全国的CSS爱好者汇聚于此,如果不来,你就OUT喽~我们的口号是:

11.“分享自己的欢乐与痛苦,分享自己的经验与心得,分享自己的资料与资源”

12.如果您也愿意,就加入我们吧~

13.

14.

CSS代码

1.#div1{width:64px; height:64px; float:left;}

2.#div1 img{width:64px; height:64px;}

4)导入方式

导入样式和链接样式比较相似,采用import方式导入CSS样式表,在HTML初始化时,会被导入到HTML文件中,成为文件的一部分,类似第二种内嵌方式。

具体导入样式和链接样式有什么区别,可以参看这篇文章《CSS:@import与link的具体区别》,不过我还是建议大家用链接方式!

第二:四种样式的优先级

如果这上面的四种方式中的两种用于同一个页面后,就会出现优先级的问题,这里我就不再举例子来说明了,大家在下面自己证明一下下面的结论

四种样式的优先级别是(从高至低):行内样式、内嵌样式、链接样式、导入样式。

第五章

上节课我们讲了一下Css通过什么方式去控制页面,如果不记得,我来帮大家回忆一下,总共有四种方式行内方式、内嵌方式、链接方式、导入方式,大家通过这四种方式就可以实现CSS对HTML页面样式的控制,如果要让这些样式对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器,HTML页面中的元素就是通过CSS选择器进行控制的。

CSS选择器共有三种:标签选择器、ID选择器、类选择器。

为了后面的对选择器的解释更容易理解,在这里先打个比喻,如果把你所处的环境视为HTML页面的话,环境里的每一个人则相当于HTML页面内标签元素,每个人都有一个ID(身份证),那么html中的每一个标签也都有自己的ID,大家都知道ID是唯一的,不可能重复。

【标签选择器】

一个完整的HTML页面是有很多不同的标签组成,而标签选择器,则是决定哪些标签采用相应的CSS样式,(在大环境中你可能出于不同的位置,但是不管怎么样,你总是穿着同一套衣服,这件衣服就是由标签选择器事先给你限定好的,不管走到哪里都是这身衣服)比如,在style.css文件中对p标签样式的声明如下:

1.p{

2.font-size:12px;

3.background:#900;

4.color:090;

5.}

则页面中所有p标签的背景都是#900(红色),文字大小均是12px,颜色为#090(绿色),这在后期维护中,如果想改变整个网站中p标签背景的颜色,只需要修改background属性就可以了,就这么容易!

【ID选择器】

ID选择器在某一个HTML页面中只能使用一次(当然也可以用好几次,不过就不符合W3C 标准了,那页面也就不是标准页面喽~,咱们的目的不就是为了做标准的页面么,所以建议大家不要在同一个html页面中多个标签拥有共同的ID),就像在你所处的环境中,你只有一个ID(身份证),不可能重复!相信大家也能看出来,ID选择器更具有针对性,如:先给某个HTML页面中的某个p标签起个ID,代码如下:

1.

此处为p标签内的文字

在CSS中定义ID为one的p标签的属性,就需要用到#,代码如下:

1.#one{

2.font-size:12px;

3.background:#900;

4.color:090;

5.}

这样页面中的某个p就会是CSS中定义的样式。

【类选择器】

这种选择器更容易理解了,就是使页面中的某些标签(可以是不同的标签)具有相同的样式,就像国庆中某个方阵中,肯定都是不同的人,却均穿红色衣服,手中高举花环,样式都是一样的,如果想让这一类人都有共同的样式,该怎么做呢~呵呵,和ID选择器的用法类似,只不过把id换做class,如下:

1.

此处为p标签内的文字

如果我还想让div标签也有相同的样式,怎么办呢?加上同样的class就可以了,如下

1.

此处为p标签内的文字

这样页面中凡是加上class="one"的标签,样式都是一样的喽~CSS定义的时候和ID选择器差不多,只不过把#换成.,如下

1..one{

2.font-size:12px;

3.background:#900;

4.color:090;

5.}

补充:一个标签可以有多个类选择器的值,不同的值用空格分开,如:

1.

此处为p标签内的文字

这样我们可以将多个样式用到同一个标签中,当然也可以,ID和class一块用

1.

此处为p标签内的文字

2.

【通用选择器】

到这里,前三种基本的选择器说完了,但是还需要给大家介绍一个CSS选择器中功能最强大但是用的最少的一种选择器“通用选择器”

1.*{此处为CSS代码}

强大之处是因为他对父级中的所有HTML标签进行样式定义,可对具有共同样式的标签样式进行定义(有点小学数学中的提取公因式),这样可以大大精简代码;既然有这么强大的功能为什么是用的最少呢,同样还是因为他的强大,他是对父级元素内的所有标签进行定义,所以只要你定义了,那么父级里面的所有的标签,甭管有没有必要,也都相当于加上了通用选择器里面的代码了,能这么说大家不能够完全理解,没关系,我给大家举个例子,请看下面

1.

"https://www.sodocs.net/doc/a67737408.html,/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2.

3.

4.

5.无标题文档

6.

14.

15.

16.

17.

这里是p标签区域

18.

这里是a标签区域

19.

20.

21.

这里是p标签区域

22.

这里是a标签区域

23.

24.

25.

大家运行一下上面的例子,div1里面的两个标签是不是样式一样,这就是通用选择器的强大之处,不管里面有多少个标签都会将样式加到所有标签内,如果div1里面得所有的标签都有一部分相同的CSS代码,那么可以把这部分代码提取出来,用通用选择器来定义,这样可以大大缩减代码,但是如果div1里面只要有一个和其他元素没有相同的代码,就不能用通用选择器来定义,这也就是CSS通用选择器不灵活的一点。现在大家明白为什么通用选择器是选择器里面功能最强大的但又是用的最少的选择器了吧~~呵呵

对于通用选择器还有一个不得不提的用法,就是为了保证作出的页面能够兼容多种浏览器,所以要对HTML内的所有的标签进行重置,会将下面的代码加到CSS文件的最顶端

1.*{margin:0; padding:0;}

为什么要这么用呢,因为每种浏览器都自带有CSS文件,如果一个页面在浏览器加载页面后,发现没有CSS文件,那么浏览器就会自动调用它本身自带的CSS文件,但是不同的浏览器自带的CSS文件又都不一样,对不同标签定义的样式不一样,如果我们想让做出的页面能够在不同的浏览器显示出来的效果都是一样的,那么我们就需要对对HTML标签重置,就是上面的代码了,但是这样也有不好的地方,因为HTML4.01中有89个标签,所以相当于在页面加载CSS的时候,先对这89个标签都加上了{margin:0; padding:0;},在这里我不建议大家这么做,因为89个标签中需要重置的标签是很少数,没有必要将所有的标签都重置,需要哪些标签重置就让哪些标签重置就可以了,如下

1.body,div,p,a,ul,li{margin:0; padding:0;}

如果还需要dl、dt、dd标签重置,那就在上面加上就可以了,如下

1.body,div,p,a,ul,li,dl,dt,dd{margin:0; padding:0;}

用到那些就写那些,这点也可以看做衡量页面重构师制作页面水平的高低,以及是否专业的一个方面到这里大家更应该明白这句话“通用选择器是功能最强大但是用的最少的选择器”了吧~^_^

OK!选择器的内容我向大家应该都明白了,后面就继续讲解一下“选择器的集体声

明”和“选择器的嵌套”

【选择器的集体声明】

在我们使用选择器的时候,有些标签样式是一样的,或者某些标签都有共同的样式属性,我们可以将这些标签集体声明,不同的标签用“,”分开,比如:

1.h1,h2,h3,h4,h5,h6{color:#900;}

1.#one,#three,.yellow{font-size:14px;}

2.#one{background:#ccc;}

3.#three{background:#ccc;}

4..yellow{background:#ccc;}

和小学的提取公因式差不多,把共同的部分提取出来,这么做的好处,相同的部分共同定义,不同的部分单独定义,保证风格统一,样式修改灵活,这也是优化CSS代码的一块,要记住哟~

【选择器的嵌套】

选择器也是可以嵌套的,如:

1.#div1 p a{color:#900;}/*意思是在ID为div1

2.内的p标签内的链接a标签的文字颜色为红色*/

这样的好处就是不需要在单独的为ID为div1的标签内的p标签内的a标签单独定义class选择器或者ID选择器,CSS代码不就少了嘛~同样也是CSS代码优化的一块。

到这里,基本的选择器说完了,但是还需要给大家介绍一个“通用选择器”

1.*{此处为CSS代码}

好,这节课主要讲解了三种CSS代码选择器、选择器的声明、选择器的嵌套三块知识,要掌握好,如果有不懂,可以留言。

第六章

规范的命名也是Web标准中的重要一项,标准的命名可以更好的看懂代码,我想大家应该都有这种经历,某日翻出自己过去写的代码居然看不懂了,呵呵,为了避免这种情况我们就要规范化命名,再说了,现在一个项目不是一个人就可以完成的,是需要大家互相合作的,如果没有规范化命名,别人就无法看懂你的代码,大大降低了工作效率,所以必须规范化命名,这样还显着咱专业!

好了不多说了,关于CSS命名法,和其他的程序命名差不多,也是有三种:骆驼命名法,帕斯卡命名法,匈牙利命名法。

【骆驼命名法】

说到骆驼大家肯定会想到它那明显的特征,背部的隆起,一高一低的,我们的命名也要这样一高一低,怎么才能这样,就用大小写字母呗~,大写的英文就相当于骆驼背部的凸起,小写的就是凹下去的地方了,但是这个也是有规则的,就是第一个字母要小写,后面的词的第一个字母就要用大写,如下:

1.#headerBlock

2..navMenuRedButton

【帕斯卡命名法】

这种命名法同样也是大小写字母混编而成,和骆驼命名法很像,只有一点区别,就是首字母要大写,如下

1.#HeaderBlock

2..NavMenuRedButton

【匈牙利命名法】

匈牙利命名法,是需要在名称前面加上一个或多个小写字母作为前缀,来让名称更加好认,更容易理解,比如:

1.#head_navigation

2..red_navMenuButton

以上三种,前两种(骆驼命名法、帕斯卡命名法)在命名CSS选择器的时候比较常用,当然这三种命名法可以混合使用,只需要遵守有一个原则就可以,就是“容易理解,容易认,方便协同工作”就OK了,没有必要强调是那种命名法。

以下为于页面模块的常用命名

头:header

内容:content/container

尾:footer

导航:nav

侧栏:sidebar

栏目:column

页面外围控制整体布局宽度:wrapper

左右中:left right center

登录条:loginbar

标志:logo

广告:banner

页面主体:main

热点:hot

新闻:news

下载:download

子导航:subnav

菜单:menu

子菜单:submenu

搜索:search

友情链接:friendlink

页脚:footer

版权:copyright

滚动:scroll

内容:content

到这节课,都是CSS非常基础的知识,是为了照顾没有一点基础的同学,从下节课开始,将介绍CSS布局页面中的很重要的两个概念,也是必须要掌握的概念,如果不能很好理解的话后面再布局页面的时候就会出现很多问题。

第七章

盒模型,是XHTML+CSS布局页面中的核心!是关系到设计中排版定位的关键,都遵循盒模型规范,例如

……盒模型包含

(外边距)margin,(内边距)padding ,(内容)content,(边框)border。

下图是CSS盒模型的示意图

这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也具有这些属性,所以叫它盒子模式。那么内容就是盒子里装的东西;而填充就是怕盒子里装的东西(贵重的)损坏而添加的泡沫或者其它抗震的辅料;边框就是盒子本身了;至于边界则说明盒子摆放的时候的不能全部堆在一起,要留一定空隙保持通风,同时也为了方便取出嘛。在网页设计上,内容常指文字、图片等元素,但是也可以是小盒子(DIV嵌套),与现实生活中盒子不同的是,现实生活中的东西一般不能大于盒子,否则盒子会被撑坏的,而CSS盒子具有弹性,里面的东西大过盒子本身最多把它撑大,但它不会损坏的。填充只有宽度属性,可以理解为生活中盒子里的抗震辅料厚度,而边框有大小和颜色之分,我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的,边界就是该盒子与其它东西要保留多大距离。在现实生活中,假设我们在一个广场上,把不同大小和颜色的盒子,以一定的间隙和顺序摆放好,最后从广场上空往下看,看到的图形和结构就类似我们要做的网页版面设计了,如下图

由“盒子”堆出来的网页版面

传统的前台网页设计是这样进行的:根据要求,先考虑好主色调,要用什么类型的图片,用什么字体、颜色等等,然后再用Photoshop这类软件自由的画出来,最后再切成小图,再不自由的通过设计HTML生成页面,改用CSS排版后,我们要转变这个思想,此时我们主要考虑的是页面内容的语义和结构,因为一个强CSS控制的网页,等做好网页后,你还可以轻松的调你想要的网页风格,况且CSS排版的另外一个目的是让代码易读,区块分明,强化代码重用,所以结构很重要。如果你想说我的网页设计的很复杂,到后来能不能实现那样的效果?我要告诉你的是,如果用CSS实现不了的效果,一般用表格也是很难实现的,因为CSS的控制能力实在是太强大了,顺便说一点的是用CSS排版有一个很实用的好处是,如果你是接单做网站的,如果你用了CSS排版网页,做到后来客户有什么不满意,特别是色调的话,那么改起来就相当容易,甚至你还可以定制几种风格的CSS文件供客户选择,又或者写一个程序实现动态调用,让网站具有动态改变风格的功能。

第八章

我们先来分析一下块级元素、内联级元素的定义和解析:

块元素(block element)一般是其他元素的容器元素,块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"。“form"这个块元素比较特殊,它只能用来容纳其他块元素。

如果没有css的作用,块元素会顺序以每次另起一行的方式一直往下排。而有了css以后,我们可以改变这种html的默认布局模式,把块元素摆放到你想要的位置上去。而不是每次都愚蠢的另起一行。需要指出的是,table标签也是块元素的一种,table based layout和cssbased layout从一般使用者(不包括视力障碍者、盲人等)的角度来看这两种布局,除了页面载入速度的差别外,没有其他的差别。但是如果普通使用者不经意点了查看页面源代码按钮后,两者所表现出来的差异就非常大了。基于良好重构理念设计的css

布局页面源码,至少也能让没有web开发经验的普通使用者把内容快速的读懂。从这个角度来说,css layout code应该有更好的美学体验。

你能够把块容器元素div想象成一个个box,或者如果你玩过剪贴文载的话,那就更加容易理解了。我们先把需要的文章从各种报纸、杂志总剪下来。每块剪下来的内容就是一个block。然后我们把这些纸块按照自己的排版意图,用胶水重新贴到一张空白的新纸上。这样就形成了你自己独特的文摘快报了。作为一种技术的延伸,网页布局设计也遵循了同样的模式。

内联元素(inline element)一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素,常见内联元素“a”。

需要说明的是:inline element的中文叫法,有多种内联元素、内嵌元素、行内元素、直进式元素。基本上没有统一的翻译,爱怎么叫怎么叫吧。另外提到内联元素,我们会想到有个display的属性是display:inline;这个属性能够修复著名的IE双倍浮动边界问题。

块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。而当加入了css控制以后,块元素和内联元素的这种属性差异就不成为差异了。比如,我们完全可以把内联元素cite加上display:block这样的属性,让他也有每次都从新行开始的属性。

块元素(block element)

·address - 地址

·blockquote - 块引用

·center - 举中对齐块

·dir - 目录列表

·div - 常用块级容易,也是css layout的主要标签

·dl - 定义列表

·fieldset - form控制组

·form - 交互表单

·h1 - 大标题

·h2 - 副标题

·h3 - 3级标题

·h4 - 4级标题

·h5 - 5级标题

·h6 - 6级标题

·hr - 水平分隔线

·isindex - input prompt

·menu - 菜单列表

·noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容)·noscript - 可选脚本内容(对于不支持script的浏览器显示此内容)

·ol - 排序表单

·p - 段落

·pre - 格式化文本

·table - 表格

·ul - 非排序列表

内联元素(inline element)

·a - 锚点

·abbr - 缩写

·acronym - 首字

·b - 粗体(不推荐)

·bdo - bidi override

·big - 大字体

·br - 换行

·cite - 引用

·code - 计算机代码(在引用源码的时候需要)

·dfn - 定义字段

·em - 强调

·font - 字体设定(不推荐)

·i - 斜体

·img - 图片

·input - 输入框

·kbd - 定义键盘文本

·label - 表格标签

·q - 短引用

·s - 中划线(不推荐)

·samp - 定义范例计算机代码

·select - 项目选择

·small - 小字体文本

·span - 常用内联容器,定义文本内区块

·strike - 中划线

·strong - 粗体强调

·sub - 下标

·sup - 上标

·textarea - 多行文本输入框

·tt - 电传文本

·u - 下划线

·var - 定义变量

当内联元素,在CSS中定义下列属性中的一种,便具有块元素的特征

1)display:block;

2)float:left; (不但具有块元素的特征,同时像左侧浮动)

但是这时候的内联元素,虽然具有块状元素的特征,但是这两种有一点区别,第一种,彻头彻尾和块元素一模一样,都要单独占一行,从左至右,前提没有width和height属性,严格遵循流动布局模型块状元素的流动方式,自上至下流动,第二种,大小是恰好能将内容包含,并且右侧浮动,可以多个在一行。

当加上position:absolute/relative的时候,块状元素和内联元素,就不受父级区域的限制了,可以移动到任何位置,此时如果加上width和height属性,那么就具有层的特

相关主题