一步步学习SPD2010--第十章节--SP网站品牌化(8)--使用样式应用程序组命令

时间:2021-01-31 16:09:52

一步步学习SPD2010--第十章节--SP网站品牌化(8)--使用样式应用程序组命令

        在样式选项卡,样式应用程序组命令提供了你经常使用的部件的快速访问。通过使用页面编辑器选项对话框,你可以配置SPD来以你的名义自动创建样式(自动模式),或者配置SPD允许你手动创建样式(手动模式)。如果你处理CSS很惬意,你可能会发现总是处在自动模式或手动模式并不适合你。这种情况下,就需要样式应用程序组命令了。

        模式列表可以选择自动或手动,这样可以控制样式产生的方式。手动模式时,其他命令会被激活。

        目标规则允许你快速应用创建的样式。默认最高优先级的样式是目标规则。目标规则也可以用来修改特定样式或为选中的元素创建样式。你可以选择在选中元素(内联样式)的样式属性上创建CSS属性,或者允许SPD生成新样式类(New Auto Class)。

        小贴士:SPD状态栏会显示当前的样式应用程序模式。单击状态栏的样式应用程序可以改变模式,或打开页面编辑器中的CSS选项卡。

        本练习中,你使用样式应用程序组命令。

        准备:使用SPD以拆分视图打开MyPage.aspx。

1. 光标放在Office Furniture下边一行(<p>标签以外)。输入Garden Furniture。

2. 样式--模式,选择手动。目标规则选择新建级联样式。

一步步学习SPD2010--第十章节--SP网站品牌化(8)--使用样式应用程序组命令

         样式应用程序组中,显示覆盖图、目标规则列表、重用属性按钮是活动的。SPD状态栏显示手动。

3. 点击开始选项卡,字体颜色选择红色。

        代码视图中,color属性#FF0000,被添加到<p>标签的style属性中。

一步步学习SPD2010--第十章节--SP网站品牌化(8)--使用样式应用程序组命令

4. 按下CTRL+Z取消原来操作。样式选项卡--目标规则--新建自动类。回到开始选项卡,字体颜色选择红色。

        设计视图中<p>标签是p.style1 style2.代码视图中可以看到新类.style2,应用到了新的<p>标签中。

5. 按下CTRL+Z取消原来操作。样式选项卡--目标规则--应用新样式。

6. 输入.red。字体选择红色。

7. 点击应用。

        文本Garden Furniture变红色,左对齐没有边框。类.style1和.style2不在应用到文本上。<p>标签为p.red,代码视图中类值设置为red。

一步步学习SPD2010--第十章节--SP网站品牌化(8)--使用样式应用程序组命令

8. 保存。