CSS: Agrupamento (id, classes e seletores)

Sempre quando queremos agrupar id, classes e seletores é aquela dificuldade para lembrar da sintaxe correta. Então decidi, levantar as formas possíveis de fazer isso e publicar para todos.

1º. id e classe

 
#id_deslocamento
{
     padding-left:10px;
}
#id_deslocamento .classe
{
     color:#ff0000;
     font-size:14px
}

2º. id e seletores
» arquivo .css

#top
{
     background-color: #ccc;
     padding: 5px
}
#top h1
{
     color: #ff0;
}
#top p
{
     color: red;
     font-weight: bold;
}

 
» arquivo .html

<div id="top">
     <h1>Título da Página</h1>
     <p>Neque porro quisquam est qui, consectetur, adipisci velit...</p>
</div>

3º. classes e links

  1. a:link……..link no estado inicial
  2. a:visited…link visitado
  3. a:hover…..link quando passa-se o mouse sobre ele
  4. a:active….link ativo (no momento em que é dado o clique)
.classe a:link, .classe a:visited, .classe a :active
{
   text-decoration: none; 
   color: #FF0000
}
.classe a:hover
{
   border-bottom: #000 1px solid
   color: #000;
   font-weight: bold;
}

outra forma:

a.classe:link {color: #009900}
a.classe:visited {color: #FF0000}
a.classe:hover {color: #333333}
a.classe:active {color: #00FFFF}

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *