From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../como_come\303\247ar/m\303\255dia/index.html" | 433 +++++++++++++++++++++ 1 file changed, 433 insertions(+) create mode 100644 "files/pt-pt/web/css/como_come\303\247ar/m\303\255dia/index.html" (limited to 'files/pt-pt/web/css/como_começar/mídia/index.html') diff --git "a/files/pt-pt/web/css/como_come\303\247ar/m\303\255dia/index.html" "b/files/pt-pt/web/css/como_come\303\247ar/m\303\255dia/index.html" new file mode 100644 index 0000000000..0038962474 --- /dev/null +++ "b/files/pt-pt/web/css/como_come\303\247ar/m\303\255dia/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 +--- +

{{ PreviousNext("CSS:Como começar:Tabelas", "CSS:Como começar:JavaScript") }}

+ +

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.

+ +

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

+ +

Informação: Média

+ +

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

+ +

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.

+ +

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

+ + + + + + + + +
Exemplo
Um documento em um site na web tem uma área de navegação para permitir ao usuário mover em torno do site. +

Na linguagem de marcação, o elemento principal da área de navegação tem o id nav-area.

+ +

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

+ +
+ 
+@media print {
+  #nav-area {display: none;}
+  }
+
+
+
+ +

Alguns tipos de mídia comuns são:

+ + + + + + + + + + + + + + + + + + + + +
screenExposição na tela do computador
printMídias paginadas
projectionExposição projetada
allTodas as mídias (o padrão)
+ + + + + + + + +
Mais detalhes
Existem outras maneiras para especificar o tipo de mídia com uma série de regras. +

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 media na tag LINK.

+ +

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

+ +

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.

+ +

Para detalhes completos sobre tipos de mídia, veja Media em CSS Specification.

+ +

Existem mais exemplos da propriedade display em uma página posterior neste tutorial: Dados XML.

+
+ +

Impressão

+ +

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

+ +

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

+ +

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

+ +

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

+ + + + + + + + +
Exemplos
Esta regra configura as margens da página para uma polegada em todos os quatro lados: +
+ 
+@page {margin: 1in;}
+
+
+ +

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

+ +
+ 
+h1 {page-break-before: always;}
+
+
+
+ + + + + + + + +
Mais detalhes
Para detalhes completos sobre o suporte das CSS para páginas de mídia, veja Paged media em CSS Specification. +

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.

+
+ +

Interfaces do utilizador

+ +

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.

+ +

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

+ +

Existem cinco seletores especiais:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SeletorSeleciona
E:hoverQualquer elemento E que tenha um ponteiro sobre ele
E:focusQualquer elemento E que tenha um foco no teclado
E:activeO elemento E que é envolvido na corrente ação do usuário
E:linkQualquer elemento E que seja um hiperlink para uma URL que o usuário não visitou recentemente
E:visitedQualquer elemento E que seja um hiperlink para uma URL que o usuário visitou recentemente
+ +

A propriedade cursor 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:

+ + + + + + + + + + + + + + + + + + + + + + + + +
SeletorSeleciona
pointerIndica um link
waitIndica que o programa não pode aceitar a entrada
progressIndica que o programa está trabalhando, mas ainda pode aceitar a entrada
defaultO padrão (usualmente uma flecha)
+ +


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

+ +

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 disabled ou o atributo readonly. Seletores podem especificar estes atributos como qualquer outros atributos, usando colchetes: {{ mediawiki.external('disabled') }} ou {{ mediawiki.external('readonly') }}.

+ + + + + + + + +
Exemplo
Estas regras especificam estilos para um botão que muda dinamicamente como a interação do usuário com isso: +
+ 
+.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;
+  }
+
+
+ +

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:

+ + + + + + + +
+ + + + + + + + + + + + + + + + +
Clique AquiClique AquiClique Aqui
 
desativadonormalativo
+
+ +

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.

+
+ + + + + + + + +
Mais detalhes
Para mais informações sobre interfaces de usuário em CSS, veja User interface em CSS Specification. +

Existe um exemplo da linguagem de marcação Mozilla para interfaces de usuário, XUL, na segunda parte deste tutorial.

+
+ +

Ação: Imprimir um documento

+ +

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

+ +
+
<!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>
+
+
+ +

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

+ +
+
/*** 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 */
+
+
+ +

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

+ +

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é.

+ + + + + + + + +
+ + + + + + +
+ + + + + + +
+
Cabeçalho
+ +
Secção A
+ +
Esta é a primeira secção...
+ +
Página: 1
+
+
+ 		+ + + + + + +
+ + + + + + +
+
Cabeçalho
+ +
Secção B
+ +
Esta é a segunda secção...
+ +
Página: 2
+
+
+
+ + + + + + + + +
Desafios
Mova o estilo específico de impressão para um arquivo CSS separado. +

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.

+ +

Faça os cabeçalhos serem azuis quando o ponteiro do mouse estiver sobre eles.

+
+ +

O que vem depois?

+ +

Se teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de Discussão.

+ +

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: JavaScript

+ +

{{ PreviousNext("CSS:Como começar:Tabelas", "CSS:Como começar:JavaScript") }}

-- cgit v1.2.3-54-g00ecf