1、网页设计制作上机实验第 1 页 共 24 页实验 3 CSS 样式表的设置与应用一、实验目的1掌握 CSS 样式的作用2掌握 CSS 样式的创建和使用二、实验要求1. 掌握使用 CSS 样式面板创建 4 种基本选择器类型的 CSS 样式。2. 掌握以内部样式、外部样式使用 CSS 样式的方式三、实验内容和步骤CSS（ Cascading Style Sheet，层叠样式表）技术是一种格式化网页的标准方式，它通过设置 CSS 属性使网页元素获得各种不同效果。CSS 不是一种程序设计语言，而只是一种用于网页排版的标识性语言，是对现有 HTML 语言功能的补充和扩展。CSS 的主要功能是通过对 HT
2、ML 选择器进行设定，来实现对网页中的字体、字号、颜色、背景、图像及其他元素的控制，使网页能够完全按照设计者的要求来显示。 CSS 的定义由三部分构成：选择符 selector、属性 property 和属性值value。其基本格式如下：selectorproperty l:value l;property 2:value 2;其中 selector（选择符）表示需要应用样式的内容，property 表示由 CSS 标准定义的样式属性，value 表示样式属性的值。准备工作1 以解压缩后的“实验 3”文件夹为根文件夹，在 Dreamweaver 中建立站点。网页设计制作上机实验第 2 页 共
3、24 页2 在 Dreamweaver 的首选参数中设置代码提示功能中结束标签在“键入起始标签 后 ”3 熟悉 CSS 样式面板CSS 样式面板可以用来进行新建 CSS 规则，编辑 CSS 规则，删除 CSS 规则以及为网页指定外部样式表等操作。网页设计制作上机实验第 3 页 共 24 页 “全部”标签显示当前网页中使用的使用各种样式选择器的全部样式。双击其中的某个样式可以打开“CSS 规则定义”窗口对样式进行编辑。 “正在”标签显示当前鼠标所在处的网页元素具有的 CSS 属性及属性值。可以在窗口的下方点击某一属性值进行修改，不必打开“CSS 规则定义”窗口。在 Dreamweaver 中新建
4、一个 HTML 文件，点击“新建 CSS 规则”按钮，查看“新建 CSS 规则”对话框中选择器器类型、选择器名称、选择器位置的选项。网页设计制作上机实验第 4 页 共 24 页操作题一：理解样式表的作用说明 通过给网页文件添加 CSS 样式表文件的引用，改变网页元素的格式。1. 在 Dreamweaver 中打开 pm2.5.html，观察网页的 HTML 组成以及没有附加 CSS 样式时的表现。2. 点击 CSS 样式面板的 “附加样式表”按钮。3. 在弹出的“链接外部样式表”对话框中，通过“浏览”找到css/pmstyle.css 并链接到网页中。4. 观察网页 head 元素中的变化，会
5、发现网页中通过元素把css/pmstyle.css 引入到了网页中。5. 保存文件并在浏览器中预览。网页设计制作上机实验第 5 页 共 24 页操作题二：创建 CSS 样式说明通过标签选择器、ID 选择器、类选择器类型的样式定义，掌握在CSS 样式的定义和创建，以及各种选择器的使用场景。完成后的效果如下：网页设计制作上机实验第 6 页 共 24 页网页设计制作上机实验第 7 页 共 24 页在 Dreamweaver 中打开“worldwideweb.html ”。2.1 定义 h1 元素的 CSS 样式。目的：通过样式定义，改变 h1 元素的默认样式，具有新的背景颜色，文字颜色，文字大小，文
6、字字体。把光标放在 h1 元素上，点击”CSS 样式”面板的“新建 CSS 规则”按钮，设置选择器类型为“标签” ，选择器名称为”h1” ，并点击确定按钮 :在“CSS 规则定义 ”窗口设置如下属性：font-size:64px;font-family: “微软雅黑“, “黑体“, “宋体“;background-color:#69F;color:#FFF;text-align: center;padding-top: 50px;padding-right: 0px;padding-bottom: 50px;padding-left: 0px;网页设计制作上机实验第 8 页 共 24 页网页设
7、计制作上机实验第 9 页 共 24 页在设置 font-family 时，选择“自定义字体堆栈” ，从可用字体列表中选择字体后，点击 加入选择的字体。创建完字体堆栈后，从 font-family 的下拉列表中可以找到这一字体堆栈并选择。网页设计制作上机实验第 10 页 共 24 页然后，h1 元素应该变成：2.2 定义 blockquote 元素的 CSS 样式目的：通过样式定义，改变 blockquote 元素的默认样式，具有新的内边距、左边框、背景颜色。把光标放在 blockquote 元素上，点击”CSS 样式”面板的“新建 CSS 规则”按钮，设置选择器类型为“标签” ，选择器名称为”
8、blockquote” ，并点击确定按钮。在“CSS 规则定义 ”窗口设置如下属性：background-color: #EEE;border-left-width: 10px;border-left-style: solid;border-left-color: #666;网页设计制作上机实验第 11 页 共 24 页请观察代码视图中的 CSS 样式，可以看到 Dreamweaver 在自动生成 CSS样式时默认不会采用简写形式，因此 CSS 代码会比较多，请尝试删除原来的与border 相关的代码后，自行编写如下的边框的简写形式：border-left:10px solid #666;而且
9、，你会发现如果没有内边距，blockquote 元素中的文字会紧贴着背景，因此通过需要增加内边距来使得排版不那么拥挤。网页设计制作上机实验第 12 页 共 24 页padding:15px;然后，blockquote 元素应该变成：如果通过 Firefox 的 Firebug 插件来观察 blockquote 元素（把鼠标悬停在HTML 面板的 blockquote 元素上） ，Firebug 插件会使用紫色表示内边距，黄色表示外边距。2.3 定义 h2 元素的 CSS 样式通过样式定义，改变 h2 元素的默认样式，具有新的文字字体、下边框。点击”CSS 样式 ”面板的 “新建 CSS 规则”
10、按钮，设置选择器类型为 “标签” ，选择器名称为”h2” ，并点击确定按钮。在“CSS 规则定义 ”窗口设置如下属性：font-family: “微软雅黑“, “黑体“, “宋体“;border-bottom-width: 1px;border-bottom-style: dashed;border-bottom-color: #000;网页设计制作上机实验第 13 页 共 24 页然后，h2 元素应该变成：2.4 定义 p 元素的 CSS 样式通过样式定义，改变 p 元素的默认样式，使得段落元素首行缩进 2 个字符，行高为 1.5 倍。在“CSS 规则定义 ”窗口设置如下属性：line-he
11、ight:1.5;text-indent: 2em;网页设计制作上机实验第 14 页 共 24 页2.5 定义名称为“reference ”类选择器样式（这里类选择器的名称根据具体场景由自己定义，起名为 reference 是为了用于具有参考含义的元素上，改变“参考书籍”和“参考链接”所在 h2 元素的文字颜色）点击”CSS 样式 ”面板的 “新建 CSS 规则”按钮，设置选择器类型为 “类”，输入选择器名称为“reference” ，并点击确定按钮。网页设计制作上机实验第 15 页 共 24 页在“CSS 规则定义 ”窗口设置如下属性：color: #FC0;请观察代码视图中以“.”开始的
12、reference 定义。2.6 应用名称为“reference ”类选择器的样式把鼠标定位到“参考书籍”所在 h2 元素，选择“属性检查器”中“类”下拉列表中的“reference” 。对“参考链接”所在 h2 元素做同样处理，即可以把“reference”类选择器定义的样式应用到这两个 h2 元素。网页设计制作上机实验第 16 页 共 24 页请注意从代码的角度，类样式是如何应用到网页元素上的：2.7 定义名称为“footer”的 ID 选择器的样式改变“本文资料来源：整理自互联网”所在 p 元素的样式。把鼠标定位到“本文资料来源：整理自互联网”所在元素，在“属性检查器”中设置 ID 为“
13、footer ”,按回车键确认。点击”CSS 样式 ”面板的 “新建 CSS 规则”按钮，设置选择器类型为“ID”，选择器名称为“footer” ，并点击确定按钮。(Dreamweaver 也会自动显示出光标所在元素的 ID)在“CSS 规则定义 ”窗口设置如下属性：font-size: 24px;color: #FFF;网页设计制作上机实验第 17 页 共 24 页background-color: #666;text-align: center;网页设计制作上机实验第 18 页 共 24 页请手工编辑一下 footer 样式的内边距。然后，这一被命名为 footer 的 p 元素应该变成：
14、2.8 解决 body 和 h1 的内边距和外边距问题由于 body 元素、h1 元素、blockquote 元素具有默认的内边距和外边距，因此整个文章和浏览器的左上方具有一定的空隙，需要通过以下的 CSS 代码重置样式：body,h1, blockquotepadding:0;网页设计制作上机实验第 19 页 共 24 页margin:0;这段代码请放在所有样式的前面。请思考：对于 blockquote 元素来说，声明了 2 次 padding，那么起作用的的是哪一条声明呢？操作题三：把网页装在容器里说明在没有使用容器元素把网页元素装进去之前，网页元素会撑满整个浏览器。这里将增加一个 div
15、 容器元素，并设置 div 的宽度和水平居中。Step 1. 在代码视图中的 body 元素的开始标签后面增加一个 div 元素，并命名为“container ”Step 2. 把 div 的结束标记移动到 body 元素的结束标签的前面，从而使得div 元素的开始标签和结束标签把网页中原有的元素都包括在其中。Step 3. 在 style 区域编辑“#container”样式，使得它的宽度为 960px,水平居中。#containerwidth:960px;margin:0 auto;网页设计制作上机实验第 20 页 共 24 页Step 4. 保存文件并预览。Step 5. 如果你希望让最
16、前面的 h1 元素和最后面的 footer 元素仍然占满浏览器的整个宽度，那么就不把这 2 个元素放在 container 中。你的网页看起来应该是下面的样子：网页设计制作上机实验第 21 页 共 24 页操作题四：移动 CSS 规则到外部样式表中Dreamweaver 默认使用“内部样式表”来存放网页中的样式。如果样式是反复利用在网站的其它网页中的，需要把样式从“内部样式表”移动到“外部样式表”中。1. 在“CSS 样式”面板通过 shift 键选择“worldwideweb.html”中的所有的样式，点击鼠标右键，从右键菜单中选择“移动 CSS 规则” 。网页设计制作上机实验第 22 页
17、共 24 页2.选择“移至外部样式表”中的“新样式表” ，点击“确定”3.在“将样式表文件另存为”对话框中，输入要保存的 CSS 样式表文件为“base”,点击保存。Dreamweaver 会将所有的样式定义移动到 base.css 文件中。网页设计制作上机实验第 23 页 共 24 页观察在 “worldwideweb.html”文件的元素中，通过元素把basic.css 样式表引入到了网页文件中，并且在文档工具栏以如下的方式显示：表示现在 worldwideweb.html 中使用了 base.css 这 1 文件。当 base.css 文件名称旁出现*号时，需要单独保存或通过“文件”|
18、“全部保存”来保存所有的文件。操作题五：把外部样式表链接到同一网站中的其它网页（从而使它们具有同样的风格）1. 在 Dreamweaver 中打开“cloudcomputing.html ”。网页设计制作上机实验第 24 页 共 24 页2. 点击 ”CSS 样式”面板的“附件样式表”按钮，选择操作题三中定义的base.css 文件，点击“确定 ”。3. base.css 文件中样式被引入到了 “cloudcomputing.html”文件中，从而使得“cloudcomputing.html”具有和 “worldwideweb.html”相同的风格。4. 把“reference”类样式应用到“cloudcomputing.html”中的“参考书籍”和“参考链接”上，给最后一个段落命名为“footer”5. 如果你希望把网页也放在 960 像素宽水平居中的位置，也加上名称为“container”的 div 元素。
