CSS Cascading Style Sheets: Visão Geral
CSS – O que É – CSS ou Cascating Style Sheets ou Stylesheets, ou apenas Styles, é um
conjunto de instruções ou regras que se dá ao navegador para que ele
apresente o conteúdo da página, ou de todas as páginas de um site, em certos estilos e layouts. A expressão em inglês tem a ver com cascata, estilo, desdobramentos, e representou um avanço espetacular na internet e na computação em geral. No final da década de noventa o CSS marcou o fim da era medieval na editoração para a rede mundial.
Em 2001 ainda se podia encontrar textos sem tal recurso, os quais tinham mais instruçoes do que textos. Por exemplo, o simples início de um parágrafo era precedido de uma grande quantidade de instrução, repetida a cada novo parágrafo. Com o CSS nós colocamos uma instrução para o parágrafo no alto de uma página, entre as tags <head> e </head>, e todos os parágrafos seguem aquele padrão.
Digamos que você queira que o parágrafos sejam escritos em cor preta, que a fonte tenha o tamanho de 10pt, que a fonte seja Arial, e o estilo da fonte seja itálico. Nesta caso, a instrução entre as tags citadas será:
P{color:black;font-size:10pt;font-family:Arial;font-style:italic;}
Ao inicar um parágrafo vamos colocar <p> (tanto faz ser maiúsculo ou minúsculo) e ao finalizá-lo, ou ao finalizar uma seqüência de parágrafos, colocamos </p>
Arquivo de Estilos – Podemos também colocar tal instrução em um arquivo separado e, em cada página do site, informamos o link de acesso ao citado arquivo, dispensando-se a repetição das instruções nas páginas. Você pode ver no código fonte desta página, no final de <head>, este link: <link href="../../style/otimizacao.css" rel="stylesheet" type="text/css">
Esse arquivo é, em geral, chamado de arquivo de estilos e, em cada site, damos-lhe o nome que queremos, e acrescentamos a extensão .css. Veja que, neste caso, dei-lhe o nome de otimizacao. E, tal como o parágrafo, no arquivo css nós podemos colocar outras instruções. Como estas instruções se repetem nas páginas, nós estamos estabelecendo, de certa forma, um padrão para todas as páginas do site.
Exemplos de outras instruções que podemos colocar:
.otitext {
font-family:Arial, sans-serif;
font-size: 9pt;
color:#000000;
text-align: left;
font-style: normal;
text-decoration: none;
}
Veja que dei o nome de otitext a esta instrução; e estabeleci que seria da família Arial, tamanho 9pt, cor preta, alinhamento à esquerda, estilo normal, e sem decoração.
.otiyellow {font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:12px;color:#000000;background:yellow;}
Veja que esta instrução foi chamada de .otiyellow, a fonte é da família Verdana, Arial, Helvetica (se o computador do usuário não tem a fonte Verdana, exibirá a Arial; se não tem Arial, exibirá Helvetica; se não tem Helvetica, exibirá a fonte padrão, geralmente Times New Roman), e que acrescentei uma cor de fundo (background). Não faz diferença escrever as instruções horizontalmente, como neste caso, ou verticalmente, como no caso anterior.
h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
color:#0000FF;
font-weight:bold;
text-align: center;
background-position: bottom;
}
Cada instrução destas recebe o nome de class. Digamos que ao escrever um parágrafo ou mais, ao invés das características acima descritas em P, você queira as características descritas em otitext. Neste caso, antes de começar o parágrafo, você escreverá <p class="otitext">escreve o texto em seguida e, ao terminar, coloca </p>
Pode ocorrer ainda de, além das instruções do arquivo css, precisarmos ou querermos fazer algo diferente em uma ou mais páginas. Neste caso, agimos de duas formas. Na primeira, damos a instrução extra entre as tag <head e </head> e esta instrução tem precedência sobre as instruções do arquivo. Quando fazemos isto, temos de dar um nome diferente daquele dado no arquivo de estilo, para que o navegador diferencie as instruções. O nome que damos a cada conjunto de instruções extras fica a nosso critério.
No segundo caso, colocamos a instrução no corpo da página, no lugar exato onde queremos mudar o estilo – esta instrução tem precedência sobre a instrução entre as tags citadas. Ela fica circunscrita àquela parte em que se encontra, ou seja não se repete na página e tampouco em outras páginas. E por não se desdobrar, não se trata de um css.
Exemplo de instrução circunscrita a uma parte da página: digamos que você queira
escrever uma parte com letra grande, tal como você acaba de ler. No código fonte eu escrevi <font size="3"> e no final do texto coloquei </font>.
Portanto, os estilos via CSS são extremamente flexíveis e nos permitem muitas instruções, assim como muitas combinações no arquivo de estilos, entre o arquivo e os estilos na área oculta da página. E para completar o grande arsenal de ferramentas para o trabalho, podemos acrescentar essas instruções circunscritas.
Gerador de Estilos CSS – Existe uma verdadeiro obsessão na internet em tornar as coisas mais fáceis. Isto é bom, porque nos livra de tarefas repetitivas, com o quê, temos mais tempo para as tarefas criativas. Gerar os arquivos CSS também é alvo desta busca. Embora os arquivos css oriundos de geradores apresentem algumas limitações, o que fazem é muito, e o produto final é bem feito. Tenha aqui, sua própria experiência com um
gerador de CSS.
É importante observar que a expressão estilos de CSS tem um sentido mais abrangente. Além do estilo propriamente dito, inclui layout (altura, alinhamento, comprimento, posição, etc.) e algumas regras relacionadas à prevalência de comandos.
Ruy Miranda
Otimização de Sites
|
