LMMD-MUS LMMD-MUS LMMD-MUS

home HOME

HTML Básico
HTML INÍCIO
HTML & WWW
HTML Introdução
HTML Elementos
HTML Tags Básicas
HTML Formatação
HTML Entidades
HTML Links
HTML Frames
HTML Tabelas
HTML Listas
HTML Formulários
HTML Imagens
HTML Background

HTML Avançado
HTML Layout
HTML Fontes
HTML Porque 4.0?
HTML Estilos
HTML Head
HTML Meta
HTML URLs
HTML Scripts
HTML Webserver

Estilos em HTML

Anterior Próxima

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


Anterior Próxima