Aula 1

Data de publicação: Jan 27, 2013 7:9:32 PM

1. 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.

1.1 Declarações

Declarações internas

(...)

<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.

Aula 1_1

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

Abra-a no seu browser para verificar o resultado.

Exemplo 2:

<html>

<head>

body {color:red;}

h1 {color:green;}

p.texto_azul {color:blue;}

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

</style>

</head>

<body>

<h1> Isto é um título </h1>

<p> Isto é um texto normal, que pertence ao body e por isso está, por defeito, a vermelho </p>

<p class="texto_azul"> Este parágrafo já está aplicado com a class="Texto_azul" </p>

<p class="texto_laranja"> Agora neste terceiro parágrafo já foi aplicada a class="Texto_laranja" e fonte Verdana </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.

Aual 1_2

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

Abra-a no seu browser para verificar o resultado.

Exemplo 3:

<html>

<head>

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

#estilo_2{color:blue}

</style>

</head>

<body>

<h1 id="estilo_2"> Aqui no cabeçalho foi aplicado o estilo_2</h1>

<p id="estilo_1"> Este é um parágrafo com o estilo_1 </p>

</body>

</html>

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

Aula 1_3

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

Abra-a no seu browser para verificar o resultado.