Mesmo quando usando Cascading Style Sheets (CSS), a construção de um site funcional (mas ainda atraente) requer execução cuidadosa e planejamento. Aqui estão algumas dicas que irão tornar o seu site se destacar.

Permita que os usuários controlar o tamanho da fonte

Tente evitar especificando o corpo tamanho da fonte. Não faça isso, por exemplo:

body {font-size: 24px;}

As pessoas têm definir as opções do seu navegador para um tamanho de texto que é lido para eles. Você não sabe se eles têm um pixel de resolução de 1680x1050 ou 800x600 pixels. Faz diferença. O usuário deve ser o único a decidir o quão grande eles querem o seu texto, não você.

Certifique-se de suas fronteiras aparecer

Aqui está um comum de programação CSS cabeça-scratcher:

p {border: 12px;}

Apesar dessa regra que você escreveu, sem borda aparece em torno dos parágrafos. Você iria pensar logicamente isso especificando um tamanho de borda, você veria uma borda. Não tão. A menos que você também especificar uma fronteira estilo, você não obter uma borda. O estilo padrão é Nenhum, então alterá-lo para incluir um estilo:

p {border: 12px sólida;}

Atente para confronto cor

O que se você especificar uma cor de texto, mas não especificar uma cor de fundo? Sons inofensivo, mas pode ser um problema. Alguns usuários utilizam folhas de estilo pessoais, incluindo suas cores favoritas. O que acontece se um usuário especifica marrom para suas origens e branco para o seu texto? Diga que você especifique marrom para seu texto:

BODY {color: castanhos}

O usuário não verá o seu texto em tudo porque a sua cor de fundo e o seu primeiro plano (texto) de cor são idênticos. A solução? Sempre especificar um backgroundif você vai colorir o texto. Então você tem o controle sobre a aparência do texto neste contexto:

BODY {color: castanhos background-color: amarelo-}

Cronometrando borrar e outros efeitos

Combine temporizadores, scripts e filtros para criar lotes de efeitos visuais dinâmicos. Tente este efeito fresco no Internet Explorer:

 
Este é um efeito de borrão ao longo do tempo.

Tente variar a velocidade do filtro, ajustando o valor 130 nesta linha:

 TimerHandle = setInterval ( "SizeIt",130)

Encontre A List Apart

Uma fonte para idéias excelentes, amostras e artigos - apresentado por alguns dos web designers mais talentosos ao redor - é A List Apart, que tem uma fórum dedicado a CSS.

Usando suas próprias balas em listas

Com CSS, projetando balas personalizadas em um programa gráfico e, em seguida, atribuindo-lhes a lista de itens é fácil. O seguinte código produz o resultado mostrado na figura que se segue imediatamente.

 
primeiro
segundo
terceiro

Especificando locais gráficos

Se você armazenar um arquivo gráfico na mesma pasta que o arquivo .htm ou .html, o código HTML precisa de apenas o nome do arquivo gráfico, como este:

list-style-image: url ( "mybullet.jpg")

No entanto, se o arquivo estiver em outro local, você deve fornecer o caminho para esse local, e fazer alguma pontuar bizarro, bem como - a adição de um ///, por algum motivo. Este próximo exemplo encontra esse arquivo no diretório raiz da unidade C:

list-style-image: url ("File: /// C: mause.jpg")

Aqui está um arquivo localizado na fotos subdiretório do f: drive:

list-style-image: url ( "file: /// F: Fotos mause.jpg")

Aqui está a pontuação bizarra adicional (/// ) você deve adicionar um local de rede local:

list-style-image: url ( "file: /// Hp servr Fotografias mause.jpg")

Se você manter seus arquivos gráficos em um site de Internet, fornecer o endereço URL.

Por último, se o arquivo gráfico é armazenada no ônibus espacial, use esta pontuação:

"File: /// / ^^^ outerspace servr Fotografias mause.jpg"

A mesma pontuação e convenções são usados ​​ao especificar o src = atributo para carregar um gráfico para um HTML elemento.

Você não pode ver alguns dos seus gráficos quando você move suas páginas da web a partir do seu computador local para um servidor para publicá-las na Internet. Se isso acontecer, os caminhos de arquivo de verificação para garantir que os arquivos gráficos estão localizados onde o código diz que eles são. A tática mais simples é manter todos os arquivos de dependência (como arquivos gráficos) no mesmo diretório que o seu htm e arquivos .css. Dessa forma, você pode usar relativo caminhos, ou seja, você não especificar qualquer caminho em tudo no seu código, apenas o nome do arquivo. O navegador entende que deve olhar para os seus gráficos no mesmo caminho que encontrou o arquivo HTML.

combinando aulas

Você pode poupar algum tempo e problemas ao definir classes que são depois combinadas, como adjetivos combinar com substantivos. Diga que você quer alguns dos seus parágrafos moldado no verde, alguns em azul, e outros em cor de rosa. Você poderia criar uma classe separada para cada tipo de número, ou você poderia ser inteligente e criar uma classe geral estilo de borda, e três classes adicionais para a coloração. Veja como ele funciona. Primeiro, você cria quatro estilos, e então você combinar os nomes de classe nos elementos HTML quando você usa o class = atributo:

 
class = "enquadrado green"> Você pode poupar algum tempo e problemas ao definir classes que são depois combinadas, como adjetivos combinar com substantivos.
class = "enquadrado blue"> Você pode poupar algum tempo e problemas ao definir classes que são depois combinadas, como adjetivos combinar com substantivos.
class = "emoldurado pink"> Você pode poupar algum tempo e problemas ao definir classes que são depois combinadas, como adjetivos combinar com substantivos.