AULA 22: Utilização de CSS

Separadores primários


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



Faça um donativo!

Faça um donativo!

Agora é mais fácil com Paypal!

Com o paypal.me pode contribuir para o site em qualquer moeda e em qualquer valor com a segurança desta plataforma.

Clique aqui para ajudar com o que quiser, com o que poder.