Desenvolvendo CSS na Web

Transcrição

1 I Desenvolvendo CSS na Web Do Iniciante ao Profissional Simon Collison Rio de Janeiro.2008

2

3 III Para mãe e pai. Perdão pela falta de argumentos...

4

5

6

7 VII Tome cuidado com as fontes...57 A exibição padrão do navegador...57 Adicionar estilo...58 Defina a folha de estilo...58 Declarações no body...58 Por favor, use line-height!...59 A definição de line-height com porcentagem...59 Outros valores para line-height...60 letter-spacing (kerning)...61 Outras propriedades de fonte importantes...62 Como combinar diversas propriedades de fonte...63 Mais abreviações de fonte...64 Fique esperto com o texto...64 Cite aí...64 Como adicionar recuo aos parágrafos...66 As antigas capitulares...66 Que a fonte esteja com você...68 CAPÍTULO 5 Cores, Fundos e Imagens...69 Uma breve história das cores...69 Web-safe em primeiro lugar?...70 Como especificar as cores...70 Como usar as 17 cores com nome...71 Precisamos ser web-safe?...72 Como selecionar uma paleta de cores para o seu design...73 Cores para texto...73 Cor de fundo...73 Como adicionar cor de fundo ao texto...74 Intervalo de texto para um controle mais específico...74 Como adicionar cor de fundo aos cabeçalhos...75 Fundos para outros elementos...76 Formatos de imagem para o fundo...78 GIF...79 JPEG...80 PNG...82 Imagem de fundo...82 Uso sensato...82 Prepare o modelo e a folha de estilo...83 Como especificar uma imagem de fundo...84 Repeat...85 Posição...86 Ligação...87 Abreviação do fundo...88 CAPÍTULO 6 Lista...91 Por que usar listas?...91 A lista desordenada...92 CSS básico de lista...92 list-style-type...92 Como usar imagens de fundo como marcadores...98

8

9 IX Fundamentos da criação de estilos para formulário Prepare um arquivo e uma folha de estilo O bloco de CSS para formulários está completo Três abordagens Sobre cada exemplo Formulários baseados em tabela Layout com parágrafos e quebras de linha Layout com lista de definição E qual é a melhor abordagem? PARTE 2 Layouts Lógicos CAPÍTULO 10 Fundamentos do Layout Floats e desobstrução A propriedade float Flutuar imagens Como desobstruir os floats Como desobstruir a imagem que flutua Posicionamento Propriedades e valores básicos de posicionamento Posicione na sua cabeça CAPÍTULO 11 Layouts Clássicos Tipos de layout Fixo Líquido Elástico Largura fixa variável Antes de criar Layout líquido de duas colunas com floats Topo e rodapé A barra lateral flutuante Float left, float right líquido Layout líquido de três colunas com floats Layout líquido de duas colunas posicionado Calamidade no rodapé Layout líquido de três colunas posicionado Layout de largura fixa O Box Model Layout fixo de três colunas com floats CAPÍTULO 12 Manipulação de Layouts Como trocar o layout através de seletores contextuais Preparação O body Faux Columns Prepare-se E quanto ao Box Model? Faux Columns Fluidas...248

10

11 XI Como estruturar o layout Funilaria Container Topo Colunas Rodapé Layout organizado Trabalho de fundo Fundo do topo Fundo da barra lateral Fundo da coluna principal Fundo do rodapé Fundo da página Trabalho de fundo concluído Tratamento do texto De volta ao body Cabeçalhos Texto da coluna Os toques finais Logotipo como link para a página inicial Navegação principal Como destacar a página atual Formulário de login Conteúdo do rodapé Logo à esquerda Pronto! É o fim do livro! APÊNDICE Referência...319

12 XII Desenvolvendo CSS na Web

13

14 XIV Desenvolvendo CSS na Web aonde queria ir e os resultados que queria obter, não sabia a melhor forma para atingi-los. Naquele tempo não havia um mapa bem definido para pessoas que, assim como eu, entendiam de design mas que precisavam de um livro que lhes mostrasse o melhor caminho entre os visuais de design e as páginas de Internet baseadas nos padrões Web para fornecer a seus clientes. Se você estiver iniciando uma jornada semelhante, está com sorte. Simon Collison escreveu um livro que funcionará como um mapa para ajudá-lo e explicar claramente como transformar os designs em realidade usando XHTML e CSS. O autor sabe o que é fazer design na parte mais desafiadora do webdesign. Ele volta-se aos padrões Web não pelo interesse acadêmico, mas pela real necessidade de trabalho. Há muito tempo admiro suas habilidades com design e sua excepcional capacidade de explicar temas complexos em linguagem simples. Sei que começar a trabalhar com padrões Web pode fazer com que você fique furioso e que isso, muitas vezes, pode parecer, de certa forma, inevitável. Então este livro ajudará você a se manter livre de ataques com botões de camisa saltando, rasgões em calças ou, até mesmo, arremessos de carros em possíveis acessos de fúria. Graças a Simon Collison o mundo é um lugar mais calmo para se viver. Andy Clarke Junho de 2006

15

16

17

18 XVIII Desenvolvendo CSS na Web

19

20 XX Desenvolvendo CSS na Web

21

22 XXII Desenvolvendo CSS na Web Em 2003, um homem muito legal de chapéu de lã escreveu um livro chamado Designing with Web Standards (New Riders). Esse homem é Jeffrey Zeldman ( e o seu livro revolucionou a forma com que muitos abordavam o webdesign. Composição chave mencionada por várias pessoas como o início de uma verdadeira revolução, o livro de Jeffrey fez com que muitos começassem a pensar duas vezes sobre o modo como vinham procedendo na criação de sites, além de fazer uma defesa firme para o uso do CSS, ao mesmo tempo em que aumentou a visibilidade da acessibilidade e da usabilidade destes elementos. Figura 1. O site do Web Standards Project (WaSP): Os benefícios Os padrões Web trazem muitos benefícios já que reduzem o tamanho das páginas, o que torna os downloads mais rápidos e, por sua vez, possibilita consumir muito menos banda. Eles também Aumentam a compatibilidade com agentes de usuário (navegadores, telefones celulares, PDSs, softwares de ajuda), tornando os sites mais acessíveis. E o mais importante, os sites criados com os padrões Web são à prova de futuro e estão prontos para qualquer rumo que a Internet tomar a seguir. Além disso, os padrões também são ótimos porque permitem a separação entre conteúdo e apresentação, além de fazer maravilhas para a acessibilidade do site. Vejamos o que esses termos querem dizer. Separação entre conteúdo e apresentação Talvez a regra mais fundamental dos padrões Web é que o conteúdo deve ser separado da apresentação pela aplicação de toda a riqueza decorativa através de uma folha de estilo externa, o conteúdo principal (o (X)HTML) permanece puro e concentrado. Com o material de apresentação separado por completo da marcação as mudanças de estilo no site podem ser feitas com pouca ou nenhuma interferência através da inclusão de um arquivo CSS como alternativa à necessidade de atualizar todas as páginas do site, o que facilita muito os redesigns. Igualmente importante é a facilidade com que os usuários assumem o controle do seu conteúdo através da aplicação de suas próprias folhas de estilo no site, quando torna-se necessário.

23 XXIII Acessibilidade A grande qualidade a respeito da criação com os padrões Web é que a acessibilidade vem como padrão. É claro que existem outros métodos e abordagens que podem melhorar a acessibilidade e fornecer mais benefícios para o usuário, mas mantendo a apresentação em separado do conteúdo e utilizando a marcação correta, você aumenta as chances de que qualquer visitante, independentemente de capacidade, possa acessar o conteúdo sem problemas. A regra de ouro da acessibilidade é simples. Qualquer pessoa, de qualquer lugar, desconsiderando plataforma, tecnologia, experiência ou capacidade, deve poder acessar o conteúdo principal. Ao incorporar os padrões Web com o seu conteúdo você está livre para aplicar uma apresentação ultrajante através do CSS, com a segurança de quem sabe que, por trás de tudo, o conteúdo não está comprometido, de forma que um portador de deficiências visuais utilizando um leitor de tela possa usar bem o seu site. É claro que a acessibilidade da Internet não diz respeito apenas a deficiências visuais existem também incapacidades cognitivas a se considerar e muitos outros tipos de deficiência. Para mais informações sobre a acessibilidade consulte o livro Web Accessibility: Web Standards and Regulatory Compliance (friends of ED, 2006) e dê uma olhada na grande quantidade de recursos disponíveis on-line, como, por exemplo, o e Esse livro trata do CSS para acessibilidade especificamente no capítulo 14. Um passo em direção aos padrões Então, acredito que agora você já consiga enxergar os argumentos que apontam para o webdesign baseado nos padrões Web... na verdade, talvez você já soubesse disso antes mesmo de pegar o livro! Mas por que nem todo mundo adotou o CSS para a criação de estilo e layout? Muitos argumentam que o CSS é difícil de implementar, que funciona somente em determinados navegadores, que a curva de aprendizado é íngreme demais. O grande problema é que uma boa quantidade de designers antigos demora em adotar os padrões. Muitos ainda ganham a vida criando sites pesados com marcação desatualizada, freqüentemente baseando-se em tabelas para o layout e poluindo o código com tags de fonte e outros métodos depreciados. Eles ainda podem ganhar dinheiro fazendo isso e, por isso, não conseguem enxergar necessidade para mudanças. São pessoas perigosas e é necessário manter distância delas. Ainda assim, a comunidade da Internet está repleta de pessoas boas e responsáveis e os benefícios dos padrões Web não passaram despercebidos. Desde que Zeldman escreveu aquele livro, milhares já adotaram o design baseado em CSS, e muitos poucos se atreveriam a voltar atrás. O mito de que um site acessível não tem atrativos já foi há tempos esquecido, e uns dos sites mais acessíveis e usáveis também trazem os designs mais atrativos e elegantes graças ao uso inteligente e experimental do CSS (ver exemplos na figura 2). Espero que depois de ler este livro você também possa produzir designs desafiadores, empolgantes e inspiradores. Está em suas mãos.

24 XXIV Desenvolvendo CSS na Web Figura 2. Sites impressionantes, 100% padrões Web. Do topo: Veerle s Blog ( BearSkin Rug ( And All That Malarkey Sobre este livro Este é o livro que eu precisava quando comecei a fazer experiências com CSS. Se naquela época eu tivesse conseguido um livro desse tipo, certamente isso teria me poupado uma quantidade incalculável de tempo. O livro pressupõe um conhecimento razoável de marcação (X)HTML, mas quase nada ou nada de CSS. Então, para esse último preferimos começar do zero. Alguns livros são tão facilmente acessíveis que sua leitura pode se assemelhar a sensação de conforto gerada ao vestir-se com uma gostosa roupa de algodão. Mas não é esse o caso aqui. Os primeiros três capítulos procuram explorar os conceitos principais do CSS fornecendo uma base firme para os capítulos seguintes. CSS é uma tecnologia simples, mas sua mágica origina-se das abordagens e quirks complexos no coração da especificação. Portanto, os três primeiros capítulos estabelecem a fundação para tudo o que vem a seguir. Não é essencial ler esses três, mas é importante se familiarizar com os seus assuntos para que você possa consultá-los quando uma técnica mencionada em capítulo posterior se torne um tanto complicada. Por exemplo, se eu mencionar a cascata no capítulo 14 e você não tiver certeza sobre o que isso quer dizer, é possível voltar para um capítulo anterior para descobrir. Após esse início profundo, de tirar o fôlego, cada capítulo sucessivo da Parte 1 tem enfoque na estilização de determinado grupo de marcação, como tabelas, links, listas ou texto, fornecendo uma referência estruturada de forma inteligente de abordagens comuns para a estilização de elementos.

25 XXV Na Parte 2 do livro o enfoque se volta para o layout e questões do mundo real. Aqui, você inicia pensando como um webdesigner profissional, buscando métodos para transformar tudo o que você aprendeu em modelos acessíveis, leves e elegantes. A Parte 2 também adiciona alguns extras à mistura, detalhando hacks úteis, filtros e técnicas de acessibilidade que proporcionam ainda mais poder. Finalmente, muitas das técnicas usadas no livro são usadas no estudo de caso Dead Goods, que detalha os prós e contras de estilizar um site vivo com CSS puro e simples. É uma revelação! Também forneci uma referência de sintaxe CSS na parte de trás do livro detalhando todas as propriedades e valores vistos, o que permite que você consulte as propriedades mais complicadas ou outras dificuldades de forma rápida e fácil. Você pode ler este livro de ponta a ponta se quiser, já que ele tem uma narrativa muito bem encadeada. De forma semelhante, o livro funciona como um guia de imersão para o designer astuto que simplesmente quer seguir adiante com o seu trabalho. Seja como for, acho que você vai gostar. Convenções usadas no livro Geralmente, qualquer referência estranha encontrada no livro encontra explicação nos capítulos anteriores. Dito isso, existem algumas convenções dignas de sua atenção antes de iniciarmos a leitura: (X)HTML refere-se às linguagens HTML e XHTML. A não ser que mencionado o contrário, todo o CSS está de acordo com a especificação CSS 2.1. Supõe-se que todos os exemplos de (X)HTML no livro sejam inseridos dentro do <body> de um documento válido ao passo que o CSS é colocado em uma folha de estilo externa, indicada no <head> do documento (X)HTML, a não ser que seja indicado de forma diferente. Na maioria dos casos, quando uma tag (X)HTML aparece seguida da palavra elemento no texto, ela se refere a todo o elemento. Por exemplo, elemento <strong> se refere a todo o elemento, de <strong> à </strong> e tudo o que estiver no meio. É recomendado chá e biscoitos sempre. Para esclarecer, o chá é o tradicional inglês, e os biscoitos são normalmente integrais de chocolate. Acho que é isso. Portanto coloque a água para ferver, chute para cima os chinelos e prepare-se para o aprendizado

26 XXVI Desenvolvendo CSS na Web