学习目标
完成本单元后，您将能够：
- 描述改变内置Visualforce组件样式的两种方法。
- 描述可以使用CSS样式表进行更改的Salesforce Classic和Lightning Experience样式之间的差异。
- 描述将Salesforce Lightning设计系统应用于Visualforce页面的两种方法。
了解重要的视觉设计注意事项
无论是在Salesforce Classic还是Lightning Experience中运行，Visualforce页面都是一样的，除非您重新修改它们以适应适当的用户界面上下文。显示用户界面元素的内置Visualforce组件不容易重新配置，以与Lightning Experience外观相匹配。
具体而言，当页面显示在Lightning Experience中时，由内置的Visualforce组件呈现的HTML不会更改，并且这些组件使用的Salesforce Classic样式表默认情况下由页面加载。其效果是，使用<apex：inputField>，<apex：outputField>，<apex：pageBlock>组件以及与Salesforce Classic可视化设计相匹配的其他粗糙和精细组件的页面仍然与该可视化设计相匹配。您在Lightning Experience中获得一小部分Salesforce Classic。
这是我们的一般建议，现在，对于现有的网页，你不要试图去适应闪电体验的视觉设计。闪电体验仍在不断发展，自己的造型搭配意味着你正在追逐一个移动的目标。这是工作。
不过，在某些情况下，您会希望某些页面与Lightning Experience的视觉效果更加匹配。对于新的页面，或者如果你愿意做一些工作，有一些很棒的工具可以用来创建完全符合Lightning Experience的页面。
影响标准件的样式
个别组件样式
生成HTML的Visualforce组件具有传递样式和styleClass属性。这些属性允许您使用自己的样式和样式类来控制生成的HTML的外观和风格。样式允许您直接在组件上设置样式，而styleClass则允许您为别处定义的样式附加类。例如，以下代码设置<apex：outputText>的类并应用样式。
<apex:page>
<style type="text/css">
.asideText { font-style: italic; }
</style>
<apex:outputText style="font-weight: bold;"
value="This text is styled directly."/>
<apex:outputText styleClass="asideText"
value="This text is styled via a stylesheet class."/>
</apex:page>添加一个自定义样式表
您可以使用静态资源和<apex：stylesheet>标记将自己的自定义样式表添加到任何Visualforce页面。例如，要添加一个样式表作为名为“AppStylesheet”的静态资源上传，请在页面中添加以下内容。
<apex:stylesheet value="{!$Resource.AppStylesheet}"/>闪电体验中的不同风格
仅当您的页面在Lightning Experience中运行时才加载自定义样式表，请使用以下标记。这与在经典和闪电体验之间共享Visualforce页面中的Visualforce标记示例类似。
<apex:page standardController="Account">
<!-- 基础样式 -->
<apex:stylesheet value="{!URLFOR($Resource.AppStyles, 'app-styles.css')}" />
<!-- 闪电桌面额外的样式 -->
<apex:variable var="uiTheme" value="lightningDesktop"
rendered="{!$User.UIThemeDisplayed == 'Theme4d'}">
<apex:stylesheet value="{!URLFOR($Resource.AppStyles, 'lightning-styling.css')}" />
</apex:variable>
<!-- 其余的页面 -->
</apex:page>样式的策略和建议
在详细讨论之前，我们先考虑一下更高的层次，并考虑将闪电体验风格应用于网页的不同策略。具体来说，我们来谈谈你现有的页面。
有两种方法可以影响现有页面的样式，使其看起来更像闪电体验。
- 更改标记以在页面中应用新的样式更改。
- 更改样式表中现有标记更改的样式规则。
这些都不是/或。您可以单独使用或组合使用它们。
正确使用Lightning Design System意味着使用Lightning Design System样式表和全新的标记来显示Visualforce页面。同样，这是匹配Lightning Experience可视化设计的唯一支持的方法。
要做到这一点，您可以从他们的网站下载Lightning Design System样式表，并像使用其他样式表一样使用它们，也可以将<apex：slds>组件添加到Visualforce页面的标记中。 <apex：slds>组件允许您引用Lightning Design System样式表，而无需将其上载为静态资源，从而简化了页面的语法并防止您达到250 MB的静态资源限制。
使用<apex：slds>带有自己的一套准则和注意事项。如果您想了解更多信息，请参阅Lightning Design System徽章或查看参考资料部分的Visualforce Developer Guide链接。
也可以添加Lightning Design System样式表，并修改您的页面以使用它们。这是多少工作取决于你想如何紧密匹配Lightning Experience以及代码中的特定标记和组件。虽然以这种方式取得体面的结果是可能的，但是，这不是我们推荐的方法。闪电设计系统被设计用于特定的标记，这根本不是Visualforce发出的。有一个“阻抗不匹配”，虽然不是致命的，但当你走这条路时，肯定是你的鞋子里的一块严重的石头。
最后，还有另外一种方法：为现有的（或新的）样式表添加新的规则和样式，使现有的标记看起来更像Lightning Experience。如果您的页面已经大部分使用自己的样式表，那么这种方法可能适合您。相反，如果您主要使用内置的Visualforce组件和Salesforce Classic样式，则需要覆盖Salesforce Classic样式表中的样式。
尽管这在技术上是可行的，但我们希望阻止您采取这种方法。它将依赖关系引入到您不想拥有的标记和样式中。这些依赖关系位于由内置的Visualforce组件呈现的HTML的结构，ID和类中。我们希望在这里真正清楚：由内置的Visualforce组件呈现的HTML是内部实现细节，如有更改，恕不另行通知。如果您在自己的样式表中有依赖关系，那么您的样式将最终中断。
Salesforce闪电设计系统
闪电设计系统是用于构建类似闪电体验的企业应用程序的设计框架。它包含一个复杂的CSS框架，一组图形资产和Salesforce Sans字体。您可以使用闪电设计系统构建看起来非常华丽的页面和应用程序，并与Lightning Experience用户界面完美匹配。
闪电设计系统旨在使客户和合作伙伴轻松匹配闪电体验的外观和感觉。它还包括可以自定义外观和风格以匹配自己品牌颜色等的工具，同时仍然与整体Lightning Experience设计保持一致。
闪电设计系统如此之大，如此令人兴奋……我们不打算详细介绍在这里使用闪电设计系统。因为我们已经写了一个关于使用它的整个模块，Lightning Design System。它解释了如何获得Lightning Design System，使用它来设计页面的基本概念，以及如何将这些概念应用于使用Visualforce构建Lightning Experience应用程序。
闪电设计系统是一个很大的模块，你必须努力获得这个徽章。虽然我们希望保存这个模块的细节，但是我们不想让你完全挂在这里。那么，让我们介绍一下如何在Visualforce中使用Lightning Design System。
首先要知道的是，闪电设计系统采用了新的标记结构和样式类。出于这个原因，最好使用新的页面和应用程序。它建立在现代浏览器功能的基础上，并利用最新的标记和样式最佳实践。尽管我们都喜欢它，Visualforce已经有一段时间了。在它生成的HTML和客户页面中的静态代码之间，大多数组织将发现将Lightning设计系统应用于现有页面具有挑战性。
闪电设计系统模块专注于创建新的页面和应用程序，并且对该徽章进行评分是了解它的最佳方式。完成该模块后，您将了解如何使用Lightning设计系统，以及如何计划周围的开发。