sfarinas: Tutorial CSS parte de 5 ate 7 final

sfarinas

Tudo de Games psp e Midia. Utilize pesquisar blog e encontre A maioria dos arquivos estao na rede do emule.

quarta-feira, 19 de novembro de 2008

Tutorial CSS parte de 5 ate 7 final

Passo 5: Estilizando os links


O menu de navegação mais se parece com uma lista do que com um menu. Vamos estilizá-lo. Comecemos removendo os marcadores de lista e deslocando o menu mais para a esquerda, para o lugar agora ocupado pelos marcadores. Vamos acresentar um fundo branco para os itens da lista e também um quadradro preto. (Por que fazer isto? Simplesmente porque isto é possível, sem qualquer motivo adicional.)
Até agora ainda não definimos as cores para os links, então esta é a hora: azul para links não visitados e púrpura para links já visitados:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Minha primeira página CSS</title>
<style type="text/css">
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
</style>
</head>
<body>
[etc.]

Passo 6: Adicionando uma linha horizontal

A última regra para estilização que escreveremos em nosso exemplo será para adicionar uma linha horizontal separando o texto principal da assinatura ao pé da página. Usaremos a propriedade 'border-top' para colocar uma linha horizontal pontilhada acima do elemento

: 




<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>
<head>
<title>Minha primeira página CSS</title>

<style type="text/css">
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted }
</style>
</head>

<body>
[etc.]

Passo 7: Colocando a folha de estilos em um arquivo separado 




body {


padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted }

Escolha “Save As…” no menu File, e salve com o nome “meuestilo.css” no mesmo

diretório/pasta onde está o arquivo minhapagina.html.

Agora volte para o arquivo HTML. Apague tudo que estiver dentro do elemento <style> incluindo <style> e </style> e coloque no lugar um elemento <link> como mostrado abaixo:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Minha primeira página CSS</title>
<link rel="stylesheet" href="meuestilo.css">
</head>
<body>
[etc.]

Postado por sfarinas às 06:52
Marcadores:

Nenhum comentário:

Postar um comentário

Estarei sempre aqui!

Assinar: Postar comentários (Atom)