Estilos em HTML
Com a HTML 4.0 toda a formatação pode ser transferida do documento HTML para uma folha de estilo separada.
Exemplos
Estilos em HTML Este exemplo demonstra como formatar um documento HTML com a informação de estilo adicionada à seção <head>.
Vínculo não sublinhado Este exemplo demonstra como fazer um vínculo não sublinhado, usando um atributo de estilo.
Vínculo para uma folha de estilo externa Este exemplo demonstra como usar a tag <link> para vincular com uma folha de estilo externa.
Como Usar Estilos
Quando um navegador lê uma folha de estilo, ele formata o documento de acordo com ela. Há três maneiras de inserir uma folha de estilo:
Folha de Estilo Externa
Uma folha de estilo externa é ideal quando o estilo é aplicado em muitas páginas. Com uma folha de estilo externa, você pode mudar a aparência de um sítio Web inteiro pela mudança de um arquivo. Cada página deve vincular-se à folha de estilo usando a tag <link>. A tag <link> vai dentro da seção head.
<head>
<link rel="stylesheet" type="text/css"
href="meuestilo.css">
</head> |
Folha de Estilo Interna
Uma folha de estilo interna deve ser usada quando um documento específico tem um estilo único. Você define estilos internos na seção head com a tag <style>.
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head> |
Estilos Local (inline)
Um estilo local (inline) deve ser usado quando um estilo único deve ser aplicado a uma única ocorrência de um elemento.
Para usar estilos locais (inline) você usa o atributo de estilo na tag relevante. O atributo de estilo pode conter qualquer propriedade CSS. O exemplo mostra como mudar a cor e a margem esquerda de um parágrafo:
<p style="color: red; margin-left: 20px">
Este é um parágrafo
</p> |
Para aprender mais sobre estilos, visite o tutorial de CSS (em inglês).
Tags de Estilo
Tag |
Descrição |
<style> |
Define uma definição de estilo |
<link> |
Define uma referência a um recurso |
<div> |
Define uma seção num documento |
<span> |
Define uma seção num documento |
<font> |
Depsaprovada. Use estilos em vez |
<basefont> |
Desaprovada. Use estilos
em vez |
<center> |
Desaprovada. Use estilos
em vez |
|