整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

web前台技术-4-cssppt课件

Ltd. WEB 前台技术 4-CSS Ltd. 课程结构 内容 课时 第一章:CSS 概述 0.2 第二章: CSS 的样式 0.3 第三章: CSS 基本语法 2.0 第四章: CSS 布局 1.0 第五章:使用 pt 控制 CSS 0.5 Ltd. 第一章:CSS 概述 学时: 0.2 学时 教学方法:讲授 ppt 本章旨在向学员介绍CSS 关概念及优点,通过本课的学习,学员应该掌握如下知识: )了解CSS 的概念 )了解CSS 的优点 Ltd. Sheet )级联样式表 在W3C标准中被定义为“一种对Web 页面进行外观控制 的机制” CSS和HTML 、 是并列的3 种用于Web 开发 的技术 CSS开始是为 HTML 文档设计的 Ltd. Ltd. Ltd. CSS简介 –CSS 能够将文档的格式化信息与文档的正文分离开来 –CSS 的功能不断被扩充,目前为止,CSS 样式单有两个官方 标准:CSS1 和CSS2 –目前,CSS1 的功能在大多数浏览器中都得到了广泛的支持 CSS的基本概念 –CSS 由一定的语法组成,对Web 页面元素的外观进行控制 –CSS 通过一定的机制与特定文档相关联,对此文档进行样式 控制 –CSS 是Web 标准推荐的页面表现控制方式 –CSS 被设计用来替代传统的HTML 表现代码 Ltd. CSS优点 样式代码独立于HTML页面,有利于进行站点的统一控制 由于HTML页面中不再包含大量的表现代码,提高了可访 提供比传统HTML更多的外观控制手段 Ltd. 第二章:CSS 的样式 学时: 0.3 学时 教学方法:讲授 ppt+ 演示 本章旨在向学员介绍CSS 式及怎样将样式表加入到HTML XML中,通过本课的 学习,学员应该掌握如下知识 )了解CSS 的样式 )能够将样式表加入到HTML )能够将样式表加入到XML Group Ltd. CSS的样式 按CSS代码的位置划分 嵌入样式( Sheet ):嵌入一个样式块 内联样式( 外联样式( Sheet ):链接一个样式文件 将样式表加入到HTML 外联样式11 Group Ltd. CSS 内联样式- 示例: .html 将样式代码直接内联到标记内,以style作为属性,语句作 为属性值 style属性可以包含任意的CSS 使用style控制 标记的边框样式为不折叠 将外观控制代码散布于整个HTML文档,和传统的外观控 制方式没有本质的不同 一般不推荐使用12 Group Ltd. CSS 嵌入样式- Style Sheet 示例: .html –使用在选择器中省略了标记 名称,则可以在所有的 HTML 元素中使用此属性 29 Group Ltd. id id选择器 用户可以使用id属性对页面中的标记进行自定义名称 id是一个标识,在网页中每个id 名称只能使用一次 和类型选择器不同,id选择器使用“#” 代替“.” 实现标记 的定位 用id属性区分标记通常在HTML/XML 文档中进行 通过id属性指定要应用样式的标记 30 Group Ltd. id id选择器 练习:建立一个HTML文件,其中有h1-h6 标记的文字; 对h1 与h2 标记使用类型选择器设置样式;对h3 与h4 标记使 用id 选择器设置样式;对h5 标记使用通用的类型选择器设置样 式;对h6 标记使用通用的id 选择器设置样式; .html 31 Group Ltd. 通常HTML/XML文档中某一子元素的格式化属性依赖于其 父元素的属性规则 仅仅想对某一个对象中的子对象进行样式指定时,使用层次选择器 层次选择器是由多个子选择器组成的,它们之间用空格符分开,子选择器组合中前一个对象包含后一个对象 32 Group Ltd. 对于所有CSS选择器,无论是什么样的选择器,均可以进 行组合使用 33 Group Ltd. 在CSS中,一些样式是可继承的 设计HTML/XML文档显示格式时,不必对每个元素的属性 都进行设置 34 Group Ltd. 在CSS中,常常会有需要重复定义的场合出现 在层次结构上最接近指定结点的CSS起作用 35 Group Ltd. 由CSS自动支持,属CSS 的一种扩展型类和对象 伪类及伪对象使用时只能按照标准格式进行应用36 Group Ltd. CSS内置的标准伪对象 37 Group Ltd. CSS内置的标准伪类 - 38 Group Ltd. CSS CSS中添加注释 注释,但要注意不要将注释嵌入到选择器语句里面39 Group Ltd. 第四章:CSS 布局 学时: 1.0 学时 教学方法:讲授 ppt+ 上机练习 本章旨在向学员介绍CSS 局css里link外部样式,通过本课的学习,学员应该掌握如下知识: )了解div 的概念 )会使用CSS 的布局功能 40 Group Ltd. div div标签 div是CSS 布局的核心对象 传统采用表格式布局,在页面中绘制一个由多个单元格组成的表格,在相应的表格中放入内容 41 Group Ltd. div 使用div 应用标签形式,将内容放置其中,并可以应用 div 标签 div对象中除了直接放入文本,也可以放入其他标签,也可 以多个div 标签进行嵌套使用 div标签只是一个标识,作用是把内容标识成一个区域,并 不负责其他事情 div只是CSS 布局工作的第一步 使用div对象时,可以加入其他属性 id,class ,align ,style 在CSS布局方面,为了实现内容与表现分离,不应将 align ,style 属性写在div 标签之中 42 Group Ltd. div 理解div 在一个没有任何CSS应用的页面中css里link外部样式,即使应用了div div是一个block 对象 div用于大面积,大区域的块状排版 两个div的关系,只是前后关系,div 本身与样式没有任何 关系 样式需要编写CSS来实现 43 Group Ltd. div css布局 使用div将内容标记出来 然后为这个div编写出需要的CSS 样式 div的并列与嵌套结构 div可以多层进行嵌套使用,实现更为复杂的页面排版 应当尽可能少用嵌套,以保证浏览器不要过分消耗资源对嵌套关系进行解析 44 Group Ltd. div 45 Group Ltd. CSS 将所有HTML/XML元素都放置在一个盒子中,然后通过对 这个盒子的外观控制来实现整个页面的外观控制 Group Ltd. CSS 47 Group Ltd. CSS 设计合理的CSS 结构 采用2层CSS 结构 如:一个网站中有一个index.html文件,可以做设置 48 Group Ltd. CSS 使用Div 布局 真正使用div布局,要把页面的内容和表现完全分离开,在 页面的内容部分不应该出现表现控制标签,如 font 、color 、 、width 、align 等标签。

使用Div+css设计: 、用div来定义语义结构; 、使用CSS来美化网页,如加入背景、线条边框、对齐 属性等 、在CSS定义的盒子内加入内容,如文字、图片等(没 有表现属性的标签) 49 Group Ltd. 第五章:使用 控制CSS 学时: 0.5 学时 教学方法:讲授 ppt+ 上机练习 本章旨在向学员介绍怎么使用 来控制 CSS ,通过 本课的学习,学员应该掌握如 下知识: )使用 改变结点 CSS50 Group Ltd. CSS style对象 在中利用style 对象来控制元素的CSS 每个style对象对应为该元素指定的CSS 示例:style.html 每个CSS属性一一对应style 对象的属性,只是在书写上有所 区别 对于单个单词的属性,在style对象中的属性名称不变 对于双单词或多单词的属性,在style对象中的属性名称改写 为骆驼形写法(第一个单词首字母小写,其它单词首字母大 Group Ltd. 练习-.html 自己设计一个页面,参考div布局的示例,分为页头、内容 、版权;内容自己设定; 引入外部CSS,在CSS 文件中有两套样式(可以把样式规 定得简单一些,不需要很多样式代码); 个人观点供参考,欢迎讨论