09205div+css技术发展与应用Word格式.docx

09205div+css技术发展与应用Word格式.docx

《09205div+css技术发展与应用Word格式.docx》由会员分享，可在线阅读，更多相关《09205div+css技术发展与应用Word格式.docx（43页珍藏版）》请在冰豆网上搜索。

4.2内外填充-17-

4.3定位与绕排-17-

4.3.1定位-17-

4.3.1绕排-17-

4.4边框修饰-17-

4.5鼠标指针效果-17-

4.5滤镜-18-

第5章CSS盒子模型-20-

5.1什么是CSS盒子模型-20-

5.2CSS3灵活的盒子模型（FlexibleBoxModule）-21-

5.2.1容器的排列-21-

5.2.1水平分布和垂直分布-22-

5.2.2反序排列-22-

5.2.3按指定顺序排列-23-

5.3CSS3灵活的盒子模型（FlexibleBoxModule）的尺寸-24-

5.3.1box-flex属性-24-

5.3.2灵活的尺寸-24-

5.3.3自适应子容器和固定尺寸子容器的混合使用-25-

5.3.4空间的分配-25-

5.3.5防止子容器溢出-26-

第6章CSS布局实例：

用CSS布局博客首页-27-

6.1头部的制作-28-

6.2content的制作-30-

6.3foot版权信息的制作-35-

参考文献-37-

后记-38-

致谢-39-

摘要

DIV+CSS是网站标准（或称“WEB标准”）中常用术语之一，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。

“DIV+CSS”是一种错误的说法。

DIV只是HTML中的一个标签，而CSS是一种语言，这两者也根本不能成为对等。

并且，“DIV+CSS”的话法也容易引起歧义。

让大家认为WEB标准就一定要用到DIV，以导致了DIV标签的滥用。

并且“DIV+CSS”也不能成为“WEB标准”的代名词，因为WEB标准不是单指两个语言，而是由XHTML（结构）、CSS（样式）、DOM（行为）组合而成的一种技术规范，他所实现的是数据、结构、样式、行为的分离，方便了管理与维护。

所以这里请大家记住“DIV+CSS”是一种错误的说法。

XHTM是目前国际上倡导的网站标准设计语言，因为XHTML网站设计语言具有的基本特点，这种CSS＋DIV模式的网站设计具有一定的优势，不过目前在网站建设应用中CSS＋DIV模式也存在一些问题。

本文综合网站技术和设计人员的体会，并从网页布局方面介绍DIV+CSS的一些用法。

DIV+CSSiswebsitestandard（or"

WEBstandardsusedintermsof"

）,usuallytoillustrateandHTMLpagesdesignlanguageofform（in）localizationwayofdifference,asXHTMLwebsitedesignstandard,nolongeruseformpositioningtechnology,butadoptionDIV+CSSmeanstorealizevariouspositioning."

DIV+CSS"

isafalsestatement.DIVonlyHTMLandCSSisatag,akindoflanguage,bothofwhichalsocannotbecomeequivalence.And,"

wordmethodiseasytocauseambiguity.LeteverybodythinksWEBstandardsmustuseDIVtocausedDIVtagabuse.And"

alsocannotbecome"

WEBstandards"

pronoun,becausetheWEBstandardsisnotonlyreferstotwolanguages,butbyXHTML（structure）,CSS（styles）,DOM（act）combinationbecomesakindofspecification,hehadaccomplishedisdata,structure,style,behaviorofseparation,convenientforthemanagementandmaintenance.Soherepleaseremember"

isafalsestatement.XHTMiscurrentinternationaladvocatewebsitestandarddesignlanguage,becauseXHTMLwebsitedesignlanguagehasthecharacteristics,theCSS+DIVmodeofwebdesignhascertainadvantagesinwebsiteconstruction,butthecurrentapplicationofCSS+DIVmodealsosomeproblems.Thisarticlecomprehensivelysitetechnicalanddesignstaffexperience,andfromthewebpagelayoutintroducedsomeusages+DIVCSS.

第1章绪论

1.1CSS发展史

CascadingStyleSheets（层叠样式表）的历史

从1990年代初HTML被发明开始样式表就以各种形式出现了，不同的浏览器结合了它们各自的样式语言，读者可以使用这些样式语言来调节网页的显示方式。

一开始样式表是给读者用的，最初的HTML版本只含有很少的显示属性，读者来决定网页应该怎样被显示。

但随着HTML的成长，为了满足设计师的要求，HTML获得了很多显示功能。

随着这些功能的增加外来定义样式的语言越来越没有意义了。

1994年哈坤·

利提出了CSS的最初建议。

伯特·

波斯（BertBos）当时正在设计一个叫做Argo的浏览器，他们决定一起合作设计CSS。

当时已经有过一些样式表语言的建议了，但CSS是第一个含有“层叠”的主意的。

在CSS中，一个文件的样式可以从其它的样式表中继承下来。

读者在有些地方可以使用他自己更喜欢的样式，在其他地方则继承，或“层叠”作者的样式。

这种层叠的方式使作者和读者都可以灵活地加入自己的设计，混合各人的爱好。

哈坤于1994年在芝加哥的一次会议上第一次展示了CSS的建议，1995年他与波斯一起再次展示这个建议。

当时W3C刚刚建立，W3C对CSS的发展很感兴趣，它为此组织了一次讨论会。

哈坤、波斯和其他一些人（比如微软的托马斯·

雷尔登）是这个项目的主要技术负责人。

1996年底，CSS已经完成。

1996年12月CSS要求的第一版本被出版。

1997年初，W3C内组织了专门管CSS的工作组，其负责人是克里斯·

里雷。

这个工作组开始讨论第一版中没有涉及到的问题，其结果是1998年5月出版的第二版要求。

到2004年为止，第三版还未出版。

*1996年W3C正式推出了CSS1.

*1998年W3C正式推出了CSS2.

*CSS2.1是W3C现在正在推荐使用的.

*CSS3现在还处于开发中.

1.2使用CSS+DIV的优点

1、有利于SEO：

学习css技术有利于SEO（搜索引擎优化）

2、可以提高找工作的机率：

现在很多从事建站网络公司招聘技术人员都要求会DIV+CSS技术，可以看出DIV+CSS的页面越来越受大众重视与支持。

如果一般的程序员掌握了CSS能助你提高就业竞争力。

3、网上接单：

网上特别淘宝上开DIV+CSS制作店铺或威客类站接单赚钱

4、建站自己当站长：

现在网上有很多开源的网站系统源码，有网店源码、CMS内容管理系统、博客、论坛源码等如DEDECMS、PHPCMS、动易等优秀功能强大的免费的网站程序源码，只要你会DIV+CSS技术就可以制作出html页面然后插入他们出用于他们用的标签的网站CSS模板（他们都有自己的标签模板制作教程-前题您会DIV+CSS技术制作页面），就建立出自己的网站从而自己当站长通过网站为自己增加收入。

1.3使用CSS+DIV的优势

1、符合W3C标准。

微软等公司均为W3C支持者。

这一点是最重要的，因为这保证您的网站不会因为将来网络应用的升级而被淘汰。

2、支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是IE7或者是火狐，您的网站都能很好的兼容。

3、搜索引擎更加友好。

相对与传统的table,采用DIV+CSS技术的网页，对于搜索引擎的收录更加友好。

4、样式的调整更加方便。

内容和样式的分离，使页面和样式的调整变得更加方便。

现在YAHOO,MSN等国际门户网站，网易，新浪等国内门户网站，和主流的WEB2.0网站，均采用DIV+CSS的框架模式，更加印证了DIV+CSS是大势所趋。

5、CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽，而且众所周知，搜索引擎喜欢清洁的代码。

6、表现和结构分离，在团队开发中更容易分工合作而减少相互关联性。

1.4DIV+CSS常用编辑工具

没有基础的人会觉得CSS+DIV开发很难学习。

其实只要深刻理解其代码含义用任何文本编辑器都可以编辑。

目前许多人在用记事本全部手写代码。

当然也有人为了方便会用些其他工具：

1.Notepad.exe记事本，（程序小，随时手工编辑，垃圾代码少，不能可视化预览）

2.Dreamweaver（老牌网页编辑工具，功能全，程序比较大，但对DIV+CSS可视化支持程度不太友好）　　

3..editplus（应该是升级版的记事本工具，代码编辑有颜色提示）　　

4.Ultraedit　　

5.Golive（Adobe宣布已停止开发）

第2章CSS的介绍

2.1什么是CSS

CSS全称为CascadingStyleSheets，中文翻译为“层叠样式表”，简称CSS样式表又被我们称为CSS样式，CSS样式又被作为一种能制作出各种样式网页的技术统称。

2.2CSS的基本语法

CSS的定义是由三个部分构成：

选择符（selector），属性（properties）和属性的取值（value）。

　　基本格式如下：

　　selector{property:

value}

　　（选择符{属性：

值}）

　　选择符是可以是多种形式，一般是你要定义样式的HTML标记，例如BODY、P、TABLE……，你可以通过此方法定义它的属性和值，属性和值要用冒号隔开：

　　body{color:

black}

　　选择符body是指页面主体部分，color是控制文字颜色的属性，black是颜色的值，此例的效果是使页面中的文字为黑色。

　　如果属性的值是多个单词组成，必须在值上加引号，比如字体的名称经常是几个单词的组合：

　　p{font-family:

"

sansserif"

}

　　（定义段落字体为sansserif）

　　如果需要对一个选择符指定多个属性时，我们使用分号将所有的属性和值分开：

　　p{text-align:

center;

color:

red}

　　（段落居中排列；

并且段落中的文字为红色）

　　为了使你定义的样式表方便阅读，你可以采用分行的书写格式：

　　p

　　{

　　text-align:

　　color:

black;

　　font-family:

arial

　　}

　　（段落排列居中，段落中文字为黑色，字体是arial）

　　2.选择符组

　　你可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式重复定义：

　　h1,h2,h3,h4,h5,h6{color:

green}

　　（这个组里包括所有的标题元素，每个标题元素的文字都为绿色）

　　p,table{font-size:

9pt}

　　（段落和表格里的文字尺寸为9号字）

　　效果完全等效于：

　　p{font-size:

　　table{font-size:

　　3.类选择符

　　用类选择符你能够把相同的元素分类定义不同的样式，定义类选择符时，在自定类的名称前面加一个点号。

假如你想要两个不同的段落，一个段落向右对齐，一个段落居中，你可以先定义两个类：

　　p.right{text-align:

right}

　　p.center{text-align:

center}

　　然后用不在不同的段落里，只要在HTML标记里加入你定义的class参数：

　　<

pclass="

right"

>

　　这个段落向右对齐的

/p>

center"

　　这个段落是居中排列的

　　注意：

类的名称可以是任意英文单词或以英文开头与数字的组合，一般以其功能和效果简要命名。

　　类选择符还有一种用法，在选择符中省略HTML标记名，这样可以把几个不同的元素定义成相同的样式：

　　.center{text-align:

　　（定义.center的类选择符为文字居中排列）

　　这样的类可以被应用到任何元素上。

下面我们使h1元素（标题1）和p元素（段落）都归为“center”类，这使两个元素的样式都跟随“.center”这个类选择符：

h1class="

　　这个标题是居中排列的

/h1>

　　这个段落也是居中排列的

这种省略HTML标记的类选择符是我们经后最常用的CSS方法，使用这种方法，我们可以很方便的在任意元素上套用预先定义好的类样式。

　　4.ID选择符

　　在HTML页面中ID参数指定了某个单一元素，ID选择符是用来对这个单一元素定义单独的样式。

　　ID选择符的应用和类选择符类似，只要把CLASS换成ID即可。

将上例中类用ID替代：

pid="

intro"

　　这个段落向右对齐

　　定义ID选择符要在ID名称前加上一个“#”号。

和类选择符相同，定义ID选择符的属性也有两种方法。

下面这个例子，ID属性将匹配所有id="

的元素：

　　#intro

　　font-size:

110%;

　　font-weight:

bold;

#0000ff;

　　background-color:

transparent

　　（字体尺寸为默认尺寸的110%；

粗体；

蓝色；

背景颜色透明）

　　下面这个例子，ID属性只匹配id="

的段落元素：

　　p#intro

ID选择符局限性很大，只能单独定义某个元素的样式，一般只在特殊情况下使用。

　　5.包含选择符

　　可以单独对某种元素包含关系定义的样式表，元素1里包含元素2，这种方式只对在元素1里的元素2定义，对单独的元素1或元素2无定义，例如：

　　tablea

12px

　　在表格内的链接改变了样式，文字大小为12象素，而表格外的链接的文字仍为默认大小。

　　6.样式表的层叠性

　　层叠性就是继承性，样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包含的其他元素。

事实上，所有在元素中嵌套的元素都会继承外层元素指定的属性值，有时会把很多层嵌套的样式叠加在一起，除非另外更改。

例如在DIV标记中嵌套P标记：

　　div{color:

red;

font-size:

9pt}

　　……

div>

p>

　　这个段落的文字为红色9号字

/div>

　　（P元素里的内容会继承DIV定义的属性）

有些情况下内部选择符不继承周围选择符的值，但理论上这些都是特殊的。

例如，上边界属性值是不会继承的，直觉上，一个段落不会同文档BODY一样的上边界值。

　另外，当样式表继承遇到冲突时，总是以最后定义的样式为准。

如果上例中定义了P的颜色：

　　p{color:

blue}

　　这个段落的文字为蓝色9号字

　　我们可以看到段落里的文字大小为9号字是继承div属性的，而color属性则依照最后定义的。

　　不同的选择符定义相同的元素时，要考虑到不同的选择符之间的优先级。

ID选择符，类选择符和HTML标记选择符，因为ID选择符是最后加上元素上的，所以优先级最高，其次是类选择符。

如果想超越这三者之间的关系，可以用!

important提升样式表的优先权，例如：

#FF0000!

important}

　　.blue{color:

#0000FF}

　　#id1{color:

#FFFF00}

　　我们同时对页面中的一个段落加上这三种样式，它最后会依照被!

important申明的HTML标记选择符样式为红色文字。

如果去掉!

important，则依照优先权最高的ID选择符为黄色文字。

　　7.注释

　　你可以在CSS中插入注释来说明你代码的意思，注释有利于你或别人以后编辑和更改代码时理解代码的含义。

在浏览器中，注释是不显示的。

CSS注释以"

"

结尾，如下：

2.3CSS选择器

CSS选择器有3种：

标签选择器，ID选择器，类选择器

2.3.1标签选择器

一个完整的HTML页面是有很多不同的标签组成，而标签选择器，则是决定哪些标签采用相应的CSS样式，比如，在style.css文件中对p标签样式的声明如下：

图2-1

则页面中所有p标签的背景都是#900（红色），文字大小均是12px，颜色为

#090（绿色），这在后期维护中，如果想改变整个网站中p标签背景的颜色，只需要修改background属性就可以了

2.3.2ID选择器

ID选择器在某一个HTML页面中只能使用一次（当然也可以用好几次，不过就不符合W3C标准了，那页面也就不是标准页面喽~，咱们的目的不就是为了做标准的页面么，所以建议大家不要在同一个html页面中多个标签拥有共同的ID），就像在你所处的环境中，你只有一个ID（身份证），不可能重复！

相信大家也能看出来，ID选择器更具有针对性，如：

先给某个HTML页面中的某个p标签起个ID，代码如下：

图2-2

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

图2-3

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

2.2.3类选择器

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

图2-4

如果我还想让div标签也有相同的样式，怎么办呢？

加上同样的class就可以了，如下：

图2-5

这样页面中凡是加上class="

one"

的标签，样式都是一样的。

CSS定义的时候和ID选择器差不多，只不过把#换成.，如下：

图2-6

复制代码补充:

一个标签可以有多个类选择器的值，不同的值用空格分开，如：

图2-7

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

图2-8

2.2.4CSS常用属性

CSS样式允许定义的属性非常多，这么多属性并不是对所有HTML标记有效。

在定义CSS样式时，只需定义几种相关的属性即可。

在涉及到数值时，往往有多种计量单位可选。

文本属性：

文本属性石CSS属性中的一大类，用来设置文字的显示效果。

其中部分属性设置可以通过文字<

font>

标记实现。

图2-9

背景属性：

背景属性设定对象的背景颜色或背景图像

图2-10

内外填充属性：

一些WEB元素如表格，图像等可以看作是一个容器，容器中放置了呈现内容。

所谓的内外填充，可以认为是容器内外侧的衬垫。

图2-11

定位与显示属性：

内外填充属性站在容器的角度，设定了页面的排版。

从容器的角度来说，也可以设置内容相对于容器的定位以及内容的尺寸。

图2-12

边框属性：

边框属性用来设置对象的边框属性，类型以及粗细。

图2-13

第3章CSS属性的缩写

3.1为什么要让CSS属性缩写

简化代码。

一些CSS属性简写可以减少CSS代码从而减少CSS文件的占用字节，加快网页下载速度和网页加载打开速度。

优化CSS目的。

其中CSS优化之一即是简化代码缩写CSS属性代码。

3.2CSS属性缩写说明

Web网站可用性的关键指标是速度，更确切地说，是页面能以多快的速度出现在访问者的浏览器窗口里。

影响速度的因