Idiomas

Esta é uma tradução. Ela pode conter erros ou estar desatualizada em relação à versão original em inglês. Tradutor(a): Maurício "Maujor®" Samy Silva

Folhas de estilos CSS dicas & truques

Ver index para todas as dicas.

Menu confete

O menu colorido mostrado a seguir foi criado com um elemento DIV e alguns elementos P dentro dele. O efeito visual foi obtido posicionando-se cada um dos elementos P individualmente e atribuíndo uma cor para o texto dentro dele (elemento P). Essa ténica funciona melhor quando os textos são curtos, pois o efeito baseia-se na sobreposição dos textos. Caso os textos sejam longos a sobreposição será em trechos também longos dificultando a leitura dos textos.

As regras de estilos deste exemplo são válidas e consistentes para criação de um menu com no máximo 10 itens. O nosso exemplo é constituído de 8 itens. Observe a marcação HTML do exemplo mostrado:

<div class="map">
<p id="p1"><a href="../../CSS/#news">O que há de novo?</a>
<p id="p2"><a href="../../CSS/#learn">Aprendendo CSS</a>
<p id="p3"><a href="../../CSS/#browsers">Navegadores CSS</a>
<p id="p4"><a href="../../CSS/#editors">Ferramentas de autoria</a>
<p id="p10"><a href="../../CSS/#specs">Especificações</a>
<p id="p6"><a href="../../CSS/Test">Suite de testes CSS1</a>
<p id="p9"><a href="/StyleSheets/Core">Core estilos do W3C</a>
<p id="p8"><a href="http://jigsaw.w3.org/css-validator/">Validador CSS</a>
</div>

Observe a atribuição da classe com o valor “map” para o elemento DIV destinada a definí-lo como container para o menu e o atributo ID para cada um dos elementos P. A cada elemento P deverá ser atribuido valores para ID (diferentes) denominados p1, p2,... ou p10. Não é obrigatório atribuir os valores para ID em order sequencial tal como fizemos no nosso exemplo. Você pode vincular a folha de estilos do menu transcrevendo as regras CSS para a folha de estilos da página, usando a diretiva @import ou ainda usando o elemento LINK para importar o arquivo map.css diretamente do site do W3C, conforme mostrado a seguir:

@import "http://www.w3.org/Style/map.css";

ou

<link rel="stylesheet" href="http://www.w3.org/Style/map.css">

Dissecando a folha de estilos

Observe a seguir a explicação de como funciona a folha de estilo. Ela começa definindo as regras CSS para o elemento DIV com a classe de valor "map". Cria um espaço com altura igual a 190px para acomodar os elementos P. A cada elemento P com valor ID igual a p1 até p10 é definida uma cor de fonte e um posicionamento dentro do espaço criado para o elemento container DIV. O posicionamento é definido com uso da propriedade 'margin': uma margem superior negativa desloca o elemento P para cima dentro do DIV e uma margem inferior positiva assegura que o elemento P seguinte posiciona-se inicialmente na parte inferior do DIV.

(O ponto negativo da folha de estilos é que tudo foi definido em px. Se o navegador a servir o menu oferece suporte consistente às CSS você poderá usar porcentagens em lugar de pixels.)

DIV.map {                        /* Cria espaço para os links */
  padding-top: 190px;
  margin-left: -2em;             /* Ajuste conforme suas necessidades... */
  margin-right: -2em;            /* Ajuste conforme suas necessidades... */
  margin-bottom: 4em;
  margin-top: 5em;
  clear: both;
  text-shadow: 0.2em 0.2em /* 0.2em */ silver }

#p1, #p2, #p3, #p4, #p5, #p6, #p7, #p8, #p9, #p10 {
  white-space: nowrap }
#p1, #p2, #p3, #p4, #p5, #p6, #p7, #p8, #p9, #p10 {
  text-indent: 0 }
#p1 A, #p2 A, #p3 A, #p4 A, #p5 A, #p6 A, #p7 A, #p8 A, #p9 A, #p10 A {
  text-decoration: none }

#p1, #p1 A   {color: #DDD; font: 100px/1 Impact, Helvetica Narrow, sans-serif}
#p2, #p2 A   {color: #000; font: italic 40px/1 "Georgia", serif}
#p3, #p3 A   {color: #080; font: 40px/1 "Verdana", sans-serif}
#p4, #p4 A   {color: #37F; font: bold 40px/1 Courier New, Courier, monospace}
#p5, #p5 A   {color: #F73; font: bold 100px/1 "Verdana", sans-serif}
#p6, #p6 A   {color: #22A; font: bold 25px/1 "Verdana", sans-serif}
#p7, #p7 A   {color: #088; font: italic 80px/1 "Verdana", sans-serif}
#p8, #p8 A   {color: #088; font: italic 20px/1 "Verdana", sans-serif}
#p9, #p9 A   {color: #088; font: italic 20px/1 "Verdana", sans-serif}
#p10, #p10 A {color: #F73; font: bold 60px/1 "Verdana", sans-serif}

#p1  {text-align: right;  margin: -185px 0 85px 0}    /* top right */
#p2  {text-align: left;   margin: -190px 0 150px 5%}  /* top left */
#p3  {text-align: right;  margin: -90px 35% 50px 0}   /* center */
#p4  {text-align: right;  margin: -95px 0 55px 0}     /* center right */
#p5  {text-align: left;   margin: -130px 0 30px 0}    /* center left */
#p6  {text-align: left;   margin: -40px 0 15px 35%}   /* bottom center */
#p7  {text-align: right;  margin: -80px 0 0px 0}      /* bottom right */
#p8  {text-align: left;   margin: -40px 0 20px 3%}    /* bottom left */
#p9  {text-align: right;  margin: -25px 0 5px 0}      /* bottom right */
#p10 {text-align: left;   margin: -130px 0 70px 0}    /* center left */

Obviamente você poderá usar fontes, cores e posicionamento de acordo com as suas preferências e até mesmo criar regras de estilos para menus com mais de 10 links. Observe que para o nosso exemplo definimos valores negativos para as margens esquerda e direita do elemento DIV. Isso foi feito com a finalidade de fazer com que o menu tenha dimensões maiores que a ocupada pelos textos, contudo pode ocorrer que não haja necessidade de aumentar as dimensões do menu e nesses casos deveremos remover as declarações de margens negativas.

O menu "quebra" no navegador Netscape 4. É uma falha do navegador e por essa razão criamos a folha de estilos hospedada em map-ns.css que é semelhante a nossa folha de estilos e destinada a servir o menu para aquele navegador. Para que a folha de estilos do exemplo mostrado e a folha de estilos para o navegador Netscape 4 funcionem juntas vincule ambas à página que contém o menu usando a seguinte marcação na seção HEAD do documento:

<link href="map-ns.css" rel="stylesheet" type="text/css">
<link href="map.css" rel="stylesheet" type="text/css" media="all">

Agentes que implementam as CSS de forma consistente interpretarão ambas as folhas de estilos e as regras constantes da segunda folha sobrescrevão as da primeira. O Netscape 4 não interpretará a segunda folha de estilos pois não entende o atributo "media" e, assim, aplicará os estilos constantes da primeira folha de estilos, ignorando a segunda.

Talvez você esteja se perguntando o porquê de termos posicionado com uso de margens negativas, quando tudo indica que devêssemos usar posicionamento absoluto. A realidade é que o mesmo efeito poderia ser obtido com uso das propriedades 'position', 'left' & 'right'. A razão para usar margens é que o posicionamento será honrado, também, nos navegadores que suportam somente as CSS1.

Bert Bos, Coordenador das atividades das CSS
Copyright © 1994–2021 W3C® Privacy policy

Criado em 5 de maio de 2001;
Atualizado qua 06 jan 2021 05:40:49 UTC

Idiomas

Sobre traduções