《Css样式使用二》由会员分享，可在线阅读，更多相关《Css样式使用二（20页珍藏版）》请在金锄头文库上搜索。
1、Css样式使用二 分析实例一,素材网页“初始.html”,使用css样式装饰后的”初始.html”,注意：这三个位置的文本的效果都是一样的。所以我们可以只设计出一套方案，然后把这套装饰方案用在这三个地方。,这个位置的文本实现的效果是不一样的，所以我们需要设计出另外一套装饰方案，应用在这里的文本上,设计第一套装饰方案的操作过程,完成前,完成后,步骤： 1，将文件夹“css样式表的使用（二）”设置为一个站点，该站点取名为：“css样式2”。,2，在dreamweaver中，双击打开“初始.html”,双击打开”文字.txt”，将第一段文字“复制”，“粘贴”到专家支招下面的表格中。,3，将文字选中，
2、单击“属性”面板上的“项目列表”图标，实现如图所示效果：（同时生成的代码段如下：）,代码分析：当我们点击“项目列表”图标后，就会自动生成两个叫ul和li的标签，把这两个标签理解成两个名字，这两个名字就是这段文字的标志，通过对这两个标签进行装饰，就可以实现对这段文字进行装饰。,4，双击打开style.css文件，单击“新建css”规则，弹出如下对话框：,由于ul标签（项目列表标签）是软件提供的，所以这里的选择器类型要选择第二项。,5，在弹出的对话框中做如下设置： （1）左边单击“方框”选项：填充：“全部相同”打对勾 ，左：0 （这步操作在文件style.css中产生的代码为： padding:
3、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）左边单击“列表”选项：类型：无
4、（这步操作在style.css中生成的代码为：list-style-type: none;,注意观察：这步操作可以让这段文字每行前面的小黑点消失。为什么呢？,由这段代码你能看出来所有的文字都是包含在ul标签内的，我们现在把ul标签的列表类型设置为”无“，那么该ul标签内部的所有文字都不再有列表类型，所以通过对ul标签做这步操作可以将每段文字前面的小黑点去掉。同时，我们也可以把小黑点改成其他样子，后面介绍修改的方法。,(其实，所谓的列表类型就是指给某些文字前面加上一种小图形，这种小图形可以由系统生成，也可以由自己去设定，它的存在就是用来规划文字，装饰文字的。请看具体老师的操作演示。（我们更换类型
5、列表框的选项，看一看页面发生的变化）,（3）单击”确定“完成对ul标签的设置。效果如图所示：,6，对li标签进行装饰，首先请看相关代码：,看看这段代码，我们发现每行上都有一对li标签。由此你应该能明白，待会当我们对li标签进行装饰时，我们对li做的操作都会被分别用在这四行上。假如我们给li标签加一个背景图片，那么这四行都会各被加一个背景图片。这和ul标签是不一样的，如果我们给ul标签加上一个背景图片，那么这四行文字只会有一个背景图片。它们的区别如右边两幅图所示：,给ul标签加上背景图片后的效果。,给li标签加上背景图片后的效果。,对li标签进行装饰的操作步骤：,（1）双击“style.css”
6、文件，单击”新建css样式“按钮，打开”新建css规则”对话框，如图所示：,（2）在选择器类型中选择第二项“标签”，然后在标签列表框中选择li。 理由：因为li标签是由软件提供的（即项目列表标签），所以这里我们要选择第二项“标签”，而不是“高级”。,（3）单击确定打开“li 的css规则定义”对话框，如下图所示：,“类型”选项字体：“宋体” 大小：“12px” 行高：“20px” 颜色：#000000；,单击”应用”按钮后生成的代码：,在弹出的对话框中做如下设置：,实现的效果,“背景”选项背景图像：/images/8308.gif 重复：不重复 水平位置：5Px； 垂直位置：50%；,单击”应
7、用”按钮后生成的代码：,实现的效果,“方框”选项填充：左18px;,单击”应用”按钮后生成的代码：,至此，完成了对li标签的设计。另外的三段文字都可以套用ul标签和li标签的设计方案进行装饰。具体操作过程请参看书本111页第7步，或者老师的教学视频。,实现效果,接下来我们对网页的左部分进行装饰，如下图所示：,由图我们可以知道：对这部分文字的装饰不同与先前的那几段文字的装饰，所以这部分的文字，我们不可以简单的去套用ul标签和li标签。对于这部分文字的装饰我们需要做一些额外的工作。首先，我们来分析一下这段文字，你应该能发现每行上前面的小箭头图标不见了，但是每行都有了下划线。而且每行之间的距离相对比
8、较大，文字也是居中对齐的，下面我们来看一下具体的实现过程。,装饰之前,装饰之后,第一步：在“初始.html”网页的左边单元格中单击一下鼠标左键，如图所示：,第二步：单击“布局”工具下的“插入div标签”按钮，弹出如图所示对话框,在ID:列表框中输入left,然后点击“确定”按钮。,这里要明白的是：我们要在鼠标所在的格子中插入一个div标签，这个标签的名字不是由软件给定，是我们自己起的，它叫left，这意味着鼠标所在的这块地方已经有了一个名字，一个标记。将来把那段文字“复制”，“粘贴”到这个位置后，我们就可以通过left这个名字找到这段文字。对标签left的装饰就是对这个位置上的文字的装饰。,第
9、三步：把div标签内的文字删除，然后将我们需要美化的文字“复制”，“粘贴”到div标签中，如图所示：,做完三步之后产生的相关代码：,第四步：选中这段文字，单击“属性”面板中的“项目列表”按钮。如图所示：这一步得到的效果如下一张图所示。,删除这行文字,第四步效果图,同时，代码变为：,第三步生成的代码,由上图可以知道：当我们单击了“项目列表”按钮后，这段文字自动就套用了ul标签和Li标签的装饰方案。这明显是不符合我们的期望的。这里，请你注意ul标签上方的“left”标签。,第五步：双击打开style.css文件，单击”新建css规则“按钮，弹出”新建css样式“对话框，如图所示：,注意：这里选择器
10、类型不再是”标签“，而是”高级“。这是因为left标签不是软件提供的，是我们自己取的一个标签名，所以要选择”高级“，然后在选择器中输入”#left”然后单击“确定”按钮。,第六步：做如下设置： “方框”选项宽：80%， 填充：全部相同打对勾，上0px; 边界：全部相同打对勾，上0px;,完成的效果,第七步：单击“新建css样式”按钮，弹出如下对话框，在选择器类型中选择”高级“。在选择器中输入”#left ul”.如下图所示：,为什么要输入“#left ul”,这指的是什么呢？,从这段代码中，我们可以看到这段文字全部都包含在和标签中，而和标签又包含在名叫left的div标签中.所以能代表这段文字
11、的标签已经不再是ul标签，而是left ul 和 left li标签。,我们应该还记得我们曾经使用过标签和li标签去装饰过“专家支招”那里的文字，如图所示：,此时我们想要装饰的文字和之前的那三段文字是不同的效果，那么我们就不能再使用先前的ul标签和li标签。,第八步：在第七步单击”确定“后弹出的对话框中做如下设置： 方框选项： 填充：全部相同打对勾，上：0Px； 边界：全部相同打对勾，上：0Px； 列表选项： 类型：无,第九步：单击”新建css样式“按钮，弹出对话框，在”选择器类型“中选择”高级“，在”选择器“下拉列表中输入”#left li”,单击“确定”按钮，而后弹出相关对话框，做如下设置
12、：类型选项： 字体：宋体； 大小：12px; 行高：24px; 颜色：#000000；背景选项： 背景图像：无；方框选项： 填充：去掉全部相同对勾，左：12px;边框选项： 样式：去掉全部相同对勾，下：虚线； 宽度：去掉全部相同对勾，下：1px； 颜色：去掉全部相同对勾，下：#009900；最后，单击“确定”按钮完成对left li的设置。其效果如下图所示：,对类型选项做如上设置后的效果图,类型选项：字体：宋体； 大小：12px; 行高：24px; 颜色：#000000；,背景选项：背景图像：无；,对背景选项做如上设置后的效果图,对方框选项做如上设置后的效果图,对边框选项做如上设置后的效果图,方框选项：填充：去掉全部相同对勾，左：12px;,边框选项：样式：去掉全部相同对勾，下：虚线； 宽度：去掉全部相同对勾，下：1px； 颜色：去掉全部相同对勾，下：#009900；,至此，我们完成了对整个网页的美化，装饰。,CSS样式表的使用（二）中的实例二请你参考书本112页第12步，或者观看老师的教学视频来完成。,
