Este documento discute a utilização de CSS (Cascading Style Sheets) para formatar documentos HTML. CSS permite definir regras de estilo para elementos como fontes, cores, margens e posicionamento de imagens. As regras podem ser definidas no cabeçalho, na linha ou em um arquivo CSS separado e compartilhado entre várias páginas.
4. Formatação
• O que há a fazer quando pretendemos
alterar todas as formatações de um site?
obvamente recorrer ao CSS
5. CSS
• Cascade Style Sheet
• Personalizar formatações
• Definir regras
• Regras podem ser colocadas:
• No cabeçalho da folha
• Na linha
• Num ficheiro separado
• Pode-se colocar as formatações todas no
mesmo local e alterar essas regras.
6. Definição de estilo
elemento {
atributo1:valor1;
atributo2: valor2;
...}
• Exemplo 1
H1{
font-size: 36
}
9. Definição de estilo
<html>
<head>
<style type="text/css"> Pode ser
h1.style1 {font-size: 36px}
eliminado
</style>
</head> Caso eliminar o
<body>
elemento na
<h1 class="style1"> Cabecalho </h1>
definição então
</body>
</html>
a classe pode
ser utilizado
para outro
elementos
18. Float
<html>
<head>
<style type="text/css">
img {float:right}
</style>
</head>
<body>
<p>colocar imagem em baixo. O texto vai fluir em torno da imagem </p>
<p><img src="imagem.gif" width="95" height="84" />
Texto grande, comprido e chato.Texto grande, comprido e chato.
Texto grande, comprido e chato.Texto grande, comprido e chato.
Texto grande, comprido e chato.Texto grande, comprido e chato.
Texto grande, comprido e chato.Texto grande, comprido e chato.
Texto grande, comprido e chato.Texto grande, comprido e chato.
Texto grande, comprido e chato.Texto grande, comprido e chato.
Texto grande, comprido e chato.Texto grande, comprido e chato.
Texto grande, comprido e chato.Texto grande, comprido e chato.
Texto grande, comprido e chato.Texto grande, comprido e chato.
Texto grande, comprido e chato.Texto grande, comprido e chato.
</p>
</body>
</html>
20. Onde se pode então definir o CSS?
• No cabeçalho da folha (exemplos anteriores)
• Na linha (in Line)
• Num ficheiro separado
• Vejamos então este último...
21. Formatos num ficheiro separado
Ficheiro formatos.css
h1 {color: #00ff00}
h2 {color: #dda0dd}
p {color: rgb(0,0,255)} Referência a um
ficheiro externo
Ficheiro exemplo21.html
<html>
<head>
<link href="formatos.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is a paragraph</p>
</body>
</html>
22. Ficheiro CSS partilhado por várias
folhas html
index.html
Formatos.css
dados.html
fotos.html