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:
0 comentários:
Postar um comentário