Entendendo CSS (folhas de estilo): Cascading Style Sheet – Parte 2
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.
Atribuindo Estilo a Todas as Tags de um Tipo
Para atribuir um estilo a todas as tags de um tipo, você deve utilizar a sintaxe padrão do CSS. Exemplo:
body {
background-color: #00ff00;
}
div {
font-family: tahoma, verdana, arial;
}
No exemplo acima eu estou dizendo que a tag <body> do documento vai ficar com o fundo de cor verde (#00ff00) e todas as tags <div> do documento vão ficar com a fonte tahoma, verdana ou arial.
Eu posso fazer isso para qualquer tipo de tag, mas isso me deixa pouca flexibilidade para certo casos, em que eu queira um <div> com outra fonte, ou outra tag com outra especificação do que foi passado no estilo para ela, para isso podemos definir classes de estilo para as tags.
Definindo classes de estilo (CSS) para tags
Para definir uma classe de estilo para uma tag, deve-se colocar o nome da tag, seguindo de um ponto (.) e seguindo do nome da classe. Esse nome da classe pode ser qualquer nome. Exemplo:
div.item {
background-color: #00ff00;
padding-top: 10px;
}
div.lateral {
background-color: #ff0000;
padding-left: 5px;
padding-right: 5px;
float: right;
}
Quando uma classe de estilo é definida para uma tag HTML, voce deve utilizar o atributo class da tag para dizer que aquela tag deve ser exibida com o estilo referente a aquela classe. Exemplo:
<div class="item">Meu fundo é verde</div> <div class="lateral">meu fundo é vermelho</div>
Cada uma das tags <div> acima terá um estilo diferente, segundo as classes especificadas mais acima.
Esse método é bom porque nós podemos saber em quais tags podem ficar os estilos definidos e esse método é muito usado quando se faz um código com o conceito tableless (sem tabelas), o que normalmente utiliza muito a tag <div>.
Generalizando as Classes de Estilo (CSS) para Qualquer tag
Mais uma característica do CSS é que eu posso definir uma classe para qualquer tag. Para isso nós colocamos somente o ponto seguido do nome da classe. Exemplo:
.menuItem {
width: 320px;
height: 240px;
}
.caixaEsquerda {
width: 100px;
float: left;
padding-top: 20px;
}
Isso faz com que qualquer elemento com o atributo class definido com o nome da classe acima (menuItem ou caixaEsquerda) ficará com o estilo que ele apresenta. Exemplo:
<table class="caixaEsquerda"> <tr> <td>Essa tabela vai ficar na esquerda, com largura 100 pixels e 20 pixels afastada do elemento acima dela</td> </tr> </table> <div class="menuItem">Esse div tem largura de 320 pixels e altura de 240 pixels</div>
Esse tipo de classe é boa para qualquer tipo de site, pois você define como vão ser as partes do seu site sem antes saber qual a tag que ficará com cada parte. Mas isso faz com que você não tenha muito controle ao o que se aplica onde, diferente do método acima deste.
Colocando Estilo via Identificador Único
Outra forma de colocar estilo é utilizando um identificador único para um único elemento. A sintaxe no CSS é colocar um jogo-da-velha (#) seguido pelo identificador único do elemento. Exemplo:
#miolo {
float: left;
width: 400px;
padding-left: 20px;
padding-top: 20px;
}
#topo {
width: 100%;
height: 80px;
background-image: url("img/bgimagemtopo.png");
}
Para fazer um elemento receber o estilo definido por um identificador único, devemos atribuir a esse elemento um atributo id. O identificador desse elemento deve ser único, não podendo se repetir em outro elemento. Exemplo:
<div id="topo">Esse é o topo do site, recebe o estilo de topo, com uma imagem de fundo</div> <div id="miolo">Esse é o miolo do site, recebe o estilo de miolo</div>
Isso faz com que o elemento receba o estilo definido pelo seu identificador. Esse método é útil quando quero definir padrões para sites, tipo o que é topo, laterais (esquerda e direita), menu (pode ser horizontal ou vertical) e rodapé. Pode ser usada em outras coisas também, nunca se limite.
Agora que você já sabe como colocar estilos de todas as formas no seu site, vou mostrar o que é uma pseudoclasse.
Pseudoclasses
Pseudoclasses são classes de estilo que definem certos aspectos de um elemento HTML. A pseudoclasse que eu vou mostrar é a da tag <a>, que faz um link de uma página para outra. Vou mostrar o código e depois explicar o funcionamento. Para ver outras pseudoclasses, entre em: http://www.w3schools.com/CSS/css_pseudo_classes.asp ou http://www.maujor.com/tutorial/pseetut.php.
a:link { text-decoration: none; color: 0000ff; font-weight: bold; }
a:visited { text-decoration: none; color: 00ffff; font-weight: bold; }
a:hover { text-decoration: underline; color: 00ff00; font-weight: bold; }
a:active { text-decoration: none; color: ff0000; font-weight: bold; }
As pseudosclasses da tag <a> são:
link:
- Estilo que define como o link vai ficar normalmente, quando não foi clicado e quando o mouse não está sobre ele, nesse caso, vai ficar sem sublinhado, com a cor azul e em negrito.
visited:
- Estilo que define como o link vai ficar quando ele já foi clicado ou visitado e quando o mouse não está sobre ele, nesse caso, vai ficar sem sublinhado, na cor azul claro e em negrito.
hover:
- Estilo que define como o link vai ficar quando o mouse estiver sobre ele, que nesse caso, vai ficar sublinhado, na cor verde e em negrito.
active:
- Estilo que define como o link vai ficar quando o link estiver aberto (ativo), nesse caso, vai ficar sem sublinhado, na cor vermelha e em negrito.
As pseudoclasses da tag <a> devem aparece na ordem mostrada no exemplo, se ficarem em outra ordem podem não funcionar. Um link no site sem estilo nenhuma aparece sublinhado, e o estilo text-decoration serve para dizer como deve aparecer esse sublinhado, no nosso caso está com o valor none, quer dizer que vai aparecer sem sublinhado, mas ele pode ser underline, overline, line-through ou blink.
Esses estilos definidos desse jeito afetarão todas as tags <a> do documento, então você pode definir classes e pseudoclasses assim:
a.item:link { text-decoration: none; color: 0000ff; font-weight: bold; }
a.item:visited { text-decoration: none; color: 00ffff; font-weight: bold; }
a.item:hover { text-decoration: underline; color: 00ff00; font-weight: bold; }
a.item:active { text-decoration: none; color: ff0000; font-weight: bold; }
Desse modo só vai afetar as tags <a> que tiverem o atributo class com o valor da classe de estilo, no caso do exemplo, o valor item.
Se gostou, achou algum erro ou tem alguma dúvida, comente.
[...] 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 http://www.comocriarsites.com/sem-categoria/entendendo-css-folhas-de-estilo-cascading-style-sheet-pa…. [...]
março 7th, 2009 at 3:19[...] Entendendo CSS (folhas de estilo): Cascading Style Sheet – Parte 2 [...]
março 18th, 2009 at 18:28[...] Se você quer saber como utilizar um pseudo elemento, é como utilizar uma pseudo classe, acesse Entendendo CSS (folhas de estilo): Cascading Style Sheet – Parte 2. [...]
março 30th, 2009 at 0:49[...] Para 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 2. [...]
setembro 15th, 2009 at 21:01[...] 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 propriedade de estilo display entre em Propriedade Display do [...]
setembro 15th, 2009 at 21:06[...] Para saber um pouco mais sobre folha de estilos (CSS) acesse: Entendendo CSS (folhas de estilo): Cascading Style Sheet – Parte 1 e Entendendo CSS (folhas de estilo): Cascading Style Sheet – Parte 2. [...]
setembro 15th, 2009 at 21:06muito bom o post, bem explicado
março 20th, 2011 at 23:16