path: root/files/pt-pt/web/css/como_começar/mídia/index.html

---
title: Média
slug: Web/CSS/Como_começar/Mídia
tags:
  - 'CSS:Como_começar'
translation_of: Web/Progressive_web_apps/Responsive/Media_types
---
<p>{{ PreviousNext("CSS:Como começar:Tabelas", "CSS:Como começar:JavaScript") }}</p>

<p>Muitas das páginas neste tutorial focalizaram nas propriedades e nos valores das CSS que você pode usar para especificar o modo de exibir o documento.</p>

<p>Esta página mostra novamente a proposta e a estrutura das folhas de estilo CSS.</p>

<h2 id="Informa.C3.A7.C3.A3o:_M.C3.ADdia" name="Informa.C3.A7.C3.A3o:_M.C3.ADdia">Informação: Média</h2>

<p>A proposta das CSS é especificar como os documentos são apresentados ao usuário. A apresentação pode tomar mais de uma forma.</p>

<p>Por exemplo, você provavelmente está lendo esta página em um dispositivo de exibição. Mas você pode também querer projetá-lo em uma tela para uma grande audiência, ou imprimi-la. Estas diferentes mídias podem ter diferentes características. CSS proporciona maneiras para apresenter um documento diferentemente em diferentes mídias.</p>

<p>Para especificar regras específicas para um tipo de mídia, use <code>@media</code> seguido do tipo de mídia e de chaves para incluir as regras</p>

<table style="background-color: #fffff4; border: 1px solid #3366bb; padding: 1em; width: 100%;">
 <caption>Exemplo</caption>
 <tbody>
  <tr>
   <td>Um documento em um site na web tem uma área de navegação para permitir ao usuário mover em torno do site.
    <p>Na linguagem de marcação, o elemento principal da área de navegação tem o id <code>nav-area</code>.</p>

    <p>Quando o documento é impresso a área de navegação não tem propósito, então a folha de estilo remove-a completamente:</p>

    <div style="width: 30em;">
    <pre class="eval">
@media print {
  #nav-area {display: none;}
  }
</pre>
    </div>
   </td>
  </tr>
 </tbody>
</table>

<p>Alguns tipos de mídia comuns são:</p>

<table style="margin-left: 2em;">
 <tbody>
  <tr>
   <td><code>screen</code></td>
   <td>Exposição na tela do computador</td>
  </tr>
  <tr>
   <td><code>print</code></td>
   <td>Mídias paginadas</td>
  </tr>
  <tr>
   <td style="padding-right: 1em;"><code>projection</code></td>
   <td>Exposição projetada</td>
  </tr>
  <tr>
   <td><code>all</code></td>
   <td>Todas as mídias (o padrão)</td>
  </tr>
 </tbody>
</table>

<table style="background-color: #f4f4f4; border: 1px solid #3366bb; padding: 1em; width: 100%;">
 <caption>Mais detalhes</caption>
 <tbody>
  <tr>
   <td>Existem outras maneiras para especificar o tipo de mídia com uma série de regras.
    <p>A linguagem de marcação do documento permite o tipo de mídia tornar-se específico quando a folha de estilo é ligada ao documento. Por exemplo, em HTML você pode opcionalmente especificar o tipo de mídia com o atributo <code>media</code> na tag <code>LINK</code>.</p>

    <p>Em CSS você pode usar <code>@import</code> no começo da folha de estilo para importar outras folhas de estilo de uma URL, opcionalmente especificando o tipo de mídia.</p>

    <p>Usando estas técnicas você pode separar regras de estilo para diferentes tipos de mídia em diferentes aquivos. Esta é algumas vezes uma maneira útil para estruturar sua folha de estilos.</p>

    <p>Para detalhes completos sobre tipos de mídia, veja <a class="external" href="http://www.w3.org/TR/CSS21/media.html">Media</a> em CSS Specification.</p>

    <p>Existem mais exemplos da propriedade <code>display</code> em uma página posterior neste tutorial: <a href="/pt/CSS/Como_começar/Dados_XML" title="pt/CSS/Como_começar/Dados_XML">Dados XML</a>.</p>
   </td>
  </tr>
 </tbody>
</table>

<h3 id="Imprimindo" name="Imprimindo">Impressão</h3>

<p>CSS possui suporte específico para impressão e para mídias paginadas em geral.</p>

<p>Uma regra <code>@page</code> pode configurar as margens da página. Para imprimir frente e verso, você pode especificar as margens separadamente para <code>@page:left</code> e <code>@page:right</code>.</p>

<p>Para mídias impressas, você normalmente usa unidades de comprimento apropriadas em polegadas (<code>in</code>) e pontos (<code>pt</code> = 1/72 polegadas), ou centímetros (<code>cm</code>) e milímetros (<code>mm</code>). É igualmente apropriado o uso de ems (<code>em</code>) para combinar tamanhos de fontes, e porcentagens (<code>%</code>).</p>

<p>Você pode controlar como o conteúdo do documento quebra através de limites de página, usando as propriedades <code>page-break-before</code>, <code>page-break-after</code> e <code>page-break-inside</code>.</p>

<table style="background-color: #fffff4; border: 1px solid #3366bb; padding: 1em; width: 100%;">
 <caption>Exemplos</caption>
 <tbody>
  <tr>
   <td>Esta regra configura as margens da página para uma polegada em todos os quatro lados:
    <div style="width: 30em;">
    <pre class="eval">
@page {margin: 1in;}
</pre>
    </div>

    <p>Esta regra assegura que todos os elementos <small>H1</small> comecem em uma nova página:</p>

    <div style="width: 30em;">
    <pre class="eval">
h1 {page-break-before: always;}
</pre>
    </div>
   </td>
  </tr>
 </tbody>
</table>

<table style="background-color: #f4f4f4; border: 1px solid #3366bb; padding: 1em; width: 100%;">
 <caption>Mais detalhes</caption>
 <tbody>
  <tr>
   <td>Para detalhes completos sobre o suporte das CSS para páginas de mídia, veja <a class="external" href="http://www.w3.org/TR/CSS21/page.html">Paged media</a> em CSS Specification.
    <p>Como outras características das CSS, imprimir depende do seu navegador e de suas configurações. Por exemplo, seu navegador Mozilla proporciona por padrão margens, cabeçalhos e rodapés quando é impresso. Quando outros usuários imprimem seu documento, você provavelmente não poderá predizer o navegador e as configurações que eles usarão, então você provavelmente não poderá controlar os resultados completamente.</p>
   </td>
  </tr>
 </tbody>
</table>

<h3 id="Interfaces_de_usu.C3.A1rio" name="Interfaces_de_usu.C3.A1rio">Interfaces do utilizador</h3>

<p>CSS tem algumas propriedades especiais para dispositivos que suportem a interface de usuário, como a tela do computador. Isto faz a aparência do documento mudar dinamicamente como o usuário trabalha com a interface.</p>

<p>Não existe um tipo de mídia especial para dispositivos com interfaces de usuários.</p>

<p>Existem cinco seletores especiais:</p>

<table style="margin-left: 2em;">
 <tbody>
  <tr>
   <td style="width: 10em;"><strong>Seletor</strong></td>
   <td><strong>Seleciona</strong></td>
  </tr>
  <tr>
   <td><code>E:hover</code></td>
   <td>Qualquer elemento E que tenha um ponteiro sobre ele</td>
  </tr>
  <tr>
   <td><code>E:focus</code></td>
   <td>Qualquer elemento E que tenha um foco no teclado</td>
  </tr>
  <tr>
   <td><code>E:active</code></td>
   <td>O elemento E que é envolvido na corrente ação do usuário</td>
  </tr>
  <tr>
   <td><code>E:link</code></td>
   <td>Qualquer elemento E que seja um hiperlink para uma URL que o usuário <em>não visitou</em> recentemente</td>
  </tr>
  <tr>
   <td><code>E:visited</code></td>
   <td>Qualquer elemento E que seja um hiperlink para uma URL que o usuário <em>visitou</em> recentemente</td>
  </tr>
 </tbody>
</table>

<p>A propriedade <code>cursor</code> especifica a forma do ponteiro: Algumas das formas comuns são como segue. Coloque seu mouse sobre os itens nesta lista para ver as formas comuns dos ponteiros no seu navegador:</p>

<table style="margin-left: 2em;">
 <tbody>
  <tr>
   <td style="width: 10em;"><strong>Seletor</strong></td>
   <td><strong>Seleciona</strong></td>
  </tr>
  <tr style="cursor: pointer;">
   <td><code>pointer</code></td>
   <td>Indica um link</td>
  </tr>
  <tr style="cursor: wait;">
   <td><code>wait</code></td>
   <td>Indica que o programa não pode aceitar a entrada</td>
  </tr>
  <tr style="cursor: progress;">
   <td><code>progress</code></td>
   <td>Indica que o programa está trabalhando, mas ainda pode aceitar a entrada</td>
  </tr>
  <tr style="cursor: default;">
   <td><code>default</code></td>
   <td>O padrão (usualmente uma flecha)</td>
  </tr>
 </tbody>
</table>

<p><br>
 Uma propriedade <code>outline</code> cria um contorno que é normalmente usado para indicar foco do teclado. Estes valores são similares aos da propriedade <code>border</code>, exceto que você não pode especificar lados individuais.</p>

<p>Algumas outras características das interfaces de usuário são implementadas usando atributos, de uma maneira normal. Por exemplo, um elemento que está desabilitado ou somente leitura tem o atributo <code>disabled</code> ou o atributo <code>readonly</code>. Seletores podem especificar estes atributos como qualquer outros atributos, usando colchetes: <code>{{ mediawiki.external('disabled') }}</code> ou <code>{{ mediawiki.external('readonly') }}</code>.</p>

<table style="background-color: #fffff4; border: 1px solid #3366bb; padding: 1em; width: 100%;">
 <caption>Exemplo</caption>
 <tbody>
  <tr>
   <td>Estas regras especificam estilos para um botão que muda dinamicamente como a interação do usuário com isso:
    <div style="width: 30em;">
    <pre>
.green-button {
  background-color:#cec;
  color:#black;
  border:2px outset #cec;
  }

.green-button[disabled] {
  background-color:#cdc;
  color:#777;
  }

.green-button:active {
  border-style: inset;
  }
</pre>
    </div>

    <p>Este wiki não suporta uma interface de usuário na página, então estes botões não são "clicáveis". Aqui estão algumas imagens estáticas para ilustrar a idéia:</p>

    <table style="background-color: #ffffff; border: 2px outset #3366bb; padding: 1em;">
     <tbody>
      <tr>
       <td>
        <table>
         <tbody>
          <tr>
           <td><span style="background-color: #ccddcc; border: 2px outset #cceecc; color: #777777; cursor: default; height: 2em; margin-right: 1em; padding: .5em 1em; width: 8em;">Clique Aqui</span></td>
           <td><span style="background-color: #cceecc; border: 2px outset #cceecc; cursor: move; height: 2em; margin-right: 1em; padding: .5em 1em; width: 8em;">Clique Aqui</span></td>
           <td><span style="background-color: #cceecc; border: 2px inset #cceecc; cursor: move; height: 2em; margin-right: 1em; padding: .5em 1em; width: 8em;">Clique Aqui</span></td>
          </tr>
          <tr style="line-height: 25%;">
           <td> </td>
          </tr>
          <tr style="font-style: italic;">
           <td>desativado</td>
           <td>normal</td>
           <td>ativo</td>
          </tr>
         </tbody>
        </table>
       </td>
      </tr>
     </tbody>
    </table>

    <p>Um botão plenamente funcional também tem um contorno escuro em toda a sua volta quando isto é o padrão, e um contorno pontilhado na face do botão quando ele é focado pelo teclado. Isto pode também ter um efeito quando o ponteiro está sobre ele.</p>
   </td>
  </tr>
 </tbody>
</table>

<table style="background-color: #f4f4f4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em; width: 100%;">
 <caption>Mais detalhes</caption>
 <tbody>
  <tr>
   <td>Para mais informações sobre interfaces de usuário em CSS, veja <a class="external" href="http://www.w3.org/TR/CSS21/ui.html">User interface</a> em CSS Specification.
    <p>Existe um exemplo da linguagem de marcação Mozilla para interfaces de usuário, XUL, na segunda parte deste tutorial.</p>
   </td>
  </tr>
 </tbody>
</table>

<h2 id="A.C3.A7.C3.A3o:_Imprimindo_um_documento" name="A.C3.A7.C3.A3o:_Imprimindo_um_documento">Ação: Imprimir um documento</h2>

<p>Crie um novo documento HTML, <code>doc4.html</code>. Copie e cole o conteúdo daqui, tendo certeza de ter rolado a tela para pegar tudo isto:</p>

<div style="width: 48em; height: 12em; overflow: auto;">
<pre>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"&gt;
&lt;HTML&gt;

&lt;HEAD&gt;
&lt;TITLE&gt;Impressão de amostra&lt;/TITLE&gt;
&lt;LINK rel="stylesheet" type="text/css" href="style4.css"&gt;&lt;/strong&gt;
&lt;/HEAD&gt;

&lt;BODY&gt;
&lt;H1&gt;Seção A&lt;/H1&gt;
&lt;P&gt;Esta é a primeira seção...&lt;/P&gt;

&lt;H1&gt;Seção B&lt;/H1&gt;
&lt;P&gt;Esta é a segunda seção...&lt;/P&gt;

&lt;DIV id="print-head"&gt;
Dirigir para mídias paginadas
&lt;/DIV&gt;

&lt;DIV id="print-foot"&gt;
Página:
&lt;/DIV&gt;

&lt;/BODY&gt;
&lt;/HTML&gt;
</pre>
</div>

<p>Crie uma nova folha de estilo, <code>style4.css</code>. Copie e cole o conteúdo daqui, tendo certeza de ter rolado a tela para pegar tudo isto:</p>

<div style="width: 48em; height: 12em; overflow: auto;">
<pre>/*** Impressão de amostra ***/

/* Padrão para a tela */
#print-head,
#print-foot {
  display: none;
  }

/* Somente impressão */
@media print {

h1 {
  page-break-before: always;
  padding-top: 2em;
  }

h1:first-child {
  page-break-before: avoid;
  counter-reset: page;
  }

#print-head {
  display: block;
  position: fixed;
  top: 0pt;
  left:0pt;
  right: 0pt;

  font-size: 200%;
  text-align: center;
  }

#print-foot {
  display: block;
  position: fixed;
  bottom: 0pt;
  right: 0pt;

  font-size: 200%;
  }

#print-foot:after {
  content: counter(page);
  counter-increment: page;
  }

} /* Fim de somente impressão */
</pre>
</div>

<p>Quando você exibe este documento em seu navegador, ele usa o estilo padrão do navegador.</p>

<p>Quando você imprime (ou prevê a impressão) do documento, a folha de estilo coloca cada seção em uma página separada, e adiciona um cabeçalho e um rodapé para cada página. Se o seu navegador suportar contadores, isto adiciona um número na página no seu rodapé.</p>

<table>
 <tbody>
  <tr>
   <td>
    <table style="border: 2px outset #3366bb; padding: 1em;">
     <tbody>
      <tr>
       <td>
        <table style="margin-right: 2em; width: 15em;">
         <tbody>
          <tr>
           <td>
            <div style="font-size: 150%; text-align: center; margin-bottom: .5em;">Cabeçalho</div>

            <div style="font-size: 150%; font-weight: bold;">Secção A</div>

            <div style="font-size: 75%;">Esta é a primeira secção...</div>

            <div style="font-size: 150%; text-align: right; margin-top: 12em;">Página: 1</div>
           </td>
          </tr>
         </tbody>
        </table>
       </td>
      </tr>
     </tbody>
    </table>
   </td>
   <td>
    <table style="border: 2px outset #3366bb; padding: 1em;">
     <tbody>
      <tr>
       <td>
        <table style="margin-right: 2em; width: 15em;">
         <tbody>
          <tr>
           <td>
            <div style="font-size: 150%; text-align: center; margin-bottom: .5em;">Cabeçalho</div>

            <div style="font-size: 150%; font-weight: bold;">Secção B</div>

            <div style="font-size: 75%;">Esta é a segunda secção...</div>

            <div style="font-size: 150%; text-align: right; margin-top: 12em;">Página: 2</div>
           </td>
          </tr>
         </tbody>
        </table>
       </td>
      </tr>
     </tbody>
    </table>
   </td>
  </tr>
 </tbody>
</table>

<table style="background-color: #fffff4; border: 1px solid #3366bb; padding: 1em; width: 100%;">
 <caption>Desafios</caption>
 <tbody>
  <tr>
   <td>Mova o estilo específico de impressão para um arquivo CSS separado.
    <p>Use as ligações nesta página para ler a CSS Specification. Ache detalhes de como importar o novo arquivo CSS específico para impressão em sua folha de estilo.</p>

    <p>Faça os cabeçalhos serem azuis quando o ponteiro do mouse estiver sobre eles.</p>
   </td>
  </tr>
 </tbody>
</table>

<h3 id="O_que_vem_depois.3F" name="O_que_vem_depois.3F">O que vem depois?</h3>

<p>Se teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de <a href="/Talk:pt/CSS/Como_come%C3%A7ar/M%C3%ADdia" title="Talk:pt/CSS/Como_começar/Mídia">Discussão</a>.</p>

<p>Até agora, todas as regras de estilo neste tutorial foram especificadas em arquivos. As regras e seus volumes são fixos. A próxima página descreve como você muda as regras dinamicamente usando uma linguagem de programação: <strong><a href="/pt/CSS/Como_come%C3%A7ar/JavaScript" title="pt/CSS/Como_começar/JavaScript">JavaScript</a></strong></p>

<p>{{ PreviousNext("CSS:Como começar:Tabelas", "CSS:Como começar:JavaScript") }}</p>