Aula 06

Data de publicação: Oct 13, 2012 10:50:36 AM

5. Cascading Style Sheets (CSS)

Até este ponto, apenas nos interessou saber como inserir os diversos elementos numa página Web. A parte gráfica e a posição desses mesmos elementos não foram de grande importância para o nosso estudo.

Neste ponto, a parte gráfica ganha relevo com o uso das Cascading Style Sheets (CSS). Com a linguagem HTML é possível tratar igualmente da parte gráfica, no entanto, o potencial da linguagem CSS ultrapassa largamente a anterior.

Afinal o que é realmente a linguagem CSS?

Trata-se de uma linguagem de estilos associados a páginas Web. Com ela é possível controlar as cores, as fontes, as margens, o posicionamento, a largura e muitos outros estilos para cada elemento. Neste capítulo apenas daremos ênfase à forma como se associa a linguagem HTML com CSS, não entrando em grande pormenor relativamente às potencialidades da linguagem. Contudo, essas potencialidades devem ser exploradas pelo aluno através de pesquisas na Internet sempre que necessário. A aplicação desta linguagem requer conhecimentos de HTML onde parte do código será aplicado.

Os estilos CSS podem ser aplicados de duas formas:

- Internamente - embutido no próprio código HTML;
- Externamente - num ficheiro à parte, apenas com a indicação no código HTML da Path (caminho) para o ficheiro externo.

Deve-se aplicar o código CSS internamente, quando a quantidade de código é reduzido. Nos casos em que o código é muito extenso, devemos utilizar um ficheiro à parte para colocar os estilos, fundamentalmente por três razões específicas:

- separação do código HTML (menos confuso);
- mais fácil de proceder a alterações;
- várias páginas podem utilizar o mesmo ficheiro de estilos.

5.1 Declarações

Declarações internas

Exemplo 1

(...)

<body>

<p style="color: orange; font-family: verdana"> Aplicação de estilos CSS </p>

</body>

(...)

Resultado:

No exemplo anterior, a aplicação de estilos CSS é realizada directamente, inline. Tudo o que se encontrar entre a tag <p> verá aplicados os estilos definidos no atributo style. Neste caso, a cor das letras da frase "Aplicação de estilos CSS" mudará para laranja e o tipo de letra para Verdana.

Outra forma de aplicar os mesmos estilos internamente, mas não de forma inline, seria como se mostra de seguida:

Exemplo 1

<html>

<head>

p{color: orange; font-family: verdana;}

</style>

</head>

<body>

<p> Aplicação de estilos CSS </p>

</body>

</html>

O resultado do exercício será exactamente o mesmo que o anterior, visto a declaração de estilos estar associada à letra p (selector), logo à tag <p> do código HTML respectivo. Podem utilizar outras tags como <div>, <body>, <h1>, <a> e outras. Todavia, os selectores nos estilos CSS têm de corresponder às tags em HTML, onde queremos que os estilos sejam aplicados. Por exemplo, no caso de pretendermos aplicar à tag <body> o código CSS anterior, teríamos de alterar o selector para body{color: orange; font-family: verdana;}.

Por vezes é mais fácil e intuito atribuir um nome aos estilos, que não os da tag já existentes. Os estilos CSS podem ser referenciados de duas formas neste caso particular. Através de selectores do tipo classes ou identificadores. o primeiro pode existir em número ilimitado numa página Web, enquanto o segundo deve ser único. Vejamos como se aplicam.

Exemplo 3:

<html>

<head>

p.nome_da_classe{color: orange; font-family: verdana;}

</style>

</head>

<body>

<p class="nome_da_classe"> Aplicação de estilos CSS </p>

</body>

</html>

Mais uma vez o resultado será igual a todos os exemplos anteriores, porém muda a forma de se referenciarem os estilos. A grande diferença reside em existir diferenciação das tags <p> podendo-se atribuir estilos diferentes a tags <p> mudando apenas o nome da classe.

Exemplo 4:

<html>

<head>

#nome_da_id {color: orange; font-family: verdana;}

</style>

</head>

<body>

<p id="nome_da_id"> Aplicação de estilos CSS </p>

</body>

</html>

Finalmente o resultado referenciando os estilos através de um identificador (id).

EXERCICIO PROPOSTO 14

Copie o código anterior para o editor de texto (GEDIT/Notepad) e grave a página como cssint.html.

Abra-a no seu browser para verificar o resultado.

Declaração externa

Se pretendermos declarar os estilos externamente, isto é, num ficheiro à parte, devemos para isso incluir uma referência no código HTML sobre a localização desse mesmo ficheiro.

Exemplo 1

(...)

<head>

</head>

<body>

<p class="nome_da_classe"> Aplicação de estilos CSS </p>

</body>

(...)

Como se pode verificar no exemplo anterior, os estilos CSS encontram-se no ficheiro de nome estilos.css. Atenção, não esquecer que a declaração é feita depois do fecho do </head> e antes da abertura do <body>.

Se pretendermos aplicar os mesmos estilos usados no exemplo3 da declaração interna, basta para isso escrever no ficheiro estilos.css o seguinte código p.nome_da_classe{color: orange; font-family: verdana;}. Neste ficheiro não se coloca a tag </style>. O código HTML (parte do <body>) teria de ser igual ao do exemplo 3 para funcionar correctamente.

5.2 Multi Selectores

Por vezes é necessário aplicarem-se os mesmos estilos a vários selectores simultaneamente. Para isso, será suficiente, separar através de vírgulas os vários selectores.

p, div, body, h1 {color: orange; font-family: verdana;}

Todas as tags associadas aos selectores irão ver aplicadas os estilos CSS declarados.

EXERCÍCIO PROPOSTO 15

Crie um ficheiro de nome estilos.css e copie para lá os estilos usados no exercício proposto anterior.

Crie também uma página de nome cssext.html que inclua o ficheiro estilos.css.

Abra a página cssext.html no seu browser para verificar que o resultado é o mesmo do exercício proposto anterior.