Estilos CSS

Como funciona CSS?

felipe — Fri, 30 Jul 2010 16:21:22 +0000

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:

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
  
  

    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

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 “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:

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 e . Conforme mostrado abaixo:


  
    Meu documento
    

  
  
  ...

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.

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


  
    Meu documento
    

  
  
    Minha primeira folha de estilos

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!

CSS em pequenas partes da página

felipe — Mon, 26 Jul 2010 13:19:58 +0000

Para definir estilos em seções reduzidas de uma página se utiliza a etiqueta . 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:

Isto é um parágrafo com várias palavras de cor verde. é muito fácil.

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

Isto é um parágrafo de cor vermelha.

Isto é um parágrafo de cor azul.

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

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.

Estas etiquetas vão em azul e negrito

Continuamos dentro do DIV, por isso permanecem os estilos.

Que tem como resultado:

Estas etiquetas vão em azul e negrito

Continuamos dentro do DIV, por isso permanecem os estilos.

O que é CSS?

felipe — Mon, 19 Jul 2010 16:54:03 +0000

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 é uma linguagem para estilos que define o layout de documentos HTML. Por exemplo, CSS controla fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, posicionamentos e muito mais. Aguarde e você verá!

HTML pode ser (in)devidamente usado para definir o layout de websites. Contudo CSS proporciona mais opções e é mais preciso e sofisticado. CSS é suportado por todos os navegadores atuais.

Depois de estudar algumas poucas lições deste tutorial, você estará em condições de projetar uma folha de estilos, usando CSS para dar um grande visual ao seu website.

Qual é a diferença entre CSS e HTML?

HTML é usado para estruturar conteúdos. CSS é usado para formatar conteúdos estruturados.

OK, isto soa um tanto técnico e confuso. Mas, por favor continue lendo. Tudo fará sentido em breve.

Em tempos passados quando a Madonna era virgem e um sujeito chamado Tim Berners Lee inventou a World Wide Web, a linguagem HTML era usada somente para estruturar textos. Um autor podia marcar seus textos definindo “isto é um cabeçalho ” ou “isto é um parágrafo” usando tags HTML tais como

À medida que a Web ganhava popularidade, os designers começavam a sentir a necessidade de encontrar meios de construir layout para os documentos online. Para suprir estas necessidades os fabricantes de navegadores (àquela época a Netscape e a Microsoft) inventaram novas tags HTML tais como, por exemplo a tag que se diferenciava das tags originais do HTML pelo fato de destinar-se à layout — e não à estrutura.

Isto adicionalmente teve o efeito de disvirtuar o emprego de tags inicialmente projetadas para estrutura como por exemplo a tag

que passaram a ser empregadas para layout. Muitas destas novas tags para layout como a tag eram suportadas somente por um determinado tipo de navegador. A frase “Você precisa do navegador X para visualizar esta página” tornou-se comum nos websites.

CSS foi inventada para solucionar esta situação, colocando à disposição dos web designers meios sofisticados de projetar layouts suportados por todos os navegadores. E ao mesmo tempo a separação dos estilos de apresentação da marcação dos conteúdos torna a manutenção dos sites bem mais fácil.

Quais são os benefícios do uso de CSS?

CSS é uma revolução no mundo do web design. Os benefícios concretos do uso de CSS incluem:

* controle do layout de vários documentos a partir de uma simples folha de estilos;
* maior precisão no controle do layout;
* aplicação de diferentes layouts para servir diferentes mídias (tela, impressora, etc.);
* emprego de variadas, sofisticadas e avançadas técnicas de desenvolvimento.

Box Model: Altura e largura

felipe — Fri, 16 Jul 2010 17:18:23 +0000

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 um box dentro do qual podemos digitar um texto:

div.box {
width: 200px;
border: 1px solid black;
background: orange;
}

Atribuindo altura [height]

No exemplo acima a altura será determinada pelo conteúdo inserido no box. Você pode definir a altura de um elemento com a propriedade height. Como exemplo, vamos fazer a altura do box anterior igual a 500px:

div.box {
height: 500px;
width: 200px;
border: 1px solid black;
background: orange;
}

Valores válidos para as propriedades do fundo

felipe — Mon, 12 Jul 2010 17:59:39 +0000

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

Agrupando elementos (span e div)

felipe — Mon, 05 Jul 2010 17:15:54 +0000

Os elementos e

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 e

no que se refere a sua vital importância para as CSS.

Agrupando com
Agrupando com

Agrupando com

O elemento é um elemento neutro e que não adiciona qualquer tipo de semântica ao documento. Contudo, pode ser usado pelas CSS para adicionar efeitos visuais a partes específicas do texto no seu documento.

Um exemplo deste uso é mostrado na citação abaixo de autoria de Benjamin Franklin:


Dormir cedo e acordar cedo faz o homem
saudável, rico e sábio.

Vamos supor que queremos enfatizar na cor vermelha os benefícios apontados por Mr. Franklin pelo fato de não se passar o dia dormindo. Para isto marcamos os benefícios com . A cada span atribuímos uma class, e estilizamos na folha de estilos:


Dormir cedo e acordar cedo faz o homem
saudável,
rico
e sábio.

A folha de estilos:


span.benefit {
	color:red;
}

É claro que você pode usar id para estilizar o elemento . Mas, como você deve estar lembrado, deverá usar uma única id para cada um os três elementos , conforme foi explicado na lição anterior.

Agrupando com

Enquanto é usado dentro de um elemento nível de bloco como vimos no exemplo anterior,

é usado para agrupar um ou mais elementos nível de bloco.

Diferenças à parte, o agrupamento com

funciona mais ou menos da mesma maneira. Vamos ver um exemplo tomando duas listas de presidentes dos Estados Unidos agrupados segundo suas filiações políticas:




Franklin D. Roosevelt
Harry S. Truman
John F. Kennedy
Lyndon B. Johnson
Jimmy Carter
Bill Clinton





Dwight D. Eisenhower
Richard Nixon
Gerald Ford
Ronald Reagan
George Bush
George W. Bush

E na folha de estilos, podemos agrupar a estilização da mesma maneira como fizemos no exemplo acima:


#democrats {
	background:blue;
}

#republicans {
	background:red;
}

Barra de navegação com CSS

felipe — Mon, 28 Jun 2010 17:14:54 +0000

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.

uma linha —-> um parágrafo HTML;

três links —-> três tags a HTML;

…e, nasce o primeiro embrião da nossa barra de navegação o código HTML:


HOME
DWFORUM