实验3 CSS样式表的设置与应用.docx
- 文档编号:8567300
- 上传时间:2023-01-31
- 格式:DOCX
- 页数:22
- 大小:1.01MB
实验3 CSS样式表的设置与应用.docx
《实验3 CSS样式表的设置与应用.docx》由会员分享,可在线阅读,更多相关《实验3 CSS样式表的设置与应用.docx(22页珍藏版)》请在冰豆网上搜索。
实验3CSS样式表的设置与应用
实验3CSS样式表的设置与应用
一、实验目的
1.掌握CSS样式的作用
2.掌握CSS样式的创建和使用
二、实验要求
1.掌握使用CSS样式面板创建4种基本选择器类型的CSS样式。
2.掌握以内部样式、外部样式使用CSS样式的方式
三、实验内容和步骤
CSS(CascadingStyleSheet,层叠样式表)技术是一种格式化网页的标准方式,它通过设置CSS属性使网页元素获得各种不同效果。
CSS不是一种程序设计语言,而只是一种用于网页排版的标识性语言,是对现有HTML语言功能的补充和扩展。
CSS的主要功能是通过对HTML选择器进行设定,来实现对网页中的字体、字号、颜色、背景、图像及其他元素的控制,使网页能够完全按照设计者的要求来显示。
CSS的定义由三部分构成:
选择符selector、属性property和属性值value。
其基本格式如下:
selector{propertyl:
valuel;property2:
value2;……}
其中selector(选择符)表示需要应用样式的内容,property表示由CSS标准定义的样式属性,value表示样式属性的值。
准备工作
1以解压缩后的“实验3”文件夹为根文件夹,在Dreamweaver中建立站点。
2在Dreamweaver的首选参数中设置代码提示功能中结束标签在“键入起始标签>后”
3熟悉CSS样式面板
CSS样式面板可以用来进行新建CSS规则,编辑CSS规则,删除CSS规则以及为网页指定外部样式表等操作。
●“全部”标签显示当前网页中使用的使用各种样式选择器的全部样式。
双击其中的某个样式可以打开“CSS规则定义”窗口对样式进行编辑。
●“正在”标签显示当前鼠标所在处的网页元素具有的CSS属性及属性值。
可以在窗口的下方点击某一属性值进行修改,不必打开“CSS规则定义”窗口。
在Dreamweaver中新建一个HTML文件,点击“新建CSS规则”按钮,查看“新建CSS规则”对话框中选择器器类型、选择器名称、选择器位置的选项。
操作题一:
理解样式表的作用
说明
通过给网页文件添加CSS样式表文件的引用,改变网页元素的格式。
1.在Dreamweaver中打开pm2.5.html,观察网页的HTML组成以及没有附加CSS样式时的表现。
2.点击CSS样式面板的“附加样式表”按钮。
3.在弹出的“链接外部样式表”对话框中,通过“浏览…”找到css/pmstyle.css并链接到网页中。
4.观察网页head元素中的变化,会发现网页中通过元素把css/pmstyle.css引入到了网页中。
5.保存文件并在浏览器中预览。
操作题二:
创建CSS样式
说明
通过标签选择器、ID选择器、类选择器类型的样式定义,掌握在CSS样式的定义和创建,以及各种选择器的使用场景。
完成后的效果如下:
在Dreamweaver中打开“worldwideweb.html”。
2.1定义h1元素的CSS样式。
目的:
通过样式定义,改变h1元素的默认样式,具有新的背景颜色,文字颜色,文字大小,文字字体。
把光标放在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;
在设置font-family时,选择“自定义字体堆栈”,从可用字体列表中选择字体后,点击
加入选择的字体。
创建完字体堆栈后,从font-family的下拉列表中可以找到这一字体堆栈并选择。
然后,h1元素应该变成:
2.2定义blockquote元素的CSS样式
目的:
通过样式定义,改变blockquote元素的默认样式,具有新的内边距、左边框、背景颜色。
把光标放在blockquote元素上,点击”CSS样式”面板的“新建CSS规则”按钮,设置选择器类型为“标签”,选择器名称为”blockquote”,并点击确定按钮。
在“CSS规则定义”窗口设置如下属性:
background-color:
#EEE;
border-left-width:
10px;
border-left-style:
solid;
border-left-color:
#666;
请观察代码视图中的CSS样式,可以看到Dreamweaver在自动生成CSS样式时默认不会采用简写形式,因此CSS代码会比较多,请尝试删除原来的与border相关的代码后,自行编写如下的边框的简写形式:
border-left:
10pxsolid#666;
而且,你会发现如果没有内边距,blockquote元素中的文字会紧贴着背景,因此通过需要增加内边距来使得排版不那么拥挤。
padding:
15px;
然后,blockquote元素应该变成:
如果通过Firefox的Firebug插件来观察blockquote元素(把鼠标悬停在HTML面板的blockquote元素上),Firebug插件会使用紫色表示内边距,黄色表示外边距。
2.3定义h2元素的CSS样式
通过样式定义,改变h2元素的默认样式,具有新的文字字体、下边框。
点击”CSS样式”面板的“新建CSS规则”按钮,设置选择器类型为“标签”,选择器名称为”h2”,并点击确定按钮。
在“CSS规则定义”窗口设置如下属性:
font-family:
"微软雅黑","黑体","宋体";
border-bottom-width:
1px;
border-bottom-style:
dashed;
border-bottom-color:
#000;
然后,h2元素应该变成:
2.4定义p元素的CSS样式
通过样式定义,改变p元素的默认样式,使得段落元素首行缩进2个字符,行高为1.5倍。
在“CSS规则定义”窗口设置如下属性:
line-height:
1.5;
text-indent:
2em;
2.5定义名称为“reference”类选择器样式
(这里类选择器的名称根据具体场景由自己定义,起名为reference是为了用于具有参考含义的元素上,改变“参考书籍”和“参考链接”所在h2元素的文字颜色)
点击”CSS样式”面板的“新建CSS规则”按钮,设置选择器类型为“类”,输入选择器名称为“reference”,并点击确定按钮。
在“CSS规则定义”窗口设置如下属性:
color:
#FC0;
请观察代码视图中以“.”开始的reference定义。
2.6应用名称为“reference”类选择器的样式
把鼠标定位到“参考书籍”所在h2元素,选择“属性检查器”中“类”下拉列表中的“reference”。
对“参考链接”所在h2元素做同样处理,即可以把“reference”类选择器定义的样式应用到这两个h2元素。
请注意从代码的角度,类样式是如何应用到网页元素上的:
2.7定义名称为“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元素应该变成:
2.8解决body和h1的内边距和外边距问题
由于body元素、h1元素、blockquote元素具有默认的内边距和外边距,因此整个文章和浏览器的左上方具有一定的空隙,需要通过以下的CSS代码重置样式:
body,h1,blockquote{
padding:
0;
margin:
0;
}
这段代码请放在所有样式的前面。
请思考:
对于blockquote元素来说,声明了2次padding,那么起作用的的是哪一条声明呢?
操作题三:
把网页装在容器里
说明
在没有使用容器元素把网页元素装进去之前,网页元素会撑满整个浏览器。
这里将增加一个div容器元素,并设置div的宽度和水平居中。
Step1.在代码视图中的body元素的开始标签后面增加一个div元素,并命名为“container”
Step2.把div的结束标记移动到body元素的结束标签的前面,从而使得div元素的开始标签和结束标签把网页中原有的元素都包括在其中。
Step3.在style区域编辑“#container”样式,使得它的宽度为960px,水平居中。
#container{
width:
960px;
margin:
0auto;
}
Step4.保存文件并预览。
Step5.如果你希望让最前面的h1元素和最后面的footer元素仍然占满浏览器的整个宽度,那么就不把这2个元素放在container中。
你的网页看起来应该是下面的样子:
操作题四:
移动CSS规则到外部样式表中
Dreamweaver默认使用“内部样式表”来存放网页中的样式。
如果样式是反复利用在网站的其它网页中的,需要把样式从“内部样式表”移动到“外部样式表”中。
1.在“CSS样式”面板通过shift键选择“worldwideweb.html”中的所有的样式,点击鼠标右键,从右键菜单中选择“移动CSS规则”。
2.选择“移至外部样式表”中的“新样式表”,点击“确定”
3.在“将样式表文件另存为”对话框中,输入要保存的CSS样式表文件为“base”,点击保存。
Dreamweaver会将所有的样式定义移动到base.css文件中。
观察在“worldwideweb.html”文件的
元素中,通过元素把basic.css样式表引入到了网页文件中,并且在文档工具栏以如下的方式显示:表示现在worldwideweb.html中使用了base.css这1文件。
当base.css文件名称旁出现*号时,需要单独保存或通过“文件”|“全部保存”来保存所有的文件。
操作题五:
把外部样式表链接到同一网站中的其它网页(从而使它们具有同样的风格)
1.在Dreamweaver中打开“cloudcomputing.html”。
2.点击”CSS样式”面板的“附件样式表”按钮,选择操作题三中定义的base.css文件,点击“确定”。
3.base.css文件中样式被引入到了“cloudcomputing.html”文件中,从而使得“cloudcomputing.html”具有和“worldwideweb.html”相同的风格。
4.把“reference”类样式应用到“cloudcomputing.html”中的“参考书籍”和“参考链接”上,给最后一个段落命名为“footer”
5.如果你希望把网页也放在960像素宽水平居中的位置,也加上名称为“container”的div元素。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 实验3 CSS样式表的设置与应用 实验 CSS 样式 设置 应用