下载此文档

实验3CSS样式表的设置与应用 (2).docx


文档分类:IT计算机 | 页数:约24页 举报非法文档有奖
1/24
下载提示
  • 1.该资料是网友上传的,本站提供全文预览,预览什么样,下载就什么样。
  • 2.下载该文档所得收入归上传者、原创者。
  • 3.下载的文档,不会出现我们的网址水印。
1/24 下载此文档
文档列表 文档介绍
实验3CSS样式表的设置与应用
一、实验目的
1.掌握CSS样式的作用
2.掌握CSS样式的创建和使用
二、实验要求
掌握使用CSS样式面板创建4种基本选择器类型的CSS样式。
掌握以内部样式、外部样式使用CSS样式的方式

请观察代码视图中的CSS样式,可以看到Dreamweaver在自动生成CSS样式时默认不会采用简写形式,因此CSS代码会比较多,请尝试删除原来的与border相关的代码后,自行编写如下的边框的简写形式:
border-left:10px solid #666;
而且,你会发现如果没有内边距,blockquote元素中的文字会紧贴着背景,因此通过需要增加内边距来使得排版不那么拥挤。
padding:15px;
然后,blockquote元素应该变成:
如果通过Firefox 的Firebug插件来观察blockquote元素(把鼠标悬停在HTML面板的blockquote元素上),Firebug插件会使用紫色表示内边距,黄色表示外边距。

通过样式定义,改变h2元素的默认样式,具有新的文字字体、下边框。
点击”CSS样式”面板的“新建CSS规则”按钮,设置选择器类型为“标签”,选择器名称为”h2”,并点击确定按钮。
在“CSS规则定义”窗口设置如下属性:
font-family: "微软雅黑", "黑体", "宋体";
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #000;
然后,h2元素应该变成:

通过样式定义,改变p元素的默认样式,使得段落元素首行缩进2个字符,。
在“CSS规则定义”窗口设置如下属性:
line-height:;
text-indent: 2em;
“reference”类选择器样式
(这里类选择器的名称根据具体场景由自己定义,起名为reference是为了用于具有参考含义的元素上,改变“参考书籍”和“参考链接”所在h2元素的文字颜色)
点击”CSS样式”面板的“新建CSS规则”按钮,设置选择器类型为“类”,输入选择器名称为“reference”,并点击确定按钮。
在“CSS规则定义”窗口设置如下属性:
color: #FC0;
请观察代码视图中以“.”开始的reference定义。
“reference”类选择器的样式
把鼠标定位到“参考书籍”所在h2元素,选择“属性检查器”中“类”下拉列表中的“reference”。对“参考链接”所在h2元素做同样处理,即可以把“reference”类选择器定义的样式应用到这两个h2元素。
请注意从代码的角度,类样式是如何应用到网页元素上的:
“footer”的ID选择器的样式
改变“本文资料来源:整理自互联网”所在p元素的样式。
把鼠标定位到“本文资料来源:整理自互联网”所在元素,在“属性检查器”中设置ID为“footer”,按回车键确认。
点击”CSS样式”面板的“新建CSS规则”按钮,设置选择器类型为“ID”,选择器名称为“footer”,并点击确定按钮。(Dreamweaver也会自动显示出光标所在元素的ID)
在“CSS规则定义”窗口设置如下属性:
font-size: 24px;
color: #FFF;
background-color: #666;
text-align: center;
请手工编辑一下footer样式的内边距。
然后,这一被命名为footer的p元素应该变成:

由于body元素、h1元素、blockquote元素具有默认的内边距和外边距,因此整个文章和浏览器的左上方具有一定的空隙,需要通过以下的CSS代码重置样式:
body,h1,blockquote{
padding:0;
margin:0;
}
这段代码请放在所有样式的前面。
请思考:对于blockquote元素来说,声明了2次padding,那么起作用的的是哪一条声明呢?
操作题三:把网页装在容器里
说明
在代码视图中的body元素的开始标签后面增加一个div元素,并命名为“container”
把div的结束标记移动到body元素的结束标签的前面,从而使得div元素的开始标签和结束标签把网页中原有的元素都包括在其中。
在style区域

实验3CSS样式表的设置与应用 (2) 来自淘豆网www.taodocs.com转载请标明出处.

非法内容举报中心
文档信息
  • 页数24
  • 收藏数0 收藏
  • 顶次数0
  • 上传人taoapp
  • 文件大小1.39 MB
  • 时间2022-01-23