Visualforce Page CSS样式

Salesforce Page开发者文档：https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_styling_custom.htm

1.Visualforce Page CSS样式1(内部引用)

  (1)代码：

　　<apex:page sidebar="false">
　　　　<style type="text/css">
　　　　p {
　　　　　　font-weight:bold;
　　　　　　color:red;
　　　　　　}
　　　　</style>
　　　　<p>
　　　　　　This is some strong text!
　　　　</p>
</apex:page>

　(2)内部引用css样式，在style标签中写css样式

  2.Visualforce Page CSS样式2(外部引用)

　(1)代码　　　　

<apex:page showHeader="false" sidebar="false">
　　　　　　<apex:stylesheet value="{!$Resource.TestStyles}"/>
　　　　　　<h1>
　　　　　　　　Testing Custom StyleSheets
　　　　　　</h1>
　　　　　　<p>
　　　　　　　　This text could go on forever
　　　　　　</p>
　　　　　　<apex:outputLink value="https://www.salesforce.com/ap/?ir=1" styleClass="newLink">
　　　　　　　　Click here to switch to www.salesforce.com
　　　　　　</apex:outputLink>
　　　　</apex:page>

　(2)外部引用css样式

步骤：1、新建TestStyles.css

　　　2、在TestStyles.css中写css样式

　　　3、在salesforce中，在搜索框中输入static resource，点击new，Name：输入TestStyles， File:Choose File选中刚刚写好的TestStyles.css文件，点击保存

　　　4、运行

3.Visualforce Page CSS样式3(标签使用)

　(1)代码　

<apex:page sidebar="false">
　　　　　　　　<div style="font-weight:bold;">
　　　　　　　　　　This is div!
　　　　　　　　</div>
</apex:page>

4.Visualforce Page CSS样式4(在压缩包中存在)

　<apex:stylesheet value="{!URLFOR($Resource.css,'TestStyles.css')}"/>

解释：

假设你的名字为css的文件夹下有a.css,b.css，你想用css文件夹下的a.css，那么，第一步，先将css文件夹打包为css.zip的压缩包，然后在salesforce 中的static resource中点击new ，在file选择css.zip

在引用时，则应该为： <apex:stylesheet value="{!URLFOR($Resource.css,'a.css')}"/>