在 SharePoint 中使用 CSS 标记代码片段

  • 项目

重要

此可扩展性选项仅适用于经典 SharePoint 体验。 不能将此选项用于 SharePoint Online 中的新式体验（如通信网站）。 我们不建议再使用经典体验或这些品牌技巧。

要设置代码段的样式，您可以用自定义 CSS 覆盖默认样式。 您可以用 CSS ID 和元素选择器覆盖应用于元素上的所有默认样式，或者您也可以使用 HTML 编辑器或 Internet Explorer 中类似于 F12 开发工具的工具来识别并覆盖特定的默认样式。

使用 CSS 设置代码片段的样式简介

转换一个 HTML 母版页或创建一个 HTML 页面布局之后，您可以预览位于设计管理器服务器端预览中的页面。 您可以从预览页面导航至代码段库，然后复制代码段至您的 HTML 文件。 代码段是 SharePoint 控件的 HTML 表示形式，例如顶端导航控件或搜索框。

在将代码段复制至您映射驱动器中的 HTML 文件并保存更改后，可以刷新 HTML 文件的服务器端预览，以查看控件的呈现方式。 代码段包含提供您所选择的 HTML 编辑器中设计时预览的标记，但您不能编辑这一标记，因为它是只读属性并且不影响控件在服务器上显示的方式。 相反，服务器端预览可使用实时数据显示高保真预览（如适用），例如，导航控件将使用数据源中的实时数据显示网站的当前导航架构（例如 SharePoint 针对托管导航的术语存储）。

注意

有关映射网络驱动器的详细信息，请参阅 如何：将网络驱动器映射到 SharePoint 母版页库。

默认情况下，代码片段继承 corev15.css 等 SharePoint 样式表的样式。 若要设置代码片段的样式，必须使用自定义 CSS 重写这些默认样式。 为此，可以执行以下操作：

  • 使用 CSS ID 和元素选择器完全重写应用到选定元素的默认样式。

  • 使用 Internet Explorer 中基于浏览器的工具（例如 F12 开发工具）检查设计管理器服务器端预览中的默认样式，然后确定要覆盖的特定样式。

  • 利用 HTML 编辑器的功能检查代码段只读属性预览中的默认样式，然后确定要覆盖的特定样式。

若要使用 Internet Explorer 中的开发工具确定默认样式，您应该使用设计管理器中的服务器端预览功能，查看您的 HTML 母版页或页面布局，按“F12”启动开发人员工具栏，选择“查找”菜单，然后选择“单击选择元素”。 这些步骤让您可以在单击页面上的元素后，准确观察通过添加 CSS 至自定义样式表（与您的 HTML 母版页或页面布局相关联）可以覆盖的样式。

默认 SharePoint 样式表包含许多样式，因此很难确定具体样式。 作为基于浏览器的工具的替代做法，更容易的做法是将代码片段从“代码段库”复制到 HTML 文件，再使用 HTML 编辑器确定样式，具体视 HTML 编辑器而定。 在“代码段库”中，依次选择“更新”和“复制到剪贴板”，代码片段包含相应代码片段的 HTML 预览。 将代码片段复制到 HTML 文件后，可以检查在代码片段中的只读预览模式下使用的样式。 这样一来，就缩小了要分析的默认样式范围，只需分析其中一部分样式。

根据代码段和自定义的范围，您可能想要使用 CSS ID 和元素选择器覆盖所有的默认样式，而不是选择特定的默认样式进行覆盖。 以下示例将为您演示如何使用此方法将自定义样式应用到顶部导航代码段中。

示例：设置顶部导航代码片段的样式

顶部导航代码片段是最常用的代码片段之一，因此也是最常标记的代码片段之一。 在 SharePoint 网站中，可以选择使用托管导航的选项，让术语库成为顶部导航代码片段的数据源。 这样一来，可以使用“网站设置”中的术语库管理工具，添加或删除导航术语，并管理顶部导航代码片段显示的导航分类。

在此示例中，网站使用托管导航，因此顶部导航控件从术语库拉取其条目。 将鼠标悬停在顶级导航术语（例如 “计算机”）上时，会出现一个级别的浮出控件。 本部分演示这些自定义样式如何替代默认 SharePoint 样式。

示例 1：HTML 模型文件中的导航 <div>

使用设计管理器前，可能会在设计母版页的 HTML 模型时，使用 HTML 和 CSS 设计可正常运行的顶部导航元素。 此 HTML 示例对顶部导航使用基本结构，即包含 ID 和类名的 <div> 元素、顶级导航项列表，以及适用于每个浮出控件子菜单的嵌套列表。


<div id="navigation" class="msax-Navigation">
   <ul>
      <li><a href="#">Cameras</a>
         <ul>
            <li><a href="#">Camcorders</a></li>
            <li><a href="#">Digital cameras</a></li>
            <li><a href="#">Disposable cameras</a></li>
            <li><a href="#">Film cameras</a></li>
         </ul>
      </li>
      <li><a href="#">Computers</a>
         <ul>
            <li><a href="#">Desktops</a></li>
            <li><a href="#">Laptops</a></li>
            <li><a href="#">Netbooks</a></li>
            <li><a href="#">Tablets</a></li>
         </ul>
      </li>
      <li><a href="#">Media</a>
         <ul>
            <li><a href="#">Movies</a></li>
            <li><a href="#">Music</a></li>
            <li><a href="#">TV shows </a></li>
            <li><a href="#">Video games </a></li>
         </ul>
      </li>
      <li></li>
   </ul>
</div>

示例 2：使用自定义 CSS 设置样式的导航 <div>

若要替代默认 SharePoint 样式，请在模型 HTML 文件中，在关闭 </head> 标记之前) 包含指向 CSS 文件(<link rel="stylesheet" type="text/css" href="URLtoYourCustomCSSFile"/>的标准链接。

在这些 HTML 和 CSS 示例中，请注意以下几点：

  • 导航条目使用 格式 .msax-Navigation ul li 设置样式，而不是直接将类应用于 <ul> 或 <li> 标记。

  • 样式使用 语法 .msax-Navigation ul li 而不是 .msax-Navigation ul>li ，因为代码片段标记可能包含所选元素之间的干预 <div> 标记。

  • HTML 模型包含空 <li></li> 元素作为顶级 <ul> 的最后一项。 这是因为，如果启用托管导航，SharePoint 会添加“编辑链接”命令作为顶级导航的最后一项，但最终的网站通常都不需要显示此选项。 CSS 示例使用 .msax-Navigation ul li:last-child 选择此项，并将显示值设置为 none。 HTML 文件中的空 <li></li> 元素是默认 “编辑链接” 条目的临时替代项。 如果网站使用托管导航且 CSS 使用任意 li:last-child 选择器，请注意最后的这个 <li> 元素。


.msax-Navigation {
margin: 10px 0px; top: 0px; position: relative;
z-index:200;
}
.msax-Navigation a {
margin: 0px; padding: 0px; border: 0px currentColor;
}
.msax-Navigation ul {
list-style: none; margin: 0px; padding: 0px; font-size: 16px; z-index:200;
}
.msax-Navigation ul li {
padding: 10px; display: inline-block; position: relative; z-index:200;
}
.msax-Navigation ul li:first-child {
margin: 0px;
}
.msax-Navigation ul li:last-child {
margin: 0px; padding: 0px; display: none;
}
.msax-Navigation ul li a.selected, .msax-Navigation ul li.selected {
background-color: rgb(58,60,62) !important;
color:rgb(255,255,255) !important;
}
.msax-Navigation ul li a {
width: 100%; color: rgb(58,60,62); font-size: 16px;
}
.msax-Navigation ul li:hover {
background-color: rgb(58,60,62);
color:rgb(255,255,255) !important;
}
.msax-Navigation ul li a:hover {
text-decoration: none;
color:rgb(255,255,255) !important;
}
.msax-Navigation li ul {
left: 0px; top: 35px; display: none; position: absolute; min-width: 100px; box-shadow: 5px 5px 10px 0px rgb(0,0,0); background-color: rgb(58,60,62);
}
.msax-Navigation li:hover ul {
display: block; z-index: 150;
}
.msax-Navigation li li {
margin: 0px; padding: 5px 10px 5px 0px; border-top-width: 0px; display: block; min-width: 100px;
}
.msax-Navigation li li:last-child {
margin: 0px; padding: 5px 10px 5px 0px; border-top-width: 0px; display: block; min-width: 100px;
}
.msax-Navigation li li a {
width: 100%; padding-left: 10px; display: block; color:rgb(255,255,255) !important;
}
.msax-Navigation li li:hover {
background-color: rgb(120, 120, 120);
}

示例 3：顶部导航代码片段的只读预览

在您的 HTML 模型应用了自定义样式后，您便拥有一个功能性顶部导航元素，请执行下列步骤：

  1. 映射一个网络驱动器。

  2. 上载您的设计文件。

  3. 将 HTML 文件转换为母版页。

  4. 预览并修正问题。

  5. 使用代码段库，将顶部导航代码段添加到 HTML 母版页。

在“代码段库”中配置顶部导航代码片段的属性时，请注意以下几点：

  • 在顶部的“重要信息”部分中，请勿对 CssClass 属性进行任何更改。

  • 请勿对AjaxDelta 标题下的属性做出任何改变，因为这些属性与 SharePoint 用来将 HTML 代码段转换为相应 ASP.NET 代码段的 MDS 属性相关联。 这一点适用于所有代码段，并不仅仅是针对顶部导航代码段。

  • 如果正打算重写默认 SharePoint 样式，在代码段库的“行为”部分，在“AspMenu”下（如果代码片段包含多个控件，如委托控件，则可能存在多个“行为”部分），将 ClientIDMode 设置为 Static。 如果保留“ClientIDMode”的默认设置“Inherit”，代码片段中应用的 CSS 类则会因页面上的代码片段排序而异。 有关 ClientIDMode 的详细信息，请参阅 Control.ClientIDMode 属性。

    例如，默认情况下，顶部导航控件使用默认 SharePoint ID 属性，例如 zz5_TopNavigationMenu 和 zz6_RootAspMenu。 通过将 ClientIDMode 更改为 Static，您可以使用这些默认 ID 作为您自己 CSS 的选择器，然后覆盖默认 SharePoint 样式。

  • 一些属性已配置为消除默认动态 CSS 和 JavaScript 行为，让顶部导航代码片段更易于标记。例如，默认情况下，UseSimpleRendering 设置为 True，MaximumDynamicDisplayLevels 设置为 0。 有关顶部导航代码段的特定属性的详细信息，请参阅 AspMenu 属性 和 菜单属性。

在“代码段库”中配置顶部导航代码片段后，依次选择“更新”和“复制到剪贴板”。 在 HTML 母版页中，删除包含模型控件的导航<div id="navigation" class="msax-Navigation">内容 (仅删除 div> 标记的内容<，而不<删除 div> 标记本身) ，然后将代码片段复制到导航 <div> 中。 如有必要，请重新定位导航 <div>，通常紧跟在<div id="s4-bodyContainer">标记的开头之后，但位于包含 PlaceHolderMain的 <div> 之前。

为了便于与上述导航 <div> 的 HTML 进行比较，下面的示例包含顶部导航代码片段的导航 <div> 部分。 请注意，这并不是整个代码片段。


<div id="zz7_TopNavigationMenu" class=" noindex ms-core-listMenu-horizontalBox">
     <ul id="zz9_RootAspMenu" class="root ms-core-listMenu-root static">
          <li class="static">
          <a accesskey="1" class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/cameras" tabindex="0">
          <span class="additional-background ms-navedit-flyoutArrow">
          <span class="menu-item-text">Cameras</span></span></a><ul class="static">
               <li class="static">
               <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/cameras/camcorders" tabindex="0">
               <span class="additional-background ms-navedit-flyoutArrow">
               <span class="menu-item-text">Camcorders</span></span></a></li>
               <li class="static">
               <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/cameras/digital-cameras" tabindex="0">
               <span class="additional-background ms-navedit-flyoutArrow">
               <span class="menu-item-text">Digital cameras</span></span></a></li>
               <li class="static">
               <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/cameras/disposable-cameras" tabindex="0">
               <span class="additional-background ms-navedit-flyoutArrow">
               <span class="menu-item-text">Disposable cameras</span></span></a></li>
               <li class="static">
               <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/cameras/film-cameras" tabindex="0">
               <span class="additional-background ms-navedit-flyoutArrow">
               <span class="menu-item-text">Film cameras</span></span></a></li>
          </ul>
          </li>
          <li class="static">
          <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/computers" tabindex="0">
          <span class="additional-background ms-navedit-flyoutArrow">
          <span class="menu-item-text">Computers</span></span></a><ul class="static">
               <li class="static">
               <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/computers/desktops" tabindex="0">
               <span class="additional-background ms-navedit-flyoutArrow">
               <span class="menu-item-text">Desktops</span></span></a></li>
               <li class="static">
               <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/computers/laptops" tabindex="0">
               <span class="additional-background ms-navedit-flyoutArrow">
               <span class="menu-item-text">Laptops</span></span></a></li>
               <li class="static">
               <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/computers/netbooks" tabindex="0">
               <span class="additional-background ms-navedit-flyoutArrow">
               <span class="menu-item-text">Netbooks</span></span></a></li>
               <li class="static">
               <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/computers/tablets" tabindex="0">
               <span class="additional-background ms-navedit-flyoutArrow">
               <span class="menu-item-text">Tablets</span></span></a></li>
          </ul>
          </li>
          <li class="static">
          <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/media" tabindex="0">
          <span class="additional-background ms-navedit-flyoutArrow">
          <span class="menu-item-text">Media</span></span></a><ul class="static">
               <li class="static">
               <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/media/movies" tabindex="0">
               <span class="additional-background ms-navedit-flyoutArrow">
               <span class="menu-item-text">Movies</span></span></a></li>
               <li class="static">
               <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/media/music" tabindex="0">
               <span class="additional-background ms-navedit-flyoutArrow">
               <span class="menu-item-text">Music</span></span></a></li>
               <li class="static">
               <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/media/tv-shows" tabindex="0">
               <span class="additional-background ms-navedit-flyoutArrow">
               <span class="menu-item-text">TV shows</span></span></a></li>
               <li class="static">
               <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/media/video-games" tabindex="0">
               <span class="additional-background ms-navedit-flyoutArrow">
               <span class="menu-item-text">Video games</span></span></a></li>
          </ul>
          </li>
          <li class="static ms-verticalAlignTop ms-listMenu-editLink ms-navedit-editArea">
          <span id="zz7_TopNavigationMenu_NavMenu_Edit" class="ms-navedit-editSpan">
          <a id="zz7_TopNavigationMenu_NavMenu_EditLinks" class="ms-navedit-editLinksText" href="#" onclick="g_QuickLaunchMenu = null; EnsureScriptParams('quicklaunch.js', 'QuickLaunchInitEditMode', 'zz7_TopNavigationMenu', 2, 0, 0, ''); cancelDefault(event); return false;">
          <span class="ms-displayInlineBlock">
          <span class="ms-navedit-editLinksIconWrapper ms-verticalAlignMiddle">
          <img class="ms-navedit-editLinksIcon" src="/_layouts/15/images/spcommon.png?rev=23" /></span><span class="ms-metadata ms-verticalAlignMiddle">Edit Links</span></span></a><span id="zz7_TopNavigationMenu_NavMenu_Loading" class="ms-navedit-menuLoading ms-hide"><a id="zz7_TopNavigationMenu_NavMenu_GearsLink" href="#" onclick="HideGears(); return false;" title="This animation indicates the operation is in progress. Click to remove this animated image."><img id="zz7_TopNavigationMenu_NavMenu_GearsImage" src="/_layouts/15/images/loadingcirclests16.gif?rev=23" /></a></span><div id="zz7_TopNavigationMenu_NavMenu_ErrorMsg" class="ms-navedit-errorMsg">
          </div>
          </span></li>
     </ul>
</div>

可能还需要重写特定样式，而不是只使用自定义样式。 例如，若要隐藏“编辑链接”节点，可以创建使用默认 ID zz7_TopNavigationMenu_NavMenu_Edit 的自定义样式，将显示设置设定为 none。

另请参阅