第4章：CSS样式表(一)试卷.ppt

表格布局 表格布局 表格布局的优缺点和应用场合 优点 缺点 应用场合 方便排列有规律、结构均匀的内容或数据 产生垃圾代码、影响页面下载时间、灵活性不大难于修改 内容或数据整齐的页面 页面布局之DIV布局 应用了DIV布局的淘宝网主页 如何实现这样的页面布局？ 什么是DIV DIV元素是用来为HTML文档内大块的内容提供结构和背景的元素。 创建DIV的步骤如下： 1、新建一个空白文档 2、选择“插入” ?“布局对象” ?“层” 或者 在“布局”插入栏?使用“绘制层”按钮进行绘制层 用Dreamweaver绘制如下图所示的3个层，并为每个层设置不同颜色 什么是DIV STYLE type=text/css #Layer1 { position:absolute; left:9px; top:12px; width:418px; height:58px; z-index:1; background-color: #FF0000; } …… /STYLE …… DIV id=Layer1/DIV …… ID样式选择符，方便层引用 绝对定位 层距离浏览器左边界和上边界的距离 层的宽度和高度 层叠顺序编号 层背景色 层引用样式 Id为Layer1的层所对应的效果 DIV层布局 优点 缺点 应用场合 代码精简、提高页面下载速度、表现和内容相分离等 比较灵活 难于控制 复杂的不规则页面、业务种类较多的大型商业网站 DIV布局的优缺点和应用场合 最佳布局 如何实现这样的页面布局？ head导航块层 content内容块层 foot版权块层 表格 表格 表格 表格 表格 表格 表格 表格 使用DIV＋TABLE，整体布局用DIV，每个块的内容用表格 最佳布局 创建如下图所示DIV+表格布局的页面 总结 方框属性有哪些常用属性？并分别说明其含义？ 超链接样式有哪几种？ 内嵌样式表、行内样式表、外部样式表文件分别适用什么场合？ 人有了知识，就会具备各种分析能力， 明辨是非的能力。 所以我们要勤恳读书，广泛阅读， 古人说“书中自有黄金屋。 ”通过阅读科技书籍，我们能丰富知识， 培养逻辑思维能力； 通过阅读文学作品，我们能提高文学鉴赏水平， 培养文学情趣； 通过阅读报刊，我们能增长见识，扩大自己的知识面。 有许多书籍还能培养我们的道德情操， 给我们巨大的精神力量， 鼓舞我们前进。 讲解要点： * 第4章 CSS样式表（一） 本章任务 美化界面 使用DIV+CSS布局 为什么需要CSS样式表 HTML标签的外观样式比较单一 颜色只有黑白 字体类型和大小无变化 样式表的作用相当于华丽的衣服 内容相同 外观不同 为什么需要CSS样式表 样式表能实现内容与样式的分离，方便团队开发 程序员写代码 美工做样式 内容与样式和谐统一的完整网页 样式表的基本语法 样式表的基本结构 STYLE type=text/css P {color:red; font-size:30px; font-family:隶书;} …… /STYLE 声明文档样式表结束 文档样式表开始，类型为CSS样式 样式规则 选择器 样式规则 P {color:red; font-size:30px; font-family:隶书;} 属性 属性的值 样式表的基本语法 HTML HEAD TITLE样式规则/TITLE STYLE type=text/css P { color:red; font-family:隶书; font-size:24px;} /STYLE /HEAD BODY H2静夜思/H2 P床前明月光，/P P疑是地上霜。/P P我是郭德刚，/P P低头思故乡。/P /BODY /HTML 本页面中所有的P标签都应用了此样式 所有的段落都采用P样式，保证风格统一 用分号隔开 选择器 如何编写此样式?字体类型为律书、大小24px STYLE type=text/css .red { color:red; font-family:隶书; font-size:24px; } …… /STYLE 样式表的基本语法 如果希望其他的标签也能采用P标签的样式，怎么办？ 其他标签和P标签应该采用相同的样式，所以要为它们定义一个共享样式。 类样式(class) .类名 样式规则 样式表的基本语法 HEAD TITLE样式规则/TITLE STYLE type=text/css .red { color:red; font-fam