Painel de Usuario
Mensagens: 0
-
Alterar
-
Ver
-
Tópicos e mensagens
Menu
- Planeta Tutorial
- Ajuda e suporte
- Serviços para usuários
- Entretenimento
- Game zone
- Outros serviços
Procurar
Translate
Últimos assuntos
Estatísticas
Temos 26 usuários registradosO último membro registrado é kaironborges
Os nossos membros postaram um total de 144 mensagens em 142 assuntos
Radio Jovem Pan
Relogio
Visitou
Lição 12: Layout (CSS)
Página 1 de 1
Lição 12: Layout (CSS)
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:
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:
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
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:
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:
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:
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...
Será renderizado no navegador assim:[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
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 espaço deixado à direita.
Com a propriedade position, você pode posicionar um elemento em qualquer lugar da página, com precisão:
Exemplo 5:
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 página. Tente você mesmo. Fácil e legal, eh?
[b]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!
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:
[size=18]
Este parágrafo em tamanho de fonte igual a 20px
[/size]
[font=Courier New]Este parágrafo em fonte Courier[/font]
[font=Courier New][size=18]
[font=Courier New]Este parágrafo em fonte Courier e tamanho 20px[/font]
[/size][/font]
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:
[b][color=#cc0000]
h1 {font-size: 30px; font-family: arial}
h2 {font-size: 15px; font-family: courier}
p {font-size: 8px; font-family: times new roman}
[/color][/b]
[b]Minha primeira página CSS[/b]
[b]Bem vindo à minha primeira página CSS[/b]
Aqui você verá como funciona CSS
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
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:
Texto verde
[b]Cabeçalho com fundo azul[/b]
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:
Eu amo CSS
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]bill.jpg[/img]
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...
Será renderizado no navegador assim:[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
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 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:
[/b][img]bill.jpg[/img]
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 página. Tente você mesmo. Fácil e legal, eh?
[b]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!
konan- Uplouder
- Respeito às regras :
Mensagens : 59
Reputação : 0
Data de inscrição : 13/06/2011
Idade : 32
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
Ter 28 Jun 2011 - 17:31 por Admin
» Efeito Glow
Seg 27 Jun 2011 - 17:39 por Admin
» Efeito Brilho Suave nas fotos
Seg 27 Jun 2011 - 17:33 por Admin
» Arte geométrica com Photoshop
Seg 27 Jun 2011 - 17:31 por Admin
» Efeito Varinha Mágica no Photoshop
Sáb 25 Jun 2011 - 15:20 por konan
» Montagem multicolorida com tintas e efeitos diversos
Sáb 25 Jun 2011 - 15:18 por konan
» Linhas luminescentes no Photoshop
Sáb 25 Jun 2011 - 15:17 por konan
» Segredos sobre design de site
Sex 24 Jun 2011 - 23:00 por konan
» Hardware para iniciantes, parte 5
Sex 24 Jun 2011 - 22:41 por konan