第4章页面设计—CSS.pptVIP

Web技术原理及应用Web数据库原理和应用 烟台大学计算机学院 陈智育 第4章 页面设计-CSS Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. 内容 什么是CSS 1 样式引用方式和层叠顺序 2 样式条目定义规则 3 样式属性 4 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. CSS CSS: Cascading Style Sheets CSS: 层叠样式表, 级联样式表; W3C标准[2.0] CSS: 将Web显示[表示]从HTML内容[结构]中分离出来 样式: 定义如何显示HTML元素 表: 样式通常存放在样式表中,常独立为CSS文件 CSS文件为多网页服务. 可同时控制多个网页的样式和布局(统一风格); 一个Web文件也可引用多个CSS文件 层叠: 多个样式定义会叠加在一起 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. CSS-样式引用方式 内联样式: 在元素内部, 用style属性设置 样式的作用限于元素内部 style属性值为样式规则(见后) 几乎所有体部标签都支持style属性 内容和显示仍混在一起, 尽量少用 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. CSS-样式引用方式 内部样式表 在Web文件head中, 用style标签定义 样式的作用限于本文件 style标签中可包含多个规则条目 style标签的type属性默认值为”text/css” 使用注释符以适应不支持CSS的浏览器 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. CSS-样式引用方式 外部样式表(链接) CSS样式独立为文件(.css), 可由多个网页共用 head中使用link标签链接CSS文件 网页中可同时链接多个CSS文件 CSS文件由多个规则条目构成 mystyle.css Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. CSS-样式引用方式 外部样式表(引入) 在head的style标签中使用或CSS文件中 用@import声明引入外部CSS文件 表现和link方式一样 声明语句由CSS文件内容完全替换(C语言) 记得末尾加分号 类似#include Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. CSS-样式引用方式 对象引用 将HTML元素作为文档对象 应用文档对象模型的访问方法 JavaScript动态修改style对象属性来改变样式 注意名称变化(例: font-size=fontSize) 驼峰命名法 查看效果 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. CSS-样式层叠 五种样式引用方式可混合使用 层叠: 多种样式设置(多方式,多文件)综合效果 继承: 下面未定义的样式, 继承上面的 覆盖: 下面定义的样式, 覆盖上面的 样式层叠(覆盖)优先级(低-高) 浏览器缺省样式 外部样式表(链接) 外部样式表(引入) 内部样式表 内联样式表 对象引用 P158 同样式表中越后优先级越高 选择符也有优先级 !important Evaluation