CSS Cookbook

Sumário

• Prólogo
• Prefácio
• Capítulo 1 ■ Utilização básica do HTML
  • 1.0 Introdução
  • 1.1 Escolha do editor de texto
  • 1.2 Codificação de uma página HTML básica
  • 1.3 Compreensão de DOCTYPEs e efeitos no layout do navegador
  • 1.4 Marcação de cabeçalhos
  • 1.5 Realização de citações adequadas
  • 1.6 Adição de uma imagem
  • 1.7 Adição de áudio com HTML5
  • 1.8 Embutir vídeo com HTML5
  • 1.9 Uso efetivo do strong e do em
  • 1.10 Criação de listas
  • 1.11 Criação de link para uma página web
  • 1.12 Codificação de tabelas
  • 1.13 Criação de um vCard HTML (hCard)
  • 1.14 Marcação de um evento (hCalendar)
  • 1.15 Validação do HTML
• Capítulo 2 ■ Noções básicas de CSS
  • 2.0 Introdução
  • 2.1 Aplicação de regras CSS a uma página web
  • 2.2 Uso de seletores básicos para aplicação de estilos
  • 2.3 Aplicação de seletores filhos
  • 2.4 Aplicação de seletores adjacentes
  • 2.5 Aplicação de seletores de atributos
  • 2.6 Uso de pseudoclasses
  • 2.7 Uso de pseudoelementos
  • 2.8 Determinação de quando seletores ID e de classe devem ser utilizados
  • 2.9 Compreensão das propriedades CSS
  • 2.10 Compreensão do box model (modelo caixa)
  • 2.11 Associação de estilos a uma página web
  • 2.12 Compreensão da origem
  • 2.13 Compreensão da ordem de seleção dentro das CSS
  • 2.14 Uso do !important para sobrepor (override) certas regras CSS
  • 2.15 Esclarecimento sobre a especificidade
  • 2.16 Configurando tipos diferentes de folhas de estilo
  • 2.17 Adição de comentários dentro das folhas de estilo
  • 2.18 Organização dos conteúdos de uma folha de estilos
  • 2.19 Trabalho com propriedades abreviadas
  • 2.20 Configurando uma folha de estilo alternativa
  • 2.21 Uso de floats
  • 2.22 Uso de elementos flutuados que se liberam automaticamente (self-clearing)
  • 2.23 Uso de posicionamento absoluto
  • 2.24 Uso do posicionamento relativo
  • 2.25 Uso de posicionamento acorrentado
  • 2.26 Empilhando elementos com z-index
  • 2.27 Validação de regras CSS
• Capítulo 3 ■ Tipografia web
  • 3.0 Introdução
  • 3.1 Especificação de fontes
  • 3.2 Uso de fontes seguras
  • 3.3 Definindo o floreio de um símbolo “&”
  • 3.4 Embutindo arquivos de fontes
  • 3.5 Quebra forçada em palavras muito grandes
  • 3.6 Especificação de medidas e tamanhos de fontes
  • 3.7 Obtenção de consistência maior para vários navegadores com o tamanho das fontes
  • 3.8 Definição de hífens, travessões e meias riscas
  • 3.9 Centralização do texto
  • 3.10 Definindo a justificação do texto
  • 3.11 Indicação de um excesso de texto com reticências
  • 3.12 Remoção do espaço entre cabeçalhos e parágrafos
  • 3.13 Definição de letra capitular
  • 3.14 Definição de uma capitular maior e centralizada
  • 3.15 Definição de uma capitular com decoração (imagens)
  • 3.16 Criação de um cabeçalho com texto estilizado
  • 3.17 Criação de um cabeçalho com texto e bordas estilizadas
  • 3.18 Estilização de um cabeçalho com texto e uma imagem
  • 3.19 Criação de uma citação destacada com texto HTML
  • 3.20 Posicionamento de uma citação destacada ao lado de uma coluna
  • 3.21 Criação de uma citação com bordas
  • 3.22 Criação de uma citação com imagens
  • 3.23 Definição do recuo da primeira linha de um parágrafo
  • 3.24 Definição do recuo de parágrafos inteiros
  • 3.25 Criação de um recuo invertido
  • 3.26 Estilização da primeira linha de um parágrafo
  • 3.27 Estilização da primeira linha de um parágrafo com uma imagem
  • 3.28 Criação de um efeito de texto destacado
  • 3.29 Alteração da cor da seleção de texto
  • 3.30 Alteração do espaçamento das linhas
  • 3.31 Adição de um tratamento gráfico ao texto HTML
  • 3.32 Posicionamento de sombra por trás do texto
  • 3.33 Ajuste do espaço entre letras e palavras
  • 3.34 Aplicação de ritmo à linha de base na tipografia web
  • 3.35 Estilização de sobrescrito e subscrito sem estragar a linha de base do texto
  • 3.36 Definição de várias colunas de texto
• Capítulo 4 ■ Imagens
  • 4.0 Introdução
  • 4.2 Definindo uma borda em torno de uma imagem
  • 4.3 Definição de bordas arredondadas em torno da imagem
  • 4.4 Remoção de bordas definidas por padrão em alguns navegadores
  • 4.5 Definição de uma imagem de fundo
  • 4.6 Criação de uma linha de imagens de fundo
  • 4.7 Posicionamento de uma imagem de fundo
  • 4.8 Uso de várias imagens de fundo em um elemento HTML
  • 4.9 Colocação de imagens em uma borda
  • 4.10 Criação de uma imagem de fundo estacionária
  • 4.11 Expansão das imagens conforme o navegador é redimensionado
  • 4.12 Expansão de uma imagem por toda a janela do navegador
  • 4.13 Escalonamento de imagens
  • 4.14 Definição do modo de renderização da imagem pelo navegador
  • 4.15 Rotação de imagens com CSS
  • 4.16 Definição de gradientes com CSS
  • 4.17 Criação de imagens PNG transparentes para o IE6 e para suas versões mais recentes
  • 4.18 Uso de imagens PNG transparentes com JavaScript
  • 4.19 Sobreposição de texto HTML a uma imagem
  • 4.20 Substituição de texto HTML por uma imagem
  • 4.21 Criação de uma apresentação de imagem panorâmica
  • 4.22 Combinação de formatos diferentes de imagens
  • 4.23 Arredondando os cantos em colunas de largura fixa
  • 4.24 Arredondamento de cantos (técnica Sliding Doors)
  • 4.25 Arredondamento de cantos (técnica Mountaintop)
  • 4.26 Arredondamento de cantos com JavaScript
  • 4.27 Colocação de uma sombra em um elemento com CSS
  • 4.28 Colocação de uma sombra projetada por trás de uma imagem
  • 4.29 Posicionamento de uma sombra projetada suave por trás de uma imagem
  • 4.30 Criação de balões de texto
  • 4.31 Como impedir que as pessoas roubem suas imagens
  • 4.32 Inserção automática de reflexos na imagem
  • 4.33 Uso de sprites de imagens
  • 4.34 Recortando (clipping) imagens de fundo
  • 4.35 Aplicação de máscaras a imagens e bordas
• Capítulo 5 ■ Elementos da página
  • 5.0 Introdução
  • 5.1 Eliminação de margens das páginas
  • 5.2 Redefinição (reset) dos padrões de estilo do navegador para os elementos
  • 5.3 Colorização da barra de rolagem no IE
  • 5.4 Técnicas para a centralização de elementos em uma página web
  • 5.5 Colocação de uma borda na página
  • 5.6 Posicionamento de borda ao redor da janela de visão do navegador
  • 5.7 Personalização de uma linha horizontal
  • 5.8 Adição de uma lightbox
  • 5.9 Alteração da opacidade dos elementos
  • 5.10 Ajuste da opacidade das cores de fundo
• Capítulo 6 ■ Listas
  • 6.0 Introdução
  • 6.1 Alteração do formato de uma lista
  • 6.2 Alteração da cor do bullet de uma lista
  • 6.3 Criação de endentação compatível com vários navegadores
  • 6.4 Posicionamento de divisores entre itens da lista
  • 6.5 Criação de marcadores de texto personalizados para listas
  • 6.6 Criação de marcadores de imagem personalizados para listas
  • 6.7 Inserção de marcadores com imagens personalizadas maiores para listas
  • 6.8 Criação de uma apresentação de lista rica em imagens
  • 6.9 Criação de listas inline
  • 6.10 Criação de recuos invertidos em uma lista
  • 6.11 Colocação do marcador dentro da lista
  • 6.12 Estilização de uma lista de definição
  • 6.13 Estilização de um roteiro com o elemento dialog do HTML5
  • 6.14 Transformação de uma lista em uma árvore de diretório
  • 6.15 Criação de um sistema de classificação por estrelas
• Capítulo 7 ■ Links e navegação
  • 7.0 Introdução
  • 7.1 Criação simples de menus e submenus com base em texto
  • 7.2 Remoção do sublinhado de seus links (e a adição de outros estilos)
  • 7.3 Alteração da cor dos links
  • 7.4 Remoção das linhas pontilhadas quando se clica em um link no IE
  • 7.5 Alteração das cores dos links em diferentes seções da página
  • 7.6 Posicionamento de ícones ao final de diferentes tipos de links
  • 7.7 Alteração do cursor
  • 7.8 Criação de rollovers sem JavaScript
  • 7.9 Animação de rollovers em links com transições CSS3
  • 7.10 Criação de menus de navegação de texto e rollovers
  • 7.11 Adição de submenus a menus verticais
  • 7.12 Construção de menus de navegação horizontal
  • 7.13 Criação de menus de navegação horizontal com menus suspensos
  • 7.14 Construção de um menu de navegação com teclas de acesso
  • 7.15 Criação de uma navegação com breadcrumbs
  • 7.16 Criação de rollovers com base em imagens
  • 7.17 Criação de menus colapsáveis
  • 7.18 Criação de menus contextuais
  • 7.19 Criação de tool tips com o atributo title
  • 7.20 Projeto de um menu com abas dinâmicas
  • 7.21 Alteração de estilos em links ancorados
• Capítulo 8 ■ Formulários
  • 8.0 Introdução
  • 8.1 Modificação do espaçamento em torno de um formulário
  • 8.2 Remoção do espaço em torno de um formulário
  • 8.3 Definição de estilos para elementos input
  • 8.4 Alteração do estilo de elementos do formulário quando um usuário clica sobre eles
  • 8.6 Definição de estilos para elementos textarea
  • 8.7 Definição de estilos para elementos select e option
  • 8.8 Criação de um campo de busca ao estilo Macintosh
  • 8.9 Estilização dos botões do formulário
  • 8.10 Criação de um botão Enviar com imagem
  • 8.11 Criação de um botão de Envio único
  • 8.12 Criação de um botão de envio que se parece com texto HTML
  • 8.13 Como fazer com que um link de texto HTML opere como um botão de envio
  • 8.14 Criação de um formulário web sem tabelas
  • 8.15 Criação de um formulário de duas colunas sem tabelas
  • 8.16 Integração de feedback ao formulário
  • 8.17 Estilização das teclas de acesso em formulários web
  • 8.18 Agrupamento de elementos comuns de formulários
  • 8.19 Inserção de dados em um formulário semelhante a uma planilha de dados
  • 8.20 Amostra de design: formulário de login
  • 8.21 Amostra de design: formulário de registro
• Capítulo 9 ■ Tabelas
  • 9.0 Introdução
  • 9.1 Definição de bordas e espaçamento das células nas tabelas
  • 9.2 Definição do espaçamento das células
  • 9.3 Definição do estilo para as legendas
  • 9.4 Definição de estilos dentro de células da tabela
  • 9.5 Definição dos estilos para elementos de cabeçalho da tabela
  • 9.6 Remoção de lacunas criadas por imagens posicionadas em células da tabela
  • 9.7 Eliminação de lacunas entre as células da tabela
  • 9.8 Criação de cores de fundo alternantes em linhas da tabela
  • 9.9 Adição de um efeito de destaque a uma linha da tabela
  • 9.10 Amostra de design: um calendário elegante
• Capítulo 10 ■ Projetando páginas web para impressão
  • 10.0 Introdução
  • 10.1 Aplicação de uma folha de estilos para impressão em uma página web
  • 10.2 Substituição de um logotipo colorido por um em preto e branco na impressão de páginas web
  • 10.3 Como tornar um formulário web pronto para impressão
  • 10.4 Exibição de URIs após os links
  • 10.5 Inserção de caracteres especiais antes de links
  • 10.6 Definição de quebras para as páginas de um documento impresso
  • 10.7 Amostra de design: uma página preparada para impressão com CSS
• Capítulo 11 ■ Layouts de páginas
  • 11.0 Introdução
  • 11.1 Construção de um layout com uma coluna
  • 11.2 Construção de um layout com duas colunas
  • 11.3 Construção de um layout de duas colunas com colunas de largura fixa
  • 11.4 Criação de um layout flexível de várias colunas com floats
  • 11.5 Criação de um layout de várias colunas com largura fixa com floats
  • 11.6 Criação de um layout flexível de várias colunas com posicionamento
  • 11.7 Criação de um layout de largura fixa com várias colunas utilizando posicionamento
  • 11.8 Uso de floats para exibir as colunas em qualquer ordem
  • 11.9 Projeto de um layout assimétrico
  • 11.10 Projeto de layouts independentes de resolução
• Capítulo 12 ■ Hacks, gambiarras e resolução de problemas
  • 12.0 Introdução
  • 12.1 Fazendo o override de estilos inline
  • 12.2 Diagnóstico de bugs CSS e problemas com navegadores
  • 12.3 Uso de bookmarklets para resolver problemas em CSS
  • 12.4 Uso das extensões dos navegadores para resolução de problemas em CSS
  • 12.5 Ajustes para o Internet Explorer 6
  • 12.6 Ajustes para o Internet Explorer 6 feitos com JavaScript
  • 12.7 Uso de comentários condicionais para oferecer estilos a diferentes versões do Internet Explorer
  • 12.8 Uso de filtros CSS para oferecer regras dirigidas praticamente a qualquer navegador
  • 12.9 Configuração de um sistema de entrega inteligente de CSS para navegadores modernos
  • 12.10 Testes de um design em mais de uma plataforma com apenas um computador
  • 12.11 Teste de um website com um navegador de texto
• Capítulo 13 ■ Criação de designs com CSS
  • 13.0 Introdução
  • 13.1 Aumento excessivo do tamanho do texto
  • 13.2 Criação de incongruências inesperadas
  • 13.3 Combinação de elementos diferentes para criação de contraste
  • 13.4 Conduzindo o olhar de seus visitantes com contraste
  • 13.5 Busca por contraste suficiente de cores
  • 13.6 Ênfase dada a uma citação com aspas inteligentes
  • 13.8 Adição de animação aos elementos em uma página
  • 13.10 Personalização da folha de estilo View Source para o Firefox
  • 13.11 Criação de designs com grids (CSS Frameworks)
  • 13.12 Amostra de design: Um design web coeso
  • 13.13 Amostra de design: a bandeira norte-americana
• Capítulo 14 ■ Interação com JavaScript
  • 14.0 Introdução
  • 14.1 Determinação da disponibilidade do JavaScript em um navegador
  • 14.2 Aplicação de uma folha de estilo diferente de acordo com a hora do dia
  • 14.3 Redirecionamento para um site móvel de acordo com a largura de tela do navegador
  • 14.4 Adição de um framework em JavaScript a uma página web
  • 14.5 Uso de seletores CSS3 no IE6 e IE7
  • 14.6 Listrando uma tabela HTML com JavaScript
  • 14.7 Destacamento de uma linha da tabela quando sobrevoada pelo mouse
  • 14.8 Adição de efeitos a rollovers simples de imagens
  • 14.9 Atribuição da mesma altura a uma fila de elementos de conteúdo em quantidade variável
  • 14.10 Configuração de um link para que abra uma nova janela
  • 14.11 Como tornar todo um elemento div clicável
  • 14.12 Suporte com JavaScript a PNGs transparentes no IE6
  • 14.13 Entrega de HTML5 e CSS3 a navegadores que os aceitem
• Apêndice A ■ Recursos
• Apêndice B ■ Propriedades e extensões proprietárias da especificação CSS 2.1
• Apêndice C ■ Seletores, pseudoclasses e pseudoelementos CSS 2.1
• Apêndice D ■ Seletores e pseudoclasses CSS 3
• Apêndice E ■ Estilização de elementos de formulário
• Índice remissivo