Estilos CSS http://www.estiloscss.com.br O site do webmaster - Tebleless, estilos CSS e muito mais Fri, 12 Mar 2010 16:34:22 +0000 http://wordpress.org/?v=2.7 en hourly 1 Web-standards e validação http://www.estiloscss.com.br/dicas/web-standards-e-validacao/ http://www.estiloscss.com.br/dicas/web-standards-e-validacao/#comments Fri, 12 Mar 2010 16:34:22 +0000 felipe http://www.estiloscss.com.br/?p=109 cssis

W3C é a sigla para World Wide Web Consortium, uma organização independente que gerencia as normas para codificação na Internet (isto é, HTML, CSS, XML e outros). Microsoft, Fundação Mozilla e muitas outras organizações são membros do W3C e formam um consenso sobre o futuro desenvolvimento de normas.

Se você tem alguma experiência com web design, provavelmente sabe que há uma grande diferença na maneira como diferentes navegadores renderizam uma página. É frustante e requer um consumo de muito tempo, criar uma página que possa ser visualizada consistentemente no Mozilla, Internet Explorer, Opera e no restante dos navegadores existentes.

A idéia da normatização é criar um consenso e encontrar um denominador comum para uso de tecnologias para a Web. Isto significa que seguindo as normas, um desenvolvedor terá a certeza de que sua criação será tratada de maneira apropriada em diferentes plataformas. Assim, nós recomendamos que você se beneficie do trabalho desenvolvido pelo W3C e valide sua CSS para estar em conformidade com as normas.

Validador CSS

Para facilitar a verificação aos preceitos das normas CSS, o W3C desenvolveu um validador que faz uma verificação da folha de estilos e retorna um relatório com os eventuais erros e avisos caso sua CSS não valide.

Para facilitar a validação da sua folha de estilos você poderá submetê-la ao validador aqui mesmo nesta página. Na caixa de texto abaixo, substitua a URL existente pela URL da sua folha de estilos e clique no botão para validar. Você será informado pelo site do W3C se há erros na sua folha de estilos.

]]> http://www.estiloscss.com.br/dicas/web-standards-e-validacao/feed/ O box model http://www.estiloscss.com.br/elementos-do-css/o-box-model/ http://www.estiloscss.com.br/elementos-do-css/o-box-model/#comments Wed, 10 Mar 2010 13:16:05 +0000 felipe http://www.estiloscss.com.br/?p=24 O box model

O box model (modelo das caixas) em CSS, descreve os boxes (as caixas) geradas pelos elementos HTML. O box model, detalha ainda, as opções de ajuste de margens, bordas, padding e conteúdo para cada elemento. Abaixo apresentamos um diagrama representando a estrutura de construção do box model:

O box model em CSS


A ilustração acima é teórica. Vamos explicá-la na prática tomando como base um cabeçalho e um texto. O HTML para nosso exemplo (o texto foi retirado da Declaração Universal dos Direitos Humanos e está no original em inglês) é o mostrado abaixo:

<h1>Article 1:</h1>

<p>All human beings are born free
and equal in dignity and rights.
They are endowed with reason and conscience
and should act towards one another in a
spirit of brotherhood</p>

Definindo estilos para cores e fontes o exemplo pode ser apresentado como a seguir:

O exemplo contém dois elementos: <h1> e <p>. O box model para os dois elementos é mostrado a seguir:

Embora possa parecer um pouco complicado, a ilustração mostra como cada um dos elementos é contido em um box (uma caixa). Boxes que podem ser ajustados e controlados via CSS.

Continua no Proximo Tutorial.

]]> http://www.estiloscss.com.br/elementos-do-css/o-box-model/feed/ Vinculando folhas de estilo a documentos http://www.estiloscss.com.br/elementos-do-css/vinculando-folhas-de-estilo-a-documentos/ http://www.estiloscss.com.br/elementos-do-css/vinculando-folhas-de-estilo-a-documentos/#comments Mon, 08 Mar 2010 12:20:23 +0000 felipe http://www.estiloscss.com.br/?p=21 Folha de estilo externa

Uma folha de estilo é dita externa, quando as regras CSS estão declaradas em um documento a parte do documento HTML. A folha de estilo é um arquivo separado do arquivo html e que tem a extensão .css

Uma folha de estilo externa é ideal para ser aplicada a várias páginas. Com uma folha de estilo externa , você pode mudar a aparência de um site inteiro mudando um arquivo apenas (o arquivo da folha de estilo).

O arquivo css da folha de estilo externa deverá ser lincado ou importado ao documento HTML, dentro da tag <head> do documento. A sintaxe geral para lincar uma folha de estilo chamada estilo.css é mostrada abaixo.

<head>
...........
<link rel="stylesheet" type="text/css" href="estilo.css">
..........
</head>

A sintaxe geral para importar uma folha de estilo chamada estilo.css é mostrada abaixo:

<head>
...........
<style type="text/css">
@import url("estilo.css");
</style>
..........
</head>

O browser lerá as regras de estilo do arquivo estilo.css, e formatará o documento de acordo com elas.

Uma folha de estilo externa pode ser escrita em qualquer editor de texto. O arquivo não deve conter nenhuma tag HTML. As folhas de estilo devem ser “salvas” com uma extensão .css

Folha de estilo incorporada ou interna

Uma folha de estilo é dita incorporada ou interna, quando as regras CSS estão declaradas no próprio documento HTML.

Uma folha de estilo incorporada ou interna, é ideal para ser aplicada a uma única página. Com uma folha de estilo incorporada ou interna, você pode mudar a aparência de somente um documento, aquele onde a folha de estilo esta incorporada.

As regras de estilo, válidas para o documento, são declaradas na seção <head> do documento com a tag de estilo <style>, conforme sintaxe mostrada abaixo:

<head>
...........
<style type="text/css">
<!--
body {
background: #000000;
url("imagens/minhaimagem.gif");
}
h3 {
color: #FF0000;
}
p {
margin-left: 15px;
padding:1.5em;
}
-->
</style>
...........
</head>

O browser lerá agora as regras de estilo na própria página, e formatará o documento de acordo com elas.

Nota: Um browser ignora normalmente as tags desconhecidas. Isto significa que um browser velho que não suporte estilos, ignorará a tag <style>, mas o conteúdo da tag será mostrado na tela. É possível impedir que um browser velho mostre o conteúdo da tag, “escondendo-o” através do uso da marcação de comentário do HTML.

Observe a inclusão dos símbolos <!-- (abre comentário)  --> (fecha comentário) no código acima.

Folha de estilo inline

Uma folha de estilo é dita inline, quando as regras CSS estão declaradas dentro da tag do elemento HTML.

Um estilo inline só se aplica a um elemento HTML. Ele perde muitas das vantagens de folhas de estilo pois mistura o conteúdo com a apresentação. Use este método excepcionalmente, como quando quiser aplicar um estilo a uma única ocorrência de um elemento.

A sintaxe para aplicar estilo inline é mostrada a seguir:


<p style="color:#000000; margin: 5px;">
Aqui um parágrafo de cor preta e com 5px nas 4  margens.
</p>

Folhas múltiplas de estilo

Se alguma propriedade for definida para um mesmo elemento em folhas de estilo diferentes, entrará em ação, o EFEITO CASCATA e prevalecerão os valores da folha de estilo mais específica.

Suponha, uma folha de estilo externa com as seguintes propriedades para o seletor h2:

h2 {
color: #FFCC00;
text-align: center;
font: italic 9pt Verdana, Sans-serif;
}

e, uma folha de estilo interna com as seguintes propriedades para o seletor h2:

h2 {
color: #FFCC00;
text-align: center;
font: italic 10pt Verdana, Sans-serif;
}

Se ambas as páginas estiverem vinculadas ao documento, como há um conflito no tamanho das letras para <h2>, prevalecerá a folha interna e a letra de <h2> terá o tamanho igual a 10 pt.

]]> http://www.estiloscss.com.br/elementos-do-css/vinculando-folhas-de-estilo-a-documentos/feed/ Portas Corrediças com CSS http://www.estiloscss.com.br/elementos-do-css/portas-corredicas-com-css/ http://www.estiloscss.com.br/elementos-do-css/portas-corredicas-com-css/#comments Fri, 05 Mar 2010 13:40:49 +0000 felipe http://www.estiloscss.com.br/?p=8 Uma das vantagens das CSS raramente explorada é a possibilidade de se criar imagens de fundo em camadas, e fazer com que elas deslizem umas sobre as outras criando efeitos bem interessantes. As CSS2 permitem que somente uma imagem de fundo possa ser colocada em um elemento HTML. Para muitos dos componentes de uma interface, temos a nossa disposição vários elementos para a marcação estrutural.

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:

Tres abas retangulares

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

Tres abas com cantos arredondados

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:

Diagrama mostrando porta fechada porta aberta

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:

Diagrama mostrando a falta de preenchimento descrita no texto

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:

Diagrama mostrando as imagens aumentadas

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

Diagrama mostrando o preenchimento com as imagens aumentadas

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:

As duas imagens com seus efeitos de cantos e sombras

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:

Imagem gradiente superior e borda em baixo

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:

Imagem aumentada de duas abas mostrando a falha e a correcao

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?

]]> http://www.estiloscss.com.br/elementos-do-css/portas-corredicas-com-css/feed/ Pseudo-Elements http://www.estiloscss.com.br/elementos-do-css/pseudo-elements/ http://www.estiloscss.com.br/elementos-do-css/pseudo-elements/#comments Mon, 01 Mar 2010 12:47:58 +0000 felipe http://www.estiloscss.com.br/?p=6 Sintaxe

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

Este texto destina-se a demosnstrar o pseudo-elemento first-letter, bla…bla…bla… bla… bla…bla…bla…bla…bla… bla…bla… bla… bla…bla…bla…bla…bla… bla…bla… bla… bla…bla…bla…bla…bla… bla…bla… bla… bla…bla…bla…bla…bla… bla…bla…

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

Um texto qualquer dentro de um pseudo-elemento first-line, para um efeito especial na primeira linha. Notar a mudança de cor e o tipo de letra small-caps na primeira linha.

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

Uma frase com efeito especial combinado
]]> http://www.estiloscss.com.br/elementos-do-css/pseudo-elements/feed/ CSS Links http://www.estiloscss.com.br/dicas/css-links/ http://www.estiloscss.com.br/dicas/css-links/#comments Fri, 26 Feb 2010 14:52:40 +0000 felipe http://www.estiloscss.com.br/?p=100 CSS Links

CSS possibilita definir uma variedade infinita de layouts e efeitos para um link ou um conjunto de links.
O limite é a sua imaginação!

Um link visitado, não visitado, ativo ou no estado hover (quando você passa o mouse sobre ele) pode assumir aspectos (cores, fundos, etc…) diferentes através de CSS.

Abordarei neste tutorial as técnicas básicas de manipular os quatro seletores de link.
Pseudo classes

Os efeitos em links são possíveis através de declarações de regras de estilo para as pseudo classes do elemento do HTML.

As pseudo classes são usadas em CSS, para adicionar efeitos diferentes a alguns seletores, ou a uma instância de alguns seletores.
Sintaxe

A sintaxe das pseudo classes:

seletor:pseudo classe {propriedade: valor}

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

Esta regra permite que você defina diferentes efeitos para links localizados em diferentes lugares em uma mesma página. No último item deste tutorial “Diferentes estilos de links em uma mesma página web” veremos este efeito.

seletor.class:pseudo-class {propriedade: valor}
Os “seletores:pseudo classe” de links

São quatro as pseudo classes dos links:

1. a:link……..define o estilo do link no estado inicial;
2. a:visited…define o estilo do link visitado;
3. a:hover…..define o estilo do link quando passa-se o mouse sobre ele;
4. a:active….define o estilo do link ativo (o que foi “clicado”).

Vamos a seguir analisar cada um deles detalhadamente através de exemplos práticos.

Como estudar e entender os exemplos

Para cada seletor apresento as regras CSS definidas dentro de uma folha de estilos incorporada, e a seguir os efeitos em um link, onde se aplicam as regras.

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.
Grande flexibilidade

É perfeitamente possível com CSS definir-se um estilo diferente para cada um dos quatro seletores, de forma semelhante como é definido para qualquer texto HTML.
Prioridade nas declarações para links

É importante a ordem de definição das regras para os estados dos links. Lembre-se de que pelo “efeito cascata”, as regras mais próximas do elemento prevalecem sobre as mais distantes. Assim, por exemplo: se voce define a: hover ANTES de a: visited, esta prevalecerá sobre a: hover e em consequência: O link visitado pela primeira vez assumirá a regra definida em a: visited e a partir de então a: hover não mais funcionará naquele link pois a: visited prevalecerá sobre a: hover.

Qual é a ordem normal é lógica das declarações? É simples concluir ! Senão vejamos:

1.) a: link é o estado inicial dos links;
a:link deverá ser a primeira declaração;
2.) a: active deverá acontecer mesmo
em links já visitados;
a: active deverá ser declarado depois
de a:visited;
1.) a: hover não precisa funcionar em a:active;
a:active pode ser declarado depois de a:hover.

Em consequência a ordem das declarações deve ser:
a:link
a:visited
a:hover
a:active

Exemplos de efeitos em links

A seguir exemplos dos efeitos mais comuns e simples aplicando CSS aos seletores de links

1-) Removendo o sublinhado do link

Típicamente, por default os links são sublinhados e na cor azul.

Um efeito muito comum em páginas web é o de se retirar o sublinhado do link normal, mudar a cor e fazer “aparecer” o sublinhado, quando o mouse é passado sobre ele.

Esse efeito obtém-se facilmente com CSS. Abaixo a regra para esse simples efeito:


–>


2-) Adicionando sublinhado e sobrelinhado

Este efeito semelhante ao anterior, consiste em um sobrelinhado adicional no link hover.

Abaixo a regra para esse efeito:


–>

3-) Acrescentando um fundo

Este efeito simulando um “rollover” simples, consiste em acrescentar uma cor de fundo no link hover.

Abaixo a regra para esse efeito:


–>

4-) Link com um fundo de uma cor que muda no link hover

Este efeito também simula um “rollover” simples, consiste em mudar a cor de fundo no link hover.

Abaixo a regra para esse efeito:


–>

5-) Link que muda o tamanho da letra no link hover

Neste efeito há uma mudança no tamanho da letra (em geral para maior) no link hover.

Abaixo a regra para esse efeito:


–>

Diferentes estilos de links em uma mesma página web

É possível definir diferentes estilos para os 4 seletores de links para serem usados em uma mesma página.

Isso consegue-se utilizando os seletores de contexto que consiste em adicionar uma classe aos seletores.

Assim cada conjunto dos 4 seletores de uma classe assumem o comportamento daquela classe e você pode definir quantas classes quiser.

Por Exemplo:

 <html>
  <head>
  <style type="text/css">
  a.classe1:link {text-decoration: none}
  a.classe1:visited {text-decoration: none}
  a.classe1:hover {
  text-decoration: underline;
  color: #FF0000;
  }
  a.classe1:active {text-decoration: none}

  a.classe2:link {
  text-decoration: underline overline
  }
  a.classe2:visited {
  text-decoration: underline overline
  }
  a.classe2:hover {text-decoration: underline;
  color: #00FF00;
  }
  a.classe2:active {
  text-decoration: underline overline
  }
  </style>
  </head>
  <body>
  <a href="http://www.maujor.com" class="classe1">
  ESTE É O LINK DA classe1
  </a>

  <a href="http://www.maujor.com" class="classe2">
  ESTE É O LINK DA classe2
  </a>
]]> http://www.estiloscss.com.br/dicas/css-links/feed/ CSS Background http://www.estiloscss.com.br/elementos-do-css/css-background/ http://www.estiloscss.com.br/elementos-do-css/css-background/#comments Wed, 24 Feb 2010 12:07:29 +0000 felipe http://www.estiloscss.com.br/?p=7 O fundo dos elementos HTML

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:

Estude CSS

Com CSS você controla melhor seu layout

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>
]]> http://www.estiloscss.com.br/elementos-do-css/css-background/feed/ O Elemento Margin http://www.estiloscss.com.br/dicas/o-elemento-margin/ http://www.estiloscss.com.br/dicas/o-elemento-margin/#comments Mon, 22 Feb 2010 16:34:14 +0000 felipe http://www.estiloscss.com.br/?p=94 As margens nos elementos HTML

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:

Uma margem superior de 2cm

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:

Uma margem direita de 300px nesta frase mais longa dentro do parágrafo

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:

Uma margem inferior de 2.0em

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:

Uma margem esquerda de 10%

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:

Uma margem superior de 20px, uma margem direita de 40px, uma margem inferior de 80px e uma margem esquerda de 5px

]]> http://www.estiloscss.com.br/dicas/o-elemento-margin/feed/ Como funciona CSS? http://www.estiloscss.com.br/dicas/como-funciona-css/ http://www.estiloscss.com.br/dicas/como-funciona-css/#comments Fri, 19 Feb 2010 16:03:22 +0000 felipe http://www.estiloscss.com.br/?p=65 Como funciona CSS?

Nesta lição você aprenderá a desenvolver sua primeira folha de estilos. Você verá o básico sobre o modelo CSS e que código é necessário para usar CSS em um documento HTML.

Muitas das propriedades usadas em Cascading Style Sheets (CSS) são semelhantes àquelas do HTML. Assim, se você está acostumado a usar HTML para layout irá reconhecer muitos dos códigos que usaremos. Vamos dar uma olhada em um exemplo concreto.

A sintaxe básica das CSS

Suponha que desejamos uma cor de fundo vermelha para a página web:

Usando HTML podemos fazer assim:


<body bgcolor="#FF0000">

Com CSS o mesmo resultado será obtido assim:


body {background-color: #FF0000;}

Como você pode notar os códigos HTML e CSS são mais ou menos parecidos. O exemplo acima serve também para demonstrar o fundamento do modelo CSS:

Figura explicando seletor, propriedade e valor

Mas, onde colocar o código CSS? É isto que veremos a seguir.

Aplicando CSS a um documento HTML

Você pode aplicar CSS a um documento de três maneiras distintas. Os três métodos de aplicação estão exemplificados a seguir. Recomendamos que você foque no terceiro método, ou seja o método externo.

Método 1: In-line (o atributo style)

Uma maneira de aplicar CSS é pelo uso do atributo style do HTML. Tomando como base o exemplo mostrado anteriormente a cor vermelha para o fundo da página pode ser aplicada conforme mostrado a seguir:

<html>
  <head>
    <title>Exemplo</title>
  </head>
  <body style="background-color: #FF0000;">

    <p>Esta é uma página com fundo vermelho</p>
  </body>
</html>

Método 2: Interno (a tag style)

Uma outra maneira de aplicar CSS e pelo uso da tag <style> do HTML. Como mostrado a seguir:

<html>
  <head>
    <title>Exemplo</title>
    <style type="text/css">

      body {background-color: #FF0000;}
    </style>
  </head>
  <body>
    <p>Esta é uma página com fundo vermelho</p>

  </body>
</html>

Método 3: Externo (link para uma folha de estilos)

O método recomendado é o de lincar para uma folha de estilos externa. Usaremos este método nos exemplos deste tutorial.

Uma folha de estilos externa é um simples arquivo de texto com a extensão .css. Tal como com qualquer outro tipo de arquivo você pode colocar uma folha de estilos tanto no servidor como no disco rígido.

Vamos supor, por exemplo, que sua folha de estilos tenha sido nomeada de style.css e está localizada no diretório style. Tal situação está mostrada a seguir:

O diretório "style" contendo os arquivos "style.css"

O “truque” é criar um link no documento HTML (default.htm) para a folha de estilos (style.css). O link é criado em uma simples linha de código HTML como mostrado a seguir:

<link rel="stylesheet" type="text/css" href="style/style.css" />

Notar que o caminho para a folha de estilos é indicado no atributo href.

Esta linha de código deve ser inserida na seção header do documento HTML, isto é, entre as tags <head> e </head>. Conforme mostrado abaixo:

<html>
  <head>
    <title>Meu documento</title>
    <link rel="stylesheet" type="text/css" href="style/style.css" />

  </head>
  <body>
  ...

Este link informa ao navegador para usar o arquivo CSS na renderização e apresentação do layout do documento HTML.
A coisa realmente inteligente disto é que vários documentos HTML podem lincar para uma mesma folha de estilos. Em outras palavras isto significa que um simples arquivo será capaz de controlar a apresentação de muitos documentos HTML.

Figura mostrando vários documentos HTML lincados a uma folha de estilos

Esta técnica pode economizar uma grande quantidade de trabalho. Se por exemplo, você quiser trocar a cor do fundo de um site com 100 páginas, a folha de estilos evita que você edite manualmente uma a uma as páginas para fazer a mudança nos 100 documentos HTML. Usando CSS a mudança se fará em uns poucos segundos trocando-se a cor em uma folha de estilos central.

Vamos praticar o que aprendemos.

Faça você mesmo

Abra o Notepad (ou qualquer outro editor de texto que queira usar) e crie dois arquivos — um arquivo HTML e um arquivo CSS — com os seguintes conteúdos:

default.htm

<html>
  <head>
    <title>Meu documento</title>
    <link rel="stylesheet" type="text/css" href="style.css" />

  </head>
  <body>
    <h1>Minha primeira folha de estilos</h1>
  </body>
</html>

style.css

body {
  background-color: #FF0000;
}

Salve os dois arquivos no mesmo diretório. Lembre-se de salvar os arquivos com a extensão apropriada (”.css” e “.htm”)

Abra default.htm no seu navegador e veja uma página com o fundo vermelho. Parabéns! Você construiu sua primeira folha de estilos!

]]> http://www.estiloscss.com.br/dicas/como-funciona-css/feed/ CSS em pequenas partes da página http://www.estiloscss.com.br/dicas/css-em-pequenas-partes-da-pagina/ http://www.estiloscss.com.br/dicas/css-em-pequenas-partes-da-pagina/#comments Mon, 15 Feb 2010 13:20:58 +0000 felipe http://www.estiloscss.com.br/?p=4 Para definir estilos em seções reduzidas de uma página se utiliza a etiqueta <SPAN>. Com seu atributo style indicamos em sintaxe CSS as características de estilos. Vemos com um exemplo, colocaremos um parágrafo onde vamos visualizar determinadas palavras na cor verde.

Que tem como resultado:

<p>
Isto é um parágrafo com várias palavras <SPAN style=”color:green”>de cor verde</SPAN>. é muito fácil.
</p>

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).

<p style=”color:#990000″>
Isto é um parágrafo de cor vermelha.
</p>
<p style=”color:#000099″>
Isto é um parágrafo de cor azul.
</p>

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.

<div style=”color:#000099; font-weight:bold”>
<h3>Estas etiquetas vão em <i>azul e negrito</i></h3>
<p>
Continuamos dentro do DIV, por isso permanecem os estilos.
</p>
</div>

Que tem como resultado:

Estas etiquetas vão em azul e negrito

Continuamos dentro do DIV, por isso permanecem os estilos.

]]> http://www.estiloscss.com.br/dicas/css-em-pequenas-partes-da-pagina/feed/