如何：自定义样式

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

适用范围： SharePoint Server 2010

在很多情况下，设计者希望通过将某些自定义样式应用于页面内容来保留网页的外观和功能。如果这样做，就能通过更改样式表的定义来更改当前的页面外观和功能，而不会影响将来的页面内容。Microsoft SharePoint Server 2010 HTML 编辑器可让页面作者使用设计者提供的预定义样式列表，将自定义样式应用于内容。

默认情况下，HTML 编辑器显示默认的样式组，但页面布局设计者可以通过在页面布局中添加对样式表的引用来替换默认的样式组。如果 HTML 编辑器检测到其名称带有前缀 ms-rteCustom-XXXX 的新的级联样式表 (CSS) 类，其中 XXXX 是这些类的显示名称（对于页面作者是唯一的），则它会显示新的自定义样式组而不是默认的样式组。

HTML 编辑器检测特定于某些标记的类，并仅在选择了指定的内容时才将它们显示给用户。下拉菜单始终显示未为特定的标记定义的样式。例如，页面布局设计者可能想通过使用包含在页面布局中的 CSS 文件，让页面作者可以使用以下自定义样式。页面作者在编辑从布局中创建的页面时，可以使用 HTML 编辑器工具栏上的"选择"按钮，以突出显示页面上的列表，然后单击"样式"按钮，选择代码段中所示的列表样式，并将其应用于所选的列表。

Ol.ms-rteCustom-RomanNumberList {
    font-family:Times New Roman; font-size:10pt; color:#000000; 
    text-indent:0; text-align:left; list-  style-type:upper-roman; 
    margin-left:30; margin-right:10; padding-left:10px; margin-top:1; 
    text-transform:capitalize

可以为每个发布 HTML 字段控件指定唯一的 CSS 类名称前缀，以便可以为页面的不同部分显示不同的自定义样式。

在指定 RichHTMLField 控件的页面布局中，可以替代 PrefixStyleSheet 属性。例如，如果指定以下代码，HTML 编辑器将会在关联的 CSS 语法中查找带有 PageContentStyleCustom 前缀的 CSS 类：

<PublishingWebControls:RichHtmlField id="Content" FieldName="PublishingPageContent" runat="server" PrefixStyleSheet-"PageContentStyle"/>

如果 HTML 编辑器找到包含该前缀的自定义样式，它将按照当前的选择在"样式"下拉列表中显示这些样式。

自定义摘要链接 Web 部件、目录 Web 部件和内容查询 Web 部件的样式

"摘要链接"字段控件和内容查询 Web 部件 (CQWP) 在页面上显示创作的链接。可以使这些链接基于一组可供网站使用的样式。

目录 Web 部件和 CQWP 都可以显示由数据驱动的导航视图和网站内容的查询。也可以设置这两个 Web 部件中的项目和组标头的样式，使它们使用一组可用的样式进行显示。

SharePoint Server 2010 使用 XSL 样式表来显示这些 Web 部件。可以自定义和扩展样式以匹配您的网站的颜色和品牌。

表 1 显示 XSL 样式表文件和相应的 Web 部件的映射。

表 1. XSL 样式表文件和相应的 Web 部件的映射

过程

查找和修改摘要链接样式

1. 导航到网站的主页，然后单击"查看所有网站内容"。

2. 单击"样式库"。

3. 单击"XSL 样式表"，以显示样式库中可供所有三个 Web 部件类型使用的 XSL 文件列表。

4. 若要查看示例，请打开 ItemStyle.xsl 进行修改。ItemStyle.xsl 控制摘要链接 Web 部件项和 CQWP 项的显示。接着，考虑该文件的结构和内容：

   • XSL 模板只是带有几个变量（@ImageURL、@LinkURL、@Description 等）的 HTML。

   • 可以通过添加或移除这些变量来显示或隐藏摘要链接 Web 部件数据。

   • 也可以选择更改周围的 HTML 显示这些变量的方式。

   • 每个 XSL 模板映射到作者可以选择的一种样式。

   • 代码示例的第一部分包含 XSL 模板，SharePoint Server 2010 将调用这些模板，向其传递数据并从中获取数据的修改版本。

   • 此部分包含呈现的 HTML 与函数的结果：

   <xsl:template name="Default" match="*" mode="itemstyle">
   // This section includes a set of functions, or xsl templates, which SharePoint Server 2010 calls, passes data into, and gets modified versions of the data from.  The product does this primarily to improve security.
       <xsl:variable name="SafeLinkUrl">
           <xsl:call-template name="OuterTemplate.GetSafeLink">
               <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
           </xsl:call-template>
       </xsl:variable>
       <xsl:variable name="SafeImageUrl">
           <xsl:call-template name="OuterTemplate.GetSafeStaticUrl">
               <xsl:with-param name="UrlColumnName" select="'ImageUrl'"/>
           </xsl:call-template>
       </xsl:variable>
       <xsl:variable name="DisplayTitle">
           <xsl:call-template name="OuterTemplate.GetTitle">
               <xsl:with-param name="Title" select="@Title"/>
               <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
           </xsl:call-template>
       </xsl:variable>
       <xsl:variable name="LinkTarget">
           <xsl:if test="@OpenInNewWindow = 'True'" >_blank</xsl:if>
       </xsl:variable>
   // Includes the rendered HTML with the results of the functions.
       <div id="linkitem" class="item">
           <xsl:if test="string-length($SafeImageUrl) != 0">
               <div class="image-area-left"> 
                   <a href="{$SafeLinkUrl}" target="{$LinkTarget}">
                       <img class="image" src="{$SafeImageUrl}" alt="{@ImageUrlAltText}" />
                   </a>
               </div>
           </xsl:if>
           <div class="link-item">
               <xsl:call-template name="OuterTemplate.CallPresenceStatusIconTemplate"/>
               <a href="{$SafeLinkUrl}" target="{$LinkTarget}" title="{@LinkToolTip}">
                   <xsl:value-of select="$DisplayTitle"/>
               </a>
               <div class="description">
                   <xsl:value-of select="@Description" />
               </div>
           </div>
       </div>
   </xsl:template>
   

创建新样式

1. 重复前面过程中的步骤 1 到步骤 4，以导航到 ItemStyle.xsl 文件。

2. 打开 ItemStyle.xsl 文件并添加下面的代码。

   <xsl:template name="MyCustomStyle" match="Row[@Style='MyCustomStyle']" mode="itemstyle">
   </xsl:template>
   

3. 根据需要，在 ItemStyle.xsl 文件中的打开和关闭标记之间添加模板名称、变量、参数信息和其他详细信息。

4. 添加 HTML 和适当的 XSL 语句，以在 Web 部件中适当地显示变量。

请参阅

概念

如何：自定义 HTML 编辑器字段控件