Crie um arquivo no qual você pretende adicionar a barra de navegação.
Vamos chamá-lo “barNav.html”.

Construiremos uma barra de navegação com três links dispostos em linha, um após o outro.
Óbvio isso né? Afinal trata-se de uma barra de navegaçao!

Mas, é muito frequente, na prática, encontrarmos nossas soluções em coisas
óbvias e aqui é um bom exemplo.

A constatação óbvia acima, nos leva de imediato a concluir um código bem
simples para “enclausurar” e depois estilizar a barra de navegação.

uma linha —-> um parágrafo HTML;

três links  —-> três tags a HTML;

…e, nasce o primeiro embrião da nossa barra de navegação o código HTML:

<p>
<a href="../index.html" >HOME</a>
<a href="../forum/index.php">DWFORUM</a>
<a href="../maujor.html>MAUJOR</a>
</p>

Próximo passo: Estilizar as tag’s p e a.

Não vamos querer que TODOS os parágrafos da página tenham o mesmo aspecto da barra de navegação e assim usaremos uma classe para aplicar no parágrafo que contém a barra de navegação.

Chamemos a classe de .barNav e vamos ao no Shift+F11

1a. ETAPA: Definindo os estilos para uma classe que chamaremos —>.barNav

Abra o painel Estilos CSS (tecla de atalho Shift + F11) e clique em Novo estilo CSS

Painel - Estilos CSS

Na caixa Novo estilo CSS, marque Tipo: Utilizar o seletor CSS - Definir em: Apenas este documento - Seletor: Digite .barNav a Clique OK.

NOTA: Antes de digitar, certifique-se de que a marcação do Tipo esteja em: Utilizar o seletor CSS, pois caso contrário o DW retornará uma mensagem “chiando” com a sintaxe digitada.

Aqui estamos definindo um seletor para estilizar a tag a contida no elemento HTML (no nosso caso o parágrafo) com classe barNav.

Caixa - Novo estilo CSS

Na caixa Definição de estilos CSS de .barNav a, na Categoria Tipo marque, Fonte:Arial, Helvetica, Verdana, sans-serif - Tamanho: 14 - Peso: negrito - Cor: #000000 - Decoração: Nenhuma.

Difinição de estilos CSS de .barNav a - Tipo

Na caixa Definição de estilos CSS de .barNav a, na Categoria Fundo marque, Cor do fundo:#00FF00.

Difinição de estilos CSS de .barNav a - Fundo

Na caixa Definição de estilos CSS de .barNav a, na Categoria Bloco marque, Alinhamento do texo:centro.

Difinição de estilos CSS de .barNav a - Bloco

Passe para a Categoria Caixa e marque Largura, Preenchimento e Margem, conforme mostrado na figura abaixo. ATENÇÂO: No Preenchimento, desmarque “Idêntico para todas” e na Margem deixe marcada “Idêntico para todas”, pois estamos definindo preenchimentos deferentes nos lados da caixa e borda de zero pixel, nos quatro lados da caixa.

Difinição de estilos CSS de .barNav a - Caixa

Passe para a Categoria Borda e defina Estilo, Largura e Cor, conforme mostrado na figura abaixo. ATENÇÂO: Deixe marcada as caixas “Idêntico para todas”, pois estamos definindo bordas iguais, nos quatro lados da caixa.

Difinição de estilos CSS de .barNav a - Borda

E aqui, acabamos de criar o estilo para a nossa tag a dentro da classe .barNav.

Os links já estão com letras na cor preta (#000000), dentro de um retângulo verde (#00FF00) com bordas pretas (#000000).

Uma “Barra de Navegação” pode ter até 4 estados diferentes, refletindo cada um, uma ação do usuário:

1). Imagem Ativa (UP) > ponteiro do usuário esta fora da imagem ;

2). Imagem Sobreposta (OVER) > ponteiro do usuário esta sobre a imagem ;

3). Imagem Inativa (DOWN) > o usuário clicou na imagem ;

4). Imagem Sobreposta enquanto tiver Inativa (OVER WHILE DOWN) > o ponteiro do usuário esta sobre a imagem, depois que ela foi clicada.

Com CSS:

1) o estado “UP” já está estilizado;

2) o estado “OVER” é estilizado com a:hover que mostrarei a seguir;

3) o estado “DOWN” é estilizado com a:active que mostrarei a seguir;

4) o estado “OVER WHILE DOWN” não tem equivalente em CSS;

5) mas, temos o estado “VISITED” para links já visitados com a:visited, que não usaremos neste tutorial.

2a. ETAPA:Definindo os estilos para a:active

Painel Estilo CSS –> Novo estilo CSS –> Utilizar o seletor de CSS –> Definir em apenas este documento –> Seletor:digite .barNav a:active –> OK;

Caixa Tipo–> Cor: #CCCCCC; Caixa Fundo–> Cor do fundo: #000000;Caixa Borda–> Estilo–> solid - Largura–> 2px - Cor: #CCCCCC;

E aqui, acabamos de criar o estilo para a:active.

3a. ETAPA: Definindo os estilos para a:hover

Painel Estilo CSS –> Novo estilo CSS –> Utilizar o seletor de CSS –> Definir em apenas este documento –> Seletor:digite .barNav a:hover –> OK;

Caixa Tipo–> Cor: #00FF00; Caixa Fundo–> Cor do fundo: #000000;Caixa Borda–> Estilo–> solid - Largura–> 2px - Cor: #00FF00;

E aqui, acabamos de criar o estilo para a:hover.

PRONTO! Terminamos de criar a CSS para nossa barra de navegação.

O Código CSS gerado em sua página será o seguinte:

<style type="text/css">
<!--
.barNav a {
font:bold 14px  Arial, Helvetica, Verdana,sans-serif;
color:#000000;
text-decoration:none;
background:#00FF00;
text-align:center;
margin:0px;
padding:5px 10px 5px 10px;
border:2px solid #000000;
}

.barNav a:active {
color:#CCCCCC;
background:#000000;
border:2px solid #CCCCCC;
}
.barNav a:hover {
color:#00FF00;
	background:#000000;
border:2px solid #0FF000;
}
</style>

E finalmente o teste pra confirmar se esta tudo certinho:

No arquivo que você criou “barNav.html” e onde gerou o código CSS, digite o HTML da barra de navegação na janela de código do .

Insira as tag’s <a> dentro da tag <p> tudo como mostrado no início deste tutorial.

Observe o código HTML abaixo:

<html>
.........................
</head>
<body>
<p>
<a href="../index.php/">HOME</a>
<a href="../index.php">DWFORUM</a>
<a href="../maujor.php">MAUJOR</a>
</p>
........................
</body>
</html>

E você deverá obter uma barra de navegação com o aspecto mostrado nesta página

É isso pessoal! E, agora a melhor parte do novo aprendizado. Os exercícios e pesquisas individuais e novas descobertas

Crie outros arquivos e experimente com:

…mude a cor do fundo;acrescente a declaração a:visited;

…altere espessuras, cor e tipos das bordas;…coloque a declaração a:hover antes de a:active e constate se houve alguma mudança no comportamento dos links;

…e milhares de outras combinações!

Fonte: Maujor

1. Arquivo CSS para screen
2. Arquivo CSS para print
3. Arquivo Java script para gerar o Nifty Corners
4. O código Java script para chamar os elementos

Os três primeiros componentes não necessitam de mudanças, apenas ser incluídos dentro da Tag HEAD :
<link rel=”stylesheet” type=”text/css” href=”niftyCorners.css”>
<link rel=”stylesheet” type=”text/css” href=”niftyPrint.css” media=”print”>
<script type=”text/javascript” src=”nifty.js”></script>

O quarto elemento é necessário para passar os parâmetros para o Nifty Corners, o bloco de código Java script é esse:

A função NiftyCheck verifica se há a suporte para DOM. Se o teste passar, a função Rounded é chamada. Para iniciar o arredondamento é necessário informar cinco parâmetros, nessa ordem:

1. Um seletor de CSS que indique qual elemento será arredondado
2. Uma string que indique quais cantos serão arredondados
3. Cor exterior dos cantos arredondados
4. Cor interna dos cantos arredondados
5. Um quinto parâmetro opcional que conterá as opções especiais para o Nifty Corners

Primeiro parâmetro: o seletor do CSS

Os parâmetros aceitos pelo Nifty Corners para arredonda elementos são:

• Tags: p, blockquote ou h2
• Seletor ID com a tag do elemento especificada, por exemplo: “div#content” ou “p#news” ou “li#home”
• Seletor de classe com a tag do elemento especificada, por exemplo: “div.entry” ou “h2.highlight”
• Seletor de agrupamentos, tem que ser composto por um seletor ID e seguido por uma Tag. Os exemplos válidos são: “div#news div” ou do “li ul#menu”

Segundo parâmetro: especificando os cantos que serão arredondados

Vamos ver outra vez a chamada do Java script para o primeiro exemplo:

O segundo parâmetro especifica quais cantos serão arredondados. Podendo ser um ou mais dos seguintes keywords que devem ser separados por um espaço:

• all: todos os cantos redondos
• top: cantos superiores redondos
• bottom: cantos inferiores redondos
• tl: canto alto-esquerdo redondo
• tr: canto alto-direito redondo
• bl: canto fundo-esquerdo redondo
• br: canto fundo-direito redondo

Você também pode combinar os keywords. Por exemplo, você pode usar o parâmetro do “top br” para arredondar os cantos superiores e fundo-direito. Observe que os parâmetro “top bottom” e “br tl tr bl” também são válidos e geram todos os quatro cantos arredondados.

Terceiro e quarto parâmetros: especificando as cores

Vamos olhar outra vez a chamada do Java script para o primeiro exemplo:

Os terceiros e quartos parâmetros são usados para especificar a cor externar e interna. Deve ser especificado o código hex com # símbolo, em três ou seis dígitos. A notícia boa é que pode ser transparente “transparent”. Você não pode gerar ambas as cores transparentes, somente uma.

Quinto parâmetro: opções especiais do Nifty Corners

Está aqui é a chamada do Java script para o primeiro exemplo:

Como você pode ver, há um quinto parâmetro informado “smooth”, que serve para gerar cantos arredondados suavizados. O quinto parâmetro é opcional. Alguns keywords que você poder usar:

• smooth: suavizar os cantos aplicando um antialias automaticamente, que é gerado pelo Javascript que computará automaticamente a cor intermediária para misturar delicadamente a cor interna e extenar, neste caso ambas as cores devem ser especificada.
• border: (seguida por uma cor no código hex com # símbolo, em três ou seis dígitos) fará cantos com bordas. Observe que você pode também gerar cantos transparentes, mas fora das bordas.
• small: cantos pequenos

Os exemplos

Exemplo um: um único div com antialias
Este é o exemplo do inicio. A chamada do Javascript é:

Neste caso todos os cantos foram arredondados com um antialias muito claro.

Exemplo dois: divs dos irmãos
Neste exemplo, dois divs foram arredondados. As chamadas dos js são:

Exemplo três: transparente
Este é uma das melhorias mais significativas do nifty corners. Você apenas tem que especificar a cor exterior e “transparente” para a cor interna:

Exemplo quatro: com ou sem elas
Neste exemplo, eu pus dois divs que compartilham da mesma classe em uma página. Um deles não tem uma ID,

Exemplo cinco: explosão da cor
Neste exemplo, eu usei o seletor e a transparência do descendente para dentro nos quatro elementos redondos, mas apenas em dois cantos opostos. Está aqui a única chamada do Javascript:

Fonte: Meus Tutoriais

As propriedades list são as listadas abaixo:

• list-style-image…………. imagem como marcador da lista;
• list-style-position……….onde o marcador da lista é posicionado;
• list-style-type……………tipo do marcador da lista;
• list-style……………………maneira abreviada para todas as propriedades;

Valores válidos para as propriedades do lista

• list-style-image:
  1. none
  2. URL: url(caminho/marcador.gif)
• list-style-position:
  1. outside: marcador fora do alinhamento do texto
  2. inside: marcador alinhado com texto
• list-style-type:
  1. none: sem marcador
  2. disc: círculo (bolinha cheia)
  3. circle: circunferência (bolinha vazia)
  4. square: quadrado cheio
  5. decimal: números 1, 2, 3, 4, …
  6. decimal-leading-zero
  7. lower-roman: romano minúsculo i, ii, iii, iv, …
  8. upper-roman: romano maiúsculo I, II, III, IV, …
  9. lower-alpha: letra minúscula a, b, c, d, …
  10. upper-alpha: letra maiúscula A, B, C, D, …
  11. lower-greek
  12. lower-latin
  13. upper-latin
  14. hebrew
  15. armenian
  16. georgian
  17. cjk-ideographic
  18. hiragana
  19. katakana
  20. hiragana-iroha
  21. katakana-iroha

Os tipos de 11 a 20 são de uso específico e sem suporte total pelos navegadores atuais e não serão tratados neste tutorial.

Vamos a seguir analisar cada uma delas detalhadamente através de exemplos práticos.

Como estudar e entender os exemplos

Para cada propriedade apresento as regras CSS para o elemento lista HTML e definidas dentro de uma folha de estilos incorporada, bem como um trecho do documento HTML onde se aplicam as regras.

A seguir mostro o efeito que a regra produz. Observe a regra e o efeito e para melhor fixar seu aprendizado reproduza o código no seu editor, mude os valores e veja o resultado no browser. Bons estudos! E faça ótimo proveito dos tutorial.

list-style-image…imagem para marcadores de lista

Este exemplo demonstra como definir uma imagem de marcador de listas

<html>
<head>
<style type="text/css">
<!--
ul
{
list-style-image: url("seta.gif");
}
-->
</style>
</head>
<body>
<ul>
<li>Item um</li>
<li>Item dois</li>
<li>Item tres</li>
</ul>
</body>
</html>

A folha de estilo acima resultará nesta lista:

• Item um
• Item dois
• Item tres

list-style-position…posição dos marcadores de lista

Este exemplo demonstra como posicionar os marcadores de listas

html>
<head>
<style type="text/css">
<!--
ul.inside
{
list-style-position: inside;
}
ul.outside
{
list-style-position: outside;
}
-->
</style>
</head>
<body>
<ul class="inside">
<li>Este texto destina-se a demonstrar o
valor: "inside" dos marcadores de listas.</li>
<li>E aqui continuamos com mais texto para
 fixar o valor:"inside" dosmarcadores de listas.</li>
</ul>
<ul class="outside">
<li>Este texto destina-se a demonstrar o
 valor: "outside" dos marcadores de listas.</li>
<li>E aqui continuamos com mais texto para
 fixar o valor:"outside" dos marcadores de listas.</li>
</ul>
</body>
</html>

A folha de estilo acima resultará nesta lista:

• Este texto destina-se a demonstrar o valor: “inside” dos marcadores
• E aqui continuamos com mais texto para fixar o valor:”inside” dos marcadores de listas.

• Este texto destina-se a demonstrar o valor: “outside” dos marcadores
• E aqui continuamos com mais texto para fixar o valor:”outside” dos marcadores de listas.

list-style-type…os tipos de marcadores de lista

Definir os marcadores de listas não ordenadas

Este exemplo demonstra como definir os marcadores de listas não ordenadas.

<html>
<head>
<style type="text/css">
<!--
ul.none {
list-style-type: none;
}
ul.disc {
list-style-type: disc;
}
ul.circle {
list-style-type: circle;
}
ul.square {
list-style-type: square;
}
-->
</style>
</head>
<body>
<ul class="none">
<li>Item um</li>
<li>Item dois</li>
<li>Item tres</li>
</ul>
<ul class="disc">
<li>Item um</li>
<li>Item dois</li>
<li>Item tres</li>
</ul>
<ul class="circle">
<li>Item um</li>
<li>Item dois</li>
<li>Item tres</li>
</ul>
<ul class="square">
<li>Item um</li>
<li>Item dois</li>
<li>Item tres</li>
</ul>
</body>
</html>

Este é o efeito da folha de estilo acima:

• Item um
• Item dois
• Item tres

• Item um
• Item dois
• Item tres

• Item um
• Item dois
• Item tres

• Item um
• Item dois
• Item tres

Definir os marcadores de listas ordenadas

Este exemplo demonstra como definir os marcadores de listas não ordenadas.

<html>
<head>
<style type="text/css">
<!--
ol.decimal
{
list-style-type: decimal;
}
ol.lroman
{
list-style-type: lower-roman;
}
ol.uroman
{
list-style-type: upper-roman;
}
ol.lalpha
{
list-style-type: lower-alpha;
}
ol.ualpha
{
list-style-type: upper-alpha;
}
-->
</style>
</head>
<body>
<ol class="decimal">
<li>Item um</li>
<li>Item dois</li>
<li>Item tres</li>
</ol>
<ol class="lroman">
<li>Item um</li>
<li>Item dois</li>
<li>Item tres</li>
</ol>
<ol class="uroman">
<li>Item um</li>
<li>Item dois</li>
<li>Item tres</li>
</ol>
<ol class="lalpha">
<li>Item um</li>
<li>Item dois</li>
<li>Item tres</li>
</ol>
<ol class="ualpha">
<li>Item um</li>
<li>Item dois</li>
<li>Item tres</li>
</ol>
</body>
</html>

Este é o efeito da folha de estilo acima:

1. Item um
2. Item dois
3. Item tres

1. Item um
2. Item dois
3. Item tres

1. Item um
2. Item dois
3. Item tres

1. Item um
2. Item dois
3. Item tres

1. Item um
2. Item dois
3. Item tres

list-style…duas propriedades das listas em uma declaração única

Esta é a maneira abreviada de você escrever uma regra para as propriedades das listas.

Você pode declarar duas das propriedades estudadas em uma regra única:

A sintaxe geral é esta: list-style: position; imagem ou list-style: position; type podendo inverter a ordem.

Veja o exemplo abaixo:

<html>
<head>
<style type="text/css">
<!--
ul
{
list-style: inside url("seta.gif");
}
-->
</style>
</head>
<body>
<ul>
<li>Texto para demonstrar a propriedade
 de declaração única  para listas usando
CSS - Folhas de Estilo em Cascata;</li>
<li>Item dois;</li>
<li>Item tres.</li>
</ul>
</body>
</html>

A folha de estilo acima resultará nesta lista:

• Texto para demonstrar a propriedade de declaração única para listas usando CSS - Folhas de Estilo em Cascata;
• Item dois;
• Item tres

fonte: www.majour.com

Um destes componentes é a navegação em abas. Já está na hora de termos o total controle sobre as abas, que a cada dia se tornam mais populares como um componente primário de navegação no site. Agora que as CSS são bem suportadas, podemos incrementar a qualidade e aparência das abas em nossos sites. Você sabe muito bem que as CSS podem ser usadas para estilizar de muitas maneiras um elemento lista ( link para artigo em inglês: tame a plain unordered list). Talvez você já trenha visto listas estilizadas como abas, parecida com esta mostrada abaixo:

E que tal, se com a mesma marcação usada para a lista acima, pudessemos estilizar de modo a obter as abas mostradas abaixo:

Podemos sim, com simples estilização.

O que há de novo ?

Muitas das abas construidas com CSS que eu tenho visto, apresentam características gerais de estilização comuns: blocos retangulares coloridos, as vezes um destaque, como uma borda faltando na aba corrente e uma mudança de cor para o estado de mouse sobre a aba. Isto é tudo que as CSS podem nos oferecer? Um conjunto de caixas coloridas?

Antes mesmo da adoção ampla das CSS nós presenciamos uma série de inovações no design da navegação. Formas criativas, elaboradas misturas de cores e convincentes simulações do mundo real. Contudo estas criações em geral baseiam-se em complexas construções de textos incorporados em imagens ou de múltiplas tabelas aninhadas. Editar um texto ou alterar a ordem de tabulação é um processo extremamente incômodo. Redimensionamento de texto é impossível ou causa sérios problemas ao layout da página.

Navegação construida com texto puro é muito mais fácil de se manutenir e carrega muito mais rápido que construção de textos com imagens. E mais ainda, embora seja possível definir o atributo alt para cada imagem, texto puro ainda e mais acessível uma vez que podem ser aumentados por usuários com restrições visuais. Não é novidade que navegação construida com texto puro estilizada com CSS é um passo atrás no design web. A maioria das navegações com abas e CSS, há muito são inferiores em aparência àquelas complexas construções que fazíamos antigamente. — com certeza nada que possa ser incluido em um portfolio. Uma tecnologia nova (como CSS) deve permitir a criação de algo melhor, sem perda da qualidade de design das construções antigas baseadas em tabelas e imagens.

A técnica das portas corrediças

O uso de duas imagens de fundo, nos permite criar consistentes e flexíveis componentes de interface que se expandem e contraem com o redimensionamento dos textos. Uma imagem à direita e outra à esquerda. Pense nestas duas imagens como se fossem as duas folhas de uma Porta Corrediça que deslizam para fechar o vão total da passagem. As folhas das portas correm uma sobre a outra fechando ou abrindo o vão conforme mostrado no diagrama a seguir:

Segundo este modelo, uma imagem cobre uma porção da outra imagem. Suponha que nas imagens o canto superior externo seja arredondado e que nós não permitiremos que a imagem da frente cubra completamente a imagem de trás. Para conseguir este efeito nós construiremos a imagem da frente (vamos supor que a da frente seja aquela que está a esquerda no diagrama mostrado) com uma largura mínima. Uma largura mínima mas o suficiente para mostrar o canto arredondado em cima. Então a imagem da frente terá uma largura suficiente apenas para mostrar a curva do canto superior esquerdo. Ver esquema abaixo:

Na figura acima se a aba mostrada no lado direito, crescer em largura devido ao tamanho do texto contido nela ou devido a um redimensionamento do tamanho de fonte pelo usuário as duas imagens serão separadas uma da outra, criando um espaço vazio entre elas. Precisamos fazer uma avaliação de quanto a aba poderá expandir-se para evitar este efeito. Como avaliar a expansão da aba em consequência de um redimensionamento da fonte no navegador, pelo usuário? Um dado real a considerar para este caso é algo em torno de pelo menos 300%. Precisamos aumentar a largura da imagem para compensar esta expansão da aba. Para o exemplo mostrado nesta matéria nós construimos a imagem de fundo que fica atrás (a do lado direito) com as dimensões de 400×150 pixels, e a imagem da frente, a da esquerda com 9×150 pixels.

Não se esqueça que imagens de fundo são mostradas na porção disponível do “vão da porta ” do elemento onde são aplicadas (área de conteúdo + padding). As duas imagens são posicionadas nas laterais dos elementos onde são aplicadas. A porção visível das imagens de fundo se unem para dar o formato final a aba:

Se aba expandir as imagens deslizam para os lados preenchendo o novo vão maior com mais trecho da imagem direita:

Para este exemplo eu usei o Photoshop para construir as tres abas mostrada no início deste artigo. Uma das abas é mais clara que a outra — a ser usada para representar a aba, ou link corrente. Segundo esta técnica, para obtenção das imagens esquerda e direita, construimos uma imagem maior que a aba e cortamos em duas partes:

A mesma construção gráfica deve ser feita para a aba que representará o link corrente. Uma vez construidas as quatro imagens, (1, 2, 3, 4) podemos passar para a marcação e CSS para as abas.

Criando a aba

Se você analisar a construção de listas na horizontal com uso de CSS vai chegar a conclusão que existem pelo menos dois métodos para dispor uma lista em uma linha. Cada um deles com suas vantagens e desvantagens. Ambos empregam técnicas CSS intrincadas que podem tornar as coisas confusas. Um método usa boxes inline o outro floats.

O primeiro método — e possivelmente o mais comum — é o de atribuir display “inline” para cada item da lista. Este método é atrativo pela sua simplicidade. Contudo causa alguns problemas para a técnica de portas corrediças em alguns navegadores.
O segundo método, que é o que empregaremos, usa floats para alinhar na horizontal cada item da lista. Floats podem ser frustantes. O seu comportamento inconsistente vai contra a própria lógica. O entendimento dos conceitos básicos de como lidar com múltiplos floats e o conhecimento de como contornar suas inconsistências proporciona ao autor condições de conseguir maravilhas com floats.

Iremos aninhar vários elementos flutuados, contidos dentro de um elemento float. Faremos isso com o objetivo de colocar todos os elementos float dentro de um elemento pai também flutuado. Assim fazendo poderemos colocar cor e/ou imagem de fundo nas nossas abas. É importante lembrar que o elemento que se segue a aba deverá ser reconfigurado para sua posição com uso da propriedade CSSclear. Isto evita que as abas flutuadas interfiram com o posicionamento dos outros elementos da página.

Vamos começar com a marcação mostrada a seguir:

<div id="header">
    <ul>
      <li><a href="#">Home</a></li>
      <li id="current"><a href="#">News</a></li>
      <li><a href="#">Products</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>

Na verdade a div #header deverá conter o logotipo e uma caixa de busca. No nosso exemplo definimos um link morto para valor do atributo href Obviamente em um caso real este valor deverá ser o caminho de destino para o link.

Começamos a estilização flutuando o container #header. Isto assegura que o container “contenha” os items da lista que também serão flutuados. Uma vez que flutuamos, precisamos definir uma largura de 100%. Definimos um fundo temporário na cor amarela para nos assegurarmos de que o container se expande e ocupa toda a área atrás das abas. Definimos ainda mais duas propriedades de fonte e texto, para uniformizar tudo dentro do container:

#header {
    float:left;
    width:100%;
    background:yellow;
    font-size:93%;
    line-height:normal;
    }

Uniformizamos ainda as margens e padding default das listas não ordenadas para “0” e removemos os marcadores de lista. Cada item da lista é flutuado à esquerda:

#header ul {
    margin:0;
    padding:0;
    list-style:none;
    }
  #header li {
    float:left;
    margin:0;
    padding:0;
    }

Definimos as âncoras para o status de elementos nível de bloco com a finalidade de ter total controle sobre elas sem preocupações com as características típicas de elementos inline:

#header a {
    display:block;
    }

A seguir adicionamos a regra para colocar a imagem de fundo direita nos itens da lista (modificações/adicões estão marcadas em forte ênfase):

#header li {
    float:left;
    background:url(”norm_right.gif”)
      no-repeat right top;
    margin:0;
    padding:0;
    }

Antes de colocarmos a imagem de fundo à esquerda vamos visitar uma página mostrando como estamos até aqui: Exemplo 1. (Na página do Exemplo 1 desconsidere as regras de estilo que eu apliquei para o elemento body. Elas destinam-se apenas a definir valores básicos para margens, padding, cores e texto da página.)

- - -

Agora podemos colocar a imagem da esquerda na frente da imagem da direita definindo-a no elemento âncora (elemento interno na marcação). Definimos também, padding para expandir a aba e desgrudar o texto das laterais:

#header a {
    display:block;
    background:url(”norm_left.gif”)
      no-repeat left top;
    padding:5px 15px;
    }

Com estas novas regras, chegamos ao Exemplo 2. Notar como nossas abas começam a ganhar forma. A esta altura um esclarecimento aos usuários do IE5/Mac que devem estar confusos se perguntando “O que está havendo aqui ? As abas estão empilhadas na vertical e esticadas ao longo de toda a extensão da tela.” Não se preocupem, nos veremos adiante. Por agora faça um esforço para seguir, ou temporariamente mude para outro navegador, se tiver um à mão, mas esteja certo que logo resolveremos o problema com o IE5/Mac.

- - -

Já temos as imagens no lugar para as abas normais, agora vamos tratar das abas “correntes”. Faremos isto definindo as regras CSS para os itens da lista contendo suas âncora marcadas com id="current". Não há necessidade de mudar mais nada além da imagem de fundo via a propriedade background-image:

#header #current {
    background-image:url(”norm_right_on.gif”);
    }
  #header #current a {
    background-image:url(”norm_left_on.gif”);
    }

Vamos precisar de uma borda inferior para as abas. Se aplicarmos a propriedade border ao container #header estaremos impedidos de remover a borda para a aba corrente. Então criamos uma outra imagem que contenha a borda a ser incluida ao longo da parte inferior das abas. Para incrementar o visual acresentamos um gradiente na imagem para a borda, conforme mostrado abaixo:

Aplicamos esta imagem como fundo do container #header (para substituir aquela cor amarela que havíamos colocado) posicionando-a na parte inferior do elemento e usando uma cor de fundo igual a cor mais clara do gradiente. A seguir removemos o padding que havíamos aplicado ao elemento body e aplicamos 10 pixels de padding em volta do elemento ul:

#header {
    float:left;
    width:100%;
    background:#DAE0D2 url(”bg.gif”)
      repeat-x bottom;
    font-size:93%;
    line-height:normal;
    }
  #header ul {
    margin:0;
    padding:10px 10px 0;
    list-style:none;
    }

Para completar o efeito nas abas precisamos remover a borda inferior na aba corrente conforme mencionamos anteriormente. Você poderia pensar que a solução seria simplesmente aplicar uma borda inferior nas abas com a cor igual a cor da imagem de fundo que acabamos de colocar em #header e assim mudar a cor da borda para a aba corrente. Contudo esta solução implica no aparecimento de uma pequena ‘falha’ quase imperceptível, mas visível a um observador atento. Então a solução está em alterar o padding da âncoras, criando um fechamento perfeito das bordas conforme mostrado na figura ampliada abaixo:

fazemos isso diminuindo o padding das âncoras de 1 pixel (5px - 1px = 4px), e acresentando de volta 1pixel para a âncora corrente:

#header a {
    display:block;
    background:url("norm_left.gif")
      no-repeat left top;
    padding:5px 15px 4px;
    }
  #header #current a {o
    background-image:url(”norm_left_on.gif”);
    padding-bottom:5px;
    }

Esta ateração retira a borda inferior da âncora corrente enquanto conserva a borda para as demais. Tudo conforme mostrado no nosso Exemplo 3.

Acertos finais

Olhares atentos devem ter percebido que aparece um fundo branco junto aos cantos arrendodados das abas. Estes cantos opacos estão impedindo que a imagem de trás (NT: a imagem de fundo do container #header) possa ser visualizada através do canto esquerdo da imagem em frente. Teoricamente a solução seria a de igualar as cores naquele cantinho das imagens das abas com a cor do fundo do container #header atrás delas. Mas, as abas podem se estender em altura o que causaria um deslocamento para baixo do fundo de trás das abas inviabilizando esta solução, pois ali há um gradiente de cor. Vamos então fazer nossas imagens com os cantos das abas transparentes. E definindo curvas anti-aliased com cor de mate igual a cor do fundo por trás delas.

Agora que os cantos são transparentes, através desta transparência, no lado esquerdo, vai aparecer a imagem que está por trás ou seja a imagem da direita (NT: e não o fundo do container #header como queríamos). Para corrigir isso definimos um padding à esquerda para os itens de lista com valor igual a largura da imagem esquerda (9px). Uma vez que este padding foi acrescido precisamos compensar removendo o mesmo valor do padding das âncoras para mentê-las centradas (15px - 9px = 6px):

#header li {
    float:left;
    background:url("right.gif")
      no-repeat right top;
    margin:0;
    padding:0 0 0 9px;
    }
  #header a {
    display:block;
    background:url(”left.gif”)
      no-repeat left top;
    padding:5px 15px 4px 6px;
    }

Contudo, as coisas não podem ficar como estão, pois ao adicionarmos um padding de 9 pixels, a imagem da esquerda foi empurrada estes 9 pixels para a esquerda tornando-se agora invisível. As laterais das duas imagens se tocam na porção visível da aba e assim não há mais a necessidade de se manter a imagem da esquerda na frente. Podemos trocar a posição das imagens aplicando-as a elementos opostos. Faremos isto também para a aba corrente:

#header li {
    float:left;
    background:url("left.gif“)
      no-repeat left top;
    margin:0;
    padding:0 0 0 9px;
    }
  #header a, #header strong, #header span {
    display:block;
    background:url(”right.gif“)
      no-repeat right top;
    padding:5px 15px 4px 6px;
    }
  #header #current {
    background-image:url(”left_on.gif“);
    }
  #header #current a {
    background-image:url(”right_on.gif“);
    padding-bottom:5px;
    }

Isto feito, podemos visitar nosso Exemplo 4. Notar, lá no Exemplo 4, que o fato de termos feito o fundo das imagens das abas, transparentes, criou um pequeno espaço morto não clicável no lado esquerdo da aba. Este espaço está fora da área de texto, contudo o usuário poderá percebê-lo. Usar transparência para o fundo das imagens não é obrigatório. Se não desejamos aquele pequeno espaço não clicável, podemos optar por usar para fundo geral das abas, ou seja fundo do container #header uma cor contínua em lugar de um gradiente como fizemos, e usar esta mesma cor para fundo das imagens das abas. Por enquanto deixaremos as coisas como estão, com fundo transparente para as imagens das abas.

- - -

Vamos agora fazer umas estilizações gerais: bold para os textos das abas, mudar a cor da fonte das abas para cor marrom, mudar cor do texto da aba corrente para cinza escuro. Podemos agora notar estas estilizações no nosso Exemplo 5.

Um hack para consistência

Quando vimos o Exemplo 2, falamos de uma inconsistência de renderização no navegador IE5/Mac que posiciona as abas na vertical e ainda estende cada uma por toda a largura do navegador. Não era bem isto que estávamos querendo.

Na maioria dos navegadores ao flutuar um elemento, ele se encolhe a uma largura mínima possível no elemento que o contém. Se o elemento flutuado contém ou é uma imagem, ele se encolhe para uma largura igual a largura da imagem. Se o elemento flutuado contém texto, ele se encolhe para uma largura igual a largura da maior palavra.

Para o navegador IE5/Mac quando um elemento nível de bloco com largura auto é inserido dentro de um elemento flutuado há uma inconsistência de renderização. Nestes casos o IE5/Mac não reduz a largura do float como explicado acima. Ao contrário, ele expande o float e o elemento nível de bloco para toda a largura disponível. Para solucionar este problema precisamos flutuar os elementos âncoras, mas somente para o IE5/Mac, escondendo dos outros navegadores a declação float para as âncoras. Primeiro declaramos float para as âncoras — todos os navegadores ‘enxergam’. A seguir usamos Commented Backslash Hack para anular a declaração para todos os navegadores menos para o IE5/Mac:

  #header a {
    float:left;
    display:block;
    background:url(”right.gif”)
      no-repeat right top;
    padding:5px 15px 4px 6px;
    text-decoration:none;
    font-weight:bold;
    color:#765;
    }
  /* Commented Backslash Hack
     esconde para o IE5-Mac \*/
  #header a {float:none;}
  /* End IE5-Mac hack */

Agora os navegadores IE5/Mac renderizam corretamente as abas conforme nosso Exemplo 6. Nada mudou para os demais navegadores. Notar que o IE5.0/Mac teve uma quantidade grande de bugs corrigidos com a versão… (NT: Retirei da tradução um parágrafo onde o autor à epoca em que escreveu este artigo — ano 2003 — considera as versões já em desuso dos navegadores IE5.x/Mac.)

Variantes

Acabamos de ver a técnica das portas corrediças para abas de navegação que utiliza texto puro e é marcada com o elemento lista e estilizada com algumas regras CSS. O carregamento é rápido, a manutenção é facil e o texto pode ser redimensionado sem quebrar o layout. Precisamos falar mais alguma coisa sobre a grande flexibilidade desta técnica para criar qualquer tipo de sofisticadas navegação com abas?

O limite é a sua imaginação. Neste exemplo final mostramos uma das possibilidades. Não devemos deixar que um exemplo limite nossa criatividade.

Por outro lado abas não precisam ser simétricas e quadradas. Criei uma Versão 2 para nossa navegação com abas, retirando a aperência 3-D e usando cores sólidas, vértices angulares, e um canto esquerdo maior e mais elaborado. Podemos até mesmo inverter a ordem das imagens esquerda e direita das abas como mostrado na Versão 2. Com um planejamento cuidadoso e uma manipulação de imagens inteligente a borda inferior das abas pode ser substituida por outros efeitos combinando o fundo conforme mostro na minha deco Versão 3. Se o seu navegador permite que você alterne as folhas de estilo da página renderizada então neste este arquivo mestre que eu construi você poderá visualizar as três versões alterando as folhas de estilo disponíveis.

Outros efeitos podem ser conseguidos. Neste exemplo eu usei efeito de troca de cores de texto na ação do ponteiro sobre a aba, mas você poderá colocar efeitos de rollover de imagens bem interessantes.Uma vez que dois elementos aninhados sejam colocados na marcação, nós poderemos começar a pensar em imagens de fundo para obter efeitos que talvez nem imaginamos ainda. Nos usamos a técnica das Portas corrediças para criar uma navegação horizontal com abas, contudo ela poderá ser usada em muitas outras situações. E você? O que você seria capaz de criar com esta técnica?

A propriedade background define as características (os valores na regra CSS) do fundo dos elementos HTML.

As propriedades background são as listadas abaixo:

• background-color…………… cor do fundo;
• background-image…………. imagem de fundo;
• background-repeat…………. maneira como a imagem de fundo é posicionada;
• background-attachment…….se a imagem de fundo “rola” ou não com a tela;
• background-position…………como e onde a imagem de fundo é posicionada;
• background……………………maneira abreviada para todas as propriedades;

Valores válidos para as propriedades do fundo

• background-color:
  1. código hexadecimal: #FFFFFF
  2. código rgb: rgb(255,235,0)
  3. nome da cor: red, blue, green…etc
  4. transparente: transparent
• background-image:
  1. URL: url(caminho/imagem.gif)
• background-repeat:
  1. não repete: no-repeat
  2. repete vertical e horizontal: repeat
  3. repete vertical: repeat-y
  4. repete horizontal: repeat-x
• background-attachment:
  1. imagem fixa na tela: fixed
  2. imagem “rola” com a tela: scroll
• background-position:
  1. x-pos y-pos
  2. x-% y-%
  3. top left
  4. top center
  5. top right
  6. center left
  7. center center
  8. center right
  9. bottom left
  10. bottom center
  11. bottom right

Vamos a seguir analisar cada uma delas detalhadamente através de exemplos práticos.

Como estudar e entender os exemplos

Para cada propriedade apresento as regras CSS para um ou mais elementos HTML e definidas dentro de uma folha de estilos incorporada, bem como um trecho do documento HTML onde se aplicam as regras.

A seguir mostro o efeito que a regra produz. Observe a regra e o efeito e para melhor fixar seu aprendizado reproduza o código no seu editor, mude os valores e veja o resultado no browser. Esta é a melhor e mais rápida maneira de você aprender CSS. Bons estudos! E faça ótimo proveito dos tutoriais.

A cor do fundo

<html>
<head>
<style type="text/css">
<!--
body {background-color: #CCFFFF;} /*azul claro*/
h2 {background-color: #FF0000;}   /* vermelho */
p {background-color: #00FF00;}    /*  verde   */
-->
</style>
</head>
<body>
<h2>Estude CSS</h2>
<p>Com CSS você controla melhor seu layout</p>
</body>
</html>

Este é o efeito da folha de estilo acima:

A imagem de fundo

<html>
<head>
<style type="text/css">
<!--
body { background-image: url("/images/css.gif");}
-->
</style>
</head>
<body>
</body>
</html>

Este é o efeito da folha de estilo acima:

Repetir verticalmente a imagem de fundo

<html>
<head>
<style type="text/css">
<!--
body {
background-image: url("/images/css.gif");
background-repeat: repeat-y;
}
-->
</style>
</head>
<body>
</body>
</html>

Este é o efeito da folha de estilo acima:

Repetir horizontalmente a imagem de fundo

<html>
<head>
style type="text/css">
<!--
body {
background-image: url("/images/css.gif");
background-repeat: repeat-x;
}
-->
</style
</head>
<body>
</body>
</html>

Este é o efeito da folha de estilo acima:

Posicionar uma imagem de fundo

<html>
<head>
<style type="text/css">
<!--
body {
background-image: url("/images/css.gif");
background-repeat: no-repeat;
background-position: 200px 70px;
}
-->
</style>
</head>
<body>
</body>
</html>

Este é o efeito da folha de estilo acima: a imagem esta posicionada a 200 pixel da margem esquerda e 70 pixel da margem superior

Ajustar uma imagem de fundo fixa, que não “rola” com a tela.

<html>
<head>
<style type="text/css">
<!--
body {
background-image: url("/images/css.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}
-->
</style>
</head>
<body>
</body>
</html>

Este é o efeito da aplicação das regras CSS acima em uma página web.

Todas as propriedades do fundo em uma declaração única

Esta é a maneira abreviada de você escrever uma regra para as propriedades do fundo.

Você pode declarar todas ou algumas das propriedades estudadas em uma regra única:

A sintaxe geral é esta:
background: color image repeat attachment position;
em qualquer ordem, podendo ser omitido um mais valores.

Veja o exemplo abaixo:

<html>
<head>>
<style type="text/css">/>
<!--
body {
background: #00FF00 url("css.gif")
no-repeat fixed 200px 70px;
}
-->
</style>
</head>

São usados em CSS, para adicionar efeitos a um seletor, ou a parte de um seletor.

A sintaxe dos pseudo-elementos:

seletor:pseudo-elemento {propriedade: valor;}

As classes em CSS podem também ser usadas com pseudo-elementos.

Esta regra permite que você defina diferentes efeitos para pseudo-elementos localizados em diferentes lugares em uma mesma página.

seletor.classe:pseudo-elemento {propriedade: valor;}

O pseudo-elemento first-letter

O pseudo-elemento first-letter é usado para obter um efeito especial na primeira letra de um texto.

<html>
<head>
<style type="text/css">
p {
font-size: 12pt
}
p:first-letter {
font-size:300%;
}
</style>
</head>
<body>
<p>Este texto destina-se a demonstrar o
 pseudo-elemento first-letter, bla…bla…bla…
bla… bla…bla…bla…bla…bla… bla…bla…
bla… bla…bla…bla…bla…bla… bla…bla…</p>
</body>
</html>

O código acima produzirá esse efeito

O pseudo-elemento first-letter somente pode ser usado com elementos de bloco.

Propriedades aplicáveis ao pseudo-elemento first-letter

• font - propriedades de letras
• color - propriedades de cores
• background - propriedades de fundo
• margin - propriedades de margens
• padding - propriedades de espaçamentos
• border - propriedades de bordas
• text-decoration
• vertical-align (somente para “float: none)
• text-transform
• line-height
• float
• clear

O pseudo-elemento first-line

O pseudo-elemento first-line é usado para obter um efeito especial na primeira linha de um texto.

<html>
<head>
<style type="text/css">
p {
font-size: 12pt
}
p:first-line {
color: #0000FF;
font-variant: small-caps;
}
</style>
</head>
<body>
<p>Um texto qualquer dentro
 de um pseudo-elemento first-line,
 para um  efeito especial na primeira linha</p>
</body>
</html>

O código acima produzirá esse efeito

No exemplo acima toda a primeira linha sofre o efeito da definição do pseudo-elemento. A “quebra” da linha depente do tamanho da janela do browser.

O pseudo-elemento first-line somente pode ser usado com elementos de bloco.

Propriedades aplicáveis ao pseudo-elemento first-line

• font - propriedades de letras
• color - propriedades de cores
• background - propriedades de fundo
• word-spacing - espaçamento entre palavras
• letter-spacing - espaçamento entre letras
• text-decoration
• vertical-align
• text-transform
• line-height
• clear

Pseudo-elementos em classes CSS

Pseudo-elementos podem ser combinados com classes CSS

<html>
<head>
<style type="text/css">
p.combinado:first-letter {
color: #FF0000;
font-size:xx-large;
}
</style>
</head>
<body>
<p class=”combinado”> Uma frase com efeito
 especial combinado </p>
</body>
</html>

O código acima produzirá esse efeito

A propriedade para margens, define um valor para espessura das margens dos elementos HTML.

As propriedades para margens são as listadas abaixo:

• margin-top……….define a margem superior;
• margin-right……..define a margem direita;
• margin-bottom…….define a margem inferior;
• margin-left………define a margem esquerda;
• margin…………..maneira abreviada para todas as margens

Valores válidos para a propriedade margin

1. auto: valor default da margem
2. length: uma medida reconhecida pelas CSS (px, pt, em, cm, …)
3. %: porcentagem da largura do elemento pai

Vamos a seguir analisar cada uma delas detalhadamente através de exemplos práticos.

Como estudar e entender os exemplos

Para cada propriedade apresento as regras CSS válidas para um elemento HTML, e, definidas dentro de uma folha de estilos incorporada, bem como um trecho do documento HTML onde se aplicam as regras.

A seguir mostro o efeito que a regra produz. Observe a regra e o efeito e para melhor fixar seu aprendizado reproduza o código no seu editor, mude os valores e veja o resultado no browser. Bons estudos! E faça ótimo proveito do tutorial.

Nota: Coloquei um fundo cinza mais escuro nos exemplos para facilitar a visualização.

margin-top…a margem superior

<html>
<head>
<style type="text/css">
<!--
p {margin-top: 2cm;}
-->
</style>
</head>
<body>
<p>Uma margem superior de 2cm</p>
</body>
</html>

Este é o efeito da folha de estilo acima:

margin-right…a margem direita

<html>
<head>
<style type="text/css">
<!--
p {margin-right: 300px;}
-->
</style>
</head>
<body>
<p>Uma margem direita de 300px nesta
 frase mais longa dentro do parágrafo</p>
</body>
</html>

Este é o efeito da folha de estilo acima:

margin-bottom…a margem inferior

<html>
<head>
<style type="text/css">
<!--
p {margin-bottom: 2em;}
-->
</style>
</head>
<body>
<p>Uma margem inferior de 2.0em</p>
</body>
</html>

Este é o efeito da folha de estilo acima:

margin-left…a margem esquerda

<html>
<head>
<style type="text/css">
<!--
p {margin-left: 10%;}
-->
</style>
</head>
<body>
<p>Uma margem esquerda de 10%</p>
</body>
</html>

Este é o efeito da folha de estilo acima:

margin…todas as quatro margens em uma declaração única

A propriedade da margin permitem que você controle o espaçamento em volta dos elementos HTML. São válidos valores negativos para margem, com o objetivo de sobrepor elementos.

Em declaração única a ordem das margens é: superior, direita, inferior e esquerda.

Há quatro modos de se declarar abreviadamente as margens:

1. margin: valor1……as 4 margens terão valor1;
2. margin: valor1 valor2……margem superior e inferior terão valor1 - margem direita e esquerda terão valor2
3. margin: valor1 valor2 valor3……margem superior terá valor1 - margem direita e esquerda terão valor2 - margem inferior terá valor3
4. margin: valor1 valor2 valor3 valor4….margens superior, direita, inferior e esquerda nesta ordem.

<html>
<head>
<style type="text/css">
<!--
p {margin: 20px 40px 80px 5px;}
-->
</style>
</head>
<body>
<p>Uma margem superior de 20px, uma margem direita de 40px,
uma margem inferior de 80px e uma margem esquerda de 5px</p>
</body>
</html>

Este é o efeito da folha de estilo acima:

Que tem como resultado:

Isto é um parágrafo com várias palavras de cor verde. É muito fácil.

Estilo definido para uma etiqueta

Deste modo podemos fazer com que toda uma etiqueta mostre um estilo determinado. Por exemplo, podemos definir um parágrafo inteiro de cor vermelha e outro de cor azul. Para isso, utilizamos o atributo style, que é admitido por todas as etiquetas do HTML (sempre e quando dispormos de um navegador compatível com CSS).

Que tem como resultado:

Isto é um parágrafo de cor vermelha.

Isto é um parágrafo de cor azul.

Estilo definido em uma parte da página

Com a etiqueta <DIV> podemos definir seções de uma página e aplicar estilos com o atributo style, ou seja, podemos definir estilos de uma só vez a todo um bloco da página.

Que tem como resultado:

(baseado em MSDN e WC3 CSS)

Font | Color and Background | Text | Box | Classification | Positioning | Printing | Pseudo

- Font Properties

- Color and Background Properties

* Starting in CSS2, the properties indicated above are inherited.

- Text Properties

- Box Properties

- Classification Properties

- Positioning Properties

- Printing Properties

- Pseudo Classes