Iniciando em CSS - Parte 1


Autor/fonte: Waspedia
E-mail/Url: http://waspedia.zetainternet.com/wiki/Iniciando_em_HTML_e_CSS



Digg del.icio.us

Vamos agora adicionar algum estilo à página. A primeira coisa que faremos será colocar uma imagem de fundo. Escolhi a seguinte imagem, cujo endereço é http://images.lipsum.com/images/lorembg.gif.

Dentro da tag style, vamos adicionar algumas linhas:

<style>
body {
background: url(http://images.lipsum.com/images/lorembg.gif);
font-family: Verdana;
font-size: 14px;
color: green;
}
</style>

Analisando linha por linha:

1. body { é o seletor, ele seleciona a tag body e aplica as propriedades;
2. background: url(http://images.lipsum.com/images/lorembg.gif); adiciona aquela imagem de fundo que falamos;
3. font-family: Verdana; determina a fonte, Verdana;
4. font-size: 14px; Tamanho da fonte;
5. color: green; Cor da Fonte;
6. } fecha o seletor.

Você pode usar qualquer nome de tag como seletor, ele então irá selecionar todas as tags da página e aplicar as propriedades.

A seguir veremos como mudar a cor dos links e remover o sublinhado nativo delas:

<style>
a {
color: red;
text-decoration: none;
}
</style>

Simples assim!

Vamos ver como está ficando nossa página:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Uma Página com CSS e HTML</title>
<style>
body {
background: url(http://images.lipsum.com/images/lorembg.gif);
font-family: Verdana;
font-size: 14px;
color: green;
}
a {
color: red;
text-decoration: none;
}
</style>
</head>
<body>

<h1>Lorem Ipsum</h1>

<ul>
<li><a href="Página">http://www.lipsum.com">Página Principal</a></li>
<li><a href="WaSPediahttp://waspedia.zetainternet.com">WaSPedia</a></li>
<li><a href="W3Chttp://w3.org">W3C</a></li>
</ul>

<p><strong>Lorem ipsum</strong> dolor sit amet, <em>consectetuer adipiscing elit</em>. Aenean et justo vel dui hendrerit imperdiet. Sed cursus, dolor ut condimentum fermentum, nibh odio adipiscing tellus, vitae egestas augue mi ac neque. Suspendisse placerat, ipsum in adipiscing accumsan, justo dolor sodales erat, ac placerat ipsum quam non nisi. Duis enim libero, suscipit sed, semper ut, pulvinar sit amet, dolor. Nulla tempus, velit sit amet tristique posuere, diam risus ultricies lacus, eget imperdiet eros nulla nec tortor. Donec convallis felis at nunc. Mauris quis diam vel tellus consequat consectetuer. Nulla eget arcu. Vestibulum fermentum. Pellentesque ligula nisi, mattis vitae, commodo a, semper vitae, velit. Suspendisse sapien risus, mollis ac, pharetra sit amet, ornare ac, nulla. Nam mattis, pede eget pretium condimentum, dui mauris sodales tellus, at pharetra enim urna placerat magna. Integer feugiat. Maecenas in sem sed tellus vestibulum volutpat. Pellentesque faucibus eros et nunc aliquam scelerisque. Nullam congue elit vel nibh. Proin porttitor dignissim odio. Suspendisse molestie mattis neque. Duis ut nulla nec ligula nonummy porttitor.</p>

</body>
</html>

Copie e cole o código acima em um editor para testar. Sugerimos o SquareFree (http://squarefree.com/htmledit), é online e gratuito.

Dica: remova o conteúdo da tag <style> para comparar!




Enviado por xKuRt em 04/10/2006 às 19:38


Avaliação

Esta publicação ainda não foi avaliada!


Avaliar:


A avaliação de publicações é restrita a membros cadastrados e logados no nosso site.



Comentários

AvatarEnviado por xKuRt em 24/01/2009 às 07:43

Reativado!

--
Trabalho com desenvolvimento Web. Visite meu site - http://www.sandro.eti.br

AvatarEnviado por aasssilva em 23/01/2009 às 21:31

os links acima estao desativados por falta de acesso amigos! e agora???

--
@@@@@@@@@@@AaSSsilVa&&&&&&&&&&&&


Envio de comentário:




  

Terça, 29 de Julho de 2014




Top 5 membros

Últimos membros online

  • 1em 28/07 às 21:39
  • xKuRtem 27/07 às 15:13
  • JCanecaem 26/07 às 19:02

Últimos membros cadastrados



Capa do livro
Regras Do Jogo: Fundamentos Do Design De Jogos - Volume 2


Capa do livro
Grafos: Conceitos, Algorítmos e Aplicações


Capa do livro
Java Para Iniciantes





Hostnet

IMD