1、网页设计与制作 DIV+CSS,2017.3.1,Div+css的概述,业界对DIV+CSS的标准化设计关注DIV+CSS标准化的影响下，网页设计人员已经把这一要求作为行业标准 传统的网页布局是使用网格,DIV+CSS布局,DIV+CSS布局 这个布局中，div承载的是内容，而css承载的是样式。内容和样式的分离对于所见即所得的传统TABLE编辑方式确实是一个很大的冲击，尤其是设计人员很难接受设计一个他们不能立即看到的样式。不过随着学习，会发现div+css的好处实在是太明显了,DIV的概念,1. DIV 全称 division 意为“区分”使用 DIV 的方法跟使用其他 tag 的方法一样。
2、2. 如果单独使用 DIV 而不加任何 CSS，那么它在网页中的效果和使用 是一样的。3. DIV本身就是容器性质的，你不但可以内嵌table还可以内嵌文本和其它的HTML代码4. 注意：标签可以用来组合其它的HTML元素，但不能嵌套在段落元素中，例如，aabbcc的结果是不确定的。,SPAN 和 DIV 的区别,SPAN 和 DIV 的区别在于，DIV(division)是一个块级元素，可以包含段落、标题、表格，乃至诸如章节、摘要和备注等。是行级容器标签，不可以包含图片、标题、段落等，只能包含文字内容 而SPAN 是行内元素，SPAN 的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当
3、其他行内元素都不合适时，可以使用SPAN。,Css的概念,CSS:Cascading Style Sheets 层叠式样式表 HTML语言并不是真正的版面语言，它只是标记语言，意图把文档的不同部分通过它们的功能作用进行分类，但并不指出这些元素如何在计算机屏幕上显示。 CSS则提供对文档外观的更好更全面的控制，而且不干扰文档的内容。 CSS基本语句的结构： HTML选择符属性1：值1；属性2：值2；属性n：值n； 选择符是要对它应用说明的HTML元素名称；属性就是能够被CSS影响的浏览器行为，如字体、背景、边界等；值就是可以为属性设置的任何选项，如“楷体”，“red”等。 如：p font-si
4、ze:12pt；color:blue,盒子模型,每个HTML元素都可以看作一个装了东西的盒子，盒子具有宽度（width）和高度（height），盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin）。,边缘,margin （边界）(margin-top、margin-right、margin-bottom、margin-left)：外边距顺序依次是上、右、下、左 例如，margin:2em 4em、margin-left:-200px padding （填充）(padding-top、padding-r
5、ight、padding-bottom、padding-left)：内边距指文本边框与文本之间的距离，顺序依次是上、右、下、左,布局中的主要样式,font line-height color margin padding border text-align background,width: height float: clear display,如何在网页中应用css,1.行内套用（两种） 如：1） 2）直接写在标签内2.外部连接套用 如：,如何在网页中应用css,3.汇入套用 （汇入的做法为利用import这个指令） 使用import导入 ，语法：文档标题import url(css.cs
6、s);import url(“csss.css“) ; /单引号也可以import css,css;import “css.css“; /单引号也可以,内嵌样式的选择器,根据选择器的不同，内嵌样式又分为： HTML 选择器 CLASS 类选择器 ID 选择器 虚类和虚元素,selectorproperty1:value1; property2:value2;,需要应用的样式的内容,样式的属性,样式的属性的值,HTML 选择器,P /*设置样式：字体和背景色*/font-family: System; font-size: 18px;color: #3333CC; H2 background-c
7、olor: #CCFF33;text-align: center; 品种特征方面： 软件协会 软件协会 ,类选择器的定义格式为： html标签名 样式规则; ,CLASS 类选择器,.myinput border: 1px solid;border-color:#D4BFFF;color:#2A00FF; 密 码,类选择器的定义格式为： .类名 样式规则; 应用类选择器： class”类名“,ID 选择器,#fire color:red;font-size: 24px; 我是二级标题，火是这样的 我是段落，火是这样的 ,类选择器的定义格式为： #ID名 样式规则; 应用ID选择器：ID”ID名
8、“,虚类和虚元素,在html的页面元素中没有这种属性，故称其为虚类，仅在IE5.0以上的浏览器版本才支持虚类选择符。 语法如下： 页面元素名：元素虚属性名样式表内容,a:link color: #000000 a:visited color: #cccccc a:hover color: #000000; font-style:italic a:active color: #aaaaaa,:link color: #000000 :visited color: #cccccc :hover color: #000000; font-style:italic :active color: #aa
9、aaaa,CSS样式的组合、继承和关联性,样式的组合：把具有相同声明定义的选择符组合在一起，并用逗号隔开。 例如：段落元素p、单元格元素td和类c1可以使用相同样式：,p,td,.c1font-size:12pt;font-family:黑体;color:red,CSS样式的组合、继承和关联性,样式的继承：若子元素未定义，则它将继承上级元素的样式的定义。但存在少数属性不能继承。, CSS例子,CSS样式的组合、继承和关联性,样式表的关联性： 样式表的关联性指在某些样式定义中，可以定义某样式仅在某个特定元素范围内才有效。 例如：,p bfont-size:12pt;font-family:黑体;
10、color:red,b元素仅在p元素作用范围内会套用上述的样式设定。 而在其他地方不具有这些属性。,样式表的6类常用属性,字体属性 ：字体、字号、行距等。 颜色及背景属性 ：背景颜色、背景图片等。 文本属性： 区块属性 ：边框粗细等。 分级属性 ：各组件的字距、行距、缩排等。 鼠标属性 ：鼠标形状等。,字体属性,Font-family:指定文字的字体 H1font-family:华文彩云 Font-style：指定文字是否加粗或使用斜体。取值：normal（正常）、oblique（偏斜体）、italic（斜体） Font-size：指定文字的大小。 Font：上述样式属性的综合表示法。 Pfo
11、nt: bold 16pt,颜色及背景属性,定义颜色 rgb函数：rgb(R,G,B) R、G、B可用百分比值表示，也可用0255的整数值表示。 使用十六进制数组：#RRGGBB 直接使用颜色名。Background-color：指定背景颜色 H1background-color:#000800 Background-image：指定Html组件的背景图片，值为url或none。 Bodybackground-image:url(image1.jpg),color: rgb(100%,0,0) color: rgb(255,0,0) color: #FF0000 color:red,文本属性,
12、Text-decoration：设置底线、顶线、闪烁等文字效果。值为none,underline,overline,line-through,blink. Text-align：指定文字的对齐方式。值为：left,right,center,justify,块级属性,定义边界，取值为：长度|百分比|auto 上边界：margin-top；下边界：margin-bottom 左边界：margin-left：右边界：margin-right P.narrow margin-right: 50% 定义边框： Border-color Border-width Border-style,分级属性,Lis
13、t-style-type：指定项目符号或编号 允许值：disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none List-style-image：指定项目符号的图形文件名称，值为url或none LI.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-
14、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:手形 Text：文本I形 Wait：等待 ,CSS定位与显示,CSS的定位与显示属性可以把一个HTML元素定位在网页中的任何位置 定位与布局密切相关 CSS中有三种基本的定位机制 普通流：显示的位置由元素在HTML文件中的位置决定 浮动：可以左右移动，直到碰到包含
15、框或其它浮动框 绝对定位：可以直接将元素定位在页面上地任何位置 层叠顺序 进行CSS定位时，有可能发生多个元素的重叠 需要设置元素在Z轴上的层叠顺序 与定位相关的属性主要有14个,普通流定位机制,按照元素的类型和在HTML源文件中的出现顺序进行定位 就是block元素（如p、h、div）（块级框）从上到下一个接一个的排列 inline元素（如span、strong元素）在行中水平布置 除非特殊的指定，否则所有的框都在普通流中定位,浮动（float）,浮动框可以左右移动，直到它的外边缘碰到包含框或另一浮动框的边缘 当元素浮动时，它将不再处于普通文档流中，相当于浮在文档之上，不占据空间，但是会缩短
16、行框，产生文字环绕的效果,如果水平位置没有空间了，则box3会跑到下面去,如果box2的高度没有box1高度大，box1减去box2的高度的部分会把box3拦住,Clear属性,如果要为浮动元素留出垂直空间，使其它的元素不在其两侧显示，可以对其周围的元素使用清理属性 clear : none | left |right | both 添加了clear属性的元素，通过自动增加空白边，达到留出垂直空间的效果,Visibility、display、Z-index属性,Visibility设置对象是否可见 定义这个层级是不是要在画面上显示出功能来，最常利用java script来动态控制某个层级的显示
17、状况，进而达到动态的效果 默认值是visible，不显示则设定成hidden display-设置对象显示方式 display : block | none | inline | 可以各种不同的方式显示对象 display=none;与visibility=hidden;是不一样的 后者为隐藏的对象保留其占据的物理空间，而前者则不保留 Z-index设置层叠顺序 当定位多个元素并将它们相互重叠时，可以使用该属性设置元素在Z轴的层叠顺序 z-index : number 属性值越大表示在越上层,CSS中的布局,使用CSS布局技术可以完成页面整体布局，实现各种布局样式 CSS布局技术都基于三个基本
18、概念：定位、浮动和空白边操纵 基本布局方式有很多 按外观分，有单列布局、两列布局、三列布局等 按实现技术分，有基于自动空白边的布局、浮动布局等 按适应性分，有固定宽度布局、流式布局，弹性布局等,CSS排版-DIV分块,设计DIV块位置,Div+CSS常见错误总结,1. 检查HTML元素是否有拼写错误、是否忘记结束标记 2. 检查CSS是否正确 3. 确定错误发生的位置如果错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常，即可确定错误发生的位置。 4. 利用border属性确定出错元素的布局特性使用float属性布局一不小心就会出错。这时为元素添加border属性确
19、定元素边界，错误原因即水落石出。 5. float元素的父元素不能指定clear属性MacIE下如果对float的元素的父元素使用clear属性，周围的float元素布局就会混乱。这是MacIE的著名的bug，倘若不知道就会走弯路。 6. float元素务必指定width属性很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何，一定要为其指定width属性。另外指定元素时尽量使用em而不是px做单位。,Div+CSS常见错误总结,7. float元素不能指定margin和padding等属性IE在显示指定了margin和padding的float元素时
20、有bug。因此不要对float元素指定margin和padding属性(可以在float元素内部嵌套一个div来设置margin和padding)。也可以使用hack方法为IE指定特别的值。 8. float元素的宽度之和要小于100%如果float元素的宽度之和正好是100%，某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。 9. 是否重设了默认的样式?某些属性如margin、padding等，不同浏览器会有不同的解释。因此最好在开发前首先将全体的margin、padding设置为0、列表样式设置为none等。 10. 是否忘记了写DTD?（ DTD 是一套关于标记符的语法规则
21、 ）如果无论怎样调整不同浏览器显示结果还是不一样，那么可以检查一下页面开头是不是忘了写下面这行DTD： !DOCTYPE HTML PUBLIC “-/W3C/DTD HTML 4.01 Transitional/EN“,主要内容回顾,一、DIV+CSS的概述 二、盒子模型 三、如何在网页中应用css（、link、import） 四、三种选择器的使用（html、class、id、虚类和虚元素） 五、css样式的组合、继承和关联性 六、六种常用的属性（文字、背景、鼠标等等属性） 七、css中的定位与显示（相对定位、绝对定位等等） 八、div+css中常见的错误,用CSS样式制作一些特殊效果,CS
22、S的滤镜属性 （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 !,
