Estilos CSS

mar 10
O box model
icon1 felipe | icon2 Elementos do CSS | icon4 03 10th, 2010| icon3No Comments »

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: Read the rest of this entry »

mar 8

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). Read the rest of this entry »

mar 5
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. Read the rest of this entry »

mar 1

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;} Read the rest of this entry »

fev 24
CSS Background
icon1 felipe | icon2 Elementos do CSS | icon4 02 24th, 2010| icon3No Comments »

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; Read the rest of this entry »
fev 22

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: Read the rest of this entry »

fev 8

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. Read the rest of this entry »

fev 3
  • 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 Read the rest of this entry »
fev 1
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.

jan 29

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 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. Read the rest of this entry »

« Previous Entries