DIVCSS基础教程全攻略.docx

《DIVCSS基础教程全攻略.docx》由会员分享，可在线阅读，更多相关《DIVCSS基础教程全攻略.docx（63页珍藏版）》请在课桌文档上搜索。

1、2天驾驭DIVCSS网页制作技术基磁上础】D1VCSS的叫法是不粕确的【总础.】运用Table布脑是不明智的【与础：】XHTM1.YSS及SEO【基整四】CSS如何限11g面【搠8五】CSS选择黝【蛙础六】CSS选择四命名及*;用命名【装础七】自-f模基【基础八】块状元素和内联元素售程【第一课】自桎型，块状元率及内联兀宏、CSS选择遇【其次课】浮动【第：.课】消除泞动【第四课】导航条【第裸】浮动(float)页面布局【第六节】定位【第匕吊】定应用【第八课】CSSHaCk小技巧【取张图片按钮丈例】【首行文学的文字渐进】DIV+CSS网页制作这种叫法不精确2010-01-0115:29:25来源C

2、SS学习网网页制作NebjX文章简介：DIV+CSS的叫法是不精确的.DIV-KSS的叫法是不精确的我想凡是来到“CSS学习网”的同学，很大部分是冲着DIVySS来的，H的就是学习DIY+CSS的，说的再干脆一些就是学习如何用DIVmSS布局页面，如何从一张图片制作成标准的DIV+CSS页面。假如你看完第一段还没有发觉错误的话，那你就很有必要，接着往下看D1V+CSS这种叫法其实是一种很错误的叫法，这是国人一厢情愿的叫法，而标准的叫法是什么呢？呵呵，没错,是xHTM1.+CSS,不理解吧，我来细细给你说，假如卜.面的你能理解，保证面试的时候会有很大的帮助，同时也可以让你后面的学习更轻松。为什么

3、国人将这种页面布局的方法叫做DIV+CSS?因为过去布局页面基本上都是用TabIe布局，也可以说是TabIe+CSS,而现在布局页面呢，用DIV,所以叫DIVCSS,听起来也挺合理，认为这样布局出来的页面也就是标准页面，甚至有些人走/个极端，看到其他网站用到TabI0,就会讪笑页面做的不够标准，好像用不用TabIe成为了页面是否标准的一个标尺。现在我可以告知大家，凡是有着这种行为的，都学得不咋样，很皮毛！用Table页面就不标准了?!纯粹无稽之谈，那什么才是标准页面呢？先看一个专业概念，WEB标准，然后我会问三个问题，你来回答：REB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组

4、成：结构(Structure)表现(Presentation)和行为(Behavior)对应的标准也分三方面:结构化标准语言主要包括XUTM1.和XM1.,表现标准语言主要包括CSS,行为标准主要包括对象模型(如W3CDOM)、ECMASCriPl等。这些标准大部分由W3C起草和发布，也有些是其他标准组织制订的标准，比如ECMA(EuropeanComputerManufacturersAssociation)的ECMASCriPt标准。看明白没有？问题来门先不要看答案，从上面的概念中找出问题一：KEB标准有几部分组成？问题二：结构化标准语言是什么？问题三：表现标准语言是什么？答案一：三部分，

5、结构、表现、行为答案二：XHTM1.和XM1.答案三：CSS看完上面三个问题，哪什么是标准页面呢？呵呵,说白了就是依据WEB标准制作的页面,从其次个问题和第三个问题中,我们又可以说，用XHTM1.和CSS制作的页面就是标准页面，也就是说XHTM1.+CSS制作的页面就是标准页面。怎么样，理解了吧为什么不说XM1.心呢？很简洁，因为W1.过手困难.且当前的大部分阅读器都不完全支持XM1.所以就不用它来布局页面喽！既然XHTN1.+CSS制作页面就是标准页面了，乂因为XHTy1.中不只有DIV标签,还有Span、p、a、ukli,dl.dt.dd.,即使我不用DIV,用其他标签(比如:U1.Ii)

6、制作出来的页面也是标准页面！所以说用D1V+CSS来制作标准页面这句话就很狭隘喽!假如满屏全部都是DIV那也鸵不上标准页面，曾经由一个挚友告知我，说他的页面全部用的DIV,每个模块，每个功能区域，就连条线都是纯DIV实现，并JI相当骄傲的告知我，没有人比他做的页面更标准的广，他不但对WEB标准页面的理解有差错还犯/一个很大的错误，XHTM1.中的每一个标签都有其作用,各司其职,各守其责,要用的恰到好处，这才算是标准页面，DlV不是万能的哟！说到这里大家应当明白，这种ITebNO时代的布局页面的方法，叫DIVgS是不精确的，应当叫XHni1.Kss凡是看到这节的同学们，以后尽可能说XHTmySS

7、,不要再说DN+CSS喽，假如非要说，也要加上一句说明哟，比如面试官：你对D1V+CSS了解么？应聘者:D1V+CSS精说的说应当叫XHTM1.CSS,我对这种页面布局方法特别了解！假如你是面试官,你对这个应聘者，感觉如何呢？呵呵呵运用table布局网页不明智2010-01-0115:31:19来源:CSS学习网网页制作呢bjx文章简介：运用Table布局页面为什么是不明智的？运用Table布局页面为什么是不明智的？大家看到标题，不要误会认为在页面中不能运用Table,而是可以运用Table,但是尽量不要用TabIe去布局页面，为什么这么说呢.因为运用Table布局页面会使页面失去敬捷性，怎么

8、个敏疣法呢，比如今日你好不简洁做出来的页面，其次大老板说我不喜爱登录模块放到右边，还是放到左边，通知板块放到右侧去，页面风格最好一个月换一种，假如遇到这种老板，提出这种要求，并且你的页面是用TabIe布局的，那么你会崩溃的，工作量那是大大滴！，假如不信任的话，你们自己可以找个页面,用TabIe布局出来，然后变换板块和风格，你就会体会到TabI。布局的不敏捷性，这是为什么呢，因为Table的诞生是为存储数据用的,功能和EXeCel差不多，不是用来布局用的,只不过后来大家发觉用Table可以把想放的页面元素，比如图片，放到任何自己想放的地方，口做出来的页面可以兼容多种阅读器，于是Table就担当起

9、了布局页面的重担，这一做就是好几年直到Web2.0时代的到来，Table才从布局页面的工作中渐渐解脱，用心的去存储数据二”既然TabIe是为存储数据诞生的，那谁的诞生是为了页面布局嗯？答案就是:DIV.DIY就是为布局页面而诞生的，只不过始终不被人认同,绥由就是DlV去布局页面须要CSS的协作，运用比较繁琐，还不如TUbIe拖拖拽拽页面就布局OK了，感觉还不如TabIe便利，从而DlV被人们放置在一个无人问津的昏暗角落里，暗暗的等待若伯乐的出现,直到2003年美国加州SCOttDesign公司参与了在旧金山举办的有关网页排版和设计的一个研讨会上的演讲，使DIY看到了阳光，走出了阴箱说了那么多，

10、我们对比一下Table布局页面和DIV布局页面的优缺点运用表格进行页面布局会带来很多问题：* 把格式数据混入你的内容中.这使得文件的大小无谓地变大,而用户访问每个页面时都必需卜.栽一次这样的格式信息,带宽并非免费。* 这使得重新设计现有的站点和内容极为消耗劳力（且品货几* 这还使我们保持整个站点的视觉的一样性极难，花费也极高.* 基于表格的页面还大大降低了它对残疾人和用手机或PDA阅读者的亲和力，而运用CSS进行网页布局，它会：* 使你的页面我入得更快* 降低你的流信费用* 让你在修改设计时更有效率而代价更低* 梢助你的整个站点保持视觉的一样性* 让你的站点可以更好地被搜寻引擎找到* 使你的站

11、点对阅读者和阅读器更具亲和力* 在世界上越来越多人采纳Web标准时，它还能提高你的职场竞争实力(事实上也就是降低失业的风险)。网上有篇文章，转过来，文章着重介绍DIY三点优势,或许看完文章后，就像社区元老hefIyaway说的感觉作者比较痴迷TabIC,每篇文章都不行避开的带有个人色调，而转出来的目的，其实就是想给大家降降DlWCSS的温度，免得“走火入魔”，视D1V+CSS是为万能的，假如想学好CSS布局页面，就要从多个方面看它，好了，不多说了，下面是作者对CSS布局页面的三点优势及理解：1、内容和形式分别，网页前台只须要显示内容就行，形式上的美工交给CSS来处理。生成的HTM1.文件代码精

12、简，更小打开更快。2、改版网站更简洁简洁了，不用重新设计排版网页，甚至于不用动原网站的任何HTM1.和程序页面,只须要改动CSS文件就完成了全部改版。对于门户网站来说改版就像换件衣服一样简洁简洁.3、搜寻引擎更友好，排名更简洁靠前。第一点、内容和形式分别网页前台只须要显示内容就行，形式上的美工交给CSS来处理。生成的HTM1.文件代码精简,更小打开更快“这个是I)IV+CSS技术最显著的特点，也是CSS存在的根源。完全的演粮现在传统(table)网页设计的技术。全部现在用table制作的内容，都可以用CSS来解决掉,而且解决的更完备，更强大。不须要大家再表格套表格，让生成的网页文件大小更精简，

13、更小。Iable时代,一个页面表格达到10个以上是特别普遍的事情,但是现在用DIYKSS,一个table都可以不用，就完全达到之前的效果，这就干脆导致网页文件大小比运用table时削减50%-80更节约各位站长的馍盘空间，访问者打开网页时更快，而且用div+CSS时,不像以往运用table时，必需把全部table读取完了才显示页面内容,现在是可以读一个di，就显示一个效果,大家打开网页不用等.好处真是明显而强大。这个优点的确是显著的，凡是运用传统IUbIe建的网页，内容多的话，有时候达到30K左右都有可能,文件打了打开时，确定就有0.0几杪的延迟。运用DIV+CSS,你前台打开看到的全是干脆内

14、容，CSS文件都是导入链接的，是另一个文件，根本和HTM1.文件大小没关系，这种生成的HTM1.文件,一个也就IOK左右大小。其次点，改版网站更倚洁筒洁了不用重新设计排版网页，甚至丁不用动原网站的任何HTM1.和程序如面，只须要改动CSS文件就完成了全部改版。DIV+CSS对于门户网站来说改版就像换件衣服一样简洁简洁，改版时，不用改动全站HPl1.页面,只须要重新写CSS,再用新CSS圈盖以前的CSS就可以实现改版了。便利吧.第三点，搜寻引擎更友好，的确能够对SEO起到确定的帮助.通过DIVCSS对网页的布局，可以让些重要的链接、文字信息，优先让搜寻引擎蜘蛛爬取“这对T-SEO也有帮助.综上所

15、述，个人感觉D1V+CSS不能太迷信它的很好很强大，它作为制作网页，美化网页的个重要协助是很强大便利的。可以弥补table制作框架和表格时的很多不足和美工上的缺点，但是完全只用它来做，太费时贽劲，对于全国中小型网站长来说，真的不太适合。我个人觉得用Iable+D1V+CSS是最好的组合，也是最省时省力的方法。还须要再说明一下，本节拼得是Table布局页面和CSS布局页面的问题，探讨的是“布局页面”上用燧更好，并不是说在CsS布局的页面内不能用TabIe,真正厉害的人物是DIV.Table,CSS用得恰到好处，他们三个各做各的事情，DlV布局页面，Table存储数据，CsS给页面穿衣IUxHTM

16、1.+CSS网页制作和搜寻引擎优化SEO的关系2010-01-0115:32:31来源CSS学习网网页制作WebjX文章简介:xHW1.+CSS及SEO的内容,后面章节会具体给大家介绍，这里就先说一些，让大家对XHTM1.+CSS及SEo有确定的相识，为后面制作页面打基础，终归我们做出来的页面还是要给搜寻引箓看的，所以不能不提提XHTM1.+CSS及SEO的关系。XHTmySS及SEO的内容，后面章节会具体给大家介绍，这里就先说些，让大家对xHTM1.+CSS及SEO有确定的相识，为后面制作页面打基础，终归我们做出来的页面还是要给搜寻弓I擎看的，所以不能不提提xliTM1.CSS及SEO的关系

17、。D将页面中最重要的内容用hl标签括起来，hl的内容就和页面title很自然的包含了站点或者页面的核心关键词，搜寻引擎很重视hl标签的内容哟2）合理的运用h2、h3等标题标签，他们对于页面来说就是文章不同的等级或者不同的功能区域的标记性元素3）页面meta信息不行忽视，确定要包含页面核心的内容4）为f便于搜寻引挈更便利的抓取，要尽可能的保证HTM1.页面代码纯净，强调一下，既然是xHTM1.+CSS布局页面，所以CSS代码要单独写在一个文件内，保证CSS部分和HW1.部分彻底分别:html页面中运用id和ClHSs,尽可能的避开SIyle=尽量运用标准的CSS命名规范,从这里就可以看出你这个页

18、面重构师是否专业哟:尽量运用CSS的缩写以节约代码,例如padding:IOpx20pxIOpx20px:缩写为padding:IOpx20px;最好不要在HTM1.页面用font、Center这种标签。5）在HTM1.页面中StrOng标签是可以运用的，可以进一步强化关篌词和相应的文字信息。6页面中的javascript代码会对搜寻引擎分析页面内容产生干扰，可以将javascript代码封装在个.js文件中外部调用。7)尽可能的加入all注释，因为百度和google都有搜？图片的功能，假如加了alt,就更便利搜寻蜘蛛的爬行，搜寻相应关键词，就可能出现你网站上的图片，点击图片不就进入你的网站了

19、嘛，就乂多了点流星吧。CSS限制页面样式的4种方式和优先级问题2010-01-0115:33:58来源CSS学习网网页制作WebjX文口M介：第一：CSS如何限制页面样式，有几种方式；其次：这些方式出现在同个页面时的优先级。本节主要讲解，两个内容，第一：CSS如何限制页面样式，有几种方式I其次：这些方式出现、在同一个页面时的优先破.运用XHTM1.+CSS布局页面，其中有个很重：要的特点就是内容及表象相分别，内容指HTM1.页面代码，表象就是CSS代码了，假如把页面看成穿着衣服的人的话，人就是HTM1.,是内容，而衣服呢就是CSS,是表望，现在出现的问题是,如何让CSS去限制页面？或者说，如何

20、让衣服穿在人身上，好体现出人得风格特点：不同的CSS就可以使页面出现不同的风格适用不同的网站，而不同的衣服，人穿上后就会体现出不同的职业。第一：如何让CSS去限制HlM1.页面效果呢？有这么4种方式，行内方式、内嵌方式、链接方式、导入方式1)行内方式行内方式是4种样式中最干脆最简洁的一种，干脆对HTH1.标签适用StyIO=例如：虽然这种方法比较干脆，在制作页面的时候须要为很多的标签设置StylC属性,所以会导致HTH1.页面不够纯净，文件体积过大，不利丁搜寻蜘蛛爬行，从而导致后期维护成本尚。2)内微方式内嵌方式就是将CSS代码写在hcadXhead之间，并且用style进行声明，例如：无标题

21、文档/1屋1全国的CSS爱好者汇聚于此，假如不来，你就OUT喽!我们的口号是：“共享自己的快乐及苦和，共享自己的阅历及心得，共享自己的资料及资源”假如您也情愿，就加入我们吧！内战方式，大家应当也能意识到，即使有公共CSS代码，也是每个页面都要定义的，假如个网站有很多页面，每个文件都会变大，后期维护也大，假如文件很少，CSS代码也不多，这种方式还是很不错的3)倍接方式链接方式是运用频率最悬，最好用的方式，只须要在之间加上.就可以了，这种方式招HTM1.文件和CSS文件彻底分成两个或者多个文件，实现了页面框架HTM1.代码及美工CSS代码的完全分别，使得前期制作和后期维护都特别便利,并且假如要保持

22、页面风格统、只须要把这些公共的CSS文件单独保存成个文件，其他的页面就可以分别调用自身的CSS文件，假如须要变更网站风格，只须要修改公共CSS文件就OK了，相当的便利，这才是我们XHTM1.ySS制作页面提倡的方式。HTM1.代码DOCTYPEhtmlPUB1.IC-W3CDTDXHTM1.1.0TransitionalENCtitIe无标题文档全国的CSS爱好者汇聚于此，假如不来，你就OUT喽!我们的口号是：“共享自己的快乐及苦弼，共享自己的阅历及心得，共享自己的资料及资源”假如您也情愿，就加入我们吧！CSS代码#divlwidth64px;height:64px：float:left;Pd

23、ivlimg(width:64px;height:64px：4)导入方式导入样式和链接样式比较相像，采纳imporl方式导入CSS样式表，在HTM1.初始化时，会被导入到Hnl1.文件中，成为文件的一部分，类似其次种内嵌方式。具体导入样式和链接样式仃什么区分，可以参看这篇文章NCSSMimport及link的具体区分，不过我还是建议大家用锥按方式！其次】四种样式的优先级假如这上面的四种方式中的两种用丁同一个页面后，就会出现优先级的问题，这里我就不再举例子来说明白，大家在下面自己证明一下下面的结论四种样式的优先级别是（从高至低）：行内样式、内嵌样式、健按样式、导入样式CSS选择器2010Ol-O

24、l15:38:28来源CSS学习网网页制作Wobjx文经简介：上节课我们讲了一下CSS通过什么方式去限制页面，假如不记得，我来帮大家回忆一卜.，总共有四种方式行内方式、内嵌方式、琏接方式、导入方式，大家通过这四种方式就可以实现CSS对HPl1.页面样式的限制，假如要让这些样式对HTM1.页面中的元素实现一对一，一对多或者多对一的控上节课我们讲一下CSS通过什么方为限制页面假如不记得，我来帮大家【可忆一下，总共有四种方式行内方式、内嵌方式、链接方式、导入方式，大家通过这四种方式就可以实现CSS对Hnl1.页面样式的限制，假如要让这些样式对HTM1.页面中的元素实现对.一对多或者多对的限制，这就须

25、要用到CSS选择器，H口I1.页面中的元素就是通过CSS选择器进行限制的“CSS选择器共有三种：标笠选择器、ID选算器、类选舞器为了后面的对选择罂的说明更简洁理解，在这里先打个比方，假如把你所处的环境视为HTM1.页面的话，环境里的每个人则相当于HTY1.页面内标签元素，每个人都有个IM身份证）,那么html中的每一个标签也都有自己的ID,大家都知道ID是唯一的,不行能重嵬。【标签选择卷】个完整的HTM1.页而是有很多不同的标签组成，而标签选择罂，则是确定哪些标签采纳相应的CSS样式，（在大环境中你可能出于不同的位置，但是不管怎么样，你总是穿着同一套衣服，这件衣服就是由标签选择器事先给你限定好

26、的，不管走到哪里都是这身衣服）比如，在Style.css文件中对P标签样式的声明如K：p（font-size:12px;background:#900;color:090:）则页面中全部P标签的背景都是#900（红色），文字大小均是12px,颜色为的90（绿色），这在后期维护中，假如想变更整个网站中P标签背景的颜色，只须要修改background属性就可以了，就这么简洁！【ID选择器】ID选择器在某一个HTm页面中只能运用一次（当然也可以用好几次,不过就不符合K3C标准了，那页面也就不是标准页面喽！，咱们的目的不就是为了做标准的页面么，所以建议大家不要在同一个himl页面中多个标签拥有共同的I

27、D）,就像在你所处的环境中，你只有一个身份证），不行能全豆！信任大家也能看出来，ID选择器更具有针对性，如：先给某个HTM1.页面中的某个p标签起个ID,代码如下：此处为P标签内的文字在CSS中定义ID为one的P标签的属性,就须要用到#,代码如下：#onefont-size:12px：background:#900：color:090;）这样页面中的某个P就会是CSS中定义的样式。【她神】这种选择潺更简洁理解了，就是使页面中的某些标签（可以是不同的标签具有相同的样式，就像国庆中某个方阵中，确定都是不同的人，却均穿红色衣服，手中高举花环，样式都是一样的，假如想让这一类人都有共同的样式，该怎么做

28、呢!呵呵，和ID选择器的用法类似，只不过把id换做CIaSs,如下：此处为P标签内的文字假如我还想让div标签也仃相同的样式，怎么办呢？加上同样的CIaSS就可以了，如下divCIaSS=one此处为p标卷内的文字这样页面中凡是加上ClaSS=one”的标签,样式都是一样的喽!CSS定义的时候和ID选择罂差不多，只不过把，换成.，如下.one（font-size:12px:background:900：color:090:）补充:一个标签可以有多个类选择器的值，不同的值用空格分开，如：divCIaSS=oneyellowIeftStyleD此处为P标签内的文字这样我们可以将多个样式用到同个标签

29、中，当然也可以，ID和ClaSS块用此处为P标签内的文字【通用选算卷】到这里，前三种基本的选择器说完了，但是还须要给大家介绍个CSS选择器中功能最强大但是用的最少的一种选择器“通用选择器”*（此处为CSS代码）强大之处是因为他对父级中的全部HTM1.标签进行样式定义，可对具有共同样式的标签样式进行定义（有点小学数学中的提取公因式），这样可以大大精简代码：既然有这么强大的功能为什么是用的最少呢，同样还是因为他的强大，他是时父级元素内的全部标绘进行定义，所以只要你定义了，那么父级里面的全部的标若，甭管有没有必要，也都相当于加上了通用选择器里面的代码了，能这么说大家不能够完全理解，没关系，我给大家举

30、个例子、请看下面!DOCTYPEhtmlPUB1.IC-W3CDTDXHTM1.1.0TransitionalEN*head无标题文档/title)9这里是P标签区域div这里是a标签区域这里是P标签区域这里是a标卷区域大家运行一下上面的例子，divl里面的两个标签是不是样式一样，这就是通用选择器的强大之处，不管里面有多少个标签都会将样式加到全部标签内，假如divl里面得全部的标签都有部分相同的CSS代码,那么可以把这部分代码提取出来，用通用选择器来定义，这样可以大大缩减代码，但是假如divl里面只耍有一个和其他元素没有相同的代码，就不能用通用选择器来定义，这也就是CSS通用选择器不敏然的一点

31、。现在大家明白为什么通用选择器是选择潺里面功能最强大的但又是用的最少的选择涔了吧，呵呵对于通用选择器还有一个不得不提的用法，就是为了保证作出的页面能够兼容多种阅读落，所以要对HTM1.内的全部的标签进行重置，会将卜.面的代码加到CSS文件的最顶端* (margin:0：padding:。：为什么要这么用呢，因为每种阅读器都自带有CSS文件，假如一个页面在阅读器加载页面后，发觉没有CSS文件，那么阅读器就会自动调用它本身自带的CSS文件，但是不同的阅读器自带的CSS文件乂都不样，对不同标签定义的样式不样,假如我们想让做出的页面能够在不同的阅读器显示出来的效果都是一样的.那么我们就须要对对HTM1

32、.标铝重:置.，就是上面的代码了，但是这样也有不好的地方因为IrrMiAoI中有89个标签，所以相当于在页面加载CSS的时候，先对这89个标签都加上了(margin:。;padding:。：,在这里我不建议大家这么做，因为89个标签中须要重置的标签是很少数，没有必耍将全部的标签都重置，须要哪些标签重置就让哪些标签重置就可以1.如下body,div,p,a,ul,Iinargin:0;Padding:0;)假如还须要di、dt、dd标签重置，那就在上面加上就可以了，如卜.body,div,p,alul,Ii,dl,dt.ddmargin:O：Padding:0;)用到那些就写那些，这点也可以看做

33、衡量页面重构师制作贞面水平的凹凸，以及是否专业的一个方面到这里大家更应当明白这句话“通用选择器是功能最强大但是用的最少的选择器了吧！IOKJ选择器的内容我向大家应当都明白了，后面就接着讲解-卜.“选舞器的集体声明”和“选择器的嵌套”【选择器的集体声明】在我们运用选择器的时候，有些标签样式是一样的，或者某些标签都有共同的样式属性，我们可以将这些标签集体声明，不同的标签用“，”分开，比如：hl.h2,h3,h4,h5,h6color:#900：!* one,ftthree,.yellowfont-size:I4px：)机)ne(background:#ccc;)Uthreebackground:#

34、ccc：.yellowbackground:#ccc：)和小学的提取公因式差不多，把共同的部分提取出来，这么做的好处，相同的部分共同定义，不同的部分单独定义，保证风格统一，样式修改敏捷，这也是优化CSS代码的一块，要记住哟！【选择器的嵌套】选择器也是可以嵌套的，如：Mivlpa(color:的00;*意思是在ID为divl内的P标签内的链接a标签的文字颜色为红色*/这样的好处就是不须耍在单独的为ID为divl的标签内的P标签内的a标签单独定义ClUSS选择器或者ID选择器，CSS代码不就少了嘛!同样也是CSS代码优化的一块。到这里，基本的选择器说完了，但是还须要给大家介绍个“通用选择器”* (

35、此处为CSS代码)好，这节课主要讲解了三种CSS代码选择器、选择器的声明、选择器的嵌套三块学问,要驾驭好,假如有不懂，可以留言。CSS选择器规范化命名2010-01-0115:43:59来源CSS学习网网页制作WMhjX文仃简介：关于CSS命名法，和其他的程序命名差不多，也是有三种：骆驼命名法，帕斯卡命名法，匈牙利命名法。规范的命名也是WCb标准中的虫要一项，标准的命名可以更好的看懂代码，我想大家应当都有这种经验，某日翻出自己过去写的代码尽然看不懂了，呵呵,为了避开这种状况我们就耍规范化命名，再说J,现在一个项目不是一个人就可以完成的，是须要大家相互合作的，假如没有规范化命名，别人就无法看懂你

36、的代码，大大降低了工作效率,所以必需规范化命名，这样还显着咱专业！好了不多说了，关于CSS命名法，和其他的程序命名差不多,也是有三种：骆鸵命名法，帕斯卡命名法，匈牙利命名法骆驼命名法说到骆驼大家碑定会想到它那明显的特征，背部的降起，一高一低的，我们的命名也要这样高低,怎么才能这样，就用大小写字母呗！，大写的英文就相当于骆驼背部的凸起，小写的就是凹下去的地方J,但是这个也是有规则的，就是第一个字母要小写，后面的词的第一个字母就要用大写，如下：UheaderBlock.navMenuRcdButton【帕斯卡命名法】这种命名法同样也是大小写字母混编而成，和骆驼命名法很像，只有一点区分，就是首字母要

37、大写，如卜.HeaderBlock.NavMenuKedButton【匈牙利命名法】匈牙利命名法，是须要在名称前面加上一个或多个小写字母作为前缀，来让名称更加好认，更简洁理解，比如：Chead_navigation.rednavMenuButton以上三种，前两种（骆驼命名法、帕斯卡命名法）在命名CSS选择微的时候比较常用,当然这三种命名法可以混合运用，只须要遵守有个原则就可以，就是“简沽理解,简洁认，便利协同工作”就OK1.没有必要强调是那种命名法.以卜.为于页面模块的常用命名头：header内容：content/container尾：footer导航:nav侧栏:sidebar栏目：col

38、umn页面外国限制整体布局宽度：wrapper左右中：leftrightcenter登录条：loginbar标记：logo广告：banner页面主体：main热点：hot新闻：news下一:download子导航：subnav菜单.：menu子菜单：submenu搜寻：search友情链接：friendlink页脚：footer版权：copyright滚动:scroll内容:content到这节课，都是CSS特别基础的学问，是为了照看没有一点基础的同学，从下节课起先,将介绍CSS布局页面中的很重嘤的两个概念，也是必须要驾驭的概念，假如不能很好理解的话后面再布局页面的时候就会出现很多问题，I）盒

39、子模型2）内联元素YS块状元素理解盒子模型2010-01-0115:45:57来源CSS学习网网页制作Kebjx文阜衢介:什么是盒子模型？对于初学者来说，很难说出来，但是对于生活中的盒子大家熟识吧，哈哈，这里提到的盒子模型你就可以理解成现实生活中的盒子就可以J,不然怎么能起个名字叫“盒子模型呢盒子模型，是XHTM1.+CSS布局页面中的核心！要想学会用CSS布局页面，就首先要理解盒子模型！什么是盒子模型？对于初学者来说，很难说出来，但是对于生活中的盒子大家熟识吧,哈哈，这里提到的盒了模型你就可以理解成现实生活中的盒子就可以了,不然怎么能起个名字叫“盒子模型”呢好！既然和现实牛活中的盒子一样，那

40、我们想一卜.，生活中的盒子内部是不是空的好用来存放东西，而里面存放东西的区域我们给他起个名字叫“content（内容），而盒子的纸壁给他起个名字叫“border（边框），假如盒子内部的东西比如是一块硬盘，但是硬盘怕振动，所以我们须要在硬盘的四周盒子的内部匀称填充一些防震材料，这时硬盘和盒子的边框就有了确定的距离了，我们称这部分距离叫“padding（内边距）”，假如我们须要购买很多块硬盘，还是因为硬盘怕振动所以须要在盒子和盒子之间也须要一些防震材料来填充，那么盒子和盒子之间的距高我们称之为margin（外边距）”OK!这卜盒子模型的四要素就出来了分别是：COntent（内容）、border（）

41、.Padding（内边距）、argin（外边电），如下图色块解释Content内容Padding内边距Border边框Margin外边距此图片版权归CSS学习互动社区网页教学问我们的页面就是由许很多多的盒子组成的哟！，但是和现实生活中的盒子我们会忽视外边距(margin),但是在页面中，我们是不能忽视外边距加Urgin)的，只有包括外边距的盒子模型在CSS中才是完整的，即使外边距为零，我们也不要忽视它，要知道他是存在的。怎么样，理解“盒子模型”了没？就是这么点学问2个重要概念块状元素和内联元素2010-01-0115:48:56来源CSS学习网网页制作NCbjX文章简介：是在CSS布局页面中很

42、重要的两个概念，必须要理解透彻！既然说到概念就先看看块状元素和内联元素的定义。在用CSS布局页面的时候，我们会将HTM1.标签分成两种，块状元素和内联元素(我们平常用到的div和P就是块状元索，链接标签a就是内联元素。是在CSS布局页面中很重要的两个概念，必须要理解透彻！既然说到概念就先看看块状元素和内联元素的定义。注：这节课看似挺长，其实内容很少，通过举例子让大家更简洁理解而已，不要被眼前的文字和代码吓到船！块状元素一般是其他元素的容器，可容纳内联元素和其他块状元素，块状元素排斥其他元素及其位于同一行，宽度SidIh)高度(height)起作用。常见块状元素为div和P。内联元素内联元素只能

43、容纳文本或者其他内联元崇，它允许其他内联元素及其位于同一行，但宽度(Width)高度(height)不起作用。常见内联元素为“a”。做了个对比表，梢助大家更简洁理解。块状元素内联元素是否允许其他元素同处一行noyesWidth和height是否起作用yesno对了上面的概念，我们用实例的方式给大家讲明白，要留意听哟！要求：ID为(IiVI的红色(图00)区域，宽度和高度均为300像素，并且包含一个ID为div2的绿色区域，长度宽度均为100像素的div2oCSS代码如下：Udivl(width:300px;height:300px;background:#900;Udiv2(width:100px;height:100px;background:#090;)HTM1.代码如F：为了便利初学者更好的学习，我把完整的代码发出来!DOCTYPEhtmlPUB1.IC-/W3C/DTDXHTM1.1.0TransitionalZZErmcta-equiv=*Co