Postado Qua 28 Jul 2010 - 10:27
Lição 2: 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:
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:
Expandir
esta imagemReduzir
esta imagem Ver
em tamanho real
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:
Exemplo
Método
2: Interno (a tag style)
Uma outra maneira de
aplicar CSS e pelo uso da tag
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:
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:
Expandir
esta imagemReduzir
esta imagem Ver
em tamanho real
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:
Esta é
uma página com fundo vermelho
Método
2: Interno (a tag style)
Uma outra maneira de
aplicar CSS e pelo uso da tag
Esta é
uma página com fundo vermelho