CSS (Cascading Style Sheets, folhas de estilo em cascata)
Marcação nas páginas
Estilos CSS podem ser aplicados de três maneiras diferentes, de acordo com a abrangência dentro do site:
1) As especificações de layout podem ser aplicadas a partir de arquivos anexados à página entre as marcações <head> </head> localizadas em arquivos.css anexos às páginas:
<link rel="stylesheet" type="text/css" href="arquivos/stylesheet.css" />
A atualização destes arquivos externos altera o layout de todas as páginas ao mesmo tempo. ► Exemplo de configurações
Os estilos podem ser divididos em vários arquivos externos, de diferentes abrangências, como por exemplo:
Um arquivo CSS com características do site todo e outro com características específicas de uma página, grupo de páginas ou partes de uma página .► Exemplo
Um arquivo CSS anexo e CSSs aplicados a apenas uma página na "cabeça" (<head>) da página. ► Exemplo
2) As marcações de CSS podem ser aplicados diretamente entre as marcações <head> </head>:
<style type="text/css">
<!--
body { background-image: url(../../../iconografia/fundod.gif);}
-->
</style>
3) Estilos CSS podem ser aplicados também dentro das marcações de HTML.
Exemplo:
<P style="color: blue; font-family: Helvetica, Arial, sans-serif">
Texto assinalado</P>
■ A ordem de precedência de configurações que atuam de maneira semelhante ou superposta é simples: a última marcação predomina. A ordem de precedência é a seguinte:
1) Estilo definido pelo browser (default).
2) Estilo CSS externo.
3) Estilo CSS interno de cada página.
4) Estilo aplicado nas marcações dos elementos HTML.
■ Os estilos CSS podem ser também a visualização dos sites em diferentes mídias, com as marcações:
all - aplicável a todas os dispositivos.
aural - para sintetizadores de voz.
braille - para dispositivos táteis baseados em braille.
embossed - para impressoras em braille.
handheld - para PDAs (tela pequena, monocromática, banda estreita) - é ignorado pelo iPhone e outros dispositivos sensíveis ao toque. Interfaces formatadas para estes dispositivos precisam ter a especificação da mídia e das suas medidas.
<link rel="stylesheet" href="iphone.css" type="text/css" media="only screen and (max-device-width: 480px)">
A marcação acima aponta para qualquer tela com resolução máxima de 480 px e a capacidade de ler estilos para tela.
print - para material paginado e documentos visíveis na tela através do preview de impressão (grandes áreas de cor e fundos de imagem ou coloridos devem ser evitados, para que o usuário gaste menos tinta; textos marcados em pixels, em vez de percentuais também podem ser adaptados para tamanhos ideais na impressão).
projection - para apresentações projetadas em tela.
screen - instrui o browser para mostrar uma página em computador.
tty - para mídias com uso de fontes de largura fixa, dispositivos com opacidade limitada.
tv - para dispositivos semelhantes a TV (baixa resolução, pouca capacidade de rolar a tela, som.
Estas marcações fazem parte dos padrões do CSS 2, mas sua adoção tem sido lenta. Os valores das configurações "screen" e "print" são amplamente compatíveis com a maioria dos browsers e dispositivos, mas as outras configurações não são muito precisas.
A configuração para a mídia "handheld" só é aceita por alguns dispositivos móveis e programas. A configuração "projection" é apenas aceita pelo browser Opera. E praticamente não existe suporte para "braille", "tv", "tty", "embossed" e "aural".
Para garantir resultados razoavelmente previsíveis, é necessário testar bastante cada configuração em diferentes situações de hardware e software. Ou adaptar as marcações a alguns dispositivos espeíficos.
-> Por exemplo, a marcação abaixo permite a aplicação para telas com, no mínimo 20ems.
@media handheld and (min-width:20em)
{ background-color: #ff0000;}
Pode ser usada também marcação que defina as laguras máximas e mínimas da tela:
@import url(/style.css) screen and (min-width:800px) and (max-width:1280px);
Assuntos relacionados
► XHTML - Separar forma e conteúdo
► Navegadores : A forma estruturada independente de plataforma deve permear o projeto
► Testes de compatibilidade
Referências sobre CSS
► In depth CSS part 4: New CSS3 styles, de Amber Weinberg (spyrestudio, acesso em 29.3.2010)
► The right frame of mind: Applying the lessons of CSS frameworks, de Alex Dawson (SitePoint, acesso em 19.3.2010)
► Media queries (SitePoint, acesso em 11.4.2009)
Mais informação sobre o assunto (links externos)
► iPhone development: 12 tips to get you started, de Stoyan Stefanov (SitePoint, acesso em 10.4.2009)
► HTML.net - tutoriais de HTML e CSS
► Tableless (http://www.tableless.com.br/) - site que tem como objetivo compartilhar informações, ideias e estudos relacionados aos Padrões web para desenvolvedores
► WebStandards (http://www.webstandards.org/)
► Tutoriais CSS, Tableless, web standards e acessibilidade - site desenvolvido por Maurício Samy Silva, com exemplos, modelos e artigos, inclusive com tradução das Técnicas CSS para acessibilidade a conteúdo web publicadas no site do W3C
► Writing semantic markup, de Joshua Porter e Richard MacManus (Digital Web, 5.9.2005)
Ferramentas de apoio
► Turbine (acesso em 5.8.2010)
► CSS Compressor (programa que comprime arquivos CSS para melhorar a performance e diminuir o tempo de carregação)
