Difference between revisions of "Adding stylesheets for other output devices/pt-br"
From Joomla! Documentation
(Created page with "Para atribuir mais de uma declaração de estilo para mais de um tipo de mídia:") |
(Created page with "As diretivas podem estar no arquivo CSS principal ou em uma folha de estilos separada para cada um dos tipos de mídia. No cabeçalho <head> deve-se incluir a referência para...") |
||
Line 42: | Line 42: | ||
</source> | </source> | ||
− | + | As diretivas podem estar no arquivo CSS principal ou em uma folha de estilos separada para cada um dos tipos de mídia. No cabeçalho <head> deve-se incluir a referência para o arquivo CSS (a seguir temos um exemplo tirado do tema Joomla! Beez): | |
<source lang="html4strict"> | <source lang="html4strict"> |
Revision as of 17:05, 23 May 2015
Usando as folhas de estilo CSS é possível criar um grupo de diretivas (estilos) compatível com o aparelho usado para visualizar a página.
Tipo de Mídia
Os Tipos de Mídia reconhecidos são:
- all - Bom para qualquer aparelho.
- aural - Para sintetizadores de voz.
- braille - Para aparelhos com retorno tátil em Braille.
- embossed - Ideal para impressoras em Braille.
- handheld - Ideal para aparelhos de mão.
- print - Usado para formatar páginas para impressão.
- projection - Ideal para apresentações, seja um projetor ou impressão de transparências.
- screen - Ideal para telas de computadores.
- tty - Voltado para mídias que usam mídias com largura fixa controlada, como teletipos, terminais ou aparelhos portáteis com capacidades de exibição limitadas. Autores não devem usar pixels como unidade com esse tipo de mídia.
- tv - Votado para aparelhos tipo televisão (baixa resolução, a cores, tela de rolagem limitada com som disponível).
Exemplos
Pode-se atribuir um tipo de mídia a uma declaração CSS com a seguinte sintaxe
@media print {
body {
font-size: 12pt;
font-color: #000000;
}
}
Para atribuir mais de uma declaração de estilo para mais de um tipo de mídia:
@media print, handheld{
body {
font-size: 12pt;
font-color: #000000;
}
img {
max-width: 100%;
height: auto;
}
}
As diretivas podem estar no arquivo CSS principal ou em uma folha de estilos separada para cada um dos tipos de mídia. No cabeçalho <head> deve-se incluir a referência para o arquivo CSS (a seguir temos um exemplo tirado do tema Joomla! Beez):
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/beez/css/print.css" type="text/css" media="Print" />