CSS
CSS: conceitos e mão na massa
Publicado em: 11/07/2006 |
CSS |
Visualizações: 5.566 |
1 Comentário(s)
Olá, essa é a minha primeira coluna no Oficinadanet.com.br. Nela pretendo falar um pouco da importância, cada vez mais crescente, da utlização de CSS (Cascading Style Sheets - > definições de estilos em cascata ou simplesmente folhas de estilo), sua sitaxe básica e como utlizá-la corretamente em uma página web. Segundo o Wikipedia, os CSS são estilos para páginas web e envolvem um conceito inovador: possibilitam a mudança da aparência simultânea de todas as páginas relacionadas com o mesmo estilo.
O CSS foi criada e padronizada em 1996 pela World Wide Web Consortium (W3C). Desde então as folhas de estilo vêm sendo utilizadas para a criação de websites. CSS não é igual ao HTML, que é uma linguagem de marcação, CSS é mais dinâmico pois com apenas um arquivo você pode mudar todo o estilo do seu site, como colocar efeitos diferentes em links, padronização de tags do seu site (<span>, <div>, <p>, <h1>...) entre outros. Sem levar em conta que, a manutenção do site é bem mais fácil.
Há 3 tipos básicos de implementação do CSS em um website: interno, externo e incorporado.
-> Interno: no tipo interno, coloca-se os códigos CSS entre as tags <head> e </head>. Exemplo:
Sintaxe básica:
- <style type="text/css"> >> indica ao navegador que ali se inicia um código de formatação CSS;
- P {
background-color:#FFFFFF;
font-family:"Comic Sans MS";
font-size:14pt;
}
>> código do CSS. A sintaxe dessa parte SEMPRE será assim: elemento {atributo1: valor; atributo2: valor ...};
- </style> >> indica ao navegador o fim do código CSS.
É recomendável ainda utilizar os indicadores HTML de comentários <!-- e --> após o <style type="text/css"> e antes do </style>, respectivamente. Mas porque? Simples. Há usuários que ainda utilizam navegadores antigos, não reconhecendo o CSS. Mas isso está cada vez mais incomum.
-> Externo: já no tipo externo, é criado um arquivo especial, .css, para a aplicação de css no website. Exemplo:
Esse exemplo também se utilza entre as tags <head> e </head>.
No arquivo criado .css, basta colocar o código CSS na sua sintaxe padrão, elemento {atributo1: valor; atributo2: valor ...};
->Incorporado: tipo incomum de se utilizar folhas de estilos, mas válido. Nesse estilo, o css é incorporado diretamente na tag HTML na página web. Exemplo:
Percebam que na tag HTML a, foi utilizada o style junto... É exatamente nesse style que se incorpora o CSS, no caso do exemplo, é a adição de cor (color: blue;) e de uma linha abaixo do link (text-decoration: underline;).
O básico do porquê e de como utlizar o CSS estão aí. Aqui mesmo no Oficinadanet.com.br há um Mini Curso de CSS nesse link: http://www.oficinadanet.com.br/index.php?acao=artigos&categorias_id=77
No meu próximo artigo, pretendo já por a mão na massa. Vamos criar um simples menu utilizando CSS.
Aproveitem e dêem uma olhada na seção de HTML do Oficinadanet.com.br.
Dúvidas? Utilize de nosso fórum: http://www.oficinadanet.com.br/forum/index.php
Sugestões? tokageh[at]gmail.com
Era isso, espero que tenham gostado, e não hesitem em enviar sugestões ;)
O CSS foi criada e padronizada em 1996 pela World Wide Web Consortium (W3C). Desde então as folhas de estilo vêm sendo utilizadas para a criação de websites. CSS não é igual ao HTML, que é uma linguagem de marcação, CSS é mais dinâmico pois com apenas um arquivo você pode mudar todo o estilo do seu site, como colocar efeitos diferentes em links, padronização de tags do seu site (<span>, <div>, <p>, <h1>...) entre outros. Sem levar em conta que, a manutenção do site é bem mais fácil.
Há 3 tipos básicos de implementação do CSS em um website: interno, externo e incorporado.
-> Interno: no tipo interno, coloca-se os códigos CSS entre as tags <head> e </head>. Exemplo:
<style type="text/css">
<!--
P {
background-color:#FFFFFF;
font-family:"Comic Sans MS";
font-size:14pt
}
-->
</style>Sintaxe básica:
- <style type="text/css"> >> indica ao navegador que ali se inicia um código de formatação CSS;
- P {
background-color:#FFFFFF;
font-family:"Comic Sans MS";
font-size:14pt;
}
>> código do CSS. A sintaxe dessa parte SEMPRE será assim: elemento {atributo1: valor; atributo2: valor ...};
- </style> >> indica ao navegador o fim do código CSS.
É recomendável ainda utilizar os indicadores HTML de comentários <!-- e --> após o <style type="text/css"> e antes do </style>, respectivamente. Mas porque? Simples. Há usuários que ainda utilizam navegadores antigos, não reconhecendo o CSS. Mas isso está cada vez mais incomum.
-> Externo: já no tipo externo, é criado um arquivo especial, .css, para a aplicação de css no website. Exemplo:
<link rel="stylesheet" href="http://www.oficinadanet.com.br/xxx.css" type="text/css" />.Esse exemplo também se utilza entre as tags <head> e </head>.
No arquivo criado .css, basta colocar o código CSS na sua sintaxe padrão, elemento {atributo1: valor; atributo2: valor ...};
->Incorporado: tipo incomum de se utilizar folhas de estilos, mas válido. Nesse estilo, o css é incorporado diretamente na tag HTML na página web. Exemplo:
<a style="color: blue; text-decoration: underline;" href="http://www.oficinadanet.com.br/">Percebam que na tag HTML a, foi utilizada o style junto... É exatamente nesse style que se incorpora o CSS, no caso do exemplo, é a adição de cor (color: blue;) e de uma linha abaixo do link (text-decoration: underline;).
O básico do porquê e de como utlizar o CSS estão aí. Aqui mesmo no Oficinadanet.com.br há um Mini Curso de CSS nesse link: http://www.oficinadanet.com.br/index.php?acao=artigos&categorias_id=77
No meu próximo artigo, pretendo já por a mão na massa. Vamos criar um simples menu utilizando CSS.
Aproveitem e dêem uma olhada na seção de HTML do Oficinadanet.com.br.
Dúvidas? Utilize de nosso fórum: http://www.oficinadanet.com.br/forum/index.php
Sugestões? tokageh[at]gmail.com
Era isso, espero que tenham gostado, e não hesitem em enviar sugestões ;)
- Identidade Visual: O que não fazer na criação de um logotipo
Nesse artigo nós veremos o que não deve ser feito na hora de criar um logotipo, . - Conceito Básico Sobre a Matemática
Programadores e desenvolvedores, agora já os internautas. Eu não sei o que dizer. - Miniaturas de Sites com Websnapr
Nesse artigo veremos como criar miniaturas de sites usando apenas um link, ao in. - Palestras, o que aproveitar delas?
Ir a palestras ou assisti-las em seu computador ou qualquer outro dispositivo o . - Curso de Visual Basic - Aula 6 - Criando um visualizador de imagens
Nesta sexta vídeo aula, iremos aprender como criar um visualizador de imagens co.
- Rollover de imagem com CSS
Neste tutorial vou mostrar a você como fazer um rollover de imagem usando css. O. - Criando sombra no CSS
Colocando sombra em um texto na página - CSS - HTML Dinâmico
Alguma vez você decidiu alterar as cores dos link de sua home-page? Que tal alt. - Atributos CSS
Alguns atributos de css e o que eles representam: - Pop Up em CSS
Meu diretor pediu para colocar uma popup em um site nosso, mas não queria coloca.
Publicado em: 05/04/2007 - 14:13
Ficou mais simples porém ainda tem um bom conteúdo rsrs