Vamos agora, como prometi, pegar este arquivo em HTML e fazer com que seu conteúdo seja modificado via CSS.
Você já viu o código do aquivo abaixo né? Agora vamos fazer o seguinte: Vamos criar um outro arquivo intitulado "estilos.css". Neste arquivo vamos impor uma configuração para o plano de fundo e para as TAGs h1, h3 e p, blz? Baixe estes dois aquivos e analise-os.
O primeiro arquivo é o código HTML modificado. Observe que dentro do "HEAD" existe um link para um arquivo chamado "estilo.css":
<link rel="stylesheet" type="text/css" href="estilos.css" />
No momento não se preocupe com o restante do conteúdo, fixe apenas o itemhref="estilos.css". Ele está fazendo referência ao arquivo onde estão as configurações citadas.
Agora você compreende a teoria das 50 páginas?
Mãos à obra que vem mais coisa por aí galera!!!!!
Hoje eu gostaria de explicar de forma prática o funcionamento do CSS. Vamos começar com uma página extremamente básica em HTML.
Faça download do arquivo abaixo, abra-o, clique com o botão direito dentro da página, escolha a opção "exibir código fonte" e analise o código, pois nós iremos alterá-lo para que a configuração das fontes e plano de fundo seja em CSS.
Imagine que você construiu um site utilizando os TAGS em HTML e que esse site possua 50 páginas. Cada página possui como plano de fundo a cor vermelha. Cada título dos textos existentes nas 50 páginas posuam a seguinte característica: fonte: Arial, Tamanho: 14px, Cor: Branca, Alinhamento: Left e seja Bold (gordinha). O texto padrão seja Arial tamanho 12 e as mesmas configurações dos títulos. Certo? Tudo funcionando direitinho, uma maravilha.
Meia hora antes de apresentar ao cliente, o contato faz o seguinte pedido a você: "Mude as cores dos planos de fundo para Azul e as fontes dos títulos para Verdana na cor amarela".
Meu filho, são 50 páginas e vc terá que alterar uma a uma.
Aí, basta gritar: "Valei-me meu são CSS!!"
É pra isso e para outras coisas que o CSS serve.
Como funciona?
Simples! As 50 páginas são criadas. Certo? Certo.
Em um arquivo CSS são colocadas todas as configurações do site: planos de fundo, fontes com suas cores, alinhamentos, tamanhos, figuras, etc.
Ao ser solicitada; a mudança será feita somente neste arquivo CSS e tudo nas 50 páginas modificarão automaticamente. Né massa? Quanto tempo isso levará?
Minutos, meu nego, minutos!!!
Citei esta sigla e nem expliquei o que significa né?
CSS é a sigla em inglês para Cascading Style Sheet que em português foi traduzido para folha de estilo em cascata.
Galvão, você não disse nada....
Então lá vai: Nos primórdios da criação de um website, as tabelas eram (e ainda são por alguns profissionais da área) amplamente utilizadas. No entanto percebe-se a necessidade de um mecanismo que atribuisse estilos ao conteúdo de uma página. Além do mais, as tabelas foram criadas para exibir dados tabulares, como o horário escolar que fica dentro do seu caderno lembra?
Pois bem, um problema começou a ser notado com o uso das tabelas: O código HTML ficava imenso, dificultando a manutenção do site. Além do mais no código HTML, (explicado na HOME), as configurações de palavras, fundos, imagens eram repetitivos, aumentando mais ainda o código.
Imagine então uma página com um código imenso para ser mantido (talvez você ainda não esteja entendendo o que quero dizer. Vá até a home page e baixe o aquivo em pdf que ensina HTML e você mais à frente entenderá melhor).
Na verdade o usuário nem nota isso, o que importa pra ele é navegar num site bonitinho e pronto. Mas para nós Web designers isso é realmente um pesadelo quando se trata de uma página cheia e riquefifes!!!
Solução? CSS na mente rapá!!!!!
RSS Feed