http://www.estiloscss.com.br O site do webmaster - Tebleless, estilos CSS e muito mais Fri, 30 Jul 2010 16:21:22 +0000 http://backend.userland.com/rss092 en 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/ O que é CSS? Talvez você já tenha ouvido falar em CSS, mas não saiba o que significa exatamente. Nesta lição você saberá o que é e para que serve CSS. CSS é a abreviatura para Cascading Style Sheets. — Folha de Estilos em Cascata O que eu posso fazer com CSS? CSS é ... http://www.estiloscss.com.br/dicas/o-que-e-css/ Box Model: Altura e largura Até agora ainda não fizemos qualquer consideração sobre as dimensões dos elementos com que trabalhamos. Nesta lição veremos como é fácil atribuir uma altura e uma largura para um elemento. width height Atribuindo largura [width] A propriedade width destina-se a definir a largura de um elemento. O exemplo a seguir constrói ... http://www.estiloscss.com.br/dicas/box-model-altura-e-largura/ background-color: código hexadecimal: #FFFFFF código rgb: rgb(255,235,0) nome da cor: red, blue, green...etc transparente: transparent background-image: URL: url(caminho/imagem.gif) background-repeat: não repete: no-repeat repete vertical e horizontal: repeat repete vertical: repeat-y repete horizontal: repeat-x background-attachment: imagem fixa na tela: fixed imagem "rola" com a tela: scroll background-position: x-pos y-pos x-% y-% top left top center top right center left center center center right bottom left bottom center bottom right http://www.estiloscss.com.br/elementos-do-css/valores-validos-para-as-propriedades-do-fundo/ Os elementos <span> e <div> são usados para agrupar e estruturar um documento e são freqüentemente usados em conjunto com os atributos class e id. Nesta lição veremos com detalhes o uso dos elementos HTML <span> e <div> no que se refere a sua vital importância para as CSS. Agrupando com ... http://www.estiloscss.com.br/guias/agrupando-elementos-span-e-div/ O código da barra de navegação 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 ... http://www.estiloscss.com.br/dicas/barra-de-navegacao-com-css/ Fontes Nesta lição estudaremos as fontes e como aplicá-las usando CSS. Veremos como criar situações para que determinada fonte seja visualizada pelo usuário mesmo não estando instalada em seu sistema operacional. Descreveremos as seguintes propriedades CSS: * font-family * font-style * font-variant * font-weight * font-size * font Família de fontes [font-family] A propriedade font-family é usada para definir ... http://www.estiloscss.com.br/elementos-do-css/fontes/ Guia rápido de referência para estilos CSS - Font Properties Propriedades Valores Válidos Exemplo Herdado font-family [font name or type] font-family: Verdana, Arial; Y font-style normal | italic font-style:italic; Y font-variant normal | small-caps font-variant:small-caps; Y font-weight normal | bold font-weight:bold; Y font-size [ xx-large | x-large | large | medium | small | x-small | xx-small ] | [ larger | smaller ] | percentage | length font-size:12pt; Y font [ font-style || font-variant || font-weight ... http://www.estiloscss.com.br/guias/guia-de-referencia-css/ Esse artigo é uma tradução de alguns trechos que explica o Nifty Corners criado pelo Alessandro Fulciniti. O Nifty Corners é uma combinação de CSS e Java script para gerar cantos arredondados sem a necessidade de imagens. A técnica é composta de quatro elementos essenciais e que juntos pesam menos de 6kb: 1. Arquivo CSS ... http://www.estiloscss.com.br/dicas/cantos-arredondados-com-css-e-java-script-sem-a-utilizacao-de-imagens/