使用 CSS 打造 SharePoint 页面品牌

  • 项目

级联样式表 (CSS) 在 SharePoint 品牌打造中起着非常重要的作用。 若要在 SharePoint 和 SharePoint Online 中成功自定义网站设计，需要熟悉 SharePoint 使用 CSS 的方式，这将非常有用。

重要

此可扩展性选项仅适用于经典 SharePoint 体验。 不能将此选项用于 SharePoint Online 中的新式体验（如通信网站）。 此外，还请注意，不应依赖 html 页面结构或现成的 CSS 样式名称，因为会在不通知的情况下对其进行调整。

CSS 品牌打造概述

您在创建 SharePoint 网站集时，SharePoint 将创建一个母版页样式库 (_catalogs/masterpage)，其中存储了大部分品牌资产，包括 .master, .css、图像、HTML 和 JavaScript 文件。

SharePoint 默认情况下对团队网站、发布网站和已启用发布的团队网站使用 seattle.master 页面。 它对 OneDrive for Business 使用 mysite15.master。 每个.master 文件都引用 corev15.css 文件，该文件是从 SharePoint 提供的各种现成 .css 文件构建的。

所有默认的母版页在处理样式时都使用 corev15.css，并依赖于 CSS 级联和 CSS 文件共享，以分析将哪些样式应用到页面区域中的特定控件和元素。 还会组合多个 CSS 文件以构建 oslo.css 文件，此文件与 oslo.master 母版页共同使用。

母版页中的 CSS

<SharePoint:CssRegistration> 内容占位符对应于服务器端对象模型中的 WebControls.CssRegistration 类，用于定义 CSS 文件。 类似母版页的引用，SharePoint 会在处理页面时替换母版页的令牌。 WebControls.CssLink 类将从母版页读取注册并在生成的结果 HTML 文件中插入 <link> 标记。

请考虑以下示例。

<SharePoint:CssRegistration name="<% $SPUrl:~SiteCollection/Style Library/~language/Core Styles/contoso.css%>" runat="server"/>

在运行时，按以下方式呈现此代码。

<link rel="stylesheet" type="text/css" href="/sites/nopub/Style%20Library/Core%20Styles/contoso.css">

CSSLink 类会在呈现页面时呈现所有样式表。 如果你在自定义 .css 文件中定义的样式同时也在 corev15.css 中进行了定义，则它们将被覆盖。

Corev15.css 文件

大部分 CSS 默认情况下会应用到 SharePoint。 corev15.css 文件是 SharePoint 的样式的主要源。 此文件存储在位于 \TEMPLATE\LAYOUTS\1033\STYLES\Themable\COREV15.CSS 的服务器上的 SharePoint 15 文件夹中，而不是存储在根网站的母版页样式库和主页中。

若要了解 SharePoint 如何使用现成的 CSS，请使用 Web 浏览器中的开发人员工具查看 corev15.css 文件。 在 Internet Explorer 中，使用 Internet Explorer 开发人员工具栏（按 F12 访问）并选择“CSS”选项卡查看 corev15.css。

corev15.css 中定义的样式使用 .ms- 和 .s4- 前缀，指示由 Microsoft. Corev15.css 创建的样式同样使用大量子级和后代选择器。

查看该文件时，你将注意到采用此格式的许多批注：/* [ReplaceFont ( themeFont:"body")] */。 SharePoint 会在应用组合外观时读取这些批注。 批注会告诉 SharePoint 更改将立即遵循批注的 CSS 的属性。 应用组合外观可能会更改许多已应用的默认颜色、字体和背景图片，随后会更新 corev15.css 中的设置。

注意

以这种方式选择 corev15.css 文件会加载呈现的 CSS，而不是保存的 CSS。 有时可能会发现两者之间的差异。 用户代理（如浏览器）也可以为了响应用户操作而更改呈现。

警告

请勿登录服务器，也不要编辑或自定义 SharePoint 根目录中的核心 SharePoint CSS 文件。 这样做会对支持和升级产生不利影响。 绝不直接编辑 corev15.css；应始终创建并重命名副本，再改为编辑新文件。 编辑 corev15.css 会将品牌打造应用到服务器上的所有 Web 应用程序。

创建 SharePoint 自定义样式表

  1. 创建 corev15.css 的一个副本，并将其命名为 contosov15.css。

  2. 打开相关母版页（在此示例中是 contoso.masterpage）并将 CssRegistration 行修改为从 corev15.css 指向 contosov15.css，如以下示例中所示。

<SharePoint:CssRegistration Name="Themable/contoso.css" runat="server" />
  1. 在 CssRegistration 行下面，添加以下内容。
<SharePoint:CssRegistration name="/_catalogs/masterpage/contoso/contoso.css" 
runat="server">

自定义品牌打造中的组合外观

从母版页调用 CSS 时，您可以使用自定义品牌打造中的组合外观。 CSS 文件存储在以下位置之一的 SharePoint 文件系统中：

  • 15\TEMPLATE\LAYOUTS\{LCID}\STYLES\Themable

  • /Style Library/Themable/

  • /Style Library/{culture}/Themable/

可以在 和 /Style Library/{culture}/Themable/中/Style Library/Themable/放置自定义品牌文件，但15\TEMPLATE\LAYOUTS\{LCID}\STYLES\Themable不可编辑，因此不能在该位置存储自定义文件。

注意

如果这些位置默认不存在，可以手动创建它们，SharePoint 会将它们识别为可主题化。

将自定义 CSS 应用到 SharePoint 页面

你可以将自定义 CSS 添加到格式文本字段和 Web 部件区域。 若要将 CSS 添加到格式文本字段，可以将页面置于编辑模式下，并从功能区中选择“插入”>“嵌入代码”。 对于 Web 部件区域，使用脚本编辑 Web 部件添加 HTML、脚本或内部样式表。 可以使用此方法隐藏默认 SharePoint UI 中的“快速启动”导航。 如果你使用的是 SharePoint Online 和 NoScript 功能，则 NoScript 将禁用脚本编辑器 Web 部件。

使用外部样式表并在 SharePoint 页面的 <head> 标记内部的 <link> 标记中加入对样式表的引用，将 CSS 应用到 SharePoint 网站。

以下代码示例演示了如何将自定义 CSS 上载到资源库、使用自定义操作将引用应用到 CSS URL，然后创建自定义操作以构建指向新 CSS 文件的链接。 此代码是 GitHub 上的 Branding.AlternateCSSAndSiteLogo 示例的一部分。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using System.IO;
using Microsoft.SharePoint.Client;
using Microsoft.SharePoint.Client.EventReceivers;

namespace AlternateCSSAppAutohostedWeb.Services
{
    public class AppEventReceiver : IRemoteEventService
    {
        public SPRemoteEventResult ProcessEvent(SPRemoteEventProperties properties)
        {
            SPRemoteEventResult result = new SPRemoteEventResult();

            try
            {
                using (ClientContext clientContext = TokenHelper.CreateAppEventClientContext(properties, false))
                {
                    if (clientContext != null)
                    {
                        Web hostWebObj = clientContext.Web;

                        List assetLibrary = hostWebObj.Lists.GetByTitle("Site Assets");
                        clientContext.Load(assetLibrary, l => l.RootFolder);

                        // First, upload the CSS files to the Asset library.
                        DirectoryInfo themeDir = new DirectoryInfo(System.Web.Hosting.HostingEnvironment.ApplicationPhysicalPath + "CSS");
                        foreach (var themeFile in themeDir.EnumerateFiles())
                        {
                            FileCreationInformation newFile = new FileCreationInformation();
                            newFile.Content = System.IO.File.ReadAllBytes(themeFile.FullName);
                            newFile.Url = themeFile.Name;
                            newFile.Overwrite = true;

                            Microsoft.SharePoint.Client.File uploadAsset = assetLibrary.RootFolder.Files.Add(newFile);
                            clientContext.Load(uploadAsset);
                            break;
                        }
                        
                        string actionName = "SampleCSSLink";

                        // Now, apply a reference to the CSS URL via a custom action.
                        
                        // Clean up existing actions that you might have deployed.
                        var existingActions = hostWebObj.UserCustomActions;
                        clientContext.Load(existingActions);

                        // Run uploads and initialize the existing Actions collection.
                        clientContext.ExecuteQuery();

                        // Clean up existing actions.
                        foreach (var existingAction in existingActions)
                        {
                            if(existingAction.Name.Equals(actionName, StringComparison.InvariantCultureIgnoreCase))
                                existingAction.DeleteObject();
                        }
                        clientContext.ExecuteQuery();

                        // Build a custom action to write a link to our new CSS file.
                        UserCustomAction cssAction = hostWebObj.UserCustomActions.Add();
                        cssAction.Location = "ScriptLink";
                        cssAction.Sequence = 100;
                        cssAction.ScriptBlock = @"document.write('<link rel=""stylesheet"" href=""" + assetLibrary.RootFolder.ServerRelativeUrl + @"/cs-style.css"" />');";
                        cssAction.Name = actionName;
                        
                        // Apply.
                        cssAction.Update();
                        clientContext.ExecuteQuery();
                    }
                    result.Status = SPRemoteEventServiceStatus.Continue;
                    return result;
                }
            }
            catch (Exception ex)
            {
                result.Status = SPRemoteEventServiceStatus.CancelWithError;
                result.ErrorMessage = ex.Message;
                return result;
            }
            
        }

        public void ProcessOneWayEvent(SPRemoteEventProperties properties)
        {
            // This method is not used by app events.
        }
    }
}

另请参阅