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:

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!

Abraços

 

Autor: Diogo Espinha

Blog do Autor | Artigos do Autor:

Workaholic e totalmente viciado em computadores, Internet e desporto motorizado. Adora praticar desporto, é um curioso da programação em PHP, CSS e HTML5 e não dispensa a companhia do seu Mac OSX 86 Snow Leopard!

  • Explorer - Factory Construction & Ship Building Joomla Theme
  • Justice - Attorney and Law Firm Joomla Template
  • OwnFolio - One Page Personal Portfolio / vCard / Resume / Showcase Joomla Template
  • Big Business - Responsive Template
  • Merab - Creative Multipurpose Drupal 8 Theme
  • Fitness Academy Joomla Template
  • Fruition - Business Joomla Template
  • Educate | Education & Courses, Kindergartens Joomla Template
  • Constructive - Contractors Multipurpose Joomla Landing Page Theme
  • Vina Bubox - VirtueMart Joomla Template for Online Stores
  • BizOne - One Page Parallax Drupal Theme
  • LawHouse - Responsive Lawyers Attorneys Joomla Template

Gostou deste artigo? Então torne-se fã do Blog no Facebook!



Comentários dos Alunos


  1. Luís Salvador
    24 de janeiro de 2011

    Normalmente utilizo blocos de código (cascatas) mas uma vez por outra, se houver alguma tag que só tem um atributo faço em linha. Se tiver vários atributos faço em bloco, que é o mais comum.



    • Diogo Espinha
      24 de janeiro de 2011

      Olá Luís, obrigado por partilhar a sua experiência e preferências em CSS! Como referi eu prefiro em todo o caso usar os blocos de código, pois assim sei sempre como me organizar e não procuro nada em linha.

      Abraço!



  2. Jonathan [JCM]
    24 de janeiro de 2011

    Eu geralmente utilizo blocos de código, e organizo as propriedades em ordem alfabética.
    Assim como o amigo acima, quando existem poucas propriedades, ou as propriedades tem usos semelhantes, eu uso em linha.



    • Diogo Espinha
      24 de janeiro de 2011

      Olá Jonathan, posso afirmar que me deu uma grande ideia, organizar as propriedades por ordem alfabética, não o faço, mas de agora em diante irei fazer. Além de mais organizado fica mais fácil de ler concerteza.

      Obrigado por partilhar!
      Abraço



  3. Bruno Veiga
    24 de janeiro de 2011

    Boas. Acho que este é o meu primeiro comentário aqui no escola criatividade, apesar de a seguir desde o início, assim como as restantes escolas.
    Eu geralmente também uso os blocos uma vez que tenho melhor percepção do código.
    Normalmente ordeno as propriedades por ordem de aparecimento no site.
    Prometo que agora vou comentar muito mais.
    Continuação do excelente trabalho.



    • Diogo Espinha
      30 de janeiro de 2011

      Olá Bruno, obrigado pela sua contribuição a este artigo :)
      Fico à espera dos seus comentários!

      Abraço


RSS
Twitter
Facebook
Comentários
ASSINANTES
SEGUIDORES
FÃS
COMENTÁRIOS
7794

Subscrever Newsletter
Subscreva a Newsletter:



Aplicativos Android, iPhone e Muito Mais!




Assine a Escola Criatividade Assine a Newsletter da Escola Criatividade Escola Criatividade no Twitter Escola Criatividade no Facebook Escola Criatividade no Youtube Escola Criatividade no Google Buzz