一步步学习SPD2010--第十章节--SP网站品牌化（4）--创建并关联CSS文件

不同类型的样式可以被创建：HTML标签内的内联样式、页面的内部样式和页面的外部样式。较少地使用内联样式。它们在你想设置样式的元素中定义----例如<div style=”position:absolute; top:10px;”>.使用内联样式对于使用样式表的目的是直接的矛盾。内联样式覆盖了由样式表定义的样式，意味着如果你不编辑页面，就不能重新定义页面那部分的样式。使用内联样式的坏处是，它们需要更多维护，不灵活，且增加了页面的规模。

如果你对页面布局或某特定页面有很小的样式修改，可以使用内联样式表。这些样式被定义在页面顶部<style>标签内。

添加样式比较偏爱的方法是使用外部样式表。链接CSS文件到页面。链接别放在<head>部分，通常在CSS链接SharePoint控件之后。外部样式表更容易维护，更灵活，又不会增加页面规模。

小贴士：可以在你要应用特殊外观的HTML部分添加一个<div>标签，赋予其ID。然后在样式中，只有浏览器遇到该ID的<div>标签，才会应用样式。

通过将样式放到文件中，你可以集中管理样式并应用相同样式到许多页面。Foundation和Server版本都大量使用文件中的样式。你可以用一下方法创建新的样式表：

当显示网站资产库时使用资产选项卡。
使用样式选项卡。
在新样式对话框（你从应用样式和管理样式任务窗格打开），以及当你在样式应用程序组中从目标规则列表中选择应用样式。

当你在CSS文件中创建样式时，你需要附加文件到页面才能应用样式。SharePoint再次提供了多种方法完成。例如，可以使用样式选项卡的附加样式命令。或者在应用样式和管理样式任务窗格中使用链接。附加文件时，<link>标签要放到<head>标签中。

本练习中，你将附加一个CSS文件到页面。

准备：使用SPD打开团队网站。

1. 点击导航窗格的网站资产。

2. 新建CSS。

3. 命名MyStyle.css

4. 点击导航窗格的网站页面。新建ASPX页面。

5. 命名MyPage.aspx。

6. 双击编辑文件，在高级编辑模式打开。

<form#form1>标签高亮在快速标签选取器区域。

7. 点击拆分。

8. 在样式选项卡，点击附加样式表。

9. 点击浏览。

故障分析：如果你的网站内容没有显示，展开左上角的微软SPD，导航到你的网站。

10. 双击SiteAssets，点击MyStyle.css。

11. 点击打开。

12. 选择附加为链接。

页面刷新，可以看到：

13. 保存。