Lição 12_ Layout (CSS) - HTML.pdf

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. Nestalio voc ter uma breve introduo s CSS. Depois voc poder aprender CSS desde o incio no nossotutorial CSS. Assim, considere esta lio apenas um aperitivo.

CSS a melhor metade do HTML. Codificando, no h melhor parceria: HTML responsvel pelotrabalho 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, vocpode definir o tipo e o tamanho da fonte em um pargrafo:

Exemplo 1:

Este pargrafo em tamanho de fonte igual a 20pxEste pargrafo em fonte CourierEste pargrafo em fonte Courier e tamanho 20px

Ser renderizado no navegador assim:

Este pargrafo em tamanho de fonte igual a 20pxEste 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 propriedadefont-family) e o tamanho da fonte (com a propriedade font-size). Notar que no ltimo pargrafo doexemplo definimos tanto o tipo como o tamanho da fonte separados por um ponto e vrgula.

Est parecendo que h uma grande quantidade de trabalho aexecutarUma das funcionalidades mais inteligentes das CSS a possibilidade de controlar o layout de umarquivo central. Em lugar de se usar o atributo style em cada tag, voc pode dizer ao navegador comodeve ser o layout de todos os textos em uma pgina:

Exemplo 2:

Lio 12: Layout (CSS) - HTML.net http://pt-br.html.net/tutorials/html/lesson12.php

1 de 4 04/02/2014 16:38

Minha primeira pgina CSS

h1 {font-size: 30px; font-family: arial} h2 {font-size: 15px; font-family: courier} p {font-size: 8px; font-family: times new roman}

Minha primeira pgina CSS Bem vindo minha primeira pgina CSS Aqui voc ver como funciona CSS

Ver exemplo

No exemplo acima inserimos as CSS na seo head do documento, assim ela se aplica pginainteira . Para fazer isto use a tag que informa ao navegador que voc estdigitando CSS.

No exemplo, todos os cabealhos da pgina sero em fonte Arial e tamanho 30px. Todos os subttulos seroem fonte Courier tamanho 15. E, todos os textos dos pargrafos sero em fonte Times New Roman tamanho8.

Uma outra opo a de digitar as CSS em um documento separado. Com as CSS em um documentoseparado voc pode gerenciar o layout de muitas pginas ao mesmo tempo. Muito inteligente, poisvoc pode mudar de uma s vez, o tipo ou o tamanho da fonte de todo o site, quer ele tenha centenas oumilhares 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 efundos. A seguir alguns exemplos para voc praticar:

Texto verde

Cabealho com fundo azul

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 aapresentao da pgina (margens, flutuaes, alinhamentos, larguras, alturas, etc.) Controlando osdiferentes elementos com CSS voc ser capaz de criar layouts elegantes e precisos.

Exemplo 3:


2 de 4 04/02/2014 16:38

Eu amo CSS


Eu amo CSS

Com a propriedade float um elemento poder "flutuar" esquerda ou direita. O exemplo seguinte ilustraeste princpio:

Exemplo 4:

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


Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismodtincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quisnostrud 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 oespao deixado direita.

Com a propriedade position, voc pode posicionar um elemento em qualquer lugar da pgina, compreciso:

Exemplo 5:

Ver exemplo

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


3 de 4 04/02/2014 16:38

>

Legal sim. Mas, fcil?Voc no aprende CSS em 10 minutos. E como foi dito acima, nesta lio voc teve apenas uma breveintroduo 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 seuwebsite na Internet para que o mundo todo o veja!


4 de 4 04/02/2014 16:38

Documents

Lição 12_ Layout (CSS) - HTML.pdf