Este é um exemplo de barra de abas feito inteiramente com Folhas de
Estilo - Cascading Style Sheets (CSS). As abas são simplesmente links
(a href
), dentro de itens de uma lista ul
da classe de
estilo tabbar
. Foi criada uma classe adicional tabact
para ser usada como aba ativa.
.tabbar { margin-top: 10px; border-bottom: 7px solid #CC0000; padding: 2px 0px; font-family: sans-serif; font-size: 83%; } .tabbar ul, li { margin: 0; padding: 0; display: inline; list-style: none; } .tabbar a { padding: 2px 1em; border-top: 1px solid #CC0000; border-left: 1px solid #CC0000; border-right: 1px solid #CC0000; border-bottom: none; background-color: #CCCCCC; color: #CC0000; text-decoration: none; } .tabbar a:hover, .tabbar a:active { border-top: 1px solid red; border-left: 1px solid red; border-right: 1px solid red; background-color: #EEEEEE; color: red; text-decoration: underline; } .tabbar a.tabact { border-bottom: 1px solid #CC0000; background-color: #CC0000; color: white; font-weight: bold; } .tabbar a.tabact:hover, .tabbar a.tabact:active { background-color: #CC0000; color: white; }
A classe de estilo tabbar
criada define a área de abas
e é aplicada a um elemento de bloco como um div
(usado neste
exemplo), um p
ou uma tabela.
Além de definir o escopo de validade das abas, a classe também
está definindo uma margem superior (margin-top
) que visa
distanciar qualquer conteúdo que esteja acima da aba, e uma borda
inferior (border-bottom
) que dá um acabamento visual integrando
as abas e delimitando a área horizontal do bloco.
Dentro da área de abas, as abas efetivamente são criadas
em uma lista UL, sendo links A dentro de itens LI da lista.
A maior parte da formatação fica por conta do link,
onde estão os estilos para a efetiva aparência de aba.
A lista funciona, essencialmente, como elemento de usabilidade e
acessibilidade para encapsular cada link, evitando que as abas sejam apenas
um amontoado de links seguidos, do ponto de vista estrutural.
Para que as abas fiquem corretamente enfileiradas horizontalmente, a propriedade
display
no estilo da lista UL e seus itens LI é definida
como inline
. Também foram zeradas as margens e afastamentos
da lista e seus itens (margin: 0; padding: 0
) e removido
o marcador padrão de itens da lista (list-style: none
).
Cada aba (link com seletor .tabbar a
) define borda visível
acima, à esquerda e direita (preferencialmente na mesma cor da borda
inferior da barra), e nenhuma borda abaixo (border-bottom: none
).
Além disso, foi definida uma margem lateral (1 pixel), para garantir
que uma aba nunca fique totalmente encostada ao elemento (aba ou texto) ao seu
lado. Para compor o tamanho da aba, foi adicionado afastamento interno de 2
pixels na vertical (acima e abaixo) e 1 eme nas laterais (padding: 2px 1em
).
Por fim, adiciona-se as preferências de estilo do fundo e do texto.
É interessante deixar o link sem a decoração de
sublinhado convencional (text-decoration: none
), enquanto não
selecionado.
A composição é completada com a definição
de uma classe tabact
para distinções visuais da aba ativa
(para ser usada na aba atualmente escolhida ou em uso), bem como
diferenciações para os estados apontado (hover) e ativo
(active) dos links (.tabbar a:hover, .tabbar a:active
).
Uma observação técnica importante: como links são
elementos de linha (inline), a definição de afastamento
interno (padding) vertical faz com que os limites do link extrapolem
a altura normal da linha. Portanto, deve ser adicionado padding
vertical correspondente na classe tabbar
. Este padding vertical
em geral deve ser igual ao usado no link, mas pode variar se na classe do link for
usada métrica de fonte (família, tamanho, corpo) diferente.
Neste exemplo, para evitar inconsistências, a definição de fonte
(sans-serif 10pt
) foi colocada no escopo da classe tabbar
,
de forma que o afastamento vertical foi o mesmo de 2 pixels
(padding: 2px 0px
). Sem o afastamento interno vertical da barra
acompanhando os links, a área dos links sofreria sobreposição
na vertical.
Um artigo relacionado extremamente interessante foi publicado na revista on-line A List Apart (ALA) de outubro de 2003. Ele apresenta uma forma de implementar abas com aparência gráfica sofisticada usando apenas CSS: Sliding Doors of CSS, por Douglas Bowman, com continuação em Sliding Doors of CSS, Part II.
© 2003-2020, Márcio d'Ávila, mhavila.com.br, direitos reservados. O texto e código-fonte apresentados podem ser referenciados, distribuídos e utilizados, desde que expressamente citada esta fonte e o crédito do(s) autor(es). A informação aqui apresentada, apesar de todo o esforço para garantir sua precisão e correção, é oferecida "como está", sem quaisquer garantias explícitas ou implícitas decorrentes de sua utilização ou suas conseqüências diretas e indiretas.