0

Uso das CSS II

#CSS
Márcio Cardoso
Márcio Cardoso

Estilo definido para toda uma página


Podemos definir no cabeçalho do documento, estilos para que sejam aplicados a toda página. É uma

maneira muito cômoda de dar forma ao documento e muito potente, já que estes estilos

continuarão em toda a página e com isso, economizaremos muitas etiquetas HTML que dão forma

ao documento. Além disso, se desejamos mudar os estilos da página simplesmente faremos de uma

vez só.

Este exemplo é mais complicado visto que utiliza a sintaxe CSS de forma mais avançada. Mas não

se preocupe, pois com os exemplos você irá aprendendo seu uso e mais tarde comentaremos a

sintaxe com mais profundidade.

No exemplo vemos que se utiliza a etiqueta <STYLE> colocada no cabeçalho da página para definir

os diferentes estilos do documento.

Simplificando, entre as etiquetas <STYLE> e </STYLE>, se coloca o nome da etiqueta que

queremos definir os estilos e entre chaves -{ }- colocamos em sintaxe CSS as características de

estilos.

<html>

<head>

CSS, folhas de estilos.

<title>Exemplo de estilos para toda uma página</title>

<STYLE type="text/css">

<!--

H1 {text-decoration: underline; text-align:center}

P {font-Family:arial,verdana; color: white; background-color: black}

BODY {color:black;background-color: #cccccc; text-indent:1cm}

// -->

</STYLE>

</head>

<body>

<h1>Página com estilos</h1>

Bem-vindos...

<p>Desculpe ser tão breve, mas isto é um exemplo sem importância</p>

</body>

</html>

Como se pode apreciar no código, definimos que a etiqueta <H1> se apresentará:

Sublinhada

Centralizada

Também, por exemplo, definimos que no corpo do texto inteiro da página (etiqueta <BODY> serão

aplicados os seguintes estilos:

Cor do texto negro

Cor do fundo acinzentado

Margem lateral de 1 centímetro

Cabe destacar que se aplicamos estilos à etiqueta <BODY>, estes serão herdados pelo resto das

etiquetas do documento. Isto será sempre assim, e no caso de que não volte a definir estes estilos

nas seguintes etiquetas, dominará a etiqueta mais concreta. Este detalhe pode ser visto na etiqueta

<P>, que tem definidos estilos que já foram definidos para <BODY>. Os estilos que são aplicados

são os da etiqueta <P> que é mais concreta.

Por último, é válido apreciar os comentários HTML que englobam toda a declaração de estilos:

<!--Declaração de estilos-->. Estes comentários são utilizados para que os navegadores antigos que

não compreendem a sintaxe CSS, não incluam esse texto no corpo da página. Caso contrário, os

navegadores antigos (por exemplo Netscape 3) escreveriam esse "feio código" na página.


Estilo definido para todo o site web


Uma das características mais potentes da programação com folhas de estilo, consiste em que

podemos definir os estilos de todo um site web de uma só vez. Isto se consegue criando um arquivo

onde somente colocamos as declarações de estilos de página e linkando todas as páginas do site

com esse arquivo. Dessa forma, todas as páginas compartem uma mesma declaração de estilos e,

portanto, se a mudamos, mudarão todas as páginas. Todas as vantagens acrescentadas de que se

economiza em linhas de código HTML (o que reduz o peso do documento) e se evita a moléstia de

definir uma e outra vez os estilos com o HTML, tal como foi comentado anteriormente.

Veremos agora como o processo para incluir estilos com o arquivo externo.


1 - Criamos o arquivo com a declaração de estilos


É um arquivo de texto normal, que pode ter qualquer extensão, apesar de podermos atribuir a

extensão .css para lembrarmos que tipo de arquivo é. O texto que devemos incluir deve ser escrito

exclusivamente em sintaxe CSS, ou seja, seria errado incluir o código HTML nas etiquetas e etc.

Podemos ver um exemplo a seguir:

P {

CSS, folhas de estilos.

font-size : 12pt;

font-family : arial,helvetica;

font-weight : normal;

}

H1 {

font-size : 36pt;

font-family : verdana,arial;

text-decoration : underline;

text-align : center;

background-color : Teal;

}

TD {

font-size : 10pt;

font-family : verdana,arial;

text-align : center;

background-color : 666666;

}

BODY {

background-color : #006600;

font-family : arial;

color : White;

}

2 - Linkamos a página com a folha de estilos

Para isso, vamos colocar a etiqueta <LINK> com os atributos:

rel="STYLESHEET" indicando que o link é com uma folha de estilos

type="text/css" porque o arquivo é de texto, em sintaxe CSS

href="estilos.css" indica o nome do arquivo fonte dos estilos

Vejamos uma página web inteira que linka com a declaração de estilos anterior.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<link rel="STYLESHEET" type="text/css" href="estilos.css">

<title>Página que lê estilos</title>

</head>

<body>

<h1>Página que lê estilos</h1>

Esta página tem no cabeçalho a etiqueta necessária para linkar com a folha de estilos. É muito fácil.

<br>

<br>

<table width="300" cellspacing="2" cellpadding="2" border="0">

<tr>

<td>Isto está dentro de um TD, logo tem estilo próprio, declarado no arquivo externo</td>

</tr>

<tr>

<td>A segunda fila do TD</td>

</tr>

</table>

</body>

</html>


Regras de importância nos estilos


Os estilos se herdam de uma etiqueta para outra, tal como foi indicado anteriormente. Por exemplo,

se temos declarado no <BODY> alguns estilos, em geral, estas declarações também afetarão à

etiquetas que estejam dentro desta etiqueta, ou o que é o mesmo, dentro de todo o corpo.

CSS, folhas de estilos.

Em muitas ocasiões mais de uma declaração de estilos afeta a mesma parte da página. Sempre se

leva em conta a declaração mais particular. Porém, as declarações de estilos podem ser realizados

de múltiplas formas e com várias etiquetas, também entre essas formas existe uma hierarquia de

importância pra resolver conflitos entre várias declarações de estilos diferentes para uma mesma

parte da página. Pode ser visto a seguir, esta hierarquia, primeiro colocamos as formas de

declarações mais gerais, e portanto, menos respeitadas em caso de conflito:

Declaração de estilos com arquivo externo. (para todo o site web)

Declaração de estilos para toda a página. (com a etiqueta <STYLE> no cabeçalho da página)

Estilos definidos em uma parte da página. (com a etiqueta <DIV>)

Definidos em uma etiqueta em concreto. (Utilizando o atributo style na etiqueta em questão)

Declaração de estilo para uma pequena parte do documento. (Com a etiqueta <SPAN>)

Já vimos como incluir estilos na página, de todas as maneiras possíveis e fizemos uma revisão com

a lista anterior. Agora você já está em condições de começar a usar as folhas de estilo em cascata

para melhorar sua página e aumentar a produtividade de seu trabalho. Mas esteja atento aos

capítulos seguintes onde irá aprende as lições que lhe faltam para dominar bem a matéria:

conhecer a sintaxe, os diferentes atributos de estilos e outras coisas que irão melhorar sua página.


Outra maneira de definir estilos em um arquivo externo


Veremos agora outra maneira de importar uma declaração externa de estilos CSS: @import url

("arquivo_a_importar.css"), que se utiliza para importar umas declarações de estilos salvadas na

rota que se indica entre parênteses. (as aspas são opcionais, mas os parêntesis são obrigatórios,

pelo menos, em Explorer).

Deve-se incluir na declaração de estilos global a uma página, ou seja, entre as etiquetas <style

type="text/css"> e </style>, que se colocam no cabeçalho do documento.

É importante assinalar que a sentença de importação do arquivo CSS deve ser escrita na primeira

linha da declaração de estilos, algo parecido ao código seguinte.

<style type="text/css">

@import url ("estilo.css");

body{

background-color:#ffffcc;

}

</style>

O funcionamento é o mesmo que se escrevêssemos todo o arquivo a importar dentro das etiquetas

dos estilos, com a garantia de que, se redefinimos dentro do código HTML (entre as etiquetas

</style>) estilos que haviam ficado definidos no arquivo externo, os que se aplicarão serão os que

tivermos redefinido.

Assim, no exemplo anterior, mesmo que tivéssemos definido em estilo.css uma cor de fundo para a

página, a cor que prevaleceria seria o definido em seguida da importação: #ffffcc

A diferença entre este tipo de importação do tipo e a que vimos anteriormente:

<link rel="stylesheel" type="text/css" href="folha.css">

É que @import url ("estilo.css") costuma ser utilizado quando existe umas pautas básicas no

trabalho com os estilos (que se definem em um arquivo a importar) e uns estilos específicos para

cada página, que se definem a seguir, dentro do código HTML entre as etiquetas </style>, como é o

caso do exemplo visto anteriormente.


Sintaxe CSS


Tal como vimos nos exemplos, a sintaxe é bastante simples e repetitiva. Vamos vê-la:

Para definir um estilo se utilizam atributos como font-size,text-decoration... seguidos de dois

pontos e o valor que lhe desejamos atribuir. Podemos definir um estilo a base de definir

muitos atributos separados por ponto e vírgula.

Exemplo:

font-size: 10pt; text-decoration: underline; color: black; (o último ponto e vírgula da

lista de atributos é opcional)

Para definir o estilo de uma etiqueta basta a escrevermos seguida da lista de atributos

fechados entre chaves.

Exemplo:

H1{text-align: center; color:black}

Os valores que se podem atribuir aos atributos de estilo podem ser vistos em uma tabela no

seguinte capítulo. Muitos destes valores são unidades de medida, por exemplo, o valor do

tamanho de uma margem ou o tamanh da fonte. As unidades de medida são as seguintes:

Pontos

Polegadas

Centímetros

pixels pt

in

cm

pxAté aqui deixamos claro tudo relativo à sintaxe. No próximo capítulo você poderá encontrar uma

lista de atributos das folhas de estilo em cascata.

0
502

Comentários (0)

Nunca desistir.

Brasil