files/pt-pt/web/css/folhas_de_estilo_alternativas/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

---
title: Folhas de estilo alternativas
slug: Web/CSS/Folhas_de_estilo_alternativas
translation_of: Web/CSS/Alternative_style_sheets
---
<p>O Firefox oferece suporte a folhas de estilo alternativa. AS páginas que disponibilizam folhas de estilo alternativas permitem que o usuário selecione o estilo que a página será mostrada usando o submenu Exibir&gt;Estilos da página. Fornecendo uma maneira de visualizar várias versões de uma mesma página, com base em suas necessidades e preferências.</p>
<p>Um site pode usar a tag link para adicionar as folhas de estilo alternativa.</p>
<p>Por exemplo:</p>
<pre class="eval">&lt;link href="padrao.css" rel="stylesheet" type="text/css" title="Estilo padrao"&gt;
&lt;link href="estilo1.css" rel="alternate stylesheet" type="text/css" title="Estilo 1"&gt;
&lt;link href="estilo2.css" rel="alternate stylesheet" type="text/css" title="Estilo 2"&gt;
</pre>
<p>Oferecendo essas três folhas de estilo, disponibilizaremos ao usuário as opções "Estilo Padrão", "Estilo 1" e "Estilo 2" no submenu. Quando o usuário selecionar um dos estilos, a página imediatamente será recarregada usando o estilo selecionado.</p>
<p>O valor do atributo title na tag link nomeia cada opção de estilo. Quando o valor deste atributo é repetido, entende-se como parte da mesma opção. Caso a tag link não possua o atributo title, a folha correspondente será sempre aplicada.</p>
<p>Use rel="stylesheet" para aplicar as folhas correspondente ao estilo padrão, e rel="alternate stylesheet" para aplicar as folhas correspondente aos estilos alternativos. Isso permite que o Firefox diferencie as folhas de estilo padrão das alternativas e permite que os navegadores que não suportam folhas de estilo alternativa apliquem somente as folhas do estilo padrão.</p>
<p> </p>
<h3 id="Exemplo" name="Exemplo">Exemplo</h3>
<p><a class="external" href="http://developer.mozilla.org/samples/cssref/altstyles/index.html">Clique aqui</a> para ver um exemplo.</p>
<p> </p>
<h3 id="Especifica.C3.A7.C3.A3o" name="Especifica.C3.A7.C3.A3o">Especificação</h3>
<ul>
 <li><a class="external" href="http://www.w3.org/TR/html401/present/styles.html#h-14.3">HTML 4.01: Folhas de Estilo Externa</a></li>
</ul>