Implementando os Estilos
Os estilos podem ser inseridos nos documentos de várias maneiras diferentes:
- por meio de um link direcionado para um arquivo de style sheet
em separado, funcionando para uma ou mais páginas web
Este é o método que eu recomendo, porque ele permite
usar um único style sheet para várias páginas, talvez
até para um site inteiro, o que é muito mais eficiente.
(Isto pode não funcionar se você tende a variar consideravelmente
a formatação de cada página, mas geralmente esta não
é uma boa idéia em termos de comunicação efetiva.)
Este método também separa inteiramente as especificações
do style sheet do conteúdo da página, o que elimina qualquer chance de
browsers não compatíveis com CSS confundirem as informações
do style com o conteúdo da página.
Neste caso, você define os estilos num arquivo em separado com a extensão
.css, e faz uma referência a ele através de uma tag de link
que se posiciona entre os tags de head de cada arquivo HTML que irá
utilizá-lo:
Exemplo
<html>
<head>
<link rel=STYLESHEET href="styles/stylesheets.css" type="text/css">
<title>...</title>
</head>
<body>...
Observe o atributo "type=text/css", também usado na tag <style>
logo abaixo, para identificar o arquivo referido como cascading style sheet.
(A última versão do Internet Explorer não precisa disso, mas é
mais prudente colocar porque outros browsers pedem quando eles dão suporte
para style sheets.)
- por meio de uma inserção de um style sheet numa única
página web
Neste caso, você define os styles dentro de uma tag de style que se
posiciona entre a tag <html> e a tag <body>:
Exemplo
<html>
<head>
<style type="text/css">
<!--
P { font-size: 10pt; font-family: "Verdana, Arial, Sans-Serif"; color: #000066 }
H1 { font-size: 16pt; font-family: "Impact, Arial, Sans-Serif"; color: #990000 }
-->
</style>
...</head>
<body>...
Observe que em concreto as especificações do estilo (que eu explicarei nas
páginas seguintes) são inseridas dentro de uma tag de comentário
-- isto é para assegurar que os browsers que não suportam CSS não
interpretarão estas linhas como conteúdo a ser mostrado.
- pelo acréscimo de atributos de estilo inline em algumas tags como <p>,
<div>, ou <span>
Neste caso você especifica um estilo para um único bloco de texto,
ou usa a tag <span> para especificar o estilo para uma palavra ou frase:
Exemplo
<div style="margin-left: 0.5in; font-size: 10pt">
Este deve ser um bloco indentado com algum
<span style="font-weight: bold; background: #FFFF00">
texto selecionado</span>
dentro dele
</div>
|