AULA 22: Páginas com CSS
NESTA AULA
Nesta aula vamos ficar a saber um pouco mais sobre Cascading Style Sheets,
porque foram criados, e uma introdução à sua utilização.
Todos aqueles que nos têm acompanhado com atenção já perceberam que criar
páginas com HTML é como pintar um quadro com um rolo de pintura. Quem já usa
HTML há algum tempo sabe que ele não é a ferramenta perfeita para criação de
páginas, pois dá muito pouco controlo sobre o posicionamento real das coisas,
sejam imagens ou texto, para isso normalmente é necessário utilizar tabelas
complexas, gif transparentes como formatador e uma série de outros truques para
que as coisas fiquem como nós realmente queremos.
Isto obriga normalmente a quem cria páginas a fazê-lo com pouco respeito pela
largura de banda, tendo de intensificar o uso de gráficos (imagens com texto são
um bom exemplo disso). Os CSS (Cascading Style Sheets) foram criados exactamente
com o propósito de permitir maior controlo sobre o aspecto da página, seja do
posicionamento dos elementos ou do seu aspecto.
Aqui fica uma lista daquilo que é suposto os CSS trazerem até nós:
- Mais controlo sobre o layout, fontes, cores, fundos e efeitos tipográficos.
- Uma forma de facilmente alterar o aspecto de um numero ilimitado de páginas mudando apenas um documento.
- Compatibilidade entre os vários browsers e sistemas operativos.
- Menos código, páginas mais pequenas, ou seja menos tempo de espera.
O seu primeiro Style Sheet
Antes demais, uma chamada de atenção, apenas os browsers da 4ª geração e
posteriores suportam CSS.
Vamos então criar um HTML simples que pode ser algo como isto:
<HTML>
<HEAD>
<TITLE>O meu primeiro passo nos CSS</TITLE>
</HEAD>
<BODY>
<H1>Stylesheets:A verdadeira ferramenta para páginas WWW</H1>
<P>Impressione os seus amigos! Esmague os seus inimigos!</P>
</BODY>
</HTML>
Muito bem vamos então agora acrescentar algum estilo nesta página. Insira
simplesmente o código seguinte algures entre o tag ''BODY'':
<STYLE TYPE="text/css">
<!--
H1 { color: green; font-size: 37px; font-family: verdana }
P { text-indent: 1cm; background: yellow; font-family: courier }
-->
</STYLE>
Parabéns, você acaba de criar o seu primeiro CSS. Vamos agora ver um pouco da
terminologia dos CSS. A base dos CSS são as regras, que são algo como isto:
H1 { color: green }
Isto quer dizer que tudo o que estiver entre o tag H1 ficará a verde. Uma regra
é composta por um ''selector'' e por uma ''declaration'' no exemplo acima o
''selector'' é o H1, que é o tag HTML ao qual o estilo está atribuido. A
''declaration'' está por sua vez também dividida em duas partes a ''property''
(neste caso o color) e o ''value''(neste caso o verde).
Qualquer tag de HTML pode ser o ''selector'' o que quer dizer que podemos
atribuir um determinado estilo a qualquer elemento de uma página. Mais, poderá
ainda agrupar os ''selectors'' da seguinte forma:
H1, H2, P { font-family: arial }
O que quer dizer que tudo o que estiver entre os tags agrupados como
''selectors'' aparecerão na fonte definida.
Formas de adicionar CSS nas suas páginas
Existem três formas de inserir CSS nas suas páginas
1--Colocando as regras dos CSS no documento HTML numa ''secção'' separada
2--Linkando o seu documento HTML a um ficheiro externo que contém as regras
3--Inserir as regras nos próprios tags HTML
1-- Este foi o método utilizado no primeiro exemplo que demos, e deve ser usado
quando queremos utilizar um determinado estilo (conjunto de regras) apenas a um
documento. De notar que todas as regras estavam entre o tag STYLE com o atributo
de TYPE="text/css" isto faz com que os browsers mais antigos ignorem tudo o que
está dentro do STYLE.
2--Aqui é que os CSS mostram realmente o que valem, pois isto permite atribuir
um determinado estilo a um conjunto de páginas, bastando para isso adicionar um
pequeno pedaço de código entre o tag HEAD (onde já deverá estar o TITLE), o tag
a adicionar é o LINK e terá o seguinte aspecto:
<LINK REL=stylesheet HREF="estilo.css" TYPE="text/css">
Feito isto é necessário criar o ficheiro que vai ser chamado, neste caso o
estilo.css , mas podia ter outro nome qualquer. Para isso basta (à semelhança do
que fizemos para os ficheiros HTML) abrir o notepad inserir as regras que
queremos e grava-lo com a extensão de .css . Este ficheiro ficaria com um
aspecto que poderia ser este:
H1 { color: green; font-family: times }
P { background: yellow; font-family: courier }
A parte boa está no facto de se utilizar este método, digamos numa secção
inteira do seu site, e fizer o upload para o servidor de um novo ficheiro .css
todas as suas páginas mudam para um novo estilo descrito no mesmo ficheiro.
3-- Por fim pode também utilizar CSS em casos pontuais, inserindo para isso as
regras nos próprios tags HTML o que daria um cenário que podia muito bem ser
este:
<H1 STYLE="color: orange; font-family: impact">
Stylesheets: A ferramenta perfeita para páginas WWW</H1>
<P STYLE="background: yellow; font-family: courier">
Surpreenda os seus amigos! Esmague os seus inimigos!</P>
Esta é a forma menos poderosa de utilizar CSS, pois terá que definir o style em
cada um dos tags onde quer realizar uma mudança de estilo, perdendo em parte
aquilo para que os CSS foram criados, ou seja poupar trabalho.
Esta foi uma pequena (pequeníssima) introdução ao universo dos CSS, estes são
tão complexos como o HTML, o que quer dizer que para explicar tudo o que há para
saber sobre Cascading Style Sheets teríamos que fazer um curso inteiro só sobre
este tema (quem sabe, talvez um dia destes). Esperamos no entanto tê-lo alertado
para o poder desta nova ferramenta para a construção de páginas WWW.
Se quiser aprofundar os seus conhecimentos sobre CSS poderá consultar estes
sites que recomendamos:
http://www.w3.org/TR/REC-CSS1
http://www.htmlhelp.com/reference/css/structure.html
http://webreview.com/97/05/30/feature/tutorial.html
http://builder.cnet.com/Authoring/CSS/index.html
http://www.microsoft.com/workshop/author/css/usingcss.asp
http://www.microsoft.com/opentype/web/designer/css01.htm
