0

CSS, folhas de estilos

#CSS
Márcio Cardoso
Márcio Cardoso

Introdução às CSS


A linguagem HTML está limitada na hora de aplicar forma a um documento. Isto é assim porque foi

concebido para outros usos (sobretudo científicos), diferente dos atuais, que são muito mais

amplos.

Para solucionar estes problemas, os web designers utilizaram técnicas tais como a utilização de

tabelas imagens transparentes para ajustá-las, a utilização de etiquetas que não são padrões do

HTML e outras. Estas "trapaças" causaram muitas vezes problemas nas páginas na hora de sua

visualização em distintas plataformas.

Ademais, os desenhadores se viram frustrados pela dificuldade com a qual, mesmo utilizando estes

truques, encontravam-se planejando páginas sobre o papel, onde o controle sobre a forma do

documento é absoluto.

Finalmente, outro antecedente que fez necessário o desenvolvimento desta tecnologia consiste em

que as páginas web têm misturado em seu código HTML o conteúdo do documento com as etiquetas

necessárias para lhe dar forma. Isto tem seus inconvenientes já que a leitura do código HTML se faz

pesada e difícil na hora de buscar erros ou depurar as páginas. Mesmo que do ponto de vista da

riqueza da informação e a utilidade das páginas na hora de armazenar seu conteúdo, é um grande

problema que estes textos estejam misturados com etiquetas incrustadas para dar forma a estes:

degrada-se sua utilidade.

Nestas páginas de CSS pretendemos tornar conhecida a tecnologia com um enfoque prático para

que em poucos capítulos você possa usar as CSS de forma depurada, refletindo toda nossa

experiência em seu uso. Não pretendemos explorar todos os aspectos da tecnologia já para realizar

isto necessitaríamos uma extensão do livro inteiro.


Características e vantagens das CSS


A forma de funcionamento das CSS consiste em definir, mediante uma sintaxe especial, a forma de

apresentação que lhe aplicaremos a:

Um web inteiro, de modo que se pode definir a forma de todo o web de uma vez só.

Um documento HTML ou página, que se pode definir a forma, em um pequeno pedaço da

página.

Uma porção do documento, aplicando estilos visíveis em um pedaço da página.

Uma etiqueta em concreto, chegando inclusive a poder definir vários estilos diferentes para

uma só etiqueta. Isto é muito importante já que oferece potência em nossa programação.

Podemos definir, por exemplo, vários tipos de parágrafos: em vermelho, em azul, com

margens, sem margens...

A potência da tecnologia é óbvia. Mas não fica só por aqui, já que ademais esta sintaxe CSS permite

aplicar o documento formato de forma muito mais exata. Se antes o HTML ficava curto para

planejarmos as páginas e teríamos que utilizar truques pra conseguir nossos efeitos, agora temos

CSS, folhas de estilos.

CSS tem uma sintaxe própria, a

veremos através de exemplos.

Em seguida, veremos com

detalhes.

muitas mais ferramentas que nos permite definir esta forma.

Podemos definir a distância entre as linhas do documento.

Pode-se aplicar recuo às primeiras linhas do parágrafo.

Podemos colocar elementos na página com maior precisão, e sem lugar para erros.

E muito mais, como definir a visibilidade dos elementos, margens, sublinhados, riscados...

E continuamos mostrando vantagens, já que com o HTML somente podíamos definir atributos nas

páginas com pixels e porcentagens, agora podemos definir utilizando muito mais unidades como:

Pixels (px) e porcentagem (%), como antes.
Polegadas (in)
Pontos (pt)
Centímetros (cm)


Navegadores que o suportam


Esta tecnologia é bastante nova, porém nem todos os navegadores a suportam. De fato, somente os

navegadores de Netscape versões da 4 em diante e de Microsoft a partir da versão 3 são capazes de

compreender os estilos em sintaxe CSS. Ademais, cabe destacar que nem todos os navegadores

implementam as mesmas funções de folhas de estilos, por exemplo, Microsoft Internet Explorer 3

não suporta nada em relação a camadas.

Isto quer dizer que devemos usar esta tecnologia com cuidado, já que muitos usuários não poderão

ver os formatos que apliquemos às páginas com CSS. Sendo assim, utilizem as folhas de estilos

quando estas não forem a supor causar um problema.


Uso das CSS I


Vamos agora descrever os diferentes usos das CSS introduzidos no

capítulo anterior. Vamos por ordem descrevendo os pontos segundo sua

dificuldade e importância.

Dividimos este capítulo em duas partes por sua extensão e por haver várias formas distintas de

aplicar estilos. Aqui veremos as mais simples e no capítulo seguinte outras mais complicadas, mas

mais potentes.

Pequenas partes da página

Para definir estilos em seções reduzidas de uma página se utiliza a etiqueta <SPAN>. Com seu

atributo style indicamos em sintaxe CSS as características de estilos. Vemos com um exemplo,

colocaremos um parágrafo onde vamos visualizar determinadas palavras na cor verde

<p>

Isto é um parágrafo com várias palavras <SPAN style="color:green">de cor verde</SPAN>. é muito fácil.

</p>

Que tem como resultado:

Isto é um parágrafo com várias palavras de cor verde. É muito fácil.

Estilo definido para uma etiqueta

Deste modo podemos fazer com que toda uma etiqueta mostre um estilo determinado. Por exemplo,

podemos definir um parágrafo inteiro de cor vermelha e outro de cor azul. Para isso, utilizamos o

atributo style, que é admitido por todas as etiquetas do HTML (sempre e quando dispormos de um

CSS, folhas de estilos.

<p style="color:#990000">

Isto é um parágrafo de cor vermelha.

</p>

<p style="color:#000099">

Isto é um parágrafo de cor azul.

</p>

Que tem como resultado:

Isto é um parágrafo de cor vermelha.

Isto é um parágrafo de cor azul.

Estilo definido em uma parte da página

Com a etiqueta <DIV> podemos definir seções de uma página e aplicar estilos com o atributo

style, ou seja, podemos definir estilos de uma só vez a todo um bloco da página.

<div style="color:#000099; font-weight:bold">

<h3>Estas etiquetas vão em <i>azul e negrito</i></h3>

<p>

Continuamos dentro do DIV, por isso permanecem os estilos.

</p>

</div>

Que tem como resultado:

Estas etiquetas vão em azul e negrito

Continuamos dentro do DIV, por isso permanecem os estilos.


0
11

Comentários (0)

Nunca desistir.

Brasil