CSS é a abreviatura de Cascade Styling Sheet, que significa Folha de Estilo em Cascata, e é a linguagem utilizada para controlar a apresentação de elementos em documentos HTML. A apresentação destes é especificada por uma série de regras que podem ser atribuídas em linha através dos atributos do elemento style ou através de regras incluídas dentro das tags na secção head dos documentos HTML, ou através de folhas de estilo externas (Leia: Tutorial: Aprender o básico sobre CSS ). Cada regra de estilização selecciona os elementos e depois aplica as regras aos mesmos.

O CSS foi criado pelo W3C para recuperar o controlo da markup de documentos à medida que o HTML ia evoluíndo a partir das tags primárias que definiam os elementos estruturais de um documento, como os cabeçalhos, parágrafos, hiperligações e listagens. Neste artigo Programação CSS para iniciantes (Parte VIII) vamos mostrar como utilizar as cores em CSS de diferentes maneiras e a trabalhar com os fundos das áreas de conteúdo, incluindo a repetição de imagens no background.

CSS

Não perca os artigos anteriores desta série:

7. CORES

CSS tem disponível 17 cores standard para a utilização, que podem ser chamadas pelos seus nomes, a saber:

  • Red
  • Green
  • Blue
  • Fuchsia
  • Lime
  • Aqua
  • Maroon
  • Olive
  • Navy
  • Orange
  • Yellow
  • White
  • Purple
  • Silver
  • Black
  • Teal
  • Gray

Enquanto que os nomes standard das cores são muito úteis para a utilização rápida, eles limitam um pouco o espólio de cores disponíveis, e é por isso que CSS também permite que sejam definidas cores personalizadas. Cada cor pode ser definida através dos valores RGB, definindo a quantidade de Red, Green e Blue que irá ser misturada para criar uma cor que você deseje. A título de exemplo, a cor Olive tem 50% de Red, 50% de Green e 0% de Blue. Então podemos definir esta cor utilizando uma expressão CSS definindo os valores RGB:

h1 {color: rgb(50%,50%,0%)}

Ao definir diferentes valores de red, green e blue você poderá atribuir qualquer cor ao elemento que quiser. Existe outra alternativa para definir cores em CSS, que consiste em definir um valor inteiro dentro de uma escala que vai de 0 a 255, para cada um dos componentes (Red, Green, Blue). Seguindo a linha do exemplo acima, para definir a cor Olive você iria utilizar 50% do valor do Red e do Green, e 0% de Blue. Então seria assim:

h1 { color: rgb( 128, 128, 0 )}

A última alternativa existente para você definir uma cor consiste em definir um valor hexadecimal dentro de uma escala que vai desde 00 a FF. Embora não seja tão linear como os exemplos acima, é possível observar um padrão na definição das cores com valores hexadecimais. Para escolher a cor Olive, seria com o seguinte:

h1 { color: #808000 }

Abaixo apresentamos-lhe uma tabela super útil que poderá consultar para rapidamente ver qual o valor a utilizar para uma determinada cor:

 Programação CSS para iniciantes (Parte VIII)

Os valores hexadecimais são compostos por 3 pares de dígitos que podem ser utilizados utilizando o formato extenso (como na tabela acima) ou utilizando o método CSS Shorthand, que consite em representar cada um dos 3 pares de dígitos, apenas com um dígito.

A título de exemplo,  a cor White pode ser definida como #FFF ao invés de #FFFFFF, a cor Black pode ser definida por #000 ao invés de #000000, como também a cor Red pode ser definida por #F00 ao invés de #FF0000. Cada desenvolvedor tem a liberdade de escolher como pretende trabalhar, optando pelo método com o qual mais se identifica ou mais facilita o seu trabalho.

Nota: Os navegadores web frequentemente reconhecem mais nomes de cores, normalmente até 140 cores diferentes, mas apenas lhe mostrámos aqui aquelas que são as cores standard definidas nas especificações CSS

8. REPETIÇÃO DE FUNDOS

Cada caixa de conteúdo pode ter uma cor de fundo definida por atribuição de um valor à propriedade background. Em alternativa poderá também utilizar uma imagem como fundo ao definir um valor URL para a propriedade background-image. As propriedades background-color e background-image podem ser utilizadas para especificar tanto uma imagem para o fundo como uma cor.

Qualquer imagem que seja especificada na propriedade background-image irá ser posicionada a partir do canto superior esquerdo da zona de conteúdo, e por defeito a propriedade background-repeat está definida para repetir a imagem de fundo ao longo da caixa de conteúdos.

Este comportamento pode ser alterado por definir diferentes valores para a propriedade background-repeat onde o valor de repeat-x define o limite de linhas para uma, e onde repeat-y define o limite de colunas para uma. A repetição da imagem pode também ser evitada ao definir o valor no-repeat à propriedade background-repeat, fazendo com que apareça apenas a imagem definida no URL, a partir do canto superior esquerdo da caixa de conteúdos.

As imagens de background são colocadas em um layer sobre a cor de fundo, portanto se você definir uma imagem com algumas zonas transparentes, nessas zonas irá está a cor de fundo da caixa de conteúdo.

Utilizando o CSS Shorthand, os valores para a cor, imagem e valores de repetição podem ser definidos em uma lista, para a propriedade background.  Para praticar, vamos criar um documento e pôr em prática o que falámos acima:

  1. Crie um documento HTML e insira o seguinte código dentro da tag body:
    <p><span>Repetição Standard</span></p>
    <p id="x"><span>Repetição Horizontal</span></p>
    <p id="y"><span>Repetição Vertical</span></p>
    <p id="sem"><span>Sem Repetição</span></p>
  2.  Crie uma folha de estilos e insira o seguinte código para estilizar os elementos span:
    span {background: red; margin: 0 0 0 5em}
  3.  De seguida insira na folha de estilos, o seguinte código para definir a cor de fundo, a imagem de fundo e a altura de cada parágrafo:
    p {background: url(ec.jpg) black repeat; height: 3em}
  4.  Adicione uma regra de estilização para modificar o comportamento do repeat no segundo parágrafo:
    p#x {background-repeat: repeat-x}
  5.  Adicione uma regra de estilização para modificar o comportamento do repeat no terceiro parágrafo:
    p#y {background-repeat: repeat-y}
  6.  Por último vamos definir que não haverá repetição da imagem no quarto parágrafo:
    p#sem {background-repeat: no-repeat}
  7.  Guarde os documentos e observe o resultado:
    Programação CSS para iniciantes (Parte VIII)

No passo 3, o valor do repeat poderia ter sido omitido, uma vez que o seu valor standard é aquele que definimos.

Na continuação da série de CSS para Iniciantes iremos abordar alguns métodos para posicionar os fundos nos documentos e fazer uma resumo geral daquilo que foi falado até então. Não perca o próximo artigo!

Abraço!

 

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. Gilmar Coimbra
    29 de maio de 2012

    Parabéns, uma vez mais, pelas excelentes postagens!
    (Tinha fechado todas as guias dos tutorais, mas fiz questão de abri-las novamente para agradecer-te).

    Não vi referência de um possível livro teu, sobre o DreamWeaver, existe? Se existir, quero comprar um!

    Obrigado.


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