Entendendo CSS (folhas de estilo): Cascading Style Sheet – Parte 1
Para entender como uma folha de estilo em cascata (CSS ou Cascading Style Sheet) funciona, você deve estar em sintonia com a sua sintaxe. A sintaxe do CSS não é difícil de entender e aqui vou explicar o básico para você poder ler ou criar uma folha de estilos (CSS).
O Básico
Para definir uma regra CSS você deve colocar-lo de alguma forma no documento. Veremos três formas de colocar um estilo em um documento abaixo:
Colocando o atributo style na tag desejada
Esse método é o mais simples e serve se você vai fazer uma coisa simples, pois colocando desse jeito em algo grande e complexo, fica difícil de dar manutenção ao que for fazer. Um exemplo:
<div style="color: #aaaaaa; background-color: #0000ff;">exemplo de estilo com a atributo style</div>
Isso simplesmente diz que essa tag <div> vai ser exibida com a cor da fonte do texto que estiver dentro dela em cinza (#aaaaaa) e com a cor de fundo em azul (#0000ff).
Utilizando a TAG <style>
Diferente de usar um atributo, você pode usar a tag style e dentro dela definir vários estilos. Exemplo:
<style
Essa tag <style> normalmente é definida no cabeçalho do documento HTML (entre as tags <head> e </head>).
Esse estilo é definido igual ao do exemplo anterior, cor do texto em cinza e cor do fundo em azul, mas nesse caso, eu estou definindo para TODAS as tags <div>. Isso pode ser feito para qualquer tag do documento, definindo assim estilos para todas as tag daquele tipo naquele documento.
Esse modo é mais utilizado que o primeiro em sites grandes, para atualizar o site fica mais fácil, pois só preciso atualizar o CSS no início do arquivo. O problema se meu site tiver muito arquivos, preciso atualizar todos os arquivo, mas para evitar isso, temos a terceira opção para colocar CSS no seu site.
Utilizando CSS em um arquivo separado
Podemos também utilizar o CSS em um arquivo separado, normalmente com a extensão .css. Nesse arquivo não precisamos colocar nenhuma tag, é só começar a definir os estilos. Exemplo:
Arquivo estilo.css:
div {
color: #aaaaaa;
background-color: #0000ff;
}
A tag eu tenho que colocar é a <link>, para adicionar no meu documento o arquivo de estilos. Essa tag sempre deve ficar no cabeçalho do arquivo (entre as tags <head> e </head>).
Documento HTML:
<html> <head> <link rel="stylesheet" type="text/css" href="estilo.css"> </head> <body> <div>exemplo de estilo usando uma arquivo separado</div> </body> </html
A tag <link> serve praticamente para poder usar um arquivo de estilos separado, na teoria essa tag serve para outras coisas também, se você quiser saber mais sobre ela entre em: http://www.w3schools.com/TAGS/tag_link.asp. O atributo rel define a relação do arquivo chamado com o documento, no caso stylesheet, que é o nosso arquivo de folha de estilos. O atributo type indica o tipo MIME do arquivo. Se quiser saber o que é MIME acesse: http://pt.wikipedia.org/wiki/MIME. E por último e mais importante, o atributo href diz onde está o seu arquivo de estilo, isto é, a URL para o arquivo.
Esse método é muito bom, pois podemos chamar um único arquivo de folha de estilo por vários documentos, então dar manutenção fica muito fácil.
Agora que já sabemos como colocar CSS no nosso documento, podemos ver a segunda parte, que mostra como agrupar os estilos por classe e por identificador. Entre no link Entendendo CSS (folhas de estilo): Cascading Style Sheet – Parte 2.
[...] Entendendo CSS (folhas de estilo): Cascading Style Sheet – Parte 1 [...]
março 17th, 2009 at 14:37[...] Na primeira parte vimos como podemos colocar um estilo no nosso documento HTML. Nessa parte vamos ver um pouco de sintaxe do CSS e como utilizar. Para ver a primeira parte entre em: Entendendo CSS (folhas de estilo): Cascading Style Sheet – Parte 1. [...]
março 17th, 2009 at 14:40[...] Entendendo CSS (folhas de estilo): Cascading Style Sheet – Parte 1 [...]
março 17th, 2009 at 23:25[...] mais referências de folha de estilo (CSS) entre em Entendendo CSS (folhas de estilo): Cascading Style Sheet – Parte 1 e Entendendo CSS (folhas de estilo): Cascading Style Sheet – Parte 2. E para mais informações da [...]
março 21st, 2009 at 2:39[...] um bom entendimento de como utilizar CSS, acesse Entendendo CSS (folhas de estilo): Cascading Style Sheet – Parte 1 e Entendendo CSS (folhas de estilo): Cascading Style Sheet – Parte [...]
abril 18th, 2009 at 21:30