You are on page 1of 4

Lio 12: Layout (CSS) - HTML.

net

1 de 4

http://pt-br.html.net/tutorials/html/lesson12.php

Lio 12: Layout (CSS)


No seria timo se voc pudesse dar sua pgina o layout que ela merece?

Claro! mas como fao isto?


Para o layout da sua pgina use Cascading Style Sheets (CSS) - Folhas de Estilo em Cascata. Nesta
lio voc ter uma breve introduo s CSS. Depois voc poder aprender CSS desde o incio no nosso
tutorial CSS. Assim, considere esta lio apenas um aperitivo.
CSS a melhor metade do HTML. Codificando, no h melhor parceria: HTML responsvel pelo
trabalho pesado (a estrutura), enquanto CSS d o toque de elegncia (layout).
Como mostrado na Lio 7, CSS pode ser adicionado com uso do atributo style. Por exemplo, voc
pode definir o tipo e o tamanho da fonte em um pargrafo:
Exemplo 1:

<p style="font-size:20px;">Este pargrafo em tamanho de fonte igual a 20px</p>


<p style="font-family:courier;">Este pargrafo em fonte Courier</p>
<p style="font-size:20px; font-family:courier">Este pargrafo em fonte Courier e tamanho 20px</p>

Ser renderizado no navegador assim:

Este pargrafo em tamanho de fonte igual a 20px


Este pargrafo em fonte Courier

Este pargrafo em fonte Courier e tamanho 20px

No exemplo acima usamos o atributo style para definir o tipo de fonte usado (com a propriedade
font-family) e o tamanho da fonte (com a propriedade font-size). Notar que no ltimo pargrafo do
exemplo definimos tanto o tipo como o tamanho da fonte separados por um ponto e vrgula.

Est parecendo que h uma grande quantidade de trabalho a


executar
Uma das funcionalidades mais inteligentes das CSS a possibilidade de controlar o layout de um
arquivo central. Em lugar de se usar o atributo style em cada tag, voc pode dizer ao navegador como
deve ser o layout de todos os textos em uma pgina:
Exemplo 2:

<html>

04/02/2014 16:38

Lio 12: Layout (CSS) - HTML.net

http://pt-br.html.net/tutorials/html/lesson12.php

<head>
<title>Minha primeira pgina CSS</title>
<style type="text/css">
h1 {font-size: 30px; font-family: arial}
h2 {font-size: 15px; font-family: courier}
p {font-size: 8px; font-family: times new roman}
</style>
</head>
<body>
<h1>Minha primeira pgina CSS</h1>
<h2>Bem vindo minha primeira pgina CSS</h2>
<p>Aqui voc ver como funciona CSS</p>
</body>
</html>

Ver exemplo
No exemplo acima inserimos as CSS na seo head do documento, assim ela se aplica pgina
inteira . Para fazer isto use a tag <style type="text/css"> que informa ao navegador que voc est
digitando CSS.
No exemplo, todos os cabealhos da pgina sero em fonte Arial e tamanho 30px. Todos os subttulos sero
em fonte Courier tamanho 15. E, todos os textos dos pargrafos sero em fonte Times New Roman tamanho
8.
Uma outra opo a de digitar as CSS em um documento separado. Com as CSS em um documento
separado voc pode gerenciar o layout de muitas pginas ao mesmo tempo. Muito inteligente, pois
voc pode mudar de uma s vez, o tipo ou o tamanho da fonte de todo o site, quer ele tenha centenas ou
milhares de pginas. Ns no nos aprofundaremos em CSS agora, mas voc pode aprender tudo, no futuro,
em nosso tutorial CSS.

O que mais posso fazer com CSS?


CSS faz muito mais do que definir tipos e tamanhos de fontes. Por exemplo, voc pode adicionar cores e
fundos. A seguir alguns exemplos para voc praticar:

<p style="color:green;">Texto verde</p>


<h1 style="background-color: blue;">Cabealho com fundo azul</h1>
<body style="background-image: url('http://www.html.net/logo.png');">

Tente inserir estes cdigos em algumas das suas pginas - experimente as duas formas de inserir,
tanto como mostrado acima como colocando as CSS na seo head do documento.

CSS no nada mais do que cores e tipos de fontes?


Alm de cores, tipos de fontes, etc., CSS pode ser usado para controlar a configurao e a
apresentao da pgina (margens, flutuaes, alinhamentos, larguras, alturas, etc.) Controlando os
diferentes elementos com CSS voc ser capaz de criar layouts elegantes e precisos.
Exemplo 3:

2 de 4

04/02/2014 16:38

Lio 12: Layout (CSS) - HTML.net

3 de 4

http://pt-br.html.net/tutorials/html/lesson12.php

<p style="padding:25px;border:1px solid red;">Eu amo CSS</p>

Ser renderizado no navegador assim:

Eu amo CSS

Com a propriedade float um elemento poder "flutuar" esquerda ou direita. O exemplo seguinte ilustra
este princpio:
Exemplo 4:

<img src="bill.jpg" alt="Bill Gates" style= "float:left;" />


<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat...</p>

Ser renderizado no navegador assim:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat...

No exemplo mostrado, um elemento (a imagem) flutua esquerda e o outro elemento (o texto) preenche o
espao deixado direita.
Com a propriedade position, voc pode posicionar um elemento em qualquer lugar da pgina, com
preciso:
Exemplo 5:
<img src="bill.jpg" alt="Bill Gates" style="position:absolute;bottom:50px;right:10px;" />

Ver exemplo
No exemplo mostrado a imagem foi posicionada a 50 pixels da borda inferior e a 10 pixels da borda direita
do navegador. Voc pode colocar em qualquer lugar na pgina. Tente voc mesmo. Fcil e legal, eh?

04/02/2014 16:38

Lio 12: Layout (CSS) - HTML.net

4 de 4

http://pt-br.html.net/tutorials/html/lesson12.php

Legal sim. Mas, fcil?


Voc no aprende CSS em 10 minutos. E como foi dito acima, nesta lio voc teve apenas uma breve
introduo s CSS. No futuro aprenda mais no nosso Tutorial CSS.
Por enquanto concentre-se no HTML, e passe para a prxima lio onde voc aprender como publicar seu
website na Internet para que o mundo todo o veja!

<< Lio 11: Mais tabelas

Lio 13: Uploading pginas >>

04/02/2014 16:38