(Cascading Style Sheets) CSS era uma tecnologia recomendada pelo World Wide Web Consortium (W3C) em 1996. Uma maneira fácil de entender o propósito do CSS é vê-la como uma adição ao HTML que ajuda a simplificar e melhorar o design da página web. Na verdade, alguns efeitos CSS não são possíveis via HTML sozinho.
Outra vantagem do CSS é que ele permite que você especifique um estilo de uma vez, mas o navegador pode aplicar esse estilo muitas vezes em um documento. Por exemplo, se você quiser algumas das imagens exibidas no seu site para ter um corpo magro, azul em torno deles, você pode definir este quadro como um estilo em seu CSS. Então, em vez de ter que repetir uma definição HTML do corpo magro e azul - cada vez que você quiser que determinado frame - você pode simplesmente inserir o estilo CSS como um atributo para cada elemento gráfico que você deseja enquadrado.
Dito de outra forma, você pode usar CSS para definir regras gerais sobre a forma como os elementos em suas páginas da web se comportam e como eles olham - onde eles estão localizados, seu tamanho, sua opacidade, e assim por diante. Em seguida, você pode simplesmente se referir ao nome da regra sempre que quiser aplicá-la dentro de sua página HTML.
Aqui está uma regra CSS que define um par de qualidades que você decidir aplicar aos seus maiores títulos, H1:
Com essa regra CSS com efeito, qualquer código HTML que contém um elemento H1 é automaticamente processado em tipo de 16 pontos e de cor azul:
este título é azul e 16 pt.
regras CSS pode ser definida em um arquivo CSS separado ou incorporado dentro do arquivo HTML. Aqui é a regra CSS estilo do título incorporado dentro do cabeçalho de um arquivo HTML:
este título é azul e 16 pt.
Observe o elemento. Você pode definir seus estilos CSS dentro deste elemento. (Você também pode ter vários elementos em uma página, se desejar.)
8 Grandes Dicas e Truques CSS
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:
Imagine que este efeito se movendo, como se a sombra foram crescendo lentamente.
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.
Adicionar marcas de design personalizado para as suas listas a maneira CSS fácil.
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.
As partes de uma regra CSS
A figura a seguir mostra as partes de um CSS regra. Esta regra diz, "Display em vermelho o texto de qualquer ponto
no documento com um atributo nome da classe alerta."
Você pode fazer-se qualquer nome para o nome da classe (o escritor do código anterior escolheu alerta), Mas o nome na regra CSS deve corresponder ao nome usado mais tarde no atributo HTML.
As tabelas a seguir exibem propriedades CSS comuns e valores.
Unidades de medida| px | píxeis |
| em | H-largura |
| pt | ponto |
| dentro | polegadas |
| milímetros | milímetro |
| cm | centímetro |
| pc | picas |
| ex | x-height |
As propriedades da fonte| fonte |
| família de fontes |
| tamanho da fonte |
| estilo de fonte |
| variante da fonte |
| espessura da fonte |
As propriedades do texto| espaçamento de letras |
| word-spacing |
| altura da linha |
| vertical-align |
| text-align |
| text-decoration |
| text-indent |
| text-transform |
As propriedades da borda| border-top-color |
| border-right; cor |
| border-left; cor |
| border-bottom-color |
| border-top-style |
| border-right; estilo |
| border-left; estilo |
| border-bottom-style |
As propriedades de posicionamento| posição |
| topo |
| inferior |
| certo |
| exibição |
| Claro |
| z-index |
