CSS - Folhas de estilo em cascata

['Afrodite 10]

Uma das maiores dificuldades na criação de uma página é a configuração do layout. Definir a todo momento a cor ou o tamanho de uma fonte deixa o código HTML extenso, aumenta a possibilidade de erros e além de tudo é muito cansativo.

 

Neste tuto você aprenderá a trabalhar com CSS (Cascading Style Sheets, ou Folhas de Estilo em Cascata). Com o CSS é possível ligar estilos aos comandos HTML. Dessa forma seu código fica muito menor e você ainda pode definir o estilo de um site inteiro com um único arquivo.

 

Regras

O CSS configura os estilos através de regras. Ele define as tags e as declarações. Na declaração são configuradas as propriedades (cor, fonte, tamanho) e o valor (azul, preto, verde). Por exemplo, o comando

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

, define que a tag

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

será sempre exibida na cor vermelha.

 

Qualquer navegador da geração 4 suporta o CSS. Nas versões anteriores o texto é exibido normalmente, porém sem nenhuma formatação de estilo. Confira nos quadros a seguir como usar alguns dos estilos oferecidos pelo CSS:

 

Página com estilo

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

A configuração do estilo é iniciada pela tag

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

. As tags

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

e

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

são utilizadas para que os comandos das regras não sejam exibidos na tela dos navegadores não compatíveis com CSS. No exemplo acima foram criadas três regras. Na primeira, definimos que o título

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

é vermelho. Depois, que as tags

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

e

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

são em itálico, centralizadas e com a cor de fundo amarela. Na terceira regra foi configurada a cor azul e o tamanho 40 para a tag

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

.

 

Quando o navegador interpreta as tags que foram definidas nas regras, os estilos são aplicados automaticamente.

 

Defina as declarações com classe

 

No CSS você pode definir classes para as regras. Assim, mais de uma opção de estilo pode ser criada para uma mesma tag. Copie o código em destaque e salve-o como um arquivo HTML para poder visualizar.

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

Veja como foram criadas as regras das classes no código acima. Por exemplo, com a regra

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

definimos a classe "verm" para a tag

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

que tem cor vermelha. Depois o comando

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

foi utilizado para exibir o texto com esse estilo. Você pode criar quantas classes quiser, com o nome que desejar.

 

Para criar estilos que são utilizados somente quando combinados com outra tag, como por exemplo um texto em itálico (tag

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

) dentro de um parágrafo (tag

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

), a regra é definida da seguinte forma:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

. Com isso a cor magenta só é aplicada se a tag

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

estiver dentro da tag

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

. Se ela estiver fora, o estilo simplesmente não é aplicado.

 

Utilize um arquivo de regras

Você pode criar um arquivo de regras CSS para as páginas do seu site. Assim os estilos de todos os arquivos HTML ficam padronizados. Além disso são poupadas várias linhas de comando e, ao alterar as regras desse arquivo, as configurações das páginas mudam automaticamente, sem a necessidade de se editar uma a uma. Para ler os estilos de um arquivo de regras (.css) em uma página, a tag

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

é inserida no cabeçalho (

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

) da sua página. Depois os comandos HTML são inseridos normalmente.

 

 

Até mais galera.

 

Créditos: -Tasty

[JuhZiika 0]

Bem legal , leva meu THX , mais leechou isso ai da onde ?

[Alitrol Saveg 0]

Cara isso não é para a área habbo e sim para a área de programação .-.'

[Chrizz 0]

Tasty pegou de algum lugar... porque voce vive me perguntando coisas de css '--'

['Afrodite 10]

Coloquei errado sem quere vou pedir para um mod fexa ..

[-Soonic 0]

Gostei , ajuda muito para quem quer construir páginas em CSS.

Obrigado , levando ai meu AGRADECER .

[JuhZiika 0]

Coloquei errado sem quere vou pedir para um mod fexa ..

 

Cara vc é foda alem de leechar ainda sai alguma coisa errada , pow man tu é mestre em leechar e ainda comete um erro ?

[azulaozinho 0]

CSS é muito fácil de aprender,dá pra aprender CSS em 1 semana ou menos.

Mas tá na area errada.

[EduardoGuismo 0]

Vlws ! velho ajudou ai ein !

['Afrodite 10]

Cara vc é foda alem de leechar ainda sai alguma coisa errada , pow man tu é mestre em leechar e ainda comete um erro ?

 

Leecha? demorei 30 minutos para cria essa bagaça aqui e ainda tu diz que eu leechei prova?

[Giovani001 0]

Caraca. Só pode estar cego pra postar coisas de Programação na área Habbo, sem ofensas --'

[Bαcσи 0]

Tópico se encontra em area errada reportado ;(

Beijos

['Rapper 4]

Atenção!

 

Seu tópico foi encontrado em área errada e transferido para "Web Programação".

Da próxima vez, leia a descrição de cada área antes de postar.

 

Tópico Movido.

[popbap12 0]

bom! topico!

 

vai vale um thx no futuro....

['Afrodite 10]

Obrigado, pelos elogio sempre estarei criando novos tópicos

para destacar mais área !

[saxodemais 0]

Topico Em Area Errada Closed

[henrytjs3 0]

Obrigado por postar tasty, vai ser muito útil. rs

[.:Matheussilv:. 0]

São regras muito básicas. Você deveria ensinar as mais usadas, como border-radius, background-image, margin, padding, border...

Também devia ter explicado os seletores "." e "#". Um iniciante não irá saber usar-los.

[Tradutt 0]

Leecha? demorei 30 minutos para cria essa bagaça aqui e ainda tu diz que eu leechei prova?

Quer prova?

Toma:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

[andrefmp 0]

Quer prova?

Toma:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Mais uma prova que nao passa de Leecher '-'

[-Furamente 0]

Mais uma prova que nao passa de Leecher '-'[/color][/size][/font][/center]

 

você é so um idiota

[habborello 0]

Gostei , ajuda muito para quem quer construir páginas em CSS.

Obrigado , levando ai meu AGRADECER .

 

Com CSS não se cria páginas, se decora.

[→ Keeper ~ 0]

Eu já sabia usar , mais pra quem não sabe bom aproveito !

[andrefmp 0]

você é so um idiota

 

Prove que eu sou

[BobbaJr 0]

ACHEI DE ONDE VOCÊ LEECHOU

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Se duvidam, só comparar a frase "Uma das maiores dificuldades na criação de uma página é a configuração do layout. Definir a todo momento a cor ou o tamanho de uma fonte deixa o código HTML extenso, aumenta a possibilidade de erros e além de tudo é muito cansativo."