使用默认 SharePoint 2010 CSS 文件 (Wrox)

**摘要：**了解如何为 Microsoft SharePoint 2010 网站打造品牌，以及如何使用 SharePoint CSS Web 服务器控件来增强和自定义用户界面。

Wrox SharePoint 书籍

上次修改时间： 2015年3月9日

适用范围： Business Connectivity Services | Open XML | SharePoint Designer 2010 | SharePoint Foundation 2010 | SharePoint Online | SharePoint Server 2010 | Visual Studio

本文内容
使用默认 SharePoint 2010 CSS 文件简介
先决条件
SharePoint 品牌打造活动
查找 SharePoint 品牌打造项目
SharePoint 中的 CSS Web 控件
将自定义样式应用于 SharePoint 网站
将自定义样式表应用于 SharePoint 时的注意事项
部署注意事项
关于作者
其他资源

**作者：**Johnny Harbieh

**编辑：**SharePoint 2010 文章的 WROX 技术编辑

目录

• 使用默认 SharePoint 2010 CSS 文件简介

• 先决条件

• SharePoint 品牌打造活动

• 查找 SharePoint 品牌打造项目

• SharePoint 中的 CSS Web 控件

• 将自定义样式应用于 SharePoint 网站

• 将自定义样式表应用于 SharePoint 时的注意事项

• 部署注意事项

• 关于作者

• 其他资源

使用默认 SharePoint 2010 CSS 文件简介

Microsoft SharePoint 2010 具有许多自定义其用户界面的方法。网站所有者可以配置备用 CSS 文件，应用自定义主题，或修改现有主题。除了可以在浏览器中执行的操作外，您还可以配置 SharePoint 以启用自定义工具（例如 Microsoft SharePoint Designer 2010），从而自定义和替代默认外观和行为。

先决条件

表 1 列出了您在应用本文中的所有信息之前所需的项。

表 1. 先决条件

SharePoint 品牌打造活动

SharePoint 品牌打造可包括以下一项或多项活动：

• 查找和查看样式表 (CSS) 及 XSL 文件。

• 修改和更新 CSS 文件。

• 添加新 CSS 类、图像和颜色。

• 创建新主题或修改现有主题。

• 移除、隐藏或通过注释禁用现有 CSS 类。

• 隐藏新功能区或更改窗口的背景色。

• 替代一些丰富编辑器控件样式。

以下各节介绍如何查找和使用默认的品牌打造项目、工具和资源。

查找 SharePoint 品牌打造项目

与 SharePoint 品牌打造相关的项目是与 SharePoint 一起安装和部署或稍后由网站所有者和开发人员添加的文件和资源。

本节介绍如何查找和操作 SharePoint 中的默认样式表和母版页。

CSS 文件 (.css)

若要更改 SharePoint 网站的外观，请查找 SharePoint 默认使用的 CSS 文件。表 2 列出了 SharePoint 使用的一些核心 CSS 文件。

表 2. 核心 SharePoint 样式表

{Language-Culture} 是语言和区域性的占位符；例如，en-us。{Locale-ID} 是另一个区域设置 ID 占位符；例如，美国英语为 1033。

提示
有关详细信息，请参阅 Microsoft 分配的区域设置 ID（该链接可能指向英文页面）。

表 2 中的一些样式表位于文件系统上；其他样式表位于 SharePoint"样式"库中。"样式"库中的文件存储在内容数据库中。如果要修改这些文件，必须执行下列操作之一：

• 从"样式"库中下载文件，在计算机上本地修改这些文件，然后上载它们。

• 使用 SharePoint Designer 打开网站，然后在那里修改文件。

Microsoft 建议您在工作时备份文件并将它们存储在安全代码库中。

Internet Explorer 提供有可用于查看 SharePoint 网页上使用的 CSS 类的工具；例如，IE 开发人员工具栏。

图 1. IE 开发人员工具栏

图 1 显示指向团队网站上使用的两个样式表 Wiki.css 和 Corev4.css 的链接。这两个 CSS 文件都位于文件系统上。

表 3 列出了 SharePoint 中常用的一些类。这些类提供了基选择器和默认行为。

表 3. SharePoint 中的常用 CSS 类

使用 Internet Explorer 开发人员工具栏研究这些类及其属性，如图 2 所示。

图 2. 使用 IE 开发人员工具栏发现 CSS 类

XSL 文件 (.xsl)

默认情况下，SharePoint 会安装 RSS 阅读器 Web 部件、摘要链接 Web 部件、TOC Web 部件和内容查询 Web 部件 (CQWP) 使用的一些 XSL 文件，这些 Web 部件全都要求将结果集的格式设置为可读 HTML。您可以在"样式"库中查找 XSL 样式表以及多个 XSL 模板，如图 3 所示。

图 3. XSL 样式表和模板

提示
有关如何自定义这些 XSL 文件的详细信息，请参阅为内容查询 Web 部件自定义 XSL。

SharePoint 中的 CSS Web 控件

Web 服务器控件负责管理和呈现 CSS 文件链接和样式表。默认情况下，Web 服务器控件位于 SharePoint 母版页中。若要查找母版页，请在"母版页和页面布局库"[###Master Page and Page Layout Gallery]中查找，或在 SharePoint Foundation 的母版页样式库中查找。库的相对路径为 /_catalogs/masterpage/Forms/AllItems.aspx。

查找母版页

若要查看 SharePoint 中的 CSS Web 服务器控件，必须获得网站上使用的母版页的副本。但若要下载网站的母版页的副本，您必须知道网站使用哪个母版页。

使用下列一项或多项操作确定网站使用哪个母版页：

• 在启用并激活了发布功能的 SharePoint Server 2010 网站上，通过"网站操作"、"网站"、"设置"来访问"网站母版页设置"页。然后，在"外观"部分下，单击"母版页"链接。

• 不使用菜单查找"网站母版页设置"页，而是将以下 URL 段追加到网站的服务器地址末尾：/_layouts/ChangeSiteMasterPage.aspx；例如，https://contoso.com/_ layouts/ChangeSiteMasterPage.aspx

• 在 SharePoint Foundation 网站上，可以使用 Windows PowerShell 确定网站使用哪个母版页，如图 4 所示。以下是一个示例脚本。

  $web = get-spweb("https://contoso.com");$web.masterurl
  

  提示
  有关详细信息，请参阅 Windows PowerShell 和 SharePoint。

图 4. SharePoint 团队网站上的 v4.master

表 4 列出了与 CSS 相关、并且可在 SharePoint Server 中使用的所有 Web 服务器控件。可以在 Microsoft.SharePoint.WebControls 命名空间中查找这些控件，该命名空间是 Microsoft.SharePoint.dll 程序集的一部分。

表 4. SharePoint 2010 中的 CSS Web 服务器控件

以下各节介绍表 4 中列出的每个控件，并总结每个控件的好处。

CSSLink

CSSLink Web 控件位于 SharePoint 母版页中，负责呈现 HTML <LINK> 元素。CSSLink 控件与 CSSRegistration 控件一起使用。如果网页上有 CSSRegistration 控件，则 CSSLink 控件注册并呈现注册控件进行的其他 CSS 文件引用。

CSSLink 控件具有以下成员：

• UIVersion（可选）— 允许网站所有者更改已升级或已迁移的 SharePoint 网站的外观。启用 SharePoint 用户界面或 Microsoft Office SharePoint Server (MOSS) 2007 用户界面中的网站预览。对于 SharePoint，将值设置为 4；对于 MOSS 2007 网站，将值设置为 3。

• Version（可选）— 替代 SPControl 类的控件版本。

• Alternate（可选）— 标记是核心 CSS（Core.css 或 Corev4.css）与其他 CSS 文件引用一起呈现，还是呈现备用 CSS。默认值为 False，它指定呈现核心 css（core.css 或 corev4.css）文件。

• DefaultUrl（可选）— 设置或获取用于 CSS 文件的默认 URL。

  下面的示例演示此控件可能如何呈现。

  <link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/Themable/search.css?rev=Uoc0fsLIo87aYwT%2FGX5UPw%3D%3D"/>
  <link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/Themable/wiki.css?rev=9pXM9jgtUVYAHk21JOAbIw%3D%3D"/>
  <link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/Themable/corev4.css?rev=iIikGkMuXBs8CWzKDAyjsQ%3D%3D"/>
  

CSSLink 控件将 ?rev= query 字符串参数添加到文件引用中，以控制浏览器缓存并强制浏览器捕捉文件的新副本。

CSSLink 控件还负责下一节中介绍的行为。

CSSRegistration

CSSRegistration Web 控件与 CSSLink 控件结合使用以注册 CSS 文件，以便这些文件可以呈现在网页上。通过相对或静态 URL 注册 CSS 文件。

CSSRegistration 控件具有以下成员：

• Name（必需）— 要注册的文件名。如果未提供名称，SharePoint 会引发图 5 中所示的错误。Name 属性的值应为文件名或 URL。如果使用文件名，则 CSS 文件必须存在于 LAYOUTS Style 文件夹中。

  下面的示例演示如何使用上面引用的并且已部署到 Styles 文件夹 (C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\{Locale-ID}\STYLES) 中的 custom.css 文件。

  <SharePoint:CssRegistration runat="server" Name="custom.css" />
  

  下面的示例演示 CSSLink 控件如何呈现 custom.css 注册。

  <link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/custom.css?rev=pFayZ3XaoWhaMymtxOLHNA%3D%3D"/>
  

  除了引用位于 LAYOUTS\{Locale ID}\Styles 目录中的文件外，还可以使用 URL 注册文件。通过使用标记在 Name 属性中指定单个 URL。一些已知 URL 标记为：~site、~sitecollection 和 ~language。将这些标记与表达式生成器（例如 SPUrl）结合使用。~language 标记映射到语言-区域性字符串，例如 en-us。

  添加类似于以下示例的条目…

  <SharePoint:CssRegistration Name="<%$ SPUrl:~sitecollection/Style Library/~language/Custom/2ndcustom.css %>" runat="server" />
  

  …会生成以下 HTML，如图 5 所示。

  <link rel="stylesheet" type="text/css" href="/Style%20Library/en-US/Custom/2ndcustom.css"/>
  

图 5. SharePoint 网页错误

• After（可选）— 指定要注册的 CSS 文件的呈现顺序。例如，如果要在 core4.css 之后呈现名为 custom.css 的自定义样式表，可使用以下代码配置注册控件。

  <SharePoint:CssRegistration Name="<%$ SPUrl:~sitecollection/Style Library/~language/Custom/2ndcustom.css %>" runat="server" After="core4.css" />
  

  这样做会强制 CSSLink Web 控件在 core4.css 文件链接之后呈现自定义文件。

  <link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/Themable/corev4.css?rev=iIikGkMuXBs8CWzKDAyjsQ%3D%3D"/>
  <link rel="stylesheet" type="text/css" href="/Style%20Library/en-US/Custom/2ndcustom.css"/>
  

  备注

  只能在 SharePoint Server 网站上使用表达式生成器 SPUrl；不能在 SharePoint Foundation 中使用它。

• EnableCSSTheming — 标记是否希望样式表可主题化，这意味着它们可作为自定义 SharePoint 主题的一部分应用。

  • 将 CSSRegistration 控件的 EnableCSSTheming 属性设置为 true。

  • 将主题化注释添加到 CSS 样式类中。若要查看一些示例，请查看与 SharePoint 一起安装的 Themable 目录 (C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\{Locale-ID}\STYLES\Themable)。

    下面的示例演示 Themable Corev4.css 中的 ms-toolbar CSS 类。如果应用主题，则每次使用 ms-toolbar 类时，主题都会将颜色 #0072BC 替换为主题本身中定义的 Hyperlink 主题颜色。

    .ms-toolbar{
    font-family:verdana;
    font-size:8pt;
    text-decoration:none;
    /* [ReplaceColor(themeColor:"Hyperlink")] */ color:#0072BC;
    }
    

• ConditionalExpression — 用于指定是否要对特定浏览器版本应用此样式表。例如，值 IE 9.0 指定为 Internet Explorer 版本 9.0 应用注册。CSSLink 控件检测该值。

主题

Theme Web 服务器控件向 SharePoint 网站应用主题。提供了多个可用于创建主题的工具；例如，Microsoft Connect 上的主题生成器。创建主题（.thmx 文件）后，将它上载到"主题"库中，该库位于"设置"页 (/_catalogs/theme/Forms/AllItems.aspx) 上。若要应用主题，请访问"网站主题"页 (/_layouts/themeweb.aspx)。

下面是一个示例。

<link rel="stylesheet" type="text/css" href="/_catalogs/theme/Themed/54E2D43/search-7E1AFF02.css?ctag=1"/>
<link rel="stylesheet" type="text/css" href="/_catalogs/theme/Themed/54E2D43/wiki-ECF524AA.css?ctag=1"/>
<link rel="stylesheet" type="text/css" href="/_catalogs/theme/Themed/54E2D43/corev4-8A0ABD2F.css?ctag=1"/>

应用主题时，SharePoint 会创建一个包括呈现主题所需的所有 CSS 和图像文件的新主题文件夹。该新主题文件夹不显示在"网站设置"或"查看所有内容"[###View All Content]中。通过使用 SharePoint Designer，可以查看主题文件，如图 6 所示。

图 6. SharePoint 主题

将自定义样式应用于 SharePoint 网站

在创建具有所需替代和样式的 CSS 文件后，就可以实现它了。

首先，若要将自定义样式表应用于 SharePoint 网站，应决定将文件放置在哪里以及如何应用它。可以将样式表部署到 SharePoint 文件系统中 — 例如，Layouts 目录 (C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS)，也可以将它保存在 SharePoint 网站上的样式库中。或者，可以将样式表托管在其他某个位置并在 SharePoint 中引用它 — 例如，在媒体 Web 服务器上。您可以看到可能存在多种变化。推荐的最佳实践是将文件存储在可管理其版本并且可轻松恢复它的位置。如果组织中禁止访问 SharePoint 服务器，或者您无权访问 Visual Studio 或任何自动化部署过程，则最好将 CSS 文件存储在"样式"库中。这样，它会更容易访问。可使用 SharePoint Designer 以及通过 Web 浏览器使用 SharePoint 资产选取器对"样式"库中的样式表进行版本控制和访问。

用于应用自定义样式表的选项

使用下列方法之一将自定义样式表应用于 SharePoint 网站。

备用 CSS URL

备用 CSS URL 是 SPWeb 和 PublishingWeb 类中的 Web 对象的属性。可以通过用户界面中的"网站母版页设置"页或使用 Windows PowerShell 设置此属性。子网站可以继承设置，并且样式可向下传播。若要使用此选项，请按照下列步骤操作：

1. 将自定义 CSS 文件上载到样式库中。

2. 若要应用样式表，请单击"网站操作">"网站设置"，然后在"外观"组下，单击"母版页"。

3. 在"备用 CSS URL"部分，选择"指定 CSS 文件"[###Specify a CSS file]单选按钮，单击"浏览"，然后找到自定义样式表。

4. 单击"确定"，然后再次单击"确定"以保存设置，如图 7 所示。

   图 7. 备用 CSS 设置

   

   备用 CSS URL 应用于首要网站集，并且它们要求激活发布功能，然后您才能在该网站上配置它们。您在下面创建的子网站也需要激活发布功能。备用 CSS URL 还可以作为网站定义的 onet.xml 文件中的项目元素的一部分提供。onet.xml 文件在安装 SharePoint 时安装，并且要求您有权访问服务器。

Windows PowerShell

若要从 SharePoint 服务器使用 Windows PowerShell 应用自定义样式表，请执行下列操作：

1. 单击"开始">"所有程序">"Microsoft SharePoint 2010 产品"。

2. 右键单击"SharePoint 2010 Management Shell"，然后选择"以管理员身份运行"。

3. 键入以下脚本将自定义 CSS 文件应用于 SharePoint 网站。

   $spweb = get-spweb("https://contoso.com");$spweb.alternatecssurl = "/Style Library/en-us/CustomFolder/custom.css";$spweb.update();
   

将自定义样式表应用于 SharePoint 时的注意事项

上一节讨论了帮助您为 SharePoint 网站打造品牌的多种方法。您还可以使用以下方法来应用自定义样式：

• 静态 HTML LINK 元素。例如，<link rel="stylesheet" type="text/css" href="/Style%20Library/en-US/Custom/2ndcustom.css"/>。一般不建议使用它，因为它是静态的，并且设计人员需要手动管理它。SharePoint 不以任何特殊方式处理静态 HTML LINK 元素。

• 母版页或页面布局上的嵌入式样式。

• CSS 标记和 JavaScript。可以使用内容编辑器 Web 部件将 CSS 标记和 JavaScript 插入到网页上。网页作者或设计人员可以使用内容编辑器 Web 部件在网页上添加 HTML 标记。例如，您可以添加旋转图像或设置日历上特定日期的格式。

  提示
  有关如何使用此 Web 部件的详细信息，请参阅使用内容编辑器 Web 部件。

• 需要代码隐藏的自定义 Web 服务器控件。最后，自定义控件使您能够更好地控制浏览器呈现的内容。

• 委托控件。SharePoint 使用多种委托控件在其网页中插入自定义客户端和服务器端代码。您可以编写自定义控件，将它部署到 SharePoint 服务器中，然后在其功能 elements.xml 文件中引用委托控件 ID。下面是母版页中的示例委托控件。

  <SharePoint:DelegateControl runat="server" ControlId="AdditionalPageHead" AllowMultipleControls="true"/>
  

部署注意事项

在部署品牌打造解决方案之前，请考虑以下事项：

• 样式表是全局品牌打造资源。CSS 文件通常由高级用户、图形艺术家、设计人员和网站所有者创作和管理。企业开发人员使用托管代码将其应用程序部署到 SharePoint 中。可考虑使用沙盒解决方案将样式表部署到 SharePoint 服务器中。

• 部署到 SharePoint 服务器文件系统需要管理员访问权限，并且可能需要自定义代码。此选项影响整个服务器和该服务器上托管的所有 Web 应用程序。任何 SharePoint 网站都可以使用部署到 Layouts 目录中的 CSS 文件。

• 如果部署到 SharePoint 网站的"样式"库中，应该知道它是该网站集的中心。您可以使用或引用其他网站集中的样式表，但这将不能满足让样式表位于"样式"库中的目的。这种情况下，应部署到 SharePoint 服务器文件系统中。

关于作者

Johnny Harbieh 是 Avtex Solutions LLC 的一名首席顾问，该公司是一家领先的 Microsoft 合作伙伴，主要使用基于 Microsoft 平台的技术来优化客户交流。作为一名经验丰富的信息工作者顾问，Johnny 主要关注 SharePoint 平台以及它为其客户带来的价值。他的工作包括战略简报、规划和体系结构以及开发、部署和支持基于 SharePoint 的解决方案。Johnny 取得了 .NET、SQL Server 以及门户和协作领域的多项认证，其中包括 SharePoint Foundation 和 Server 2010 的 MCTS 和 MCITP。可以通过 Johnny.Harbieh@live.com 或者通过 @jharbieh 在 Twitter 上与 Johnny 取得联系。Johnny 还开设有一个公共博客。

下面是来自 Wrox 的 Microsoft SharePoint 2010 文章的技术编辑：

• Matt Ranlett 是一名 SQL Server MVP，多年来他一直是亚特兰大 .NET 开发人员社区的固定成员。作为 Atlanta Dot Net Regular Guys 创始成员之一的 Matt 创立并领导多个地区的用户小组。Matt 工作之余的大部分时间都花在当地和国内社区活动（例如 SharePoint 1, 2, 3! 系列）上，并且组织过三届亚特兰大代码挑战营 (Code Camp)，以技术副总裁身份入主 INETA 董事会，并现身多个播客（如 .Net Rocks 和 ASP.NET 播客），最近他终于能够抽出时间与美丽的 Kim 女士喜结连理，Matt 帮助 Kim 饲养了三只怪物狗。Matt 目前是 Intellinet 的高级顾问，致力于帮助人们通过交付能够创建商业价值的创新型解决方案来取得成功。

• Jake Dan Attis。在谈到有关 SharePoint 开发的模式、惯例和调控时，不得不提 Jake Dan Attis。Dan 是从加拿大蒙古顿移居到美国亚特兰大的移民，他拥有应用数学学位，但却是一名不折不扣的绝杆 SharePoint 开发人员。您经常会发现 Dan 参加和组织亚特兰大地区的社区活动并发表演讲，其中包括代码挑战营、SharePoint Saturday 以及亚特兰大 SharePoint 用户小组。当他不在 Visual Studio 中工作时，Dan 很喜欢与他的女儿 Lily 在一起，观看曲棍球和足球比赛，并品尝啤酒的美味。

• Kevin Dostalek 拥有 15 年以上的 IT 行业从业经验和 10 年以上管理大型 IT 项目及 IT 人员的经验。他曾领导各种规模的公司开展过项目，并担任过各种角色，包括开发人员、架构师、业务分析师、技术负责人、开发经理、项目经理、程序经理和导师/指导者。除这些角色外，在 2005 年至 2008 年期间，Kevin 还以副总裁身份管理过一个中等规模 MS 金牌合作伙伴的解决方案交付部门，此后还担任过革新和教育部门的副总裁。2010 年年初，Kevin 成立了 Kick Studios 公司，提供 SharePoint 和社会计算专门领域的咨询、开发和培训服务。此后，他还以演讲者身份现身于全国各地的各种用户小组、峰会和大会类型的活动中。您可以在 Kevin 的博客上了解有关他的更多信息。

• Larry Riemann 拥有 17 年以上为世界上的一些大型公司构建和创建业务应用程序的经验。Larry 是一名独立顾问，拥有 Indigo Integrations，并且专门通过 SharePoint911 提供 SharePoint 咨询。他是一名作者，为刊物撰写文章，有时也在各种大会上发表演讲。最近几年，他的工作重点是 SharePoint，主要创建和扩展能够补充 SharePoint 之不足的功能。除了研究 SharePoint，Larry 还是一名颇有造诣的 .Net 架构师，在系统集成、企业体系结构和高可用性解决方案领域有丰富的经验。您可以在他的博客上与他联系。

• Sundararajan Narasiman 是位于印度金奈的 Cognizant Technology Solutions 的内容管理和门户小组的一名技术架构师，拥有 10 多年的行业从业经验。Sundararajan 主要从事 SharePoint 2010 Server 堆栈和主流 .NET 3.5 开发方面的体系结构和技术咨询工作。他热衷于编程工作，并且对极限编程 (Extreme Programming) 和 TDD 有着浓厚的兴趣。

其他资源

有关本文中提到的主题、概念和功能的详细信息，请参阅以下资源：

• SharePoint Designer（该链接可能指向英文页面）

• Internet Explorer 开发人员工具栏（该链接可能指向英文页面）

• 规划浏览器支持

• 使用 SharePoint 发布网站进行实际的品牌打造（该链接可能指向英文页面）

• W3C CSS 验证程序

• W3Schools CSS 教程（该链接可能指向英文页面）

• Microsoft 分配的区域设置 ID（该链接可能指向英文页面）

• Expression Builder 类（该链接可能指向英文页面）

• 通过 Windows PowerShell 管理 SharePoint

• 使用沙盒解决方案为 SharePoint 2010 网站部署品牌打造解决方案

• 为内容查询 Web 部件自定义 XSL

• 自定义内容查询 Web 部件的 RSS

• Windows PowerShell 和 SharePoint

• 委派控件

• 如何自定义样式

• CSSLink SharePoint Web 控件

• CSSRegistration SharePoint Web 控件

• Theme SharePoint Web 控件

• 备用 CSS Url 类

• 了解 Onet.xml

• Onet.xml 中的 Project 元素

• SharePoint Foundation 中级联样式表类的用法

• 使用内容编辑器 Web 部件

• 主题生成器（该链接可能指向英文页面）

• SharePoint 开发中心