Lição 12 - Layout (CSS) - HTML PDF

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
<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
3 de 4
<p style="padding:25px;border:1px solid red;">Eu amo CSS</p>
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>
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
4 de 4
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

Lição 12 - Layout (CSS) - HTML PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lição 12 - Layout (CSS) - HTML PDF

Uploaded by

Copyright:

Available Formats

Lio 12: Layout (CSS) - HTML.

Lio 12: Layout (CSS)

Claro! mas como fao isto?

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

Ser renderizado no navegador assim:

Este pargrafo em tamanho de fonte igual a 20px

Este pargrafo em fonte Courier e tamanho 20px

Est parecendo que h uma grande quantidade de trabalho a

Lio 12: Layout (CSS) - HTML.net

O que mais posso fazer com CSS?

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

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

Lio 12: Layout (CSS) - HTML.net

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

Ser renderizado no navegador assim:

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

Ser renderizado no navegador assim:

Lio 12: Layout (CSS) - HTML.net

Legal sim. Mas, fcil?

<< Lio 11: Mais tabelas

Lio 13: Uploading pginas >>

You might also like