Começando com CSS – Parte 4

Postado por Abraão Levi Oliveira Figueredo em 18 de janeiro de 2010

css

Neste artigo vamos trabalhar com links, elemento “a” do HTML, e para isso entender o que é pseudo-classe e como usar.

Uma pseudo-classe permite estilizar levando em conta condições diferentes ou eventos ao definir uma propriedade de estilo para uma tag HTML.

Como você já sabe, links são marcados no HTML com tags <a>. Podemos então usar a como um seletor CSS:

a {
  color: blue;
}

Um link pode ter diferentes estados. Por exemplo, pode ter sido visitado ou não visitado. Você usará pseudo-classes para estilizar links visitados e não visitados.

a:link {
  color: blue;
}
 
a:visited {
  color: red;
}

Use as pseudo-classes a:link e a:visited para estilizar links não visitados e visitados respectivamente. Links ativos são estilizados com a pseudo-classe a:active e a:hover, esta última é a pseudo-classe para links com o ponteiro do mouse sobre ele.

Para os links existem quatro pseudo-classes.

Pseudo-classe: link

A pseudo-classe :link é usada para links não visitados.

a:link {
  color: green;
}

Pseudo-classe: visited

A pseudo-clases :visited é usada para links visitados.

a:visited {
  color: yellow;
}

Pseudo-classe: active

A pseudo-classe :active é usada para links ativos.

a:active {
  background-color: red;
}

Pseudo-classe: hover

A pseudo-classe :hover é usada para quando o ponteiro do mouse está sobre o link.

Isto pode ser usado para conseguir efeitos bem interessantes.

a:hover {
  color: orange;
  font-style: italic;
}

O vídeo a seguir Mostra um pouquinho do que é possível fazer com o que já aprendemos:

Como se pode observar no vídeo os seletores herda as propriedades as propriedades dos seus predecessores, como por exemplo:

*{
  text-decoration:none;
  color:#000;
}
 
ul li{display:inline;}
 
a{
  padding:10px;
  background:orange;
  font: bold 14px verdana;
}
 
/*
o seletor “a” se mantém com o color:#000
Definido so seletor “*”
*/
 
a:hover{
  background:#09f;
  color:#fff;
  text-decoration:overline;
}
 
/*
O pseudo-classe mantém as propiedades
“padding” e “font” do seletor “a”
*/

Agora vamos ver sobre ID e Class dos elementos e como estilizá-los no CSS, além de utilizarmos as propriedades “margin” e “padding”.

Primeiro vamos escrever o seguinte código HTML:

<html>
<head>
  <title>Exemplo – Falando TI</title>
</head>
 
<body>
  <div id="caixa1" class="box">
    <h1>Esta aqui é a Caixa de número 1</h1>
    <p>DIV  com o ID “caixa1” e com classe “box”</p>
  </div>
 
  <div id="caixa2" class="box">
    <h1>Eis aqui é a Caixa 2</h1>
    <p class="negrito">Este aqui é outra DIV com a mesma classe utilizada na outra DIV</p>
  </div>
</body>
</html>

Cada ID deve ser único, ou seja, não pode haver duas IDs iguais num mesmo documento.

Mas não tem problemas em usar a mesma classe em diversos elementos, sendo a classe é “reutilizável”.

Agora vamos aplicar CSS nesse código, mas antes vamos entender as propriedades “padding” e “margin”. O “padding” serve como um espaçamento interno entre os elementos e “margin” como um espaçamento externo entre os elementos.

*{
  padding:0;
  margin:0;
}  /*retiramos todos os espaços entre os elementos*/
 
h1, p {
  color:#fff;
  font-family:Verdana, Geneva, sans-serif;
}
 
#caixa1{background:red;}
 
#caixa2{background:blue;}
 
.box{
  height:250px; /*Altura */
  width:500px; /* Largura */
}
 
.negrito{ font-weight:bold;}

Para podermos referenciar um DIV usamos o “#” (chame de joguinho da velha, tralha ou como preferir) seguido do nome do ID, como podemos observar acima e o “.” (ponto) para referenciar a classe.

E assim finalizamos o basicão para comessar a aprender CSS, tem muito mais coisa para aprender, como bordas, z-index, position, float, top, left e afins.

Uma ótima maneira para aprender isso é testando e fazendo na prática. Para isso visite o Guia de Referencia W3C.

Então é isso! Até a Próxima!

Artigo postado em: CSS

Tags: CSS, Design, html, web, web design

Imprimir este artigo

Compartilhe:

Get Shareaholic

Sobre: Abraão Levi Oliveira Figueredo

Desenvolvedor web do Kekanto um guia colaborativo de Restaurantes, Bares, Baladas. Acredita em idéias simples e usabilidade. Sigam @AbraaoLevi

Comentários

Sem Comentários