CSS PARA TOTÓS

Neste artigo vamos tentar explicar a terminologia em CSS, que como sabemos é um excelente complemento para o Web Design. Todos os web designers usam CSS para fazer a estilização das suas páginas, quer seja para criar novos layouts, organizar alguns já existentes ou mesmo reciclar antigos sites introduzindo a folha de estilos. CSS tornou-se a linguagem de eleição para o web design e actualmente fornece fantásticas capacidades com o lançamento do CSS3. A linguagem em si tem sido constantemente desenvolvida ao longo dos anos e podem surgir dúvidas frequentemente, muito por causa de mau entendimento e mau uso de alguns termos. Já referimos anteriormente mas nunca é demais relembrar as origens daquilo a que estsmos a par, o CSS surgiu durante a década de 90, por parte de Hakon Wium Lie, que convidou Bert Bos para participar no desenvolvimento do CSS. Bert Bos estava na altura a desenvolver um navegador chamado Argo. Em 1995 Hakon e Bert apresentaram a sua proposta e o W3C que tinha sido criado recentemente interessou-se pelo projecto e criou uma equipa liderada por Hakon Lie e Bert Bos. O primeiro lançamento foi em 1996, o chamado CSS1, seguido pelo CSS2 em 1998, e neste momento estamos a par com o CSS3.

Assim sendo, iremos explorar alguma da mais importante terminologia utilizada em CSS para o ajudar a tornar-se no grande mestre do CSS com este CSS para Tótós!

Não perca também estes artigos anteriores sobre CSS:

PORQUÊ CSS?

Há quem duvide, mas CSS é uma linguagem robusta, mas não na linha de uma linguagem de programação como PHP ou outros, mas sim na linha de uma linguagem de estilização, que trocando por outras palavras, é uma linguagem utilizada para descrever como é que o conteúdo de um website irá ser mostrado aos seus visitantes e como é que o mesmo conteúdo se irá comportar. Quando falamos em conteúdo estamos a referir todos os parágrafos, links, imagens, e outros que existem em um website. Tudo isto pode ser estilizado com CSS, e ao longo dos anos a estilização na web sempre foi desenvolvida e alvo de constantes melhoramentos. Agora a pergunta surge: Porquê CSS? É demasiado simples: CSS porque (ainda) não há nada melhor! É por isso que CSS é lider entre os Web Designers.

VALORES E PROPRIEDADES

Este é o primeiro grande passo para entrar no turbilhão CSS: Escolher um elemento para aplicar o estilo e definir qual o estilo a aplicar. Um exemplo que podemos utilizar é o atributo de cor – color: white; que traduzindo é propriedade: valor;

A propriedade usada é color que permite que seja introduzido qualquer valor aceitável para alterar a cor do texto. Pode também ser código hexadecimal ou RGB. Muitas das vezes os designers nem falam na ideia de valores, porque pode ser enganadora. Isto porque propriedades e valores podem ser a mesma ideia, um valor sem propriedade não é nada, e uma propriedade sem valor também não é nada.

VALORES DOS SELECTORES

Os selectores são necessários para completar o código CSS. São eles que declaramos para definir qual o tipo de elemento que é o alvo da estilização. Existem muitos selectores e muitos deles não são muito explícitos e o designer com conhecimentos médios não irá necessitar deles. A maneira mais simples de começar a utilizar CSS é usando elementos como selectores. Como exemplo, se pretender alterar a estilização de todos os parágrafos:

1	`p {` `font-family:` `Arial,` `sans-serif;` `color:` `#fff;` `font-weight:` `bold; }`

Outra particularidade interessante tem a ver com a capacidade de podermos atribuir classes e id’s através dos atributos do elemento. Desta forma a estilização irá ser aplicada a aquele bloco específico:

p#primeiroparagrafo {font-size:16px;} /* Vai estilizar os parágrafos com o ID "primeiroparagrafo" */
p.textonormal {font-size:12px;} /* Vai estilizar os parágrafos com a classe "textonormal" */

UNIDADES DE MEDIDA E VALORES

Varias vezes os termos confundem-se, o que é compreensível. Já explicámos mais acima que os valores são usados para definir por exemplo o valor de um elemento – color: white; . A diferença é que estes valores precisam de dados numéricos, sendo que os pixéis são os mais comuns e podem ser utilizados em muita coisa: width, height, font size, padding, margin, entre outros. Além disto, poderá também ver valores em percentagem (%). Quando aplicamos valores em percentagem, irá ser assumido que os 100% é a totalidade do tamanho do browser web, dando uma enorme precisão a quem está a programar o CSS.

BLOCO DE DECLARAÇÕES

Depois de vermos tudo isto podemos começar a perceber a ideia principal por trás das folhas de estilo. Blocos de código são utilizados para definir áreas e detalhes de elementos. Há quem diga que a maneira mais fácil e rápida de ler e escrever um bloco de código é em linha. Podemos ver em baixo um exemplo disso mesmo:

div#nav { display: block; width: 100%; padding: 1px 3px; margin-bottom: 10px; }

Pessoalmente, e apesar de ocupar bastante mais espaço, prefiro os blocos de código em que cada propriedade está em uma linha diferente:

div#nav {
display: block;
width: 100%;
padding: 3px 6px;
margin-bottom: 20px;
}

Este tipo de estilo de bloco de código é bastante criticado por bastantes pessoas que trabalham com CSS, argumentando que além de ocupar muito mais espaço, também dificulta a tarefa de procurar algo que necessitamos.

MELHORIAS CSS3

As grandes diferenças relativamente ao seu anterior CSS2 têm a ver com novas propriedades. Estamos a falar por exemplo de cantos redondos e sombras que são renderizadas no browser. CSS3 também conta agora com novas ferramentas de cores como o HSL (hue, saturation, lightness), o HSLA (hue, saturation, lightness, alpha) que inclui o Alpha para trabalhar a opacidade, RGB (red, green, blue) e RGBA (red, green, blue, alpha) que também inclui o Alpha para trabalhar a opacidade.

E VOCÊ, COMO UTILIZA O CSS?

Prefere estilizar em linha ou bloco de código com cada elemento em linha diferente? Quais as formas como você aplica os seus conhecimentos de CSS? Deixe a sua opinião e comentário, seja criativo e participe!

Páginas

13 de novembro de 2011