01/04/2013

Conhecendo o CSS - Aplicando CSS a um documento HTML

16:53  Tempo  No comments


Você pode aplicar CSS a um documento de três maneiras distintas. Os três métodos de aplicação estão exemplificados a seguir.

 Interno (a tag style)
Quando estamos usando estilos internos, nós simplesmente colocamos o nosso CSS dentro das tags <head></head> do nosso código (x) HTML. Abaixo temos um exemplo:

 <html>
<head>
<title></title>
<style type="text/css">
"Aqui você coloca o CSS"
</style>
</head>
<body>
</body>
</html>

 Nesse método cada página (x) HTML terá seu respectivo código CSS para a formatação da página. Esse método é ideal para aqueles sites de uma página ou para quem está iniciando no assunto.
Estilos In-line
Os estilos in-line são definidos ao longo do elemento (x)HTML que você
denominou: <p style="color: #ffffff;"> Esse parágrafo terá a cor branca</p>
As desvantagens de se usar estilos in-line é que você só poderá fazer alterações
nos elementos que você formatou.
Utilizando estilos externamente

 O que muda aqui é que você criará um arquivo com a extensão .css e colocará em
seu (x) HTML uma chamada para esse arquivo. Ficando da seguinte forma:

 <link rel="stylesheet" type="text/css" href="nome_do_arquivo.css" />

 Ou também utilizando o método @import:

 <style type="text/css">@import url(nome_do_arquivo.css)</style>

 O nosso código (x)HTML ficaria da seguinte forma:

 <html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="nome_do_arquivo.css" />
</head>
<body>
</body>
</html>

 Agora com @import:

 <html>
<head>
<title></title>
<style type="text/css">@import url(nome_do_arquivo.css)</style>
</head>
<body>
</body>
</html>

 A vantagem de se usar CSS externamente é que quando você precisar ou quiser
fazer algumas mudanças em seu site, basta fazer as alterações no arquivo CSS que é
ocorrida uma alteração global em todo o seu site.
Por exemplo, se você tem 100 páginas com um título <h2> em azul, caso queira
alterar a cor para rosa, é só alterar uma linha em seu arquivo CSS que todas as 100
páginas terão os títulos alterados. ;)




Posted in:

0 comentários:

Postar um comentário