网页设计与制作4网页表现语言CSS.ppt

2010网页设计与制作 第4章 第4章 网页表现语言CSS 学习目标： CSS的基本语法 选择符类型 各样式属性及取值 4.1.1 CSS简介 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题 4.1.2 CSS的起源 HTML 标签原本被设计为用于定义文档内容。通过使用 h1、p、table 这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标签。 由于两种主要的浏览器（Netscape 和 Internet Explorer）不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。 为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创造出样式（Style）。 所有的主流浏览器均支持层叠样式表。 4.2.1 基本选择符 选择符 { 属性1:属性值1; 属性2:属性值2; ……. } 4.2.2 派生选择符 选择符1 选择符2 { 属性1:属性值1; 属性2:属性值2; ……. } 4.3.1 内部样式表 head style type=text/css !-- 样式规则1 样式规则2 …… -- /style /head 4.3.2 内联样式表 在相关的标签内使用样式（style）属性。style 属性可以包含任何 CSS 属性。 慎用这种方法，例如当样式仅需要在一个元素上应用一次时。 p style=“样式规则1;样式规则2;…… This is a paragraph /p 4.3.3 外部样式表 链入式 head link rel=“stylesheet” type=“text/css” href=“样式表文件URL / /head 导入式 style type=“text/css” !-- @import url(“样式表文件URL”); -- /style 4.4.1 尺寸 4.4.2 颜色 4.5.1 字体属性 4.5.2 文本属性 4.5.3 背景属性 4.5.4 表格属性 4.5.5 列表属性 * * Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. 选择符类型 类选择符 id选择符 标记选择符 选择符名称 .名称 #名称 标记名 调用 class属性 id属性 标记名 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.