实用页面设计方法_4_CSS.ppt [兼容模式].pdf

实用页面设计方法 CSS 1 课程结构 内容 课时（H） 第一章： CSS概述 0.2 第二章： CSS的样式 0.3 第三章： CSS基本语法 2 第四章： CSS布局 1 第五章：使用JavaScript控制CSS 0.5 第一章：CSS概述 目标: 本章旨在向学员介绍CSS的相关概 学时：0.2学时 念，通过本课的学习，学员应该掌 握如下知识： 教学方法：讲授 1）了解CSS的相关概念 ppt 1.1 CSS概述 CSS-级联样式表单 – Cascading Style Sheet – 对W EB页面进行外观控制的机制 – 将页面的内容和表现分离 CSS版本 – 目前为止，CSS有两个官方标准：CSS1和CSS2 – CSS1的功能在大多数浏览器中都被支持 4 1.2 示例-无CSS 5 1.2 示例-有CSS 6 1.3 CSS优点 优点 – 代码独立，便于控制 – 样式文件可在浏览器中缓存 – 便于分工合作 – 提高了可访问性 – 提供更多的外观控制手段 7 第二章：CSS的样式 目标: 本章旨在向学员介绍CSS的样式及 学时：0.3学时 将样式表加入到页面中，通过本 的学习，学员应该掌握如下知识： 教学方法：讲授 1）了解CSS的样式 ppt + 课堂演示 2）能够使用样式表 2.1 样式 CSS样式 – 内联样式 – 嵌入样式 – 外联样式 9 2.2 内联 内联样式—inlineCSS.html – 把样式代码内联到标记内 使用style作为属性，样式语句作为属性值 如： 控制 标记的边框样式为不折叠 10 2.2 内联特点 内联样式 点 – 看上去很直观 – 针对个别元素控制 – 和传统的外观控制方式没有本质的不同 – 不推荐使用 11 2.3 嵌入 嵌入样式—internalCSS.html – 使用 标记把样式代码插入到页面中 – 一般插入到 标记中 – 如： 12 2.3 嵌入特点 点 – 将CSS语句直接写在HTML文档中，但它独立存在，方便 维护和修改 – 仅针对一个HTML文档进行设置 – 代码是HTML文档的一部分，没有利用浏览器的缓存机制 13 2.4 外联 外联样式—externalCSS.html – 通过外部样式文件对页面进行控制 – 外部的样式文件通过HTML的link元素连接到HTML文档中 14 2.4 外联使用 使用 – 建立外部样式文件 （.css ） – 外部的样式文件不能含有任何像 或 这样的 HTML标记 – 样式表文件仅仅由样式规则或声明组成 15 2.4 外联特点 点 – 当样式被应用到很多的网页时，推荐使用外部样式表 – 网页制作者使用外部样式表，在改变整个网站的外观时， 仅需要改变一个文件 – 大多数浏览器会保存外部样式表在缓冲区，从而如果样式 表在缓冲区就避免了在展示网页时的延迟 – 在实际开发中一般都使用外联样式 16 第三章：CSS基本语法 目标: 本章旨在向学员介绍CSS的基本语 学时：2.0学时 法，通过本课的学习，学员应该掌 握如下知识： 教学方法：讲授 1）了解CSS的基本语法 ppt + 上机练习 2）了解CSS的选择符 3）了解伪类及伪对象 3.1 语法 选择符 属性1:属性值1;属性2:属性值2; – 选择符（selector ）：指定样式适用的标记，除指定标记 外，样式不起作用 – 属性：样式的关键字 – 属性值：描述样式的值； – 式：属性与属性之间使用分号分隔，属性与属性值之间 使用冒号分隔 – 如：P font-size:12pt; color:red; 18 3.1 语法 使用—html.css 如果是多个单词，使用双 引号括上 body color:black p font-family:”sans serif” 如果有多个属性， p text-align:center;color:red 使用分号将各个属 p 性分隔开 text-align:center; color:black; 注意代码的 式 tont-family:arial ，使可读性更好 19 3.2 选择符分类 选择符分类 – 普通选择符 – 类选择符 – id选择符 20 3.2.1 普通选择符 普通选择符 – 任意的HTML标记 – 其样式仅仅作用在选择符指定的HTML元素上 – 如： p color:red 21 3.2.2 类选择符 类选择符—css_choose.html – 同一类型的不同元素通过设置不同CLASS来显示不同样式 ；但一个元素只能设置一个CLASS属性 – HTML元素名加上类名，中间用 “.