9重叠样式表CSS课题.pptVIP

第9章 层叠样式表CSS技术 使用层叠样式表 (CSS) 设置网页格式 CSS 能更加灵活自如地控制网页的外观 内容 什么是CSS 何处使用CSS CSS基本语法 在Dreamweaver中定义CSS 课堂任务 通过一个示例，介绍如何使用CSS来设置文本格式和定位文本 什么是CSS CSS Cascading Style Sheets 层叠样式表 为了解决内容与表现分离而制定的一系列格式设置规则，用以控制 Web 网页内容的外观 样式定义如何显示HTML元素 样式通常存储在样式表中 多个样式可以层叠 体验 访问网站Zen Garden，感受一下CSS的魅力 样式解决了表现和内容相分离 HTML 标签原本被设计为用于定义文档内容。 通过使用 h1、p、table 这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息 文档布局由浏览器来完成，而不使用任何的格式化标签。 由于两种主要的浏览器（Netscape 和 Internet Explorer）不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。 样式解决了表现和内容相分离 为了解决这个问题，万维网联盟（W3C），肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创造出样式（Style）。 网页内容（HTML 代码）位于自身的 HTML 文件中 定义代码表现形式的 CSS 规则位于另一个文件（外部样式表）或 HTML 文档的另一部分（通常为 head 部分）中。 样式表更加灵活和高效 使用 CSS 可以非常灵活并更好地控制网页的外观，从精确的布局定位到特定的字体和样式等。 使用CSS可以控制许多仅使用 HTML 无法控制的属性。例如，可以为所选文本指定不同的字体大小和单位（像素、磅值等）。 还可以确保在多个浏览器中以更一致的方式处理页面布局和外观。 容易更新；只要对一处 CSS 规则进行更新，则使用该定义样式的所有文档的格式都会自动更新为新样式。 多重样式可层叠为一个 “层叠”是指对同一个元素或 Web 页面应用多个样式的能力。 样式表允许以多种方式规定样式信息。 样式可以规定在单个的 HTML 元素中； 在 HTML 文档的头元素中； 或在一个外部的 CSS 文件中； 甚至可以在同一个 HTML 文档内部引用多个外部样式表。 例如，可以创建一个 CSS 规则来应用颜色，创建另一个规则来应用边距，然后将两者应用于一个页面中的同一文本。所定义的样式“层叠”到 Web 页面上的元素，并最终创建想要的设计。 内容 什么是CSS 何处使用CSS CSS基本语法 在Dreamweaver中定义CSS 课堂任务 通过一个示例，介绍如何使用CSS来设置文本格式和定位文本 何处使用CSS CSS按其位置可以分成三种： 外部样式表（External Style Sheet） 定义在外部的 CSS 文件中 内部样式表（Internal Style Sheet） 定义在HTML文档的头部 内联样式（Inline Style） 定义在具体的HTML元素内 内联样式（Inline Style） 写在HTML元素里面。内联样式只对所在的元素有效。 例： p style=font-size:20pt; color:red 这个Style定义p/p里面的文字是20pt字体，字体颜色是红色。 内部样式表（Internal Style Sheet） 写在HTML的head/head部分。内部样式表只对所在的网页有效 html head style type=text/css .mylayout {border-width:1; border:solid; text-align:center; color:red } /style /head body h1 class=mylayout 这个标题使用了style。/h1 h1这个标题没有使用style。/h1 /body /html 外部样式表（External Style Sheet） 将样式写在一个以.css为后缀的CSS文件里，然后在每个需要用到这些样式的网页里引用这个CSS文件。 html head link href=“my.css rel=stylesheet type=text/css /head body h1 class=mylayout 这个标题使用了Style。/h1 h1这个标题没有使用Style。/h1 /body /html 内容 什么是CSS 何处使用CSS CSS基本语法 在Dreamweaver中定义CSS 课堂任务 通过一个示例，介绍如何使用CSS来设置文本格式和定位