Tipos de meios do CSS

O tipo de dispositivo usado indicar um Web page tal como uma tela de computador é chamado Meio. Como projetar seu Web site se transforma mais do que apenas um jogo do browser, mas com dispositivos mais e mais non tradicionais tais como um handheld, um telefone da pilha ou mesmo seu relógio querendo alcançar a correia fotorreceptora.

Você quer seu Web page olhar através dos dispositivos múltiplos. O processo é nenhum onde tão daunting como aparece, com sustentação do nível 2 do CSS para tipos de meios ser entre as ferramentas simples você pode se usar ajudar fazer seu local vista-amigável através dos meios

3 maneiras de especificar tipos de meios do CSS

Há três maneiras unir um tipo de meios à folha do estilo, assim que nosso CSS é aplicado somente quando os meios de um detalhe (IE: handheld) é usado ver a página:

1) Folhas ligadas do estilo:

Código do CSS

Com a declaração acima, “print.css” será aplicado somente à página como imprimiu (ou visto na modalidade da inspecção prévia de cópia em seu browser). Você pode adicionar as folhas ligadas adicionais do estilo que alvejam outros tipos de meios também. Como uma nota lateral, para originais de XML, o equivalente do acima será:

O nome do estado é “a classe pseudo” que define como os elementos do HTML devem aparecer, dependendo no que do estado está. Abaixo está um exemplo de mudar “ligação”, “visitado o estado”, e do “pairo”. Anotar a ordem que é definido, porque é requisitar apropriado para fazer uma ligação funcionando do CSS.

Código do equivalente de XML

<?xml-stylesheet type="text/css" media="print" href="print.css" ?>

2) Folhas importadas do estilo:

Código do CSS

As folhas importadas do estilo usadas aqui têm a vantagem porque que downloaded condicional, significando a folha do estilo somente downloaded se os fósforos do legado que especificaram no atributo dos meios. Em dispositivos baixos da largura de faixa tais como handheld, todas as economias na largura de faixa desnecessária poderiam significativo. A desvantagem desta técnica no presente é a falta da técnica relative to 1 da sustentação do browser/dispositivo) acima.

3) Folhas Inline do estilo, com a régua do @media:

Código do CSS

Você pode ver, o que declarações que do CSS você deseja ser aplicado em caso da “projeção” deve ser envolvido ao redor no bloco do @media.

A régua do @media

Abaixo do exemplo da amostra da régua do @media

Código do CSS

<html>
<head>
<style>
@media screen
{
p.test {font-family:verdana,sans-serif; font-size:14px}
}

@media print
{
p.test {font-family:times,serif; font-size:10px}
}

@media screen,print
{
p.test {font-weight:bold}
}
</style>
</head>
<body>
....
</body>
</html>

Os seguintes 10 tipos de meios são suportados:

Pseudo-class	Purpose
all	Suitable/intended for all devises (default).
aural	Intended for speech synthesizers.
braille	Intended for braille tactile feedback devices.
embossed	Intended for paged braille printers.
handheld	Intended for handheld devices (typically small screen, monochrome, limited bandwidth).
print	Intended for printed documents (applies to docs viewed in print preview mode too).
projection	Intended for projected presentations (ie: projectors or print to transparencies).
screen	Intended for computer screens.
tty	Intended for media using a fixed-pitch character grid (ie: teletypes or terminals).
tv	Intended for television-type devices.