网页设计与制作DIV+CSSPPT学习课件.ppt

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