Bem vindo ao PROJECT-HTML
Aprenda mais sobre:
HTML, CSS, JavaScript, webmaster, Imagens, banners, wallpapers, videos aula, windows, utilitários para site/blogs, Jogos, animes e muito mais.
Basta se registrar!



 
InícioProject HTMLGaleriaFAQRegistrar-seConectar-se
Buscar
 
 

Resultados por:
 
Rechercher Busca avançada
Conectar-se
Nome de usuário:
Senha:
Conexão automática: 
:: Esqueci minha senha
Votação
Qual seu navegador favorito?
FireFox
29%
 29% [ 173 ]
Chrome
60%
 60% [ 356 ]
Internet Explorer
6%
 6% [ 36 ]
safari
1%
 1% [ 7 ]
Netscape
1%
 1% [ 3 ]
Opera
2%
 2% [ 11 ]
Avant
1%
 1% [ 3 ]
Total dos votos : 589
Quem está conectado
1 usuário online :: Nenhum usuário registrado, Nenhum Invisível e 1 Visitante

Nenhum

O recorde de usuários online foi de 36 em 3/4/2016, 3:36 am
Últimos assuntos
» TAG´s (comandos)
4/8/2014, 10:15 am por robson

» Comandos básico de HTML - body (corpo da home page)
16/7/2014, 10:10 am por robson

» Apresentações aqui
15/7/2014, 4:14 pm por robson

» Como colocar "posts recomendados" no sou blog sou site.
24/3/2014, 8:05 pm por Otome

» Arquivo de ajuda sobre PHP, help para iniciantes e experientes
24/3/2014, 8:03 pm por Otome

» Imagens Exercício-6
22/3/2014, 5:19 pm por SY64

» Alinhamento de imagens
22/3/2014, 4:43 pm por SY64

» Link´s Exercicios-5
22/3/2014, 12:43 pm por SY64

» Criar um site passo a passo
1/8/2013, 4:41 pm por marlonsouzajs


Compartilhe | 
 

 Como funciona CSS?

Ir em baixo 
AutorMensagem
Diego
Admin
Admin
avatar

Masculino
Número de Mensagens : 321
Idade : 26
Localização : Aqui no PROJECT-HTML
Pontos : 5708
Reputação : 24
Data de inscrição : 04/07/2008

MensagemAssunto: Como funciona CSS?   8/1/2009, 1:04 pm

Nesta lição você aprenderá a desenvolver sua primeira folha de estilos. Você verá o básico sobre o modelo CSS e que código é necessário para usar CSS em um documento HTML.

Muitas das propriedades usadas em Cascading Style Sheets (CSS) são semelhantes àquelas do HTML. Assim, se você está acostumado a usar HTML para layout irá reconhecer muitos dos códigos que usaremos. Vamos dar uma olhada em um exemplo concreto.

A sintaxe básica das CSS

Suponha que desejamos uma cor de fundo vermelha para a página web:

Usando HTML podemos fazer assim:
Citação :

<body bgcolor="#FF0000">

Com CSS o mesmo resultado será obtido assim:
Citação :

body {background-color: #FF0000;}

Como você pode notar os códigos HTML e CSS são mais ou menos parecidos. O exemplo acima serve também para demonstrar o fundamento do modelo CSS:

[Você precisa estar registrado e conectado para ver esta imagem.]

Mas, onde colocar o código CSS? É isto que veremos a seguir.

Aplicando CSS a um documento HTML

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. Recomendamos que você foque no terceiro método, ou seja o método externo.

Método 1: In-line (o atributo style)

Uma maneira de aplicar CSS é pelo uso do atributo style do HTML. Tomando como base o exemplo mostrado anteriormente a cor vermelha para o fundo da página pode ser aplicada conforme mostrado a seguir:

Citação :
<html>
<head>
<title>Exemplo</title>
</head>
<body style="background-color: #FF0000;">

<p>Esta é uma página com fundo vermelho</p>
</body>
</html>

Método 2: Interno (a tag style)
Uma outra maneira de aplicar CSS e pelo uso da tag <style> do HTML. Como mostrado a seguir:

Citação :
<html>
<head>
<title>Exemplo</title>
<style type="text/css">

body {background-color: #FF0000;}
</style>
</head>
<body>
<p>Esta é uma página com fundo vermelho</p>

</body>
</html>
Método 3: Externo (link para uma folha de estilos)
O método recomendado é o de lincar para uma folha de estilos externa. Usaremos este método nos exemplos deste tutorial.

Uma folha de estilos externa é um simples arquivo de texto com a extensão .css. Tal como com qualquer outro tipo de arquivo você pode colocar uma folha de estilos tanto no servidor como no disco rígido.

Vamos supor, por exemplo, que sua folha de estilos tenha sido nomeada de style.css e está localizada no diretório style. Tal situação está mostrada a seguir:

[Você precisa estar registrado e conectado para ver esta imagem.]

O "truque" é criar um link no documento HTML (default.htm) para a folha de estilos (style.css). O link é criado em uma simples linha de código HTML como mostrado a seguir:

Citação :
<link rel="stylesheet" type="text/css" href="style/style.css" />

Notar que o caminho para a folha de estilos é indicado no atributo href.

Esta linha de código deve ser inserida na seção header do documento HTML, isto é, entre as tags <head> e </head>. Conforme mostrado abaixo:

Citação :
<html>
<head>
<title>Meu documento</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />

</head>
<body>
...
Este link informa ao navegador para usar o arquivo CSS na renderização e apresentação do layout do documento HTML.
A coisa realmente inteligente disto é que vários documentos HTML podem lincar para uma mesma folha de estilos. Em outras palavras isto significa que um simples arquivo será capaz de controlar a apresentação de muitos documentos HTML.

[Você precisa estar registrado e conectado para ver esta imagem.]

Esta técnica pode economizar uma grande quantidade de trabalho. Se por exemplo, você quiser trocar a cor do fundo de um site com 100 páginas, a folha de estilos evita que você edite manualmente uma a uma as páginas para fazer a mudança nos 100 documentos HTML. Usando CSS a mudança se fará em uns poucos segundos trocando-se a cor em uma folha de estilos central.

Vamos praticar o que aprendemos.

Faça você mesmo
Abra o Notepad (ou qualquer outro editor de texto que queira usar) e crie dois arquivos — um arquivo HTML e um arquivo CSS — com os seguintes conteúdos:

default.htm

Citação :
<html>
<head>
<title>Meu documento</title>
<link rel="stylesheet" type="text/css" href="style.css" />

</head>
<body>
<h1>Minha primeira folha de estilos</h1>
</body>
</html>

style.css

Citação :
body {
background-color: #FF0000;
}

Salve os dois arquivos no mesmo diretório. Lembre-se de salvar os arquivos com a extensão apropriada (".css" e ".htm")

Abra default.htm no seu navegador e veja uma página com o fundo vermelho. Parabéns! Você construiu sua primeira folha de estilos!

_________________
Quem pode faz, não copia!
[Você precisa estar registrado e conectado para ver esta imagem.]
s2 Diego e Barbara s2
Informações do meu PC:
Processador:Intel Core i5 760 @ 2.80GHz 8Mb cache
Placa mãe: ASUSTeK Computer INC. P7P55D-Deluxe
Memoria Ram: 4.0GB Único -Channel DDR3 @ 668MHz * 2 = 1333Mhz (9-9-9-24)
Placa de video: 512 MB GeForce 8400 GS (XFX Pine Group)
HD: 160GB SAMSUNG SAMSUNG HD161HJ (SATA)
Audio: SoundMAX Integrated Digital Audio
Sistema operativo: MS Windows 7 Ultimate 64-bit


Última edição por Admin em 19/12/2010, 10:42 pm, editado 1 vez(es)
Voltar ao Topo Ir em baixo
Ver perfil do usuário http://www.projecthtml.tk
paulo
Mestre
Mestre
avatar

Masculino
Número de Mensagens : 69
Idade : 22
Localização : Umuarama,Parana
Experiencia em Webdesign : Medio
Pontos : 3739
Reputação : 5
Data de inscrição : 13/07/2008

MensagemAssunto: ...   4/9/2010, 4:14 pm

Diego mas na citação de plano de fundo.
qual a diferença de fazer em HTML ou CSS?
Os 2 Dão Exatamente o mesmo Resultado ou é engano meu?
Voltar ao Topo Ir em baixo
Ver perfil do usuário http://projecthtml.tk
Diego
Admin
Admin
avatar

Masculino
Número de Mensagens : 321
Idade : 26
Localização : Aqui no PROJECT-HTML
Pontos : 5708
Reputação : 24
Data de inscrição : 04/07/2008

MensagemAssunto: Re: Como funciona CSS?   7/9/2010, 11:15 am

A diferença é que quando você faz em CSS fica em uma folha de estilo separada.
Essa folha de estilo pode ser unica.. por exemplo:

você faz uma folha de estilo usando o background de uma flor, posicionada no centro da tela sem repetições o código seria:

Código:
body
{
background-color: url('flor.gif');
background-position: 50% 50%;
background-repeat: no-repeat;
}

isso ai nao daria pra fazer no HTML... e mesmo se desse você teria que repetir esse código em todas as páginas, no CSS não, você faz uma unica folha de estilo e repassa para todas as outras paginas só com um unico código:

Código:
<link rel="stylesheet" type="text/css" href="style.css" />



Citação :
Diego mas na citação de plano de fundo.
qual a diferença de fazer em HTML ou CSS?
Os 2 Dão Exatamente o mesmo Resultado ou é engano meu?

_________________
Quem pode faz, não copia!
[Você precisa estar registrado e conectado para ver esta imagem.]
s2 Diego e Barbara s2
Informações do meu PC:
Processador:Intel Core i5 760 @ 2.80GHz 8Mb cache
Placa mãe: ASUSTeK Computer INC. P7P55D-Deluxe
Memoria Ram: 4.0GB Único -Channel DDR3 @ 668MHz * 2 = 1333Mhz (9-9-9-24)
Placa de video: 512 MB GeForce 8400 GS (XFX Pine Group)
HD: 160GB SAMSUNG SAMSUNG HD161HJ (SATA)
Audio: SoundMAX Integrated Digital Audio
Sistema operativo: MS Windows 7 Ultimate 64-bit
Voltar ao Topo Ir em baixo
Ver perfil do usuário http://www.projecthtml.tk
Conteúdo patrocinado




MensagemAssunto: Re: Como funciona CSS?   

Voltar ao Topo Ir em baixo
 
Como funciona CSS?
Voltar ao Topo 
Página 1 de 1
 Tópicos similares
-
» [PEIDO] Como subir arquivos no 4Shared/Mediafire
» Como anda a tela do seu PC?
» Como conserto isso?
» Como fazer um bg com Brushes
» Jogando como nos velhos

Permissão deste fórum:Você não pode responder aos tópicos neste fórum
 :: CSS - (Cascading Style Sheets) :: CSS - Basico-
Ir para: