Iniciando no CSS: Uso das CSS - Parte 2


Autor/fonte: CriarWeb.com
E-mail/Url: http://www.criarweb.com/artigos/78.php



Digg del.icio.us

Descrevemos os usos mais avançados das folhas de estilo em cascata, para podermos utilizá-las da maneira mais potente.

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>
<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 {
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&aacute;gina que lê estilos</title>
</head>

<body>
<h1>P&aacute;gina que lê estilos</h1>
Esta p&aacute;gina tem no cabeçalho a etiqueta necessária para linkar com a folha de estilos. É muito f&aacute;cil.
<br>
<br>
<table width="300" cellspacing="2" cellpadding="2" border="0">
<tr>
    <td>Isto est&aacute; 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>

Rode e veja o resultado.

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.

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.




Enviado por xKuRt em 06/11/2006 às 12:34


Avaliação

Avaliação desta publicação: 3.67; Total de avaliações: 3


Avaliar:


A avaliação de publicações é restrita a membros cadastrados e logados no nosso site.



Comentários

Este artigo ainda não foi comentado ou o(s) comentário(s) que foi(ram) enviado(s) a ele ainda não foi(ram) publicado(s).


Envio de comentário:




  

Quarta, 17 de Setembro de 2014




Top 5 membros

Últimos membros online

Últimos membros cadastrados



Capa do livro
Ruby on Rails: Desenvolvimento Fácil e Rápido de Aplicações Web


Capa do livro
Kit de Treinamento MCTS (Exame 70-680) - Configuração do Windows 7


Capa do livro
Windows Server 2008 - Guia de Bolso do Administrador





Hostnet

IMD