- 1、本文档共27页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
第11章 CS3
第11章 CSS3概述 第*页 第11章 CSS3概述 本章概述 本章的学习目标 主要内容 第*页 本章概述 在过去,Web页面的许多视觉效果都是由标记元素来描述,直接把表示页面结构的标记与表示页面外观的标记或属性混合在一起,HTML就是这样的标记语言。然而,之后出现的严格的XHTML则不允许出现用于描述外观的元素与特性,标记语言只是用于描述页面结构。描述外观的工作则交给用层叠样式表(Cascading Style Sheet,CSS)语法编写的样式表来完成。标记与样式之间的职责区分为Web页面的开发、维护,甚至运行性能都带来了诸多益处,而这种解决方案与仅仅使用标记相比,优势巨大。 第*页 本章的学习目标 CSS发展历史; 为文档应用CSS的3种方式; 了解CSS3的新增特性; 了解查看CSS3兼容性的方法。 第*页 主要内容 11.1 CSS变迁 11.2 了解CSS3新增特性 11.3 CSS3兼容性速查 11.4 本章小结 第*页 11.1 CSS变迁 11.1.1 CSS产生的原因 11.1.2 CSS发展历史 11.1.3 Hello CSS World 11.1.4 为文档应用CSS的方式 第*页 11.1.1 CSS产生的原因 HTML的设计初衷并不是为了描述外观,HTML本身也并不善于此道。而早起的HTML却是既要负责文档结构又要负责文档样式,任务太重。因此,后来人们用HTML标记语言描述页面的结构,而将表示网页外观的功能标记或属性分离出来,这就形成了表示网页外观的替代方法——层叠样式表(Cascading Style Sheet,CSS)。 第*页 11.1.2 CSS发展历史 1994年哈坤?利提出了CSS的最初建议。伯特?波斯(Bert Bos)当时正在设计一个叫做Argo的浏览器,他们决定一起合作设计CSS。 第*页 11.1.3 Hello CSS World 详情见【例11-1】一个使用CSS样式表现网页外观的例子。 第*页 11.1.4 为文档应用CSS的方式 CSS提供了3种使用方式:第一,内联样式表,通过HTML元素的style属性直接将样式嵌入HTML标记中;第二,样式规则块,将表示样式的style属性的内容,全部提到公共的样式规则块中,以方便管理和扩展;第三,外部链接样式文件,将样式彻底独立成一个文件,供任何页面调用。 第*页 主要内容 11.1 CSS变迁 11.2 了解CSS3新增特性 11.3 CSS3兼容性速查 11.4 本章小结 第*页 11.2 了解CSS3新增特性 11.2.1 CSS3选择器 11.2.2 引用服务端字体 11.2.3 换行处理 11.2.4 文字渲染 11.2.5 多列布局 11.2.6 边框和颜色 11.2.7 渐变效果 11.2.8 阴影和反射效果 11.2.9 背景效果 11.2.10 盒子模型 11.2.11 过渡、形变与动画 第*页 11.2.1 CSS3选择器 CSS3在CSS2基础上提供了更多更加方便快捷的选择器,例如: tbody:nth-child(even),nth-child(odd), :not(.textinput), div:first-child, E:nth-last-child(n)、E:nth-of-type(n)、E:nth-last-of-type(n)、E:last-child、E:first-of-type、E:only-child、E:only-of-type、E:empty、E:checked、E:enabled、E:disabled、E::selection、E:not(s),利用这些新特性,可以极大程度地减少无畏代码。 第*页 11.2.2 引用服务端字体 当未在客户端安装字体样式时,在CSS3中,可以使用服务端字体,代码如下: @font-face { font-family: BorderWeb; src:url(BORDERW0.eot); } 以上代码声明了服务端字体BORDERW0.eot,冠以“BorderWeb” 的字体名称。声明之后即可在页面中使用了:“FONT-FAMILY:BorderWeb” 。 第*页 11.2.3 换行处理 word-wrap属性主要用于指定当当前行超过指定容器的边界时如何处理的操作。 第*页 11.2.4 文字渲染 CSS3开始支持对文字进行更深层次的渲染,示例代码如下: div { -webkit-text-fill-color: black; -webkit-text-stroke-color: red; -webkit-text-stroke-width: 2.75
您可能关注的文档
- 神经内科常见病护理常规.doc
- 社区护理 第章.ppt
- 神经内科常见诊疗常规.doc
- 社区常见慢性患者的护理与管理.ppt
- 神经内科护理规.doc
- 神经外科护理规.doc
- 神经外科护理断及措施.doc
- 神经外科危重人护理计划.doc
- 神经外科标准理计划.doc
- 神经外科疾病理常规.doc
- 江苏省灌云高级中学2023-2024学年高三上学期第一次月考地理试题含答案.docx
- 备战2024年高考物理一轮重难点复习 第十三章 近代物理.docx
- 江苏省高邮市一中2021-2022学年高三上学期第一次月考语文试题(原卷版).docx
- 江苏省华罗庚中学2023-2024学年高三上学期12月阶段检测数学试卷含答案.docx
- 江苏省海门中学2023-2024学年高三上学期第一次调研考试地理试题及答案.docx
- 备战2024年高考物理一轮重难点复习 第九章 恒定电流.docx
- 江苏省高邮市2023-2024学年高三下学期3月学情调研数学试题含答案.docx
- 备战2024年高考物理一轮重难点复习 实验十一:探究影响感应电流方向的因素.docx
- 备战2024年高考物理一轮重难点复习 实验三:验证平行四边形定则.docx
- 备战2024年高考物理一轮重难点复习 第十四章 光.docx
文档评论(0)