项目15 利用CSS美化页面.pptVIP

* 项目十五 利用CSS美化页面 情 境 设 置 通过对HTML标签的学习，我们已经知道，可以直接使用标签在网页上添加各种元素，并且通过设置标签的相关属性来改变元素的显示样式。但我们可能会提出这样的疑问，利用标签的属性所能设置出的样式也太有限了，而在网络上看到的许多漂亮且特色的网页仅用标签自己的属性设置是无法实现的。为此有了CSS技术，利用它能够使标签产生更多的效果样式，弥补HTML标签本身的不足。 本项目分成了三个子项目，分别研究CSS技术的三种应用方式。 子 项 目 一 展 示 本子项目利用CSS技术最终制作的网页样张如下 子 项 目 一 目 标 熟悉CSS面板的使用 能在网页文档中使用CSS重新设置标签样式 知道文档头中style标签的作用 知道样式表的内部文档头式插入方式 知道CSS的语法格式 熟悉CSS中的各种属性 子 项 目 一 分 析 具体工作任务： 制作一个网页，主题为“CSS学习” 打开CSS面板，新建一个名为“h1”的 CSS样式，CSS选择器类型为“标签”，从而对 HTML中的“h1” 标签进行重新定义，使其样式 符合我们的要求。 注意：本子项目是以利用CSS技术直接对“h1”标签的改造为例，来讲述CSS技术其中的一种应用方式。利用这种方式可以对任何标签的样式进行重定义改造。 实 施 步 骤 步骤一：新建一个站点和网页 为了实现本项目及后续项目的实验效果，在网页中利用“h1”标签插入一个标题文本，利用“p”标签插入三个段落文本，利用“table”标签插入一个表格，利用“a”标签插入一个超链接。 步骤二：打开CSS面板，建立选择器类型为“标签”的CSS样式表（CSS样式规则）。 CSS是通过八大类不同的属性实现对标签样式的各种设置。因此利用CSS技术的关键是了解CSS这些属性的特点。 步骤三：保存文件，预览最终效果 知 识 链 接 一、CSS的语法格式 CSS技术正是通过它所提供的各种属性，并将这些属性应用在HTML的各种标签上，从而使得标签样式产生变化。 通过比较应用CSS样式前后网页源代码的变化，来掌握使用CSS的语法格式。Dreamweaver中，我们可以可视化的在对话框中设置这些属性，掌握了CSS使用的语法格式后，我们也可以直接在网页源代码中给标签添加CSS样式。 CSS的语法格式如下： 选择器{属性名：值；属性名：值；……} 这里的选择器即为要重新定义样式的标签，只不过不含尖括号。 并且这些代码要放在styletype=“text/css”/style标签中 知 识 链 接 二、样式表的引用 利用Dreamweaver或者自己编写代码的方式为标签重新定义了样式规则，也即建立了样式表。那么此时网页文档中相关的标签是否按照新的样式来显示哪？还不行，还必须将这些样式表代码放在styletype=“text/css”/style标签中。 这是样式表的引用方式之一，利用这种方式建立和引用的样式表，只能作用于当前网页文档（即包含这些代码的文档）中相应的标签，不会影响到其他网页中相应的标签。 知 识 链 接 三、理解方框 CSS将网页中的所有块元素都看作是包含在一个方框中，如用h1定义的标题，用p定义的段落等。方框涉及到边框、填充、边距等属性，我们在项目中都已经接触到了。大家可以在完成子项目一后，在编辑窗口的下方选中h1标签，此时编辑窗口中，该标签定义的标题就会以方框的形式显示来。 知 识 链 接 四、理解定位 CSS一大优点就是能够通过各种定位属性，来精确控制元素的位置，便于页面的布局，定位类型主要有三种：绝对、相对和静态。绝对定位是指可以用“置入”属性中的左和上，来控制元素距离页面左上角的距离。相对定位同样是利用“置入”属性，来控制元素相对于文档中文本的位置。 情 境 设 置 刚才项目中仅是针对某个标签创建样式表，样式表仅对该标签有效。而很多情况下，一个网页中的不同标签的可能要采用相同的样式。按照刚才的办法，只能是针对这些不同标签分别创建一次相同的代码的样式表，这个办法很麻烦。接下来的项目我们将要学习一种新的样式表的创建和应用方式。 子 项 目 二 展 示 本子项目利用CSS技术最终制作的网页样张如下 子 项 目 二 目 标 能在网页文档中建立选择器类型为“类”的CSS样式表 能在网页文档中通过“class”属性使用类型为“类” 样式表 子 项 目 二 分 析 具体工作任务： 1、打开