Internet第06章-2DIV+CSS.ppt

DIV+CSS实现网页布局 1、使用Div Div元素用来在页面中定义一个区域，使用CSS样式控制Div元素的表现效果，在Div元素中可以包含文本、图像、表格以及其他各种页面内容。 1.1 插入Div标签 若要插入 div 标签，请执行以下操作： 在“文档”窗口中，将插入点放置在要显示 div 标签的位置。 执行下列操作之一： 选择“插入”“布局对象”“Div 标签”。 在“插入”栏的“布局”类别中单击“Div 标签”按钮。 出现“插入 Div 标签”对话框。 1.1 插入Div标签 1.2 编辑Div标签 插入Div标签后，可以对Div标签进行各种操作，包括选择、剪切、复制和粘贴等。下面分别进行讲解。 1．选择Div标签 2．剪切和复制Div标签 3．粘贴Div标签 4．删除Div标签 1.3 相邻和嵌套的Div标签 Div标签和表格类似，在没有定义任何样式和行为时，默认换行显示，其中嵌套的Div标签的显示和插入的位置有关。下面分别进行讲解。 1．相邻的Div标签 3 相邻和嵌套的Div标签 2．嵌套的Div标签 2、CSS基础 2.1CSS 简介 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 CSS按其位置可以分成三种： 内嵌样式(Inline Style) 内部样式表(Internal Style Sheet) 外部样式表(External Style Sheet) 2.1CSS 简介 优点： 强大的控制能力和排版能力：CSS 控制字体的能力比标记好多了，因此现在标记早已被 W3C 组织列为不被推荐使用的标记。 提高了网页的浏览速度： 使用 CSS 设计方法比传统的 Web 设计节省了50%到60%的文件尺寸。Table 标签是全部加载完才会显示出来，而 CSS 页面是加载一点显示一点也更好的提高了网页的浏览速度。 缩短修改时间提高工作量：传统的 Web 页面是需要修改每个Font及Table等标签，而利用 CSS 设计的 Web 页面只需要简单的修改几个 CSS 文件就可以重新设计整个站点。 更有利于搜索引擎的搜索：CSS 减少了代码量,使得正文更加突出，有利于搜索引擎的更有效的搜索到你的 Web 页面。 2.2如何创建 CSS 插入样式表的方法有三种： 外部样式表 内部样式表 内联样式 外部样式表 当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 link 标签链接到样式表。link 标签在（文档的）头部： 内部样式表 当单个文档需要特殊的样式时，就应该使用内部样式表。可以使用 style 标签在文档头部定义内部样式表: 内联样式 由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。慎用这种方法。 2.3、CSS 基础语法 CSS 语法由三部分构成：选择器、属性和值： 选择器 (selector) 通常是你希望定义的 HTML 元素或标签， 属性 (property) 是你希望改变的属性，并且每个属性都有一个值。 属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明，例如: 如果要定义不止一个声明，则需要用分号将每个声明分开。为了增强样式定义的可读性应该在每行只描述一个属性： 2.4选择器的分组与继承 可以对选择器进行分组，这样，被分组的选择器就有相同的声明 根据 CSS，子元素从父元素继承属性。 2.5派生选择器 通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。它们称为派生选择器。 例如，希望列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器： 看看下面这段的效果 再看下面的实例： css 2.6 id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 id 选择器以 “#” 来定义。同一个ID名字只能在每个 HTML 文档中出现一次 下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色： 下面的 HTML 代码中，id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。 在dreamweaver中创建ID选择器样式表 在现代布局中，id 选择器常常用于建立派生选择器。 下面的样式只会应用于出现在 id 是 sidebar 的元素内的段落（P标记的部分）。 虽然ID 的元素只能在文档中出现一次，但 id 选择器作为派生选择器也可以被使用很多次： 2.7