Staffer Group BR™

Fórum interativo totalmente gratuito!


 VisualizaçõesPermissão deste fórum:
Não podes responder a tópicos


CurtirDiretório deste fórum:
Fóruns » Principal » • » Tutoriais » Tutoriais sobre programação

#1
 D'Leandro™

D'Leandro™
Fundador
Olá, Não seria ótimo se você pudesse dar à sua página o layout que ela merece?

Claro! mas como faço isto?
Para o layout da sua página use Cascading Style Sheets (CSS) - Folhas de Estilo em Cascata. Nesta lição você terá uma breve introdução às CSS. Depois você poderá aprender CSS desde o início no nosso tutorial CSS. Assim, considere esta lição apenas um aperitivo.

CSS é a melhor metade do HTML. Codificando, não há melhor parceria: HTML é responsável pelo trabalho pesado (a estrutura), enquanto CSS dá o toque de elegância (layout).

Como mostrado na Lição 7, CSS pode ser adicionado com uso do atributo style. Por exemplo, você pode definir o tipo e o tamanho da fonte em um parágrafo:

Exemplo 1:
Código:
<p style="font-size:20px;">Este parágrafo em tamanho de fonte igual a 20px</p>
<p style="font-family:courier;">Este parágrafo em fonte Courier</p>
<p style="font-size:20px; font-family:courier">Este parágrafo em fonte Courier e tamanho 20px</p>

Será renderizado no navegador assim:

Este parágrafo em tamanho de fonte igual a 20px


Este parágrafo em fonte Courier


Este parágrafo 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 parágrafo do exemplo definimos tanto o tipo como o tamanho da fonte separados por um ponto e vírgula.

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 página:

Exemplo 2:
Código:
<html>
 
  <head>
  <title>Minha primeira página 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 página CSS</h1>
  <h2>Bem vindo à minha primeira página CSS</h2>
  <p>Aqui você verá como funciona CSS</p>
  </body>
 
</html>
Veja um exemplo.
No exemplo acima inserimos as CSS na seção head do documento, assim ela se aplica à página inteira . Para fazer isto use a tag
Código:
<style type="text/css">
que informa ao navegador que você está digitando CSS.

No exemplo, todos os cabeçalhos da página serão em fonte Arial e tamanho 30px. Todos os subtítulos serão em fonte Courier tamanho 15. E, todos os textos dos parágrafos serão em fonte Times New Roman tamanho 8.

Uma outra opção é a de digitar as CSS em um documento separado. Com as CSS em um documento separado você pode gerenciar o layout de muitas páginas 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 páginas. Nós não 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:
Código:
<p style="color:green;">Texto verde</p>
 
<h1 style="background-color: blue;">Cabeçalho com fundo azul</h1>
 
<body style="background-image: url('http://www.html.net/logo.png');">


CSS não é nada mais do que cores e tipos de fontes?
Além de cores, tipos de fontes, etc., CSS pode ser usado para controlar a configuração e a apresentação da página (margens, flutuações, alinhamentos, larguras, alturas, etc.) Controlando os diferentes elementos com CSS você será capaz de criar layouts elegantes e precisos.

Exemplo 3:
Código:
<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 princípio:

Exemplo 4:
Código:
<img src="http://r15.imgfast.net/users/1517/19/87/28/avatars/1-10.png" alt="D'Leandro™" style= "float:left;" /><p>Voce está gostando de nosso tutoriais?<br>Então comente este tópico dizendo com detalhes oque achou de cada um dos efeitos e das lições ensinadas aqui!<br>De qualquer forma gostariamos de agradecer pela sua preferencia e vontade de aprender...</p>

Será renderizado no navegador assim:
D'Leandro™

Voce está gostando de nosso tutoriais?
Então comente este tópico dizendo com detalhes oque achou de cada um dos efeitos e das lições ensinadas aqui!
De qualquer forma gostariamos de agradecer pela sua preferencia e vontade de aprender...



No exemplo mostrado, um elemento (a imagem) flutua à esquerda e o outro elemento (o texto) preenche o espaço deixado à direita.

Com a propriedade position, você pode posicionar um elemento em qualquer lugar da página, com precisão:

Exemplo 5:
Código:
<img src="bill.jpg" alt="Bill Gates" style="position:absolute;bottom:50px;right:10px;" />
Veja o exemplo.

Legal sim. Mas, fácil?
Você não aprende CSS em 10 minutos. E como foi dito acima, nesta lição você teve apenas uma breve introdução às CSS. No futuro aprenda mais no nosso Tutorial CSS.

Por enquanto concentre-se no HTML, e passe para a próxima lição onde você aprenderá como publicar seu website na Internet para que o mundo todo o veja!