在你创建并测试样式之后,你可能需要手动编辑SPD自动产生的样式。你也可能会想在你的品牌化决策的文档中,加入注释----如/* This is the Home page header style */.
本次练习里,你修改并删除样式。
准备:使用SPD打开MyPage.aspx,进入拆分视图。
1. 在样式选项卡,点击CSS属性,在创建组中点击应用样式。
2. 在设计视图div#page_content区域,输入Wide World Importers。
在应用样式任务窗格中,三个样式元素列出。每个红色图标被灰色圆圈包围,说明每个元素在MyPage.aspx中被使用。样式元素#page_content被蓝色矩形包围,说明这个样式应用到了插入点区域。
3. 选中Wide World Importers,设置为粗体。
4. 在CSS属性任务窗格,点击背景色属性右边单元格,点击出现的箭头。
5. 选择银白色。
此时背景色属性被设置为hex代码(六个数字和/或字母定义一个颜色)#C0C0C0。页面上Wide World Importers和应用样式#page_content上都是银白色背景。
6. 插入点放在 Wide World Importers以下,<div>标签之外,输入Oak Furniture。
文本自动被放到<p>标签中。代码视图中你一看到<p>标签自动创建在</form>之后。
7. 选择Oak Furniture,居中。
SPD创建了新的类样式.style1,并将它关联到<p>标签。这个新标签出现在应用样式和CSS属性中。当前网页变低了,说明样式应用在MyStyles.css文件之后。
小贴士:如果类样式没有被创建,确定页面编辑七选项中CSS选项卡设置为自动样式应用程序。
8. 将插入点放到Oak Furniture以下,<p>标签之外,输入Office Furniture。
文本同样被放在<p>标签之内,与类style1关联。
小贴士:你可以通过选中元素然后点击应用样式任务窗格的清除样式来移除样式。
9. 选中Office Furniture,右对齐。此时产生样式.style2。
小贴士:你可以通过使用现有样式作为基础新建样式。在应用样式任务窗格中,右击样式作为新样式基础,点击新建样式副本。
10. 点击Office Furniture,在应用样式中点击.style1将<p>标签设置为.style1样式。原来的.style2消失了。
11. 在应用样式任务窗格,指向.style1,点击出现的箭头,点击修改样式。
小贴士:注意到块部分粗体,点击那个类别会看到文本对齐设置为居中。
12. 点击边框类别,border-style下,top设置为double,点击确定。
13. 在代码视图,按住CTRL,点击style1。可以进入<head>中的样式声明。
14. 保存,如果“保存嵌入式文件”对话框打开,点击确定。