diff options
Diffstat (limited to 'files/pt-pt/web/css/como_começar/mídia/index.html')
| -rw-r--r-- | files/pt-pt/web/css/como_começar/mídia/index.html | 433 |
1 files changed, 0 insertions, 433 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 deleted file mode 100644 index 0038962474..0000000000 --- a/files/pt-pt/web/css/como_começar/mídia/index.html +++ /dev/null @@ -1,433 +0,0 @@ ---- -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><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> -<HTML> - -<HEAD> -<TITLE>Impressão de amostra</TITLE> -<LINK rel="stylesheet" type="text/css" href="style4.css"></strong> -</HEAD> - -<BODY> -<H1>Seção A</H1> -<P>Esta é a primeira seção...</P> - -<H1>Seção B</H1> -<P>Esta é a segunda seção...</P> - -<DIV id="print-head"> -Dirigir para mídias paginadas -</DIV> - -<DIV id="print-foot"> -Página: -</DIV> - -</BODY> -</HTML> -</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> |