实验3 CSS样式表的设置与应用

《实验3 CSS样式表的设置与应用》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、《网页设计制作》上机实验实验3CSS样式表的设置与应用一、实验目的1．掌握CSS样式的作用2．掌握CSS样式的创建和使用二、实验要求1.掌握使用CSS样式面板创建4种基本选择器类型的CSS样式。2.掌握以内部样式、外部样式使用CSS样式的方式三、实验内容和步骤CSS（CascadingStyleSheet，层叠样式表）技术是一种格式化网页的标准方式，它通过设置CSS属性使网页元素获得各种不同效果。CSS不是一种程序设计语言，而只是一种用于网页排版的标识性语言，是对现有HTML语言功能的补充和扩展。CSS的主要功能是通过对HTML选择器进行设定，来实现对网页中的

2、字体、字号、颜色、背景、图像及其他元素的控制，使网页能够完全按照设计者的要求来显示。CSS的定义由三部分构成：选择符selector、属性property和属性值value。其基本格式如下：selector{propertyl:valuel;property2:value2;……}其中selector（选择符）表示需要应用样式的内容，property表示由CSS标准定义的样式属性，value表示样式属性的值。准备工作1以解压缩后的“实验3”文件夹为根文件夹，在Dreamweaver中建立站点。第24页共24页《网页设计制作》上机实验1在Dreamweaver的

3、首选参数中设置代码提示功能中结束标签在“键入起始标签>后”2熟悉CSS样式面板CSS样式面板可以用来进行新建CSS规则，编辑CSS规则，删除CSS规则以及为网页指定外部样式表等操作。第24页共24页《网页设计制作》上机实验l“全部”标签显示当前网页中使用的使用各种样式选择器的全部样式。双击其中的某个样式可以打开“CSS规则定义”窗口对样式进行编辑。l“正在”标签显示当前鼠标所在处的网页元素具有的CSS属性及属性值。可以在窗口的下方点击某一属性值进行修改，不必打开“CSS规则定义”窗口。在Dreamweaver中新建一个HTML文件，点击“新建CSS规则”按钮，

4、查看“新建CSS规则”对话框中选择器器类型、选择器名称、选择器位置的选项。第24页共24页《网页设计制作》上机实验操作题一：理解样式表的作用说明通过给网页文件添加CSS样式表文件的引用，改变网页元素的格式。1.在Dreamweaver中打开pm2.5.html，观察网页的HTML组成以及没有附加CSS样式时的表现。2.点击CSS样式面板的“附加样式表”按钮。3.在弹出的“链接外部样式表”对话框中，通过“浏览…”找到css/pmstyle.css并链接到网页中。4.观察网页head元素中的变化，会发现网页中通过元素把css/pmstyle.css引入

5、到了网页中。5.保存文件并在浏览器中预览。第24页共24页《网页设计制作》上机实验操作题二：创建CSS样式说明通过标签选择器、ID选择器、类选择器类型的样式定义，掌握在CSS样式的定义和创建，以及各种选择器的使用场景。完成后的效果如下：第24页共24页《网页设计制作》上机实验第24页共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

7、;第24页共24页《网页设计制作》上机实验第24页共24页《网页设计制作》上机实验在设置font-family时，选择“自定义字体堆栈”，从可用字体列表中选择字体后，点击加入选择的字体。创建完字体堆栈后，从font-family的下拉列表中可以找到这一字体堆栈并选择。第24页共24页《网页设计制作》上机实验然后，h1元素应该变成：2.2定义blockquote元素的CSS样式目的：通过样式定义，改变blockquote元素的默认样式，具有新的内边距、左边框、背景颜色。把光标放在blockquote元素上，点击”CSS样式”面板的“新建CSS规则”按钮，设置选择

8、器类型为“标签”，选择器名称为”blo