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

《网页设计制作》上机实验第1页共24页实验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页共24页2在Dreamweaver的首选参数中设置代码提示功能中结束标签在“键入起始标签后”3熟悉CSS样式面板CSS样式面板可以用来进行新建CSS规则，编辑CSS规则，删除CSS规则以及为网页指定外部样式表等操作。《网页设计制作》上机实验第3页共24页“全部”标签显示当前网页中使用的使用各种样式选择器的全部样式。双击其中的某个样式可以打开“CSS规则定义”窗口对样式进行编辑。“正在”标签显示当前鼠标所在处的网页元素具有的CSS属性及属性值。可以在窗口的下方点击某一属性值进行修改，不必打开“CSS规则定义”窗口。在Dreamweaver中新建一个HTML文件，点击“新建CSS规则”按钮，查看“新建CSS规则”对话框中选择器器类型、选择器名称、选择器位置的选项。《网页设计制作》上机实验第4页共24页操作题一：理解样式表的作用说明通过给网页文件添加CSS样式表文件的引用，改变网页元素的格式。1.在Dreamweaver中打开pm2.5.html，观察网页的HTML组成以及没有附加CSS样式时的表现。2.点击CSS样式面板的“附加样式表”按钮。3.在弹出的“链接外部样式表”对话框中，通过“浏览…”找到css/pmstyle.css并链接到网页中。4.观察网页head元素中的变化，会发现网页中通过link元素把css/pmstyle.css引入到了网页中。linkhref=css/pmstyle.cssrel=stylesheettype=text/css5.保存文件并在浏览器中预览。《网页设计制作》上机实验第5页共24页操作题二：创建CSS样式说明通过标签选择器、ID选择器、类选择器类型的样式定义，掌握在CSS样式的定义和创建，以及各种选择器的使用场景。完成后的效果如下：《网页设计制作》上机实验第6页共24页《网页设计制作》上机实验第7页共24页在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;《网页设计制作》上机实验第8页共24页《网页设计制作》上机实验第9页共24页在设置font-family时，选择“自定义字体堆栈”，从可用字体列表中选择字体后，点击加入选择的字体。创建完字体堆栈后，从font-family的下拉列表中可以找到这一字体堆栈并选择。《网页设计制作》上机实验第10页共24页然后，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;《网页设计制作》上机实验第11页共24页请观察代码视图中的CSS样式，可以看到Dreamweaver在自动生成CSS样式时默认不会采用简写形式，因此CSS代码会比较多，请尝试删除原来的与border相关的代码后，自行编写如下的边框的简写形式：border-left:10pxsolid#666;而且，你会发现如果没有内边距，blockquote元素中的文字会紧贴着背景，因此通过需要增加内边距来使得排版不那么拥挤。《网页设计制作》上机实验第12页共24页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;《网页设计制作》上机实验第13页共24页然后，h2元素应该变成：2.4定义p元素的CSS样式通过样式定义，改变p元素的默认样式，使得段落元素首行缩进2个字符，行高为1.5倍。在“CSS规则定义”窗口设置如下属性：line-height:1.5;text-indent:2em;《网页设计制作》上机实验第14页共24页2.5定义名称为“reference”类选择器样式（这里类选择器的名称根据具体场景由自己定义，起名为reference是为了用于具有参考含义的元素上，改变“参考书籍”和“参考链接”所在h2元素的文字颜色）点击”CSS样式”面板的“新建CSS规则”按钮，设置选择器类型为“类”，输入选择器名称为“reference”，并点击确定按钮。《网页设计制作》上机实验第15页共24页在“CSS规则定义”窗口设置如下属性：color:#FC0;请观察代码视图中以“.”开始的reference定义。2.6应用名称为“reference”类选择器的样式把鼠标定位到“参考书籍”所在h2元素，选择“属性检查器”中“类”下拉列表中的“reference”。对“参考链接”所在h2元素做同样处理，即可以把“reference”类选择器定义的样式应用到这两个h2元素。《网页设计制作》上机实验第16页共24页请注意从代码的角度，类样式是如何应用到网页元素上的：2.7定义名称为“footer”的ID选择器的样式改变“本文资料来源：整理自互联网”所在p元素的样式。把鼠标定位到“本文资料来源：整理自互联网”所在元素，在“属性检查器”中设置ID为“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元素应该变成：2.8解决body和h1的内边距和外边距问题由于body元素、h1元素、blockquote元素具有默认的内边距和外边距，因此整个文章和浏览器的左上方具有一定的空隙，需要通过以下的CSS代码重置样式：body,h1,blockquote{padding:0;《网页设计制作》上机实验第19页共24页margin:0;}这段代码请放在所有样式的前面。请思考：对于blockquote元素来说，声明了2次padding，那么起作用的的是哪一条声明呢？操作题三：把网页装在容器里说明在没有使用容器元素把网页元素装进去之前，网页元素会撑满整个浏览器。这里将增加一个div容器元素，并设置div的宽度和水平居中。Step1.在代码视图中的body元素的开始标签后面增加一个div元素，并命名为“container”Step2.把div的结束标记移动到body元素的结束标签的前面，从而使得div元素的开始标签和结束标签把网页中原有的元素都包括在其中。Step3.在style区域编辑“#container”样式，使得它的宽度为960px,水平居中。#container{width:960px;margin:0auto;}《网页设计制作》上机实验第20页共24页Step4.保存文件并预览。Step5.如果你希望让最前面的h1元素和最后面的footer元素仍然占满浏览器的整个宽度，那么就不把这2个元素放在container中。你的网页看起来应该是下面的样子：《网页设计制作》上机实验第21页共24页操作题四：移动CSS规则到外部样式表中Dreamweaver默认使用“内部样式表”来存放网页中的样式。如果样式是反复利用在网站的其它网页中的，需要把样式从“内部样式表”移动到“外部样式表”中。1.在“CSS样式”面板通过shift键选择“worldwideweb.html”中的所有的样式，点击鼠标右键，从右键菜单中选择“移动CSS规则”。《网页设计制作》上机实验第22页共24页2.选择“移至外部样式表”中的“新样式表”，点击“确定”3.在“将样式表文件另存为”对话框中，输入要保存的CSS样式表文件为“base”,点击保存。Dreamweaver会将所有的样式定义移动到base.css文件中。《网页设计制作》上机实验第23页共24页观察在“worldwideweb.html”文件的head元素中，通过link元素把basic.css样式表引入到了网页文件中，并且在文档工具栏以如下的方式显示：表示现在worldwideweb.html中使用了base.css这1文件。当base.css文件名称旁出现*号时，需要单独保存或通过“文件”|“全部保存”来保存所有的文件。操作题五：把外部样式表链接到同一网站中的其它网页（从而使它们具有同样的风格）1.在Dreamweaver中打开“cloudcomputing.html”。2.点击”CSS样式”面板的“附件样式表”按钮，选择操作题三中定义的base.css文件，点击“确定”。3.base.css文件中样式被引入到了“cloudcomputing.html”文件中，从而使得《网页设计制作》上机实验第24页共24页“cloudcomputing.html”具有和“worldwidew