《（中职）第5章 CSS样式和Div标签ppt课件.ppt》由会员分享，可在线阅读，更多相关《（中职）第5章 CSS样式和Div标签ppt课件.ppt（10页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、在此输入您的封面副标题（中职）第5章 CSS样式和Div标签第 5 章CSS 样式和 Div 标签 5.1 【案例 15】“牡丹花特点和用处”网页5.1.2 相关知识CSS 样式1什么是 CSS 样式在设计网页时，常常需要对网页中各种对象的属性进行设置，通常网站中许多网页内会有很多相同属性的对象，例如相同颜色、大小、字体的文字，同样粗细的图像边框等。如果对这些相同的元素进行逐一的属性设置，会大大增加工作量。为了简化这项工作，可以使用 CSS 样式表，它可以对页面布局、背景、字体大小、颜色、表格等属性进行统一的设置，然后再应用于页面各个相应的对象。CSS（即层叠样式表）技术是一种格式化网页的标准
2、方式，它通过设置 CSS 属性使网页元素对象获得不同的效果。在定义了一个 CSS 样式后，可以将它应用于网页内不同的元素，使这些元素对象具有相同的属性，在修改 CSS 样式后，所有应用了该样式网页元素的属性会随之一同被修改。另外，相对 HTML 标记符而言，CSS 样式属性提供了更多的格式设置功能。例如，给文字添加阴影，为列表指定图像作为项目符号等。由于 CSS 具有上述这些优点，所以它已经被广泛用于网页的设计中。2“CSS 样式”面板单击“窗口”“CSS 样式”菜单命令，弹出“CSS 样式”面板（也称 CSS 样式表编辑器），如图 5-1-2 所示，定义内部 CSS 样式后的“CSS 样式”
3、面板如图 5-1-8 所示。定义了内部和外部 CSS 样式后的“CSS 样式”面板如图 5-1-11 所示。其中各选项的作用如下。（1）“所有规则”列表框：用来显示所有样式表的名称和外部 CSS 样式文件的名称，如图 5-1-12 所示。如果没有定义 CSS 样式，则“CSS 样式”面板如图 5-1-2 所示，“所有规则”列表框内的“未定义样式”选项表示没有定义 CSS 样式。（2）“属性”列表框：用来显示选中的 CSS 样式的属性和属性值，单击“添加属性”热字，如图 5-1-12 所示，会在“添加属性”热字处出现一个下拉列表框，该列表框中列出了所有相关的属性名称，选择其中一个属性，即可设置该
4、属性的相应值。单击属性值，即可进入该属性值的编辑状态，可以修改该属性值。：单击该按钮后，可以分类显示选中 CSS 样式的属性和（3）“显示类别视图”按钮属性值。：单击该按钮后，可以按英文字母的顺序显示选中 CSS：单击该按钮后，只显示已经设置过的 CSS 样式的属（4）“显示列表视图”按钮样式的属性和属性值。（5）“只显示设置属性”按钮性和属性值。（6）“附加样式表”按钮：单击该按钮后，可以弹出一个“链接外部样式表”对话框，如图 5-1-13 所示。再单击“浏览”按钮，可弹出“选择样式表文件”对话框，利用该对话框可以选择要链接或导入外部的样式表（文件的扩展名为.CSS）。图 5-1-13 “链
5、接外部样式表”对话框在“链接外部样式表”对话框内的“媒体”下拉列表框中可以选择媒体类型。单击“范例样式表”热字，可以弹出“范例样式表”对话框，如图 5-1-14 所示。该对话框给出一些样式表范例，并给出与它们相应的文件名称和路径，可供使用。（7）“新建 CSS 规则”按钮 ：单击该按钮，弹出“新建 CSS 规则”对话框，如图 5-1-4所示。利用它可建立新的内部和外部 CSS 样式。87内部 CSS 样式内部 CSS 样式名 称外部 CSS 样式文 件名外部 CSS 样式名 称选中的 CSS 样式的属性和属性值“添加属性”热字图 5-1-12 “CSS 样式”面板88图 5-1-14 “范例样
6、式表”对话框（8）“编辑样式”按钮 ：在“CSS 样式”面板中选中一种 CSS 样式名称，单击该按钮，可打开一个能进行样式表编辑的对话框（例如：“.STYLE1 的 CSS 规则定义”对话框），利用该对话框可以对 CSS 样式表进行编辑。（9）“删除 CSS 属性”按钮 ：单击此按钮，将直接删除选中的 CSS 样式。3“新建 CSS 规则”对话框中其他各选项的含义“新建 CSS 规则”对话框如图 5-1-15 所示，其中各选项的作用如下。（1）“选择器类型”下拉列表框：其内有“类”、“ID”、“标签”和“复合内容”四个选择器类型选项。用来设置要创建的 CSS 规则（即 CSS 样式）的选择器类
7、型 选择“类”选项后，设置的 CSS 规则可以应用于所有 HTML 元素； 选择“ID”选项后，设置的 CSS 样式（即规则）只可以应用于一个 HTML 元素； 选择“标签”选项后，则“选择器名称”下拉列表框内提供了可以应用于重新定义的所有 HTML 元素标记名称，可以对 HTML 元素重新定义，改变它们的属性； 选择“复合内容”选项后，可定义能同时影响多个标签、类或 ID 的复合规则设。（2）“选择器名称”下拉列表框：在“选择器类型”下拉列表框内选择不同选项时，在该下拉列表框内可以输入和选择的名称形式也不一样。 选择“类”选项后，类名称必须以“.”开头，并且包含字母和数字组合（例如，“.CS
8、S1”）。如果没有输入开头的“.”，则 Dreamweaver CS6 会自动在输入的名称左边添加“.”； 选择“ID”选项后，输入的 ID名称 必须以“#”开头，并且包含字母和数字组合（例如，“#myID1”）。如果没输入开头的“#”，则 Dreamweaver会自动在输入的名称左边添加“#”； 选择“标签”选项后，输入或选择一个 HTML 标签；图 5-1-15 “新建 CSS 规则”对话框 选择“复合内容”选项后，输入用于复合规则的选择器，例如，如果输入“div p”，则 div 标签内的所有 p 元素都将受此规则影响。它下边的文本区域内会自动给出准确说明添加或删除选择器时该规则将影响哪
9、些元素。（3）“规则定义”下拉列表框：用来确定是创建外部 CSS 还是内部 CSS。选中“仅限该文档”选项，则创建内部 CSS，定义在当前文档中。选中“新建样式表文件”选项，则创建外部 CSS 样式表文件（扩展名为“.css”）。选中一个已经创建的 CSS 样式文件，则修改选中的 CSS 样式文件定义的属性。4应用 CSS 样式定义了 CSS 样式后，可以将这些 CSS 样式应用于网页中的文本、图像、Flash 等对象。具体的方法介绍如下：（1）选中要应用 CSS 样式的文本对象，在其“属性”栏的“样式”下拉列表框中选择需要的 CSS 样式名称，即可将选中的 CSS 样式应用于选中的文本对象。
10、（2）选中要应用 CSS 样式的图像或 Flash 等对象，在其“属性”栏的“类”下拉列表框中选择需要的 CSS 样式名称，即可将选中的 CSS 样式应用于选中的图像或 Flash 等对象。 5.2 【案例 16】“特效课程表”网页5.2.2 相关知识设置 CSS 属性1定义 CSS 的背景属性在“.CSS1 的 CSS 规则定义”对话框左边“分类”列表框内选择“背景”选项，此时，该对话框内的“背景”选项区域如图 5-2-5 所示。其中各选项的作用如下。（1）“背景颜色”（2）“背景图像”（）按钮与文本框：用来给选中的对象添加背景色。）下拉列表框与“浏览”按钮：用来设置选中对象的背景图像。下拉
11、列表框内有两个选项。“无”选项：它是默认选项，表示不使用背景图案。“URL”选项：选择该选项或单击“浏览”按钮，可以调出“选择图像源”对话框，利用该对话框，可以选择背景图像。（3）“重复”（）下拉列表框：用来设置背景图像的重复方式。它有4 个选项：“不重复”（只在左上角显示一幅图像）、“重复”（沿水平与垂直方向重复）、“横向重复”（沿水平方向重复）和“纵向重复”（沿垂直方向重复）。（4）“附件”（5）“水平位置”（）下拉列表框：设置图像是否随内容滚动而滚动。）下拉列表框：设置图像与选定对象的水平相对位置。如果选择了“值”选项，则其右边下拉列表框变为有效，可用来选择单位。（6）“垂直位置”（）下
12、拉列表框：设置图像与选定对象的垂直相对位置。如果选择了“值”选项，则其右边的下拉列表框变为有效，用来选择单位。2定义 CSS 的区块属性在“.CSS1 的 CSS 规则定义”对话框左边“分类”列表框内选择“区块”选项，此时对话框内的“区块”选项区域如图 5-2-6 所示。其中各选项的作用如下。89（1）“单词间距”（）下拉列表框：用来设定单词间距。选择“值”选项后，可以输入数值，再在其右边的下拉列表框内选择数值的单位。此处可以用负值。（2）“字母间距”（）下拉列表框：用来设定字母间距。选择“（值）”选项后，可以输入数值，再在其右边的下拉列表框内选择数值的单位。此处可以用负值。（3）“垂直对齐”
13、（）下拉列表框：用它可以设置选中的对象相对于上级对象或相对所在行，在垂直方向的对齐方式。（4）“文本对齐”（5）“文字缩进”（）下拉列表框：用来设置首行文字在对象中的对齐方式。）文本框：用来输入文字的缩进量。图 5-2-5 “背景”选项区域图 5-2-6 “区块”选项区域（6）“空格”（）下拉列表框：设置文本空白的使用方式。“正常”选项表示将所有的空白均填满，“保留”选项表示由用户输入时控制，“不换行”选项表示只有加入标记时才换行。（7）“显示”（）下拉列表框：在其中可以选择区块重要显示的格式。3定义 CSS 的列表属性在“.CSS1 的 CSS 规则定义”对话框的左边“分类”列表框内选择“列
14、表”选项，此时该对话框右边的“列表”选项区域如图 5-2-7所示。其中各选项的作用如下。（1）“类型”（）下拉列表框：用来设置列表的标记。选择标记是序号（有序列表）或符号（无序列表）。该下拉列表框内有 “圆点”、“圆圈”等九个选项。（2）“项目符号图像”（）下拉列表框和按钮：该下拉列表框内有“无”和“（URL）”两个选项。选择前者后，不加图像标记；选择后者后，单击“浏览”按钮，调出“选择图像源”对话框，利用它可选择图像，在列表行加入小图标作为列表标记。（3）“位置”（）下拉列表框：用来设置列表标记的缩进方式。4定义 CSS 的扩展属性在“.CSS1 的 CSS 规则定义”对话框左边“分类”列表
15、框内选择“扩展”选项，此时该对话框内右边的“扩展”选项区域如图 5-2-8 所示。该对话框中各选项的作用如下。（1）“分页”选项区域：用来在选定对象的前面或后面强制加入分页符。一般浏览器不支持此项功能。该选项区域有“之前”和“之后”两个下拉列表框，其中包括“自动”、90图 5-2-7 “列表”选项区域“总是”、“左对齐”和“右对齐”4 个选项，用来确定加入分页符的位置。（2）“视觉效果”选项区域：利用该选项区域内的下拉列表框选项，可使页面的显示效果更加动人。“光标”（即鼠标指针）下拉列表框：可以利用该下拉列表框中的选项，设置各种鼠标的形状。对于低版本的浏览器，不支持此项功能。“过滤器”下拉列表
16、框：用来对图像进行滤镜处理，获得各种特殊的效果。（3）过滤器中几个常用滤镜的显示效果如下。“Blur”（模糊）效果：选择该选项后，其选项内容为“Blur(Add=?,Direction=?,Strength=?)”，需要用数值取代其中的“？”，即给 3 个参数赋值。“Add”用来确定是否在模糊移动时使用原有对象，取值“1”表示“是”，取值“0”表示“否”，对于图像一般选“1”。Direction 决定了模糊移动的角度，可在 0360 之间取值，表示 0360。Strength 决定了模糊移动的力度。如果设置为 Blur(Add=1,Direction=60,Strength=90)，则图 5-
17、2-9 所示图像在浏览器中看到的是图 5-2-10 所示的效果。图 5-2-8 “扩展”选项区域图 5-2-9 原图图 5-2-10 “Blur”滤镜处理“翻转图像”（FlipH/FlipV）效果：选择 FlipV（垂直翻转图像）选项，图 5-2-9所示图像在浏览器中看到的是图 5-2-11 所示的效果。选择 FlipH（水平翻转图像）选项，图 5-2-9 所示图像在浏览器中看到的是图 5-2-12 所示效果。 “ 波 浪 ” （ wave ） 效 果 ： 选 择 “ 波 浪 ” 选 项 后 ， 其 内 容 为Wave(Add=?,Freq=?,LightStrength=?, Phase=?
18、,Strength=?)，用数值取代其中的“？”，结果为 Wave(Add=0,Freq=2,LightStrength=4,Phase=6, Strength=12)。图 5-2-9 所示图像在浏览器中看到的是图 5-2-13 所示的效果。“X 光透视效果”（Xray）效果：选择“X 光透视效果”（Xray）选项，图 5-2-9 所示图像在浏览器中看到的是图 5-2-14 所示的效果。图 5-2-11 垂直翻转图 5-2-12 水平翻转图 5-2-13 滤镜处理图 5-2-14 滤镜处理 5.3 【案例 17】“世界名花图像”网页5.3.2 相关知识设置其他 CSS 属性和网页布局911定义
19、 CSS 的边框属性单击“.的 CSS 规则定义”对话框内左边“分类”列表框内的“边框”选项，此时的对话框如图 5-3-8 所示。它用来对围绕所有对象的边框属性进行设置。（1）设置边框的宽度与颜色：该对话框内有 4 个选项，分别为上、右、下和左边框。每行有 3 个下拉列表框、一个按钮和文本框。第 1 列下拉列表框用来设置边框样式，第 2列下拉列表框用来设置边框宽度，第 3 列下拉列表框用来选择数值的单位；按钮和后面的文本框用来设置边框颜色。边框的宽度下拉列表框内的选项有 4 个。选择“细”，用来设置细边框；选择“中”，用来设置中等粗细的边框；“粗”，用来设置粗边框；选择“值”，用来可以输入边框
20、粗细的数值，此时其右边的下拉列表框变为有效，也可以选择单位。（2）“样式”选项区域：在此下拉列表框中有 9 个选项。其中，“无”选项是取消边框，其他选项对应着一种不同的边框。边框的最终显示效果也与浏览器有关。2定义 CSS 的方框属性在“.PIC 的 CSS 规则定义”对话框内左边“分类”列表框内选择“方框”选项，此时的对话框如图 5-3-7 所示。如果选中“全部相同”复选框，则其下边的所有下拉列表框均有效；否则只有第一行下拉列表框有效。其中各选项的作用如下。（1）“宽”（）下拉列表框：设置对象宽度。它有“自动”（由对象自身大小决定）和“值”（由输入值决定）两个选项。在其右边的下拉列表框内选择
21、数字的单位。（2）“高”（3）“浮动”（）下拉列表框：设置对象高度。有“自动”和“值”两个选项。）下拉列表框：设置选中对象的对齐方式，例如，是否允许文字环绕在选中对象的周围。它有“左对齐”、“右对齐”和“无”三个选项。（4）“清除”（5）“填充”（）下拉列表框：设定其他对象是否可以在选定对象的左右。）栏：设置边框与其中的内容之间填充的空白间距，下拉列表框内应输入数值，在其右边的下拉列表框内选择数值的单位。（6）“边界”（）栏：设置边缘空白宽，下拉列表框内可输入值或选择“自动”。3定义 CSS 的定位属性单击“.的 CSS 规则定义”对话框内左边“分类”列表框中的“定位”选项，此时该对话框内右边
22、的“定位”区域如图 5-3-12 所示。其中各选项的作用如下所述。（1）“类型”（）下拉列表框：用来设置对象的位置。“绝对”（absolute）：使用“定位”框中输入的、相对于最近的绝对或相对定位上级元素的坐标（如果不存在这样上级元素，则为相对于页面左上角的坐标）来放置内容。“固定”（fixed）：使用“定位”框中输入的坐标（相对于浏览器的左上角）来放置内容。当用户滚动页面时，内容将在此位置保持固定。“相对”（relative）：使用“定位”框中输入的、相对于在文本中位置的坐标来定位。“静态”（static）：将内容放在其在文本中的位置。这是 HTML 元素的默认位置。92图 5-3-12 进
23、行“定位”属性设置（2）“显示”（）下拉列表框：用来设置对象的可视性。“继承”（inherit）：选中的对象继承其母体的可视性。“可见”（visible）：选中的对象是可视的。“隐藏”（hidder）：选中的对象是隐藏的。（3）“Z 轴”（）下拉列表框：设置不同层对象的显示次序。有两个选项为“自动”（按原显示次序）和“值”。选择后一项后，可输入数值，其值越大，越在上边显示。（4）“溢出”（）下拉列表框：用来设置当文字超出其容器时的处理方式。“可见”（visible）：当文字超出其容器时仍然可以显示。“隐藏”（hidder）：当文字超出其容器时，超出的内容不能显示。“滚动”（scroll）：在母
24、体加一个滚动条，可利用滚动条滚动显示母体中的文字。“自动”（auto）：当文本超出容器时自动加入一个滚动条。（5）“定位”（6）“剪辑”（）栏：用来设置放置对象的容器的大小和位置。）栏：用来设定对象溢出母体容器部分的剪切方式。4使用 Div 标签和 CSS 的网页布局Div 标签是 AP Div 的一种，使用 Div 标签和 CSS 进行网页的布局及页面效果的控制是目前 Web2.0 标准所推崇的方法。在使用 Div 标签和 CSS 进行网页布局时，Div 标签主要用来进行布局和定位，CSS 主要用来进行显示效果的控制。这种网页布局的方法不但操作容易，而且所使用的代码要比具有相同特性的表格布局
25、所使用的代码少得多，且便于阅读和维护。插入 Div 标签进行网页布局就是使用 Div 标签创建 CSS 布局块（即 DIV 块），并在网页中对 CSS 布局块进行定位。下面介绍使用 Div 标签在网页中插入一个水平居中的 DIV 块。（1）单击“插入”（布局）栏内的“插入 Div 标签”按钮 ，弹出“插入 Div 标签”对话框，在 ID 下拉列表框中输入 Div 标签的名称 kuang，如图 5-3-13 所示。（2）单击“插入 Div 标签”对话框内的“新建 CSS 样式”按钮，弹出“新建 CSS 规则”对话框，在“选择器”文本框内输入 CSS 样式的名称#kuang。（3）单击“新建 CS
26、S 规则”对话框内的“确定”按钮，弹出“#kuang 的 CSS 规则定义”对话框，选中该对话框中“分类”列表框内的“方框”选项。在“宽”下拉列表框中输入“600”，在“高”下拉列表框中输入“80”，在“边界”选项区域内的“上”下拉列表框中选择“自动”选项。然后，单击“确定”按钮，关闭“#kuang 的 CSS 规则定义”对话框，93返回“新建 CSS 规则”对话框。（4）单击“新建 CSS 规则”对话框内的“确定”按钮，关闭“新建 CSS 规则”对话框，完成 CSS 的设置。此时，网页窗口内的显示效果如图 5-3-14 所示。图 5-3-13 “插入 Div 标签”对话框图 5-3-14 网页窗口内生成的 Div 标签（5）“CSS 样式”面板如图 5-3-15 所示。可看到添加了名称为#kuang 的 CSS 样式。（6）切换到“代码”视图窗口。其中，定义#kuang 的内部 CSS 的程序如下。图 5-3-15 “CSS 样式”面 板94