CSS样式(NEW).doc

典型实例-为页面创建css样式设计结果: 使用css样式来控制 products/list.asp 文档中的文字大小、文本格式、背景图像、边 框属性，如图1所示。图1 添加了CSS样式的文档显示效果设计思路: (1)创建一个外部css样式文件，通过链接引用到文档中。(2)将原先的HTML标签属性去掉。 (3)对特殊标签属性通过创建新的css样式来设置。 (4)对通用的标签属性通过重新定义标签属性来设置。具体的制作步骤打开素材中的的products/1ist.asp网页文档，将页眉、页脚部分删除。打开css样式面板，查看文档中的css样式提示:在第2章中设置页面属性时，系统自动将其转换为css样式并应用到页面中。 2.单击 (新建css样式)按钮，对body标签属性进行重新定义，如图2所示。图2 新建CSS样式面板3.单击确定按钮，在【保存样式表文件为】对话框中为新的css样式文件 命名，如图3所示图3保存样式表文件为对话框4.单击保存按钮，进入【body的css样式定义(在css.css中)】对话框，切 换至【背景】分类，设置文档的【背景颜色】属性，如图4所示。图4 在背景分类中设置背景颜色属性5.切换至【方框】分类，将【边界】属性全部设置为0，如图5所示。图5 在方框分类中设置的边界属性6、单击确定按钮，完成设置。此时，【css样式】面板中有两个关于body的css样式，一个包含在文档中，另一 个包含在 css.css 文件中。将文档中的样式删除，只保留新创建的样式那么为什么要删除文档的css样式，而只保留新创建的css样式?通过查看源代码， 不难找到答案。重新定义了body标签的css样式源代码非常简炼，代码越少，当然文档的打开速 度也就越快，这就是css样式的优点之一。7.创建css样式，对table标签进行重新定义，如图6所示。图6 新建CSS样式对话框8.在【类型】分类中，将【大小】属性设置为“12，如图7所示图7 在类型分类中设置大小属性提示:标签table指的是整个表格，可以看到文档中的元素都包含在表格内，没有不被表格所包含的， 因此将表格的文本大小设置为12，整个文档的文字大小就被定制了。9.新建一个自定义的left-td1样式，如图8所示。图8 新建CSS样式面板10.在【类型】分类中将文本的【颜色】属性设置为白色，在【背景】分类中将【背景图像】属性设置为/images/lefCban.jpg ，如图9所示。图9 设置类型背景分类11.切换至【区块】分类中，将【文字缩进】属性设置为10像素，如图10所示。图10 设置文字缩进属性12.单击确定接钮，完成操作。 13.选定产品分类单元格，然后打开其属性面板，将设置的【背景】属性删 除，选择【样式】下拉菜单中的left-td1 ，使用left-td1 样式来定义单元格的属性。14.按照步骤9 -12，为产品列表单元格创建样式right-td1 ，将文本的【颜 色】属性设置为 #666666 ，将【背景图像】属性转换为 /images/mid_b1.jpg ，将【文字缩进】属性设直为10像素。15.选中产品列表单元格，在其【属性】面板中将设置的【背景】属性删除，然后在【样式】下拉菜羊中选择right-td1 提示:在这两个样式创建过程中，都使用了【背景图像】属性，但一个设置为不重复，另一个设置为 横向重复。这主要取决于背景图像的不同，如果背景图像是一个按钮，那么就应该让背景图像 不重复;如果背景图像是水平条或者垂直条，那么就应该让背景图像横向重复或者纵向重复。 16.创建新的样式left-td2 ，如图11所示。 图11 新建CSS样式对话框17.在【背景】分类中将【背景图像】属性设置为/images/lef_bg_5.jpg、纵向重复。18.选中产品分类下面的单元格，将【背景】属性删除，然后选择【样式】 下拉菜单中的left-td2。 19.创建样式right-td2 ，设置【背景】分类中，【背景】为#FFFFFF，【背景图像】属性设置为/images/mid_bg_4.jpg、横向重复。20.选中产品列表下面的单元格，将【背景】属性删除，然后选择【样式】 下拉菜单中的right-td2。 提示:这里为什么要加上背景颜色?这是因为背景图像使用的是横向重复，而单元格的高度是随着内容的 增多而增大的。如果单元格高度超过了背景图像的高度，那么将显示背景颜色;如果没有背景颜 色，就会显示文档的背景颜色。 21.新建样式right-td3 ，在【边框】分类中设置右边框的样式、宽度、颜色， 其他边框设置为无，如图12所示。图12 设置边框分类属性22.选中产品图像所在的单元格，然后在【属性】面板的【样式】下拉菜单中选 择right -td3。 23.选中水平线，将【宽度】选项设置为“96%”，然后新建重新定义hr标签 的css样式，最后将边框的样式设置为虚线，如图13所示。图13 设置边框分类属性24.新建重新定义标题5 ( h5 )标签的css样式中的【类型】分类，将其【大小】属性设置为 12、【粗细】属性设置粗体、【颜色】属性设置为红色。25.新建重新定义段落p标签的css样式中的【类型】分类，将【行高】属性设置为16像 素、【区块】分类中的【文字缩进】属性设置2字体高。至此，关于文档list-asp的css样式创建工作就完成了。预览一下网页，查看网页 的实际显示效果范例小结: 本例中，将通用的属性使用了标签(重新定义特定标签的外观) CSS样式来修改它们 的属性，如页面的背景颜色、表格内的文本大小、段落的首行缩进、标题5的格式等。通过创 建类(可应用于任何标签) CSS样式为页面添加了一些特殊的显示效果，如单元格的背景图 像、单元格的边框等。css样式简化了HTh在L代码，例如对页边距的设置:还能够实现更加丰 富的功能，例如背景图像的设置、表格边框的样式设置等。总之， CSS样式对于页面元素属性 的控制是非常高效的。起步设计页脚的css样式设计结果: 下面来为页脚foot.asp 设置css样式。设计思路: (1)通过自定义的css样式，设置表格的背景及文本的颜色。 (2)通过重新定义标签属性，将链接文本的下划线去掉。操作步骤提示: 1.打开文档foot.asp，将各表格的背景图像全部删除。 2.新建foot-tdl样式，定义在新建样式表文件3.单击确定按钮，打开【保存样式表文件为】对话框，选择已有的 css.css文件4.单击保存按钮，将在css.css样式文件中继续追加css样式foot-tdl。5.在【背景】分类中设置【背景图像】属性设置为/images/foot_bg.jpg、横向重复。6.将创建的foot-tdl应用到导航文本所在的表格上。7.新建样式foot-td2 ，将文本的【颜色】属性设置为白色，将【背景图像】属性设置为 /images/top_bg_l.jpg，重复。8、将样式foot-td2应用到第2个表格上。 9.为导航文本添加空链接#，使用面板中的电子邮件按钮，为文本电子信箱添加电子邮件地址，如图14所示。图14 电子邮件链接对话框10.重新定义标签a的属性，将链接的下划线去掉，即在【类型】分类中，将其【修饰】属性中的无勾选上11.新建两个样式link-textl 和link-text2 ，分别设置它们的在【类型】分类中将文本颜色，#666666 和#ffffff。12.将link-textl应用到第1个表格中的链接文本上，将link-text2应用到电子信箱的链接文本上。 13.打开代码视图，将 标签上面的删除，然后保存文件。 因为页脚将被其他文档调用，如果其他文档链接了css.css 样式文件，那么将会出现 重复链接现象。 小结: 本例中，除了设置单元格的背景图像外，还应用了css样式来设置文本的颜色及去掉 文本链接的下划线。文本链接共有链接(a:link)、己访问过的链接( a:visited)、鼠标点击时 的链接(a:hover)、鼠标激活的链接(a:active) 4种状态。这里重新定义了标签的属性， 也就是将4种状态的下划线全部去掉，也可以只定义其中的一种，这样其他未定义的链接状 态仍有下划线。进阶设计页眉的css样式设计结果: 为页眉部分设计css样式，然后通过一个css样式文件 css.css 来控制整个产品介绍页版面设计思路: (1) 通过自定义的css样式，设置表格的背景及文本的颜色。(2) 先为文本创建链接，然后再应用css样式。操作步骤提示: 1. 打开文档top.asp ，为各导航文本添加空链接#，并将表格的背景图像删除，保留单元格的背景图像。2. 创建样式top-tdl ，保存在css.css样式文件当中。设置top-tdl的 【背景图像】属性为 /images/top_bg_l.jpg，重复。3. 将样式top-tdl应用到第1个表格上。 4. 创建样式top-td2 ，设置其【背景图像】属性为 /images/top_bg_4.jpg，横向重复。5. 将样式top-td2应用到第2个表格上。 6. 创建样式top-td3 ，设置其【背景图像】属性为 /images/top_bg_5.jpg，横向重复。7.将样式top-td3应用到第3个表格上和表格1中的第二行中。 8.将样式link-text2应用到右上角链接文本上，将link-textl 应用到水平的 导航文本上。 9.打开代码视图，将 标签上面的删除，然后保存文件。 10.打开文档list。asp，插入页眉和页脚，然后保存并预览文档。 小结: 在本例中，只能先为文本添加链接，然后再应用设置文本颜色的样式link-textl 、 link-text2 ，如果将次序颠倒过来，样式 link - textl 、link-text2 将不会在文本上生 效，而是应用到了单元格上，这是在设置链接文本的css样式时应该注意的一个问题。提高-设计首页的css样式设计结果: 为首页文档添加css样式，如图15所示。图15 应用CSS样式的首页文档效果设计思路: (1)使用自定义的css样式设置特殊效果的表格边框。 (2)使用ID选择器的css样式，为表格内容添加阴影的效果。操作步骤提示: 1.打开首页文档index.asp ，将表格及单元格的背景图像全部删除。 2.将样式left-tdl应用到文本产品搜索所在的单元格上，将样式righttdl应用到文本公司动态新闻所在的单元格上。 3.为文本客户最新留言所在的单元格创建一个样式right-td4 ，如图16 所示。图16 创建样式right-td44.将right-td2样式应用到文本公司最新动态和客户最新留言下面的单元格。5.为文本最新产品列表所在的单元格创建一个新的样式right-td5 ，【类型】分类中设置【颜色】属性设置为#666666、【背景】分类中设置【背景图像】属性设置为/images/mid_bg_3.jpg、横向重复、【区块】分类中设置【文字缩进】属性设置为10像素。6.为左侧箭头所指的文本分类信息详细名称添加空链接#，然后应用样式link-text2。 7.创建新的样式left-td3 ，设置边框各属性，如图17所示。图17设置边框属性8.将新建的样式left-td3分别应用到箭头及分类信息详细名称所在的单元格上。 9.打开list.asp文档，将产品图像及详细说明所在的单元格内容粘贴到首页文档中，如图18所示。图18 粘贴单元格10.分别选中产品图像所在的表格，在其【属性】面板中将【表格Id】选项均设 直为shadow。11.创建【高级(rn、上下文选择器等)】类型的样式#shadow ，如图19所示。图19 创建新样式对话框12.设置【扩展1分类中的过滤器属性Shadow ( Color=#CCCCCC， Direction=125 ) ，如图20所示。图20 设置过滤器属性凡是ID为 shadow的表格都会应用样式 #shadow ，为表格内容添加阴影效果。 13.保存文档并查看预览效果。 小