Css样式使用二.ppt

Css样式使用二 分析实例一 素材网页“初始.html” 使用css样式装饰后的”初始.html” 设计第一套装饰方案的操作过程 至此，我们完成了对整个网页的美化，装饰。 CSS样式表的使用（二）中的实例二请你参考书本112页第12步，或者观看老师的教学视频来完成。 * * 注意：这三个位置的文本的效果都是一样的。所以我们可以只设计出一套方案，然后把这套装饰方案用在这三个地方。 这个位置的文本实现的效果是不一样的，所以我们需要设计出另外一套装饰方案，应用在这里的文本上 完成前 完成后 步骤： 1，将文件夹“css样式表的使用（二）”设置为一个站点，该站点取名为：“css样式2”。 2，在dreamweaver中，双击打开“初始.html”,双击打开”文字.txt”，将第一段文字“复制”，“粘贴”到专家支招下面的表格中。 3，将文字选中，单击“属性”面板上的“项目列表”图标，实现如图所示效果：（同时生成的代码段如下：） 代码分析：当我们点击“项目列表”图标后，就会自动生成两个叫ul和li的标签，把这两个标签理解成两个名字，这两个名字就是这段文字的标志，通过对这两个标签进行装饰，就可以实现对这段文字进行装饰。 4，双击打开style.css文件，单击“新建css”规则，弹出如下对话框： 由于ul标签（项目列表标签）是软件提供的，所以这里的选择器类型要选择第二项。 5，在弹出的对话框中做如下设置： （1）左边单击“方框”选项： 填充：“全部相同”打对勾 ，左：0 （这步操作在文件style.css中产生的代码为： padding: 0px; 边界：“全部相同”对勾去掉，左：25px,上：2px。 （这步操作在文件style.css中产生的代码为： margin-top: 2px; margin-left: 25px; margin-left: 25px margin-top:2px Padding:0px; 实现了整段文字距离边框的距离为0像素，关于padding(填充）和边界（margin) 请看如下实例： 边界和填充演示 当我们设置了上边界为：30像素时，段落”边界效果“四个字整体往下移动了30像素。 当我们设置了填充为：30像素时，段落”填充效果“四个字以中心向外拓展了30像素。 （2）左边单击“列表”选项： 类型：无 （这步操作在style.css中生成的代码为：list-style-type: none; 注意观察：这步操作可以让这段文字每行前面的小黑点消失。为什么呢？ 由这段代码你能看出来所有的文字都是包含在ul标签内的，我们现在把ul标签的列表类型设置为”无“，那么该ul标签内部的所有文字都不再有列表类型，所以通过对ul标签做这步操作可以将每段文字前面的小黑点去掉。同时，我们也可以把小黑点改成其他样子，后面介绍修改的方法。 (其实，所谓的列表类型就是指给某些文字前面加上一种小图形，这种小图形可以由系统生成，也可以由自己去设定，它的存在就是用来规划文字，装饰文字的。请看具体老师的操作演示。（我们更换类型列表框的选项，看一看页面发生的变化） （3）单击”确定“完成对ul标签的设置。效果如图所示： 6，对li标签进行装饰，首先请看相关代码： 看看这段代码，我们发现每行上都有一对li标签。由此你应该能明白，待会当我们对li标签进行装饰时，我们对li做的操作都会被分别用在这四行上。假如我们给li标签加一个背景图片，那么这四行都会各被加一个背景图片。这和ul标签是不一样的，如果我们给ul标签加上一个背景图片，那么这四行文字只会有一个背景图片。它们的区别如右边两幅图所示： 给ul标签加上背景图片后的效果。 给li标签加上背景图片后的效果。 对li标签进行装饰的操作步骤： （1）双击“style.css”文件，单击”新建css样式“按钮，打开”新建css规则”对话框，如图所示： （2）在选择器类型中选择第二项“标签”，然后在标签列表框中选择li。 理由：因为li标签是由软件提供的（即项目列表标签），所以这里我们要选择第二项“标签”，而不是“高级”。 （3）单击确定打开“li 的css规则定义”对话框，如下图所示： “类型”选项 字体：“宋体” 大小：“12px” 行高：“20px” 颜色：#000000； 单击”应用”按钮后生成的代码： 在弹出的对话框中做如下设置： 实现的效果 “背景”选项 背景图像：../images/8308.gif 重复：不重复 水平位置：5Px； 垂直位置：50%； 单击”应用”按钮后生成的代码： 实现的效果 “方框”选项 填充：左18px; 单击”应用”按钮后生成的代码： 至此，完成了对li