第3章_CSS样式表演示文稿.PPTVIP

第3章 CSS样式表 讲述内容 认识CSS 样式表的定义与使用 文字与排版样式的使用 背景与颜色的使用 美化网页与超链接的设置 矩形模块的概念与使用 区域组件与立体空间的建立 列表项目的使用 CSS与XML、JavaScript 滤镜特效 3.1 认识CSS 3.1.1 CSS的简介 什么是CSS？ CSS（Cascading Style Sheet）层叠样式表。 层叠的意思：当在HTML文件中引用数个定义样式的样式文件时，若数个样式文件间定义的样式发生冲突，将依据层次顺序进行处理。 样式表技术诞生于1996年，需要浏览器支持，现在大多数浏览器都支持CSS。 3.1 认识CSS 3.1.1 CSS的简介 什么是CSS？ 它允许在html文档中加入样式，如字体类型、颜色、大小等。 是一种技术上格式化网页的标准方式，它扩展了HTML的功能，使网页设计者能够以更有效的方式设置网页格式。 为什么要有CSS？ 想一想：如果你希望将网站上的所有网页中的所有标题都改成红色，你会怎么办？ 3.1 认识CSS 引例 3.1 认识CSS 引例 3.1 认识CSS 引例 引例 html head title样式表举例/title style type=text/css !-- h1 { font-size:36px; font-family:隶书; font-weight:bold; color:#993366 } -- /style /head body p style=color:#ff0000这段文字将显示为红色/p p style=color:#000000;background-color:yellow这段文字的背景色为I黄/I/p p style=font-family:华文彩云;font-size:24px这段文字将以黑体显示/p ph1 align=center今天学习样式表的相关知识。/h1/p /body /html 3.1 认识CSS 对于设计者来说它是一个非常灵活的工具，可以将所有有关于文档的样式指定内容全部脱离出来，在行内定义、在标题中定义，甚至作为外部样式文件供html调用而不必再把繁杂的样式定义编写在文档结构中。 3.1 认识CSS CSS的优点 在几乎所有的浏览器上都可以使用。 以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。 使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。 可以轻松地控制页面的布局。 可以同时更新许多网页的风格格式。 等等。 3.1 认识CSS 3.1.2 CSS文件的应用 CSS所编辑出的文件与HTML相同，都属于纯文本文件，差别在于扩展名格式的不同（.htm/.css)。 CSS代码也可以放在HTML文件中 另外，CSS不只可以使用在HTML上，还可以用在别的文件上，如XML或JavaScript上，这部分内容将在后面讲述。 3.2 样式表的定义与使用 在CSS里可以使用四种不同的方法，将样式表的功能加到网页里，方法如下： 直接定义标记的STYLE属性 定义内部样式表 嵌入外部样式表 连接外部样式表 3.2 样式表的定义与使用 3.2.1 直接定义标记的STYLE属性 语法格式： 标记名称 STYLE=样式属性:属性值;样式属性:属性值;……. 注意：这种方法定义的样式只可以控制该标记 3.2 样式表的定义与使用 如果希望某段文字和其他段落的文字显示风格不一样，可采用“行内样式”。行内样式使用标记的 style 属性定义。 3.2 样式表的定义与使用 3.2.2 定义内部样式表 在HTML文件内定义样式表 在HTML标记符中直接指定样式信息显然没有发挥出样式表的主要优势——简化格式设置和维护工作，因为每一个style属性都必须单独设置。如果能将相类似的样式都统一定义了，然后再具体应用于网页中的元素，那么就能体现出CSS的优越性了。实际上，这正是CSS应用于网页的最常用方式，即在HEAD标记符内使用STYLE标记符，然后在STYLE标记符中定义样式。 3.2 样式表的定义与使用 3.2.2 定义内部样式表 在HTML文件内定义样式表 在STYLE元素中定义样式，在整个HTML文件中，要使用该样式的标记可以直接调用。 语法格式： STYLE TYPE=TEXT/CSS !-- /*注释*/ 选择符1｛样式属性:属性值;……….｝ 选择符2｛样式属性:属性值;……….｝ …… -- /STYLE 行内样式局限于某个标签，若希望本网页内的所有同类标签都采用统一样式，应采用内嵌样式。 3.2 样式表的定义与使用 实例2：利用ST