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
| 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 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:
screen |
Exposição na tela do computador |
print |
Mídias paginadas |
projection |
Exposição projetada |
all |
Todas as mídias (o padrão) |
| 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 Em CSS você pode usar 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 |
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.
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;}
|
| 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:
| Seletor | Seleciona |
E:hover |
Qualquer elemento E que tenha um ponteiro sobre ele |
E:focus |
Qualquer elemento E que tenha um foco no teclado |
E:active |
O elemento E que é envolvido na corrente ação do usuário |
E:link |
Qualquer elemento E que seja um hiperlink para uma URL que o usuário não visitou recentemente |
E:visited |
Qualquer 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:
| Seletor | Seleciona |
pointer |
Indica um link |
wait |
Indica que o programa não pode aceitar a entrada |
progress |
Indica que o programa está trabalhando, mas ainda pode aceitar a entrada |
default |
O 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: [disabled] ou [readonly].
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:
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. |
| 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é.
|
|
| 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