HTML5+CSS3网页设计实例教程-第7章-CSS3概述_第1页
HTML5+CSS3网页设计实例教程-第7章-CSS3概述_第2页
HTML5+CSS3网页设计实例教程-第7章-CSS3概述_第3页
HTML5+CSS3网页设计实例教程-第7章-CSS3概述_第4页
HTML5+CSS3网页设计实例教程-第7章-CSS3概述_第5页
已阅读5页，还剩20页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第7章CSS3概述本章概述本章的学习目标主要内容第2页本章概述过去,Web页面的许多视觉效果都是由标记元素来描述,直接把逻辑标记与物理标记混合在一起,HTML就是这样的标记语言。然而,严格的(X)HTML变体则不允许出现用于描述外观的元素与特性,标记语言只是用于描述结构。描述外观的工作则交给用层叠样式表(CascadingStyleSheet,CSS)语法编写的样式表来完成。标记与样式之间的职责区分为Web页面的开发、维护,甚至运行性能都带来了诸多益处,而这种解决方案与仅仅使用标记相比,优势巨大。第3页本章的学习目标了解CSS演变历史掌握CSS规则及概念掌握如何应用CSS描述Web页面外观了解CSS3的新增特性第4页主要内容7.1CSS基础7.2添加CSS规则的位置7.3CSS属性7.4CSS3新增特性7.5一个基本实例7.6本章小结第5页7.1CSS基础CSS演变历史CSS的版本CSS规则继承CSS演变历史过去15年,W3C的级联样式表（或称层叠样式表）规范已经从CSS1规范发展到了CSS2规范,前者于1996年12月17日成为W3C推荐,而后者于2011年6月7日成为W3C推荐,虽然很早之前就已经开始创建CSS3。第6页CSS的版本第7页常用CSS版本介绍CSS版本描

述CSS1经典的CSS的应用引入了text、list、box、margin、border、color和background特性。CSS1最初是在1996年定义的，Web浏览器几乎支持CSS1中的每一项功能，但是一些使用较少的功能也的确存在一些问题，例如white-space、letter-spacing、display等等。CSS1中的一些问题在InternetExplorer7浏览器之前的旧版本的浏览器中更明显CSS2这个版本以定位和媒体功能著称，特别是print样式表功能。CSS2的许多方面，例如音频样式表，从来没有广泛实施过，并且在CSS规范后面的版本中取消了CSS2.1这个版本是CSS 2的修订版，修改了前面版本的一些错误，并且更符合多数浏览器供应商能够实现功能的实际。注意，这个版本删除的许多CSS2的功能在CSS 3的模块中都可以找到。这个版本是用于研究和使用CSS规范的推荐版本CSS3CSS的模块化规范。不同的模块的扩展、完善了以往CSS版本的各个方面。例如，对CSS3颜色模块解决了色彩校正，透明度等功能；CSS3字体模块增加了文字效果、调整它们的显示，甚至下载自定义字体。另外，还有一些模块是新添加的，如渐变(Transitions)和动画(Animations)模块，和其他已经陈旧的不再使用的功能则被抛弃，或者将被抛弃。不管是什么情况，当谈到CSS3，应认真核对和测试对CSS3Web站点的支持情况CSS规则CSS以将规则与网页中出现元素相关联的方式工作。这些规则控制元素中的内容应如何渲染。第8页CSS规则组成第9页主要内容7.1CSS基础7.2添加CSS规则的位置7.3CSS属性7.4CSS3新增特性7.5一个基本实例7.6本章小结第10页7.2添加CSS规则的位置将CSS规则放在一个独立文件中，这种方式被称为“外部样式表”(externalstylesheet)。除此之外，CSS规则还可以出现在HTML文档内的两个位置:位于一个<style>元素内，该元素位于文档的<head>元素中位于一个可以带有style特性的元素中，作为style特性的值第11页用<link>元素链入外部样式表<link>元素用于在网页中描述两个文档之间的关系。例如,可以在HTML页面中使用其指定应该用于设置该页面风格的样式表。<link>元素在HTML页面中还起到其他的作用,例如,为对应页面指定一个RSS订阅。这种链接类型与<a>元素不同,因为两个文档是自动关联的,用户不必通过单击任何东西激活链接。第12页用<style>元素导入外部样式表<style>元素位于<head>元素内,用于在网页内包含样式表规则,而非链接某个外部文档。有时,它还被用于需要在单一页面中包含某些额外规则,而且这些规则不必应用于网站内共享同一样式表的全部其他页面的情况。使用外部样式表实例导入外部样式表实例链入外部样式表实例第13页使用外部样式表实例的页面浏览效果外部样式表的优势能够免于在每一页中重复相同的样式规则。能够仅通过修改一个样式表完成多个页面外观的改变,而不必修改每个单一页面。当网站访问者从网站中第一个使用外部CSS的页面下载该文件后,后续页面加载速度会更快。样式表可以作为样式模板,帮助不同作者实现相同的文档风格,而不必了解每一条样式设定。因为网页不包含样式规则,不同的样式表可以与相同文档关联。样式表可以导入并使用来自其他样式表的样式,从而允许模块化开发并获得良好的可重用性。如果移除样式表,可以使网站对于视觉障碍者具有更好的易访问性,因为你不再控制字体与配色方案。第14页第15页主要内容7.1CSS基础7.2添加CSS规则的位置7.3CSS属性7.4CSS3新增特性7.5一个基本实例7.6本章小结第16页7.3CSS属性使用CSS设置网页样式需要创建规则，而这些规则包含了两个部分:一个是选择器，用于指定规则应用的元素；另一个是属性，用于控制这些元素的呈现。因此，如果页面中有一个部分需要设置某种颜色或尺寸，那么就需要使用正确的选择器瞄准页面中的该部分，并使用正确的属性来相应改变其外观。第17页主要内容7.1CSS基础7.2添加CSS规则的位置7.3CSS属性7.4CSS3新增特性7.5一个基本实例7.6本章小结7.4CSS3新增特性CSS3模块化方式CSS3新增属性及伪类CSS3的优点第18页CSS3模块化方式CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块。随着CSS普及率不断上升,对添加规范的呼声也在增加。除了将许多的更新加入庞大的规范之外,更容易和更有效的方法是更新规范里的单个条目。模块就能以更及时、更简便的方式更新CSS,从而能够更灵活、更及时地演进整个规范。第19页CSS3新增属性及伪类CSS3新增属性背景和边框文本效果2/3D转换动画用户界面css3新增伪类:nth-child(n):这个伪类用于选择是父元素的第n个子元素的元素。:nth-last-child(n):选择是父元素的倒数第n个子元素的元素。:only-child:选择是父元素的唯一子元素的元素。:last-child:选择是父元素的最后一个元素的元素。:nth-of-type(n):选择同类的，是父元素的第n个子元素的元素。第20页CSS3的优点CSS3中定义的新属性通过默认背景更新进入浏览器,以确保标准支持以相同速度增加。随着CSS3不断演进,作为设计者的工作将变得越来越简单。流水线设计改进了工作流程,将直觉方面推给浏览器,这样就不用在Photoshop上花更多时间,也不用在写标记或CSS上花更多时间了。第21页第22页主要内容7.1CSS基础7.2添加CSS规则的位置7.3CSS属性7.4CSS3新增特性7.5一个基本实例7.6本章小结第23页7.5一个基本实例本例使用单独的文件保存CSS规则,而HTML页面则包含指向该文件的链接,即所谓的“样式表”(stylesheet)。。关联样式表后的页面效果第24页主要内容7.1CSS基础7.2添加CSS规则的位置7.3CSS属性7.4CSS3新增特性7.5一个基本实例

人人文库> 全部分类> 行业资料 > 信息产业

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论