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>
  
The directives can be used in the main CSS file or in a separate style sheet for a given media type. There must be an include to the CSS file in the templates <head> section (the following is taken from the Joomla! Beez template):
+
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

Other languages:
Deutsch • ‎English • ‎Nederlands • ‎español • ‎français • ‎português • ‎português do Brasil • ‎български • ‎русский • ‎فارسی • ‎हिन्दी • ‎অসমীয়া • ‎বাংলা • ‎中文(台灣)‎

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" />