《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_b~1.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 ，在【边框】分类中设置右边框的样式、宽度、颜色， 其他