[互联网]DIVCSS.ppt

《[互联网]DIVCSS.ppt》由会员分享，可在线阅读，更多相关《[互联网]DIVCSS.ppt（72页珍藏版）》请在三一办公上搜索。

1、DIV+CSS,第一节Html介绍标签的认识,html 简单介绍,通俗的讲html是网页，一个文本文件，可以使用记事本打开，打开后里面有html自己的标签（这些标签各有各的功能），并有一定规律存在。html文本是由 html命令组成的描述性文本，html 命令可以说明文字、图形、动画、声音、表格、链接等。html网页结构包括头部(head)、主体(body)两大部分。头部描述浏览器所需的信息，主体包含所要说明的具体内容。,html结构,无标题文档如果我们要想浏览器显示什么样的文章文字内容，我们只需要将文字文章放入“”之间即可。,html标签,定义注释。定义文档类型。定义关于 HTML 文档的元

2、信息。定义锚 链接定义粗体字。定义文档中的节。定义文档的主体。定义简单的折行。定义按钮(push button)。定义页面中所有链接的默认地址或默认目标。,定义定义列表中项目的描述。不赞成使用。定义居中文本。定义定义列表。定义定义列表中的项目。定义强调文本。定义围绕表单中元素的边框。,定义文字的字体、尺寸和颜色。定义段落。定义图像。to 定义 HTML 标题。定义关于文档的信息。定义水平线。定义 HTML 文档。定义斜体字。定义内联框架。定义框架集的窗口或框架,定义列表的项目。定义文档与外部资源的关系。定义无序列表。定义打字机文本。不赞成使用。定义下划线文本。定义有序列表。定义被插入文本。定义

3、键盘文本。定义 input 元素的标注。定义图像映射。定义框架集。,List-style-type：指定项目符号或编号允许值：disc默认值。实心圆|circle空心圆|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none List-style-image：指定项目符号的图形文件名称，值为url或none无序列表的默认符号是圆点。元素有type属性，通过定义不同的type属性可以改变列表的项目符号。目前，type属性的属性值有：disc(圆)、circle（圆圈）、square（方块）list-style-typ

4、e:none/*不使用项目符号*/list-style-type:upper-alpha/*A B C D E etc.*/list-style-type:decimal/*1 2 3 4 5 etc.*/list-style-type:lower-roman/*i ii iii iv v etc.*/,定义针对不支持框架的用户的替代内容。定义针对不支持客户端脚本的用户的替代内容。定义内嵌对象。定义计算机代码样本。定义客户端脚本。定义选择列表（下拉列表）。定义输入控件。定义供用户输入的 hTML 表单。定义多行的文本输入控件。定义文档中的节。,定义强调文本。加粗定义文档的样式信息。定义表格。定

5、义表格中的单元。定义表格中的表头单元格。定义文档的标题。定义表格中的行。定义下标文本。定义上标文本。定义表格中的表头内容。定义表格中的主体内容。定义表格中的表注内容（脚注）。,表单的基本语法:.?文本框的名字*text,password*默认值*长度?最大输入字符数,button定义可点击按钮checkbox定义复选框。image定义图像形式的提交按钮。password定义密码字段。该字段中的字符被掩码。radio定义单选按钮。reset定义重置按钮。重置按钮会清除表单中的所有数据。submit定义提交按钮。提交按钮会把表单数据发送到服务器。text定义单行的输入字段，用户可在其中输入文本。默

6、认宽度为 20 个字符。.,.下拉列表 说明说明2 实现留言簿要求：背景、文字颜色、字体、换行、页面标题、表单文本框、文本域、单选框、复选框、下拉列表、图象域、提交与取消按钮，内容以mail形式提交。,第二节,DIV+CSS的概述盒子模型,Div+css的概述,业界对DIV+CSS的标准化设计关注DIV+CSS标准化的影响下，网页设计人员已经把这一要求作为行业标准 传统的网页布局是使用网格,DIV+CSS布局,DIV+CSS布局这个布局中，div承载的是内容，而css承载的是样式。内容和样式的分离对于所见即所得的传统TABLE编辑方式确实是一个很大的冲击，尤其是设计人员很难接受设计一个他们不能

7、立即看到的样式。不过随着学习，会发现div+css的好处实在是太明显了,DIV的概念,1.DIV 全称 division 意为“区分”使用 DIV 的方法跟使用其他 tag 的方法一样。2.如果单独使用 DIV 而不加任何 CSS，那么它在网页中的效果和使用 是一样的。3.DIV本身就是容器性质的，你不但可以内嵌table还可以内嵌文本和其它的HTML代码 4.注意：标签可以用来组合其它的HTML元素，但不能嵌套在段落元素中，例如，aabbcc的结果是不确定的。,SPAN 和 DIV 的区别,SPAN 和 DIV 的区别在于，DIV(division)是一个块级元素，可以包含段落、标题、表格，

8、乃至诸如章节、摘要和备注等。是行级容器标签，不可以包含图片、标题、段落等，只能包含文字内容而SPAN 是行内元素，SPAN 的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用SPAN。,Css的概念,CSS:Cascading Style Sheets 层叠式样式表HTML语言并不是真正的版面语言，它只是标记语言，意图把文档的不同部分通过它们的功能作用进行分类，但并不指出这些元素如何在计算机屏幕上显示。CSS则提供对文档外观的更好更全面的控制，而且不干扰文档的内容。CSS基本语句的结构：HTML选择符属性1：值1；属性2：值2；属性n：值n；选择符是要对它

9、应用说明的HTML元素名称；属性就是能够被CSS影响的浏览器行为，如字体、背景、边界等；值就是可以为属性设置的任何选项，如“楷体”，“red”等。如：p font-size:12pt；color:blue,盒子模型,每个HTML元素都可以看作一个装了东西的盒子，盒子具有宽度（width）和高度（height），盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin）。,边缘,margin（边界）(margin-top、margin-right、margin-bottom、margin-left)：外边距顺

10、序依次是上、右、下、左例如，margin:2em 4em、margin-left:-200pxpadding（填充）(padding-top、padding-right、padding-bottom、padding-left)：内边距指文本边框与文本之间的距离，顺序依次是上、右、下、左,布局中的主要样式,fontline-heightcolormarginpaddingbordertext-alignbackground,width:heightfloat:cleardisplay,第三节,三种选择器的使用（html、class、id、虚类和虚元素）,如何在网页中应用css,1.行内套用如：1

11、）直接写在标签内 2.内嵌 3.外链如：,如何在网页中应用css,4.汇入套用（导入）（汇入的做法为利用import这个指令）使用import导入，语法：文档标题 import url(css.css);import url(csss.css);/单引号也可以import css.css;import css.css;/单引号也可以,内嵌样式的选择器,根据选择器的不同，内嵌样式又分为：HTML 标签选择器CLASS 类选择器ID 选择器,selectorproperty1:value1;property2:value2;,需要应用的样式的内容,样式的属性,样式的属性的值,HTML 标签选择器,

12、例如：P/*设置样式：字体和背景色*/font-family:System;font-size:18px;color:#3333CC;H2 background-color:#CCFF33;text-align:center;品种特征方面：软件协会 软件协会,类选择器的定义格式为：html标签名 样式规则;,CLASS 类选择器,例如.myinput border:1px solid;border-color:#D4BFFF;color:#2A00FF;用户名密 码,类选择器的定义格式为：.类名（如myinput）样式规则;应用类选择器：class”类名“,ID 选择器,例#fire colo

13、r:red;font-size:24px;我是二级标题，火是这样的我是段落，火是这样的,类选择器的定义格式为：#ID名 样式规则;应用ID选择器：ID”ID名“注：ID选择器一个html只能用一次（也可多次用但不符合W3c标准）,通用选择器,用的最少的选择器*此处为css代码对父级中所有的html标签进行样式定义，对具有共同样式的标签样式进行定义，这样可以大大在精简代码；因为他的强大，他是对父级元素内的所有标签进行定义，所以只要你定义了，那么父级里面的所有标签，甭管有没有必要，也都相当于加上了通用选择器里面的代码，举个例子，,#div1*background:#eee;/*设置div1里面所有

14、的元素背景均为灰色*/color:#333;/*设置div1里面所有的元素的字体顔色均为黑色*/这里是p标签区域这里是a标签区域这里是p标签区域这里是a标签区域,第四节,css样式的组合、继承和关联性,以下为于页面模块的常用命名,头：header内容：content/container尾：footer导航：nav侧栏：sidebar栏目：column页面外围控制整体布局宽度：wrapper左右中：left right center登录条：loginbar标志：logo广告：banner页面主体：main,热点：hot新闻：news下载：download子导航：subnav菜单：menu子菜单：

15、submenu搜索：search友情链接：friendlink页脚：footer版权：copyright滚动：scroll内容：content,虚类和虚元素,在html的页面元素中没有这种属性，故称其为虚类，仅在IE5.0以上的浏览器版本才支持虚类选择符。语法如下：页面元素名：元素虚属性名样式表内容,a:link color:#000000a:visited color:#cccccca:hover color:#000000;font-style:italica:active color:#aaaaaa,:link color:#000000:visited color:#cccccc:ho

16、ver color:#000000;font-style:italic:active color:#aaaaaa,CSS样式的组合、继承和关联性,样式的组合：把具有相同声明定义的选择符组合在一起，并用逗号隔开。例如：段落元素p、单元格元素td和类c1可以使用相同样式：,p,td,.c1font-size:12pt;font-family:黑体;color:red,CSS样式的组合、继承和关联性,样式的继承：若子元素未定义，则它将继承上级元素的样式的定义。但存在少数属性不能继承。,CSS例子,CSS样式的组合、继承和关联性,样式表的关联性：样式表的关联性指在某些样式定义中，可以定义某样式仅在某个

17、特定元素范围内才有效。例如：,p bfont-size:12pt;font-family:黑体;color:red,b元素仅在p元素作用范围内会套用上述的样式设定。而在其他地方不具有这些属性。,第五节,六种常用的属性（文字、背景、鼠标等等属性）,样式表的6类常用属性,字体属性：字体、字号、行距等。颜色及背景属性：背景颜色、背景图片等。文本属性：区块属性：边框粗细等。分级属性：各组件的字距、行距、缩排等。鼠标属性：鼠标形状等。,字体属性,Font-family:指定文字的字体H1font-family:华文彩云Font-style：指定文字是否加粗或使用斜体。取值：normal（正常）、obli

18、que（偏斜体）、italic（斜体）Font-size：指定文字的大小。Font：上述样式属性的综合表示法。Pfont:bold 16pt,颜色及背景属性,定义颜色rgb函数：rgb(R,G,B)R、G、B可用百分比值表示，也可用0255的整数值表示。使用十六进制数组：#RRGGBB直接使用颜色名。Background-color：指定背景颜色H1background-color:#000800Background-image：指定Html组件的背景图片，值为url或none。Bodybackground-image:url(image1.jpg),color:rgb(100%,0,0)co

19、lor:rgb(255,0,0)color:#FF0000color:red,文本属性,Text-decoration：设置底线、顶线、闪烁等文字效果。值为none,underline:下划线,overline:上划线,line-through:贯穿线,blink:闪烁 Text-align：指定文字的对齐方式。值为：left,right,center,justify,块级属性,定义边界，取值为：长度|百分比|auto上边界：margin-top；下边界：margin-bottom左边界：margin-left：右边界：margin-rightP.narrow margin-right:50%

20、定义边框：Border-colorBorder-widthBorder-style,分级属性,List-style-type：指定项目符号或编号允许值：disc默认值。实心圆|circle空心圆|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none List-style-image：指定项目符号的图形文件名称，值为url或none无序列表的默认符号是圆点。元素有type属性，通过定义不同的type属性可以改变列表的项目符号。目前，type属性的属性值有：disc(圆)、circle（圆圈）、square（方块）L

21、I.square list-style-type:square/*实心方块*/UL.plain list-style-type:none/*不使用项目符号*/OL list-style-type:upper-alpha/*A B C D E etc.*/OL OL list-style-type:decimal/*1 2 3 4 5 etc.*/OL OL OL list-style-type:lower-roman/*i ii iii iv v etc.*/,鼠标属性,让鼠标移到不同对象上面，显示不同形状。Cursor属性，取值如下Auto：自动按默认显示Crosshair：“”Hand:手

22、形Text：文本I形Wait：等待,【例子】要求：1）宽度、高度均是200像素；2）顔色为红色#900；效果如下：,做出来大家会发现，红色区域离浏览器的顶部和左边的边距IE6和FF的不一样，这是页面浏览器的不兼容问题，为什么会这样呢？这是因为每个浏览器都有一个内置的css文件，当你没有对某个标签的属性设置的时候，浏览器就会应用内置的css文件，怎么办呢？只需要将们目前应用到得标签body和div置零就OK了，代码如下：body,divpadding:0;margin:0;,第六节,css中的定位与显示（相对定位、绝对定位等等）,CSS定位与显示,CSS的定位与显示属性可以把一个HTML元素定位

23、在网页中的任何位置定位与布局密切相关CSS中有三种基本的定位机制普通流：显示的位置由元素在HTML文件中的位置决定浮动：可以左右移动，直到碰到包含框或其它浮动框绝对定位：可以直接将元素定位在页面上地任何位置层叠顺序进行CSS定位时，有可能发生多个元素的重叠需要设置元素在Z轴上的层叠顺序与定位相关的属性主要有14个,浮动（float）,浮动框可以左右移动，直到它的外边缘碰到包含框或另一浮动框的边缘当元素浮动时，它将不再处于普通文档流中，相当于浮在文档之上，不占据空间，但是会缩短行框，产生文字环绕的效果,如果水平位置没有空间了，则box3会跑到下面去,如果box2的高度没有box1高度大，box1

24、减去box2的高度的部分会把box3拦住,例子：1）两个方块，一个红色#900，一个蓝色#009，处在同一行；2）红色方块宽度和高度均为200像素，蓝色方块宽度为300像素，高度为200像素3）红色方块的上外边距（margin-top）和左外边距（margin-left)均为20像素,Clear属性,如果要为浮动元素留出垂直空间，使其它的元素不在其两侧显示，可以对其周围的元素使用清理属性clear:none|left|right|both添加了clear属性的元素，通过自动增加空白边，达到留出垂直空间的效果,例子：1）两个方块，一个红色#900，一个蓝色#009，处在同一行；2）红色方块宽度和

25、高度均为200像素，蓝色方块宽度为300像素，高度为200像素3）红色方块的上外边距（margin-top）和左外边距（margin-left)均为20像素4）在第二行放一个宽度400像素，高度200像素的绿色方块。,有序列表,无序列表,标题 内容1 内容2Dt,dd中也可以加入ol,ul,li 和p,做导航条：要求鼠标移上去背景变黑，并且字体变白。,做导航条及常用的几个标签,普通流定位机制,按照元素的类型和在HTML源文件中的出现顺序进行定位就是block元素（如p、h、div）（块级框）从上到下一个接一个的排列inline元素（如span、strong元素）在行中水平布置除非特殊的指定，否

26、则所有的框都在普通流中定位,相对定位,相对于元素在普通文本流中的初始位置如果一个元素进行相对定位，它将以它所在的位置(即它在普通流中的位置)为初始点，然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的初始点进行移动,#style1 position:relative;left:20px;top:20px,绝对定位,可以把某个元素精确的定位在某个地方 绝对定位使元素的位置与文档流无关，因此不占据普通流中的空间，普通文档流中其他元素的布局就像绝对定位的元素不存在时一样绝对定位的元素的位置是相对于最近的父元素而言的,固定定位是绝对定位的一个特殊情况与绝对定位相似，唯一不同的是绝对定位是相对于

27、父元素的某一个位置，而固定定位则是固定在浏览器的视框位置这样当窗口滚动时，固定定位的元素不会随之滚动，总是出现在屏幕的固定位置,#style1 position:absolute;left:20px;top:20px,#style1 position:fixed;left:20px;top:20px,Visibility、display、Z-index属性,Visibility设置对象是否可见定义这个层级是不是要在画面上显示出功能来，最常利用java script来动态控制某个层级的显示状况，进而达到动态的效果默认值是visible，不显示则设定成hiddendisplay-设置对象显示方式d

28、isplay:block|none|inline|可以各种不同的方式显示对象display=none;与visibility=hidden;是不一样的后者为隐藏的对象保留其占据的物理空间，而前者则不保留Z-index设置层叠顺序当定位多个元素并将它们相互重叠时，可以使用该属性设置元素在Z轴的层叠顺序z-index:number 属性值越大表示在越上层,第七节,CSS布局div+css中常见的错误,CSS中的布局,使用CSS布局技术可以完成页面整体布局，实现各种布局样式CSS布局技术都基于三个基本概念：定位、浮动和空白边操纵基本布局方式有很多按外观分，有单列布局、两列布局、三列布局等按实现技术分

29、，有基于自动空白边的布局、浮动布局等按适应性分，有固定宽度布局、流式布局，弹性布局等,CSS排版-DIV分块,设计DIV块位置,多列浮动布局,Div+CSS常见错误总结,1.检查HTML元素是否有拼写错误、是否忘记结束标记 2.检查CSS是否正确 3.确定错误发生的位置如果错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常，即可确定错误发生的位置。4.利用border属性确定出错元素的布局特性使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界，错误原因即水落石出。5.float元素的父元素不能指定clear属性MacIE下如果对flo

30、at的元素的父元素使用clear属性，周围的float元素布局就会混乱。这是MacIE的著名的bug，倘若不知道就会走弯路。6.float元素务必指定width属性很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何，一定要为其指定width属性。另外指定元素时尽量使用em而不是px做单位。,Div+CSS常见错误总结,7.float元素不能指定margin和padding等属性IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性(可以在float元素内部嵌套一个div来设

31、置margin和padding)。也可以使用hack方法为IE指定特别的值。8.float元素的宽度之和要小于100%如果float元素的宽度之和正好是100%，某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。9.是否重设了默认的样式?某些属性如margin、padding等，不同浏览器会有不同的解释。因此最好在开发前首先将全体的margin、padding设置为0、列表样式设置为none等。10.是否忘记了写DTD?（DTD 是一套关于标记符的语法规则）如果无论怎样调整不同浏览器显示结果还是不一样，那么可以检查一下页面开头是不是忘了写下面这行DTD：!DOCTYPE HTML

32、PUBLIC-/W3C/DTD HTML 4.01 Transitional/EN,主要内容回顾,一、DIV+CSS的概述二、盒子模型三、如何在网页中应用css（、link、import）四、三种选择器的使用（html、class、id、虚类和虚元素）五、css样式的组合、继承和关联性六、六种常用的属性（文字、背景、鼠标等等属性）七、css中的定位与显示（相对定位、绝对定位等等）八、div+css中常见的错误,CSS模板与HTML模板实用于每次新开发页面使用,body,div,address,iframe,ul,ol,dl,dt,dd,li,dl,h1,h2,h3,h4,h5,h6,p,tab

33、le,th,td,form,input,button,select,textarea margin:0;padding:0;font-weight:normal;font-style:normal;font-size:100%;.ol,ul,lilist-style:none;.img border:0;body color:#000;background:#FFF;text-align:center;font:12px/1.5 Arial,Helvetica,sans-serif;.clearfix:after clear:both;content:.;display:block;heigh

34、t:0pt;visibility:hidden;overflow:hidden;.clearclear:both;height:1px;margin-top:-1px;width:100%;,用CSS样式制作一些特殊效果,CSS的滤镜属性（filter）的应用样式表滤镜的构成标记FILTER:滤镜名（属性名属性值，属性名属性值，.）;例如：p filter:alpha(opacity=80,style=1);静态滤镜的种类（IE4.0以上版本）Alpha让对象呈现渐变半透明效果 Blur 让对象产生风吹模糊的效果 DropShadow 让对象有一个下落式的阴影 Glow在对象的周围产生光晕而模糊的效果,用CSS样式制作一些特殊效果,Chroma让图像中的某一颜色变成透明色 FlipH让HTML对象水平转换 FlipV让HTML对象垂直转换 Wave让HTML对象产生水平或是垂直方向上的正弦波形Shadow让对象产生阴影效果 Mask利用一个HTML对象在另一个对象上产生图像的遮罩Light在HTML元件上放置一个光影Gray把一个彩色的图象变成灰色调图象 Invert让对象产生照片底片的效果 XRay让对象轮廓突出显示,The End!,