Um pouco sobre Style (CSS)

Estes dias estava na minha empresa programando e tal. Olhei para o a baia ao lado e tinha 3 caras na mesma máquina olhando e tentando...

O que será que eles estavam olhando? Será aquele método que faz milagre em C#? Ou será aquela procedure imensa criada pelo DBA doidão?... Nada disso, eles estavam tentando arrumar o CSS do site em Tableless.

É fato que programador (C#, Java, ...) odeia CSS, não sei o motivo, particularmente gosto bastante, mas vejo que isso acaba sendo um problema grande dentro de um projeto Web de prazo curto.

Bom, para ajudar a questão, hoje vamos deleter esse tal de CSS (Tableless).

O que é CSS e Tableless

CSS é uma linguagem para estilizar o HTML e também o XML. Para isso, é criado um arquivo .css e feita a ligação entre a página e este arquivo.

o Tableless, é uma forma de desenvolver os sites sem a utilização de tabelas na sua estrutura, como vi uma vez: "Defender o HTML para seu propósito, tabelas foram criadas para mostrar dados de forma tabular". Para saber mais sobre o Tableless segue uma lista de site muito bons: Tableless, w3c, Maujor.

Uma pena que ainda usamos navegadores antigos como o Internet Explorer 6, é como "andar para trás" quando falamos nas tecnologias em questão.

As propriedades do CSS

Não quero aqui explicar todas as propriedades do CSS, mas as mais importantes quanto a questão de layout.

Float / Clear

A propriedade float, posiciona o elemento, podendo este ir apenas para esquerda ou para direita.Vejamos o exemplo:

div.topleft
{
    border:1px solid #000000;
    width:150px;
    float:left;
    background-color:#0099FF;
}

div.topright
{
    border:1px solid #000000;
    width:150px;
    float:right;
    background-color:#0099FF;
}

Agora crio as divs no meu HTML, e coloco a class="meuelementocss", Veja como fica.

Nota-se que as divs ficaram posicionadas de acordo com o Float. Se não tivesse especificado a propriedade float para elas ficariam uma embaixo da outra. Se colocasse duas divs com float:left ficariam uma após a outra.

Agora quero criar uma div abaixo das que havia criado.

Criamos a div rodape e estilizamos.

div.rodape
{
    border:1px solid #000000;
    background-color:#00FFCC;
}

A propriedade float, deixa as divs acima do plano de fundo normal, como se estivessem flutuando sobre todas as outras, com isso a nossa nova div criada ficaria abaixo das que estão flutuando.

Veja como fica.

Para não deixar sobrepor as divs com float, nossa nova div rodape precisa da propriedade clear.

A propriedade clear pode ter os seguintes valores:

left - Não flutuar sobre as divs com float:left; right - Não flutuar sobre as divs com float:right e; both - Não flutuar sobre nenhuma div.

Adicionado a classe rodape:

div.rodape
{
    clear:both;
    border:1px solid #000000;
    background-color:#00FFCC;
}

Veja como fica.

Overflow

A propriedade Overflow define o que irá acontecer caso o conteúdo de um elemento ultrapasse seu tamanho.

div.myoverflowhid
{
    background-color:#FFFFCC;
    border:1px solid #000000;
    height:150px;
    overflow:hidden;
}

Ela pode ter os seguintes valores:

hidden - Esconde o conteúdo que ultrapassa, porém é possível copia-lo; scroll - Cria scroll horizontal e vertical na div e; auto - Verifica a necessidade de scroll, se há ele coloca.

Veja como ficam todos.

Position

A propriedade Position, como o próprio nome diz, define o posicionamento do elemento na página, diferente do float, para qualquer lado e com tipos de posicionamentos diferentes.

div.positionarea
{
    height:400px;
    background-color:#CCFFFF;
}

    div.positionarea div.positionrelative
    {
        background-color:#CCCCCC;
        border:1px solid #000000;
        position:relative;
        left:30px;
        top:100px;
        width:400px;
    }

    div.positionarea div.positionrelative p
    {
        color:#CC0000;
    }

    div.positionarea div.positionabsolute
    {
        background-color:#CCCCCC;
        border:1px solid #000000;
        position:absolute;
        left:30px;
        top:100px;
        width:400px;
    }

    div.positionarea div.positionabsolute p
    {
        color:#006600;
    }

    div.positionarea div.positionfixed
    {
        background-color:#CCCCCC;
        border:1px solid #000000;
        position:fixed;
        left:30px;
        top:80px;
        width:400px;
    }

    div.positionarea div.positionfixed p
    {
        color:#CC33FF;
    }

    div.positionarea div.positionstatic
    {
        background-color:#CCCCCC;
        border:1px solid #000000;
        position:static;
        width:400px;
    }

    div.positionarea div.positionstatic p
    {
        color:#000000;
    }

Acima 4 divs foram estilizadas, uma para cada tipo de position, também foi passado, todos os estilos das tags parágrafo de cada div. Muito importante pois consigo alterar o estilo apenas de 1 pequeno elemento de uma div, assim ele perde uma possivél herança.

Position pode ter os seguintes valores:

static - posicionamento comum de todos os elementos, ou seja, não precisa declarar. Ele ignora qualquer valor para top, left, right ou bottom; relative - pega o elemento em sua posição normal, e ativa os valores top, left, right ou bottom; absolute - pega o elemento em sua posição absoluta, ou seja, como se fosse o 1º elemento após a tag body e aplica os valores top, left, right ou bottom e; fixed - fixa um valor top, left, right ou bottom de acordo com parte visível do browser. Ou seja, mesmo com scroll o elemento ficará fixo.

Veja como ficam todos.

!important

!important não é uma propriedade e sim uma regra. Esta regra funciona da seguinte maneira, se em um CSS muito grande houver conflitos de declarações, sobrescreve-se a que está com a regra.

div.important h2
{
    color:#0000FF !important;
    text-align:center;
}

div.important h2
{
    color:#CCCCCC;
}

No caso acima o h2 da div important teve duas declarações, a última é a que vale de acordo com o processamento do documento, porém como a propriedade color está com a regra !important ela é a valida, outra coisa é que todas as propriedades que existem em uma e não existem na outra são válidas, neste exemplo a propriedade text-align.

Veja como fica.

Hacks

Bom, para finalizar um pouco de gambiarra =P. Bricadeira, infelizmente nem todos os navegadores se comportam da mesma maneira, sendo assim nos obriga a tomar decisões mais rápidas. Os hacks de CSS, utilizados com moderação e consciência, ajudam muito a resolver esse problema de guerra de navegadores.

body
{
    margin:0;
    padding:0;
    background-color:#999999; /*Firefox*/
    *background-color:#FFFFFF; /*IE 7*/
    _background-color:#000000; /*IE 6*/
}

No exemplo acima temos 3 declarações para a propriedade background-color. Sem nada na frente usaremos para o Firefox, o asterisco para o Internet Explorer 7 e o underline para o malvado Internet Explorer 6.

Teste o Exemplo.

Isso é tudo por hoje. Lixeira cheia e nossa página ficou "Linda" =)! Mas queria deixar uma frase, quando estava fazendo o curso de SQL, tinha um Design muito conceituado, quando um aluno falou que odiava CSS/Tableless (no curso de SQL teve esse papo!) porque era fácil e perda de tempo ele disse:

"O fácil e o chato é o que vai fazer a diferença no final do seu projeto. Não subestime o que é fácil em TI."