- 1. 第二章网页样式第二单元
- 2. 本章相关学习资源
《网页样式》专题
《Web前端基础及数据库开发》
第2章 《网页样式》
学习平台“静态网页制作”课程学生用书第2页/共69页
- 3. 预习检查说出使用CSS制作网页的优点。
在CSS中，设置字体颜色可以使用什么属性？
在CSS中，可以用于创建横向多列布局的属性是什么？提问第3页/共69页
- 4. 本章任务任务1：制作腾讯软件中心页面第4页/共69页
- 5. 能够使用CSS美化网页元素能够使用DIV+CSS布局网页能够解决CSS相关的浏览器兼容性问题本章目标点重点难点重点难第5页/共69页
- 6. 讲解：CSS语法为什么需要CSS样式？网络提问使网页丰富多彩，易于控制有CSS样式无CSS样式DIV+CSS布局Table布局布局灵活，结构简单，代码量少第6页/共69页
- 7. 讲解：CSS的概念和作用CSS的概念和作用
CSS级联样式表
Cascading Style Sheet风格样式表
Style Sheet用于进行网页风格设计第7页/共69页
- 8. 串讲：CSS的基本语法结构CSS的基本语法结构
选择器
一条或多条声明
第8页/共69页
- 9. 串讲：style标签和style属性style标签
定义HTML文档样式信息
style属性
用于改变HTML元素的样式
位于head标签中位于HTML标签中第9页/共69页
- 10. 串讲：CSS基本选择器CSS基本选择器（3种）
标签选择器
HTML标签
一条或多条声明
定义之后，将立即对HTML中的标签产生作用类选择器
.class
一条或多条声明
需在HTML中为标签添加类选择器，才可生效ID选择器
#ID
一条或多条声明
用法与类选择器基本相同第10页/共69页
- 11. 讲解：CSS复合选择器概念
由两个或多个基本选择器，通过不同方式连接而成
3种常用的复合选择器
后代选择器
并集选择器
全局选择器
第11页/共69页
- 12. 讲解：后代选择器概念
通过嵌套的方式，对特殊位置的HTML标签进行声明
特点
外层的标签写在前面，内层的标签写在后面，之间用空格分隔
内层标签是外层标签的后代
p(父类)span(子类=后代）外层标签内层标签示例p span {
CSS样式声明;
}后代选择器演示示例：后代选择器
第12页/共69页
- 13. 讲解：并集选择器概念
由两个或两个以上选择器，通过逗号连接构成，其结果是同时选中各个基本选择器所选择的范围
特点
任何形式的选择器均可作为并集选择器的一部分
声明各选择器的相同样式
h1#one.style示例h1,.special, #one{
CSS样式声明;
}并集选择器演示示例：并集选择器
所选范围3者共同的样式第13页/共69页
- 14. 讲解：全局选择器概念
选择器是“*”，该选择器可以为所有HTML标签设置相同样式
特点
选择范围为全体HTML标签
声明所有标签的相同样式
演示示例：全局选择器
*{
CSS样式声明;
}语法使用“ * ”全局声明，可以大大减少代码量第14页/共69页
- 15. 讲解：CSS的继承性HTML的组织结构
div+css网页制作
欢迎来到div+css网页制作……
- 你还可以学习到：
- Flash
……
如果您有任何问题，欢迎给……
继承关系结构树第15页/共69页16. 讲解：CSS的继承性继承关系树型图根html标签的子标签
title标签的父标签第16页/共69页17. 讲解：CSS的继承性CSS继承的概念
子标签可以继承父标签的样式
子标签的样式，不会影响父标签关键代码h1 {
color:blue;
text-decoration:underline;
}
em {color:red;}
li {color:green; font-weight:bold;}演示示例：继承特性
第17页/共69页18. 行内式
嵌入式示例串讲：在HTML中引入CSS的方式茉莉花
使用HTML标签的style属性添加样式示例位于标签中第18页/共69页19. 链接式
导入式示例串讲：在HTML中引入CSS的方式示例位于标签中位于标签中第19页/共69页20. 串讲：样式的优先级请说出CSS中3种基本选择器之间的优先级。
请说出CSS中3种样式表之间的优先级。
提问ID选择器类选择标签选择器行内样式内嵌样式外部样式注意在同一选择器中，两条声明相同，后一条声明会覆盖前一条声明第20页/共69页21. 上机练习需求说明
制作今日推荐页面
练习：后代选择器、并集选择器和全局选择器完成时间：15分钟共性问题集中讲解练习第21页/共69页22. 小结使用（ ）选择器，可以对所有HTML标签设置相同样式。
在HTML标签行内添加CSS样式时,可以使用（ ）。
外部样式有（ ）和（ ）两种。style属性全局提问链接式导入式第22页/共69页23. 串讲：文本与文字属性分别说出常用的文本和文字属性及其作用。（各4个）
在CSS中，设置文本行高可以使用什么属性？提问注意使用font-family属性，同时设置中英文两种字体时，必须先设置英文，后设置中文，即：font-family: Arial, "宋体";第23页/共69页24. a:linka:visiteda:hovera:active串讲：超链接伪类超链接伪类（Pseudo-classes）
制作超链接动态效果
声明顺序：
a:link与a的异同
a:active的使用情况注意第24页/共69页25. 串讲：cousor属性在CSS中，cousor属性的作用是什么？
cousor属性的常用属性值是（ ），其表示光标呈现（ ）。提问设置鼠标光标形状（外观）pointer手形第25页/共69页26. 串讲：背景属性在CSS中，背景的简写属性是（ ）。
请说出背景属性的分量属性及其作用。
在CSS中，背景的（ ）属性和（ ）属性，只有在设置了background-image属性之后，才能生效。提问background-positionbackground-repeatbackground第26页/共69页27. 讲解：盒子模型盒子模型
网页布局的基础
与生活中的盒子相似纸盒填充部分盒内物品纸盒外围间隙第27页/共69页28. 讲解：盒子模型盒子模型属性边框(border)内边距(padding)元素内容外边距(margin)第28页/共69页29. 讲解：盒子模型盒子模型平面结构图
盒子模型属性的共同点
顺时针分为：上右下左4个方向
3个属性都可以分别设置各个方向属性值
3个属性都可以同时设置4个方向属性值
3个属性都占据空间
第29页/共69页30. 讲解：盒子模型盒子模型三维立体结构图
第一层第二层第三层第四层第五层第30页/共69页31. 讲解：盒子模型属性边框属性有几个分量属性？它们的作用分别是什么？
设置盒子模型内边距使用（ ）属性，外边距使用（ ）属性。
问题border-color设置边框颜色border-width设置边框粗细border-style设置边框样式paddingmargin第31页/共69页32. 讲解：盒子模型属性margin属性除了可以设置盒子与盒子之间的间距外，还能用于什么？
问题实现网页自动居中布局关键代码body { margin:0;}
#content {
width:760px;
margin:0 auto;
}实现关键点
div宽度固定
margin属性的左右外边距值为auto
将默认内边距初始化为0固定宽度div自动居中演示示例：自动居中布局
第32页/共69页33. 讲解：盒子模型尺寸盒子模型尺寸如何计算？
问题盒子模型尺寸=border-width + padding + margin + 内容尺寸（宽度/高度）内容的宽度或高度该盒子模型中，border宽度为0第33页/共69页34. 上机练习需求说明
制作爱的礼物页面
练习：背景属性、盒子模型属性完成时间：10分钟共性问题集中讲解练习第34页/共69页35. 上机练习需求说明
制作网易印象派页面
练习：盒子模型属性、表格制作一行两列布局完成时间：15分钟共性问题集中讲解练习第35页/共69页36. 串讲：列表属性在CSS中，可以用于设置列表样式的属性有哪些？它们的作用分别是什么？
使用list-style-image属性设置列表项图标，会产生浏览器兼容性问题，解决方法如下：
将list-style-type属性的值设为none
使用background属性为标签设置背景图像
问题list-style简写属性，设置所有分量样式list-style-type设置列表项标志的类型list-style-image将图像设置为列表项标志list-style-position设置列表中列表项标志的位置演示示例：列表项图片符号
第36页/共69页37. 上机练习需求说明
制作所有商品分类页面
练习：list-style-type属性与background属性结合设置列表项图标完成时间：15分钟共性问题集中讲解练习第37页/共69页38. 讲解：float属性为什么需要float属性？提问定位网页元素定位[更多活动]创建横向多列布局横向三列布局横向两列布局第38页/共69页39. 讲解：浮动属性float属性
定义元素的浮动方向
属性值：关键字
left浮动至容器的最左侧直到接触容器为止right浮动至容器的最右侧直到接触容器为止none不浮动float:属性值;语法第39页/共69页40. 讲解：浮动属性浮动的特点
左浮动时，与之相邻的元素，会紧挨着其右侧排列
右浮动时，与之相邻的元素，会紧挨着其左侧排列
盒子-1左浮动盒子-2紧贴其右显示盒子-1右浮动盒子-2紧贴其左显示演示示例：浮动属性
第40页/共69页41. 讲解：浮动属性浮动的特点
同时有左浮动和右浮动的元素时，与之相邻的元素，会填满两者之间的间隙
演示示例：浮动属性
第41页/共69页42. 讲解：浮动属性浮动特性
使元素紧挨着容器左侧或右侧，相邻元素紧挨其显示
未设置尺寸的块级元素，设置了浮动之后，其尺寸会根据其内部元素大小自适应
同时有左浮动和右浮动元素时，与其相邻的元素会填满两者之间的间隙
第42页/共69页43. 讲解：浮动属性浮动法布局
运用float属性创建横向多列布局的特性
width属性结合overflow属性清除浮动
增加子层内容，结构不受影响
关键代码#container{ width:760px; overflow:hidden; }
#left{ float:left; }
#right{ float:left; margin-left:20px; }清除浮动设置两个盒子之间的间距演示示例：浮动法
使垂直排列的块级元素横向排列第43页/共69页44. 讲解：浮动属性如何实现左右两侧的列交换位置？
问题第44页/共69页演示示例：浮动法问题
45. 上机练习需求说明
制作多情浪子博客首页
练习：浮动法布局、列表属性、盒子模型属性完成时间：30分钟共性问题集中讲解练习第45页/共69页46. 判断对错
在列表中，list-style属性与list-style-type属性作用相同，没有区别。
浮动属性可用于定位网页元素和创建横向多列布局。
浮动属性可以使网页元素浮动至容器的左侧或右侧，与其相邻的元素会紧挨着浮动元素显示。
使用浮动法布局页面时，增加子层内容，网页结构会受影响。小结提问第46页/共69页47. 串讲：clear属性在CSS中，clear属性的作用是什么？
清除浮动盒子对周围文字的影响时，应将clear:both设置在文字相关的样式中
问题演示示例：清除浮动
清除浮动影响，扩展盒子高度注意第47页/共69页48. 属性值说明visible默认值。内容不会被修剪，会呈现在盒子之外hidden内容会被修剪，并且其余内容是不可见的scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余内容auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容讲解：overflow属性overflow属性
用于处理盒子中的内容溢出
属性值：关键字
overflow:属性值;语法第48页/共69页49. 讲解：overflow属性overflow属性的妙用
结合width属性
清除浮动影响
扩展盒子高度
关键代码overflow:hidden;
width:100%;演示示例：overflow属性
第49页/共69页50. 讲解：display属性为什么需要display属性？提问
我最喜欢的城市
关于喜欢的理由，其实，很简单。西双版纳是生我养我的故乡，那里有我至亲至爱的人，是我无论浪迹何方，都会记得归去的乐土...
按标签顺序排版—标准文档流标准文档流包括块级元素(block)和行内元素(inline)display属性的作用:指定HTML标签的显示方式第50页/共69页51. 讲解：display属性display属性
用于指定HTML标签的显示方式
属性值：关键字
display:属性值;语法属性值说明block将元素显示为块级元素，该元素前后会带有换行符inline默认。元素会被显示为行内元素，该元素前后没有换行符none该元素不会被显示第51页/共69页52. 讲解：display属性display属性应用
块级元素与行内元素的互相转换
解决IE6、IE7中浮动导致的双倍边距
在同时设置了float属性和margin属性（仅左右边距）的元素中，设置display:inline;
示例span{display:block;}
div{display:inline;}使span标签块状显示演示示例：display属性
使div标签行内显示第52页/共69页53. 讲解：position属性为什么需要position属性？提问进行复杂的元素定位浮于页面之上的提示框浮动广告消息提示框第53页/共69页54. 讲解：position属性relative(相对定位)
偏移参照基准自身原位置设置1个或多个子块根据指定偏移量进行偏移仍旧处于标准文档流中对父块及兄弟块无影响设置方式相对原位置，水平右移30px相对原位置，垂直下移30px演示示例：相对定位
第54页/共69页55. 讲解：position属性absolute(绝对定位)
偏移参照基准浏览器窗口仅设置1个子块根据指定偏移量进行偏移脱离了标准文档流不会对相邻块造成影响设置方式距离绝对定位较近的，已经定位的祖先元素父块相对定位，子块绝对定位根据指定偏移量进行偏移脱离了标准文档流不会对相邻块造成影响演示示例：绝对定位
1.未设置偏移量方向：保持在原位
2.设置偏移量方向：浏览器窗口仅子块绝对定位，设一个偏移量设置偏移量方向，按指定偏移量偏移脱离了标准文档流不会对相邻块造成影响第55页/共69页56. 串讲：z-index属性在CSS中，z-index属性的作用是什么？
Z-index属性控制元素堆叠时，有什么特点。
问题用于调整定位时重叠块的上、下位置位于x-y轴的页面，相当于z-index:0当z-index:-1时，图片位于x-y轴的页面之下在z轴上叠加的层，相当于z-index:1在z轴上叠加的层，相当于z-index:2第56页/共69页57. 上机练习需求说明
制作淘宝主导航
练习：position属性完成时间：10分钟共性问题集中讲解练习第57页/共69页58. 上机练习需求说明
制作psytopic主视觉
练习：position属性、z-index属性完成时间：15分钟共性问题集中讲解练习第58页/共69页59. 判断对错
overflow属性和clear属性都可用来清除浮动。
任何情况下都可以使用z-index属性来设置网页元素的堆叠次序。
绝对定位的元素脱离了标准文档流，相对定位的元素未脱离标准文档流。
A元素是B元素的父块，A元素为相对定位，B元素为绝对定位，则B元素以浏览器窗口为基准进行偏移。小结提问第59页/共69页60. 串讲：网站制作流程网站制作流程1美工或网页设计师设计界面2前端工程师切图，制作静态页面，实现交互效果3软件工程师实现网站功能，并将功能与界面整合4测试工程师测试网站性能与功能后，交付用户使用第60页/共69页61. 讲解：常见CSS HACKIE有条件注释
子选择器招数
示例声明浏览器版本导入样式表示例html>body{background-image:url(bg.png);}针对IE6及以下版本隐藏图片bg.png第61页/共69页62. 讲解：常见CSS HACK*HTML招数
!important招数
示例*html{ font-size:14px;}针对IE6及以下版本示例#nav{
font-size:18px!important;
font-size:14px;
}针对IE7及以上版本针对IE6及以下版本第62页/共69页63. 浏览器版本CSS Hack（招数）IE 6_font-size:24px;IE 7*font-size:24px;IE 8font-size:24px\0;所有版本IEfont-size:24px\9;讲解：常见CSS Hack针对IE6-IE8的招数
声明顺序
FirefoxIE8IE7IE6第63页/共69页64. 上机练习需求说明
制作腾讯手机软件中心页面
练习：CSS美化网页元素、DIV+CSS布局网页、测试网页跨浏览器平台兼容性，使其显示效果统一
测试要求：Firefox、IE6、IE7、IE8均保持统一显示效果完成时间：45分钟共性问题集中讲解练习第64页/共69页65. 小结为解决跨浏览器兼容性问题，针对Firefox、IE6-IE8写CSS Hack时的顺序是？
至少说出4种常见的CSS Hack，并说明它们所针对的浏览器各是什么？提问第65页/共69页66. 答疑时间同学们请就以下方面的问题请教老师
使用CSS制作网页的优势
DIV标签的特点
使用DIV+CSS布局的优势
使用DIV划分页面结构
使用CSS定位
浏览器兼容性产生的原因
（教员备课时自行填写）第66页/共69页67. 总结CSS的基本语法结构由哪几部分构成？
CSS的三种基本选择器是什么？
至少说出CSS中5种用于美化网页元素的属性。
可用于创建横向多列布局的属性是什么？
使用DIV+CSS布局的优势是什么？提问第67页/共69页68. 作业
必做
教员备课时在此添加内容
选做
教员备课时在此添加内容
提交时间：xxx
提交形式：xxx
阅读学生用书第3章，观看平台《JavaScript的语法》和《使用JavaScript制作网页特效》专题课件
教员备课时在此添加内容
课后作业预习作业第68页/共69页69. (本页无文本内容)
