http://www.estiloscss.com.br O site do webmaster - Tebleless, estilos CSS e muito mais Mon, 13 Sep 2010 17:02:46 +0000 http://backend.userland.com/rss092 en Agrupando elementos com uso de classe Vamos supor que temos duas listas de links para diferentes tipos de uvas usadas na produção de vinho branco e de vinho tinto. O código HTML conforme mostrado abaixo: <p>Uvas para vinho branco:</p> <ul> <li><a href="ri.htm">Riesling</a></li> <li><a href="ch.htm">Chardonnay</a></li> <li><a href="pb.htm">Pinot Blanc</a></li> </ul> <p>Uvas para vinho tinto:</p> <ul> <li><a href="cs.htm">Cabernet Sauvignon</a></li> <li><a href="me.htm">Merlot</a></li> <li><a href="pn.htm">Pinot Noir</a></li> </ul> Queremos ... http://www.estiloscss.com.br/elementos-do-css/identificando-e-agrupando-elementos/ 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 ... http://www.estiloscss.com.br/elementos-do-css/o-box-model/ 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 ... http://www.estiloscss.com.br/elementos-do-css/vinculando-folhas-de-estilo-a-documentos/ 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 ... http://www.estiloscss.com.br/elementos-do-css/portas-corredicas-com-css/ 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;} ... http://www.estiloscss.com.br/elementos-do-css/pseudo-elements/ 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 ... http://www.estiloscss.com.br/dicas/css-links/ 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 ... http://www.estiloscss.com.br/elementos-do-css/css-background/ 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 auto: ... http://www.estiloscss.com.br/dicas/o-elemento-margin/ 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á ... http://www.estiloscss.com.br/dicas/como-funciona-css/ 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 ... http://www.estiloscss.com.br/dicas/css-em-pequenas-partes-da-pagina/