Inserindo referências de CSS e JS de recursos estáticos em páginas Visualforce

É comum encontrarmos alguma solução na Web, que gostaríamos de utilizar em nossas páginas Visualforce. Muitas dessas soluções incluem arquivos Javascript e CSS. Para usufruir de soluções como essa (que possuem referências JS e CSS) em nosso projeto, dentro do Salesforce, é necessário primeiramente fazer o upload desses arquivos (JS e CSS) para os recursos estáticos do SFDC. Os recursos estáticos se encontram em Configurações | Criar | Desenvolver | Recursos estáticos. 

Ao acessar o caminho acima, você deve dar um nome para seu recurso que está inserindo no SFDC. Esse recurso pode pode ser um arquivo .css ou um arquivo .zip com vários outros arquivos css e js, por exemplo.

Após inserir esses recursos estáticos, já podemos fazer uso deles, em nossa página Visualforce. Basta colocar os seguintes comandos em sua página Visualforce:

Para JS:

 <apex:includeScript value="{!URLFOR($Resource.NomeDoRecursoEstatico, 'arquivo.js')}"/>  

Para CSS:

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

Caso queira colocar a tag Media na sua referência ao CSS, use:

 <apex:stylesheet value="{!URLFOR($Resource.NomeDoRecursoEstatico, 'arquivo.css')}" html-media="print" />    

Se seu JS se encontrar dentro de um recurso estático em formato .zip e possua diretórios dentro desse zip, use:

 <apex:includeScript value="{!URLFOR($Resource.NomeDoRecursoEstatico, 'diretorio1/diretorio2/arquivo.js')}"/>  

Caso o seu CSS esteja em um zip e possua diretórios:

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

Por hora, é apenas isso! :)