initial commit

1 files changed, 433 insertions, 0 deletions

diff --git a/files/pt-pt/web/css/como_começar/mídia/index.html b/files/pt-pt/web/css/como_começar/mídia/index.html
new file mode 100644
index 0000000000..0038962474
--- /dev/null
+++ b/files/pt-pt/web/css/como_começar/mídia/index.html
@@ -0,0 +1,433 @@
+---
+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>