1. Colégio da URCAMP – Técnico em Informática / Bagé - RS
18-10-10 – Profª. Denise Lima - Disciplina Desenvolvimento para Web I
Poligrafo Introdução CSS
Folhas de estilo em cascata (Cascading Style Sheets )
O que é CSS?
O CSS (Cascading Style Sheets) é um padrão para documentos HTML. Ele permite
uma maior versatilidade no desenvolvimento de design para sites sem aumentar seu
tamanho. Basicamente, o CSS tem-se um maior controle sobre os atributos
tipográficos de um site (tamanho, cor de fontes, margem de texto etc). Também é
responsável pela utilização de camadas (layers), permitindo a sobreposição de texto
sobre imagens (MACEDO, 2006). Conforme Silva (2008), “Utilizar elementos e
atributos de apresentação misturados à marcação é uma prática inaceitável”.
As folhas de estilo em cascata (CSS) podem ser aplicadas de 3 formas: local (inline),
incorporada e externa.
Local - Modifica uma única tag específica, utilizando o atributo style;
Incorporada - Define um estilo de formatação para um documento específico, é
inserido dentro do cabeçalho do documento <head></head>;
Externa - Através de um único modelo vários documentos poderão ser
formatados. Este documento será salvo em um arquivo separado com a extensão
.css
Veja exemplo retirado do livro do Maurício Samy Silva (2008:214-215):
Pretendemos escrever dois parágrafos, ambos com características similares mas, um
está correto e outro está escrito de forma errada. Observe:
<HTML>
<head><title>exercício css 1</title>
<head>
<body>
<p><font size=“4” face=“Georgia” color=“red”>
Aqui vai o texto do primeiro parágrafo</font></p>
<p class=“estilo”>Aqui vai o texto do segundo parágrafo</p>
</body>
</HTML>
No primeiro elemento usamos o elemento Font e seus atributos, todos eles em desuso,
e todos exclusivamente de apresentação, ou seja desnecessários em um documento
HTML. No segundo, “atribuímos a uma classe chamada “estilo”, mas que poderia se
chamar “minha_classe”, ou outro nome, mas que tem por finalidade servir como
identificador para o segundo parágrafo”. Identificadores são utilizados para identificar
elementos aos quais se aplicará o estilo definido pelo CSS.
A seguir o css (nesse caso, folha de estilo incorporada) que faz no segundo parágrafo
Material Elaborado pela Professora Denise Lima (Disciplina Desenvolvimento para
Web I – URCAMP/BAGÉ - 2010)
2. o mesmo efeito que a marcação fez no primeiro:
<head>
...
<style type= “text/css” >
p.estilo{
Font-size: large;
Font-family: Georgia, serif;
Color: red;
}
</style>
</head>
Uma regra de estilo mínima é composta de 3 partes
distintas:
Seletor {propriedade: valor;}
Seletor: É o alvo da regra de estilo, marca aonde será aplicada o estilo;
Declaração: Define quem e como será utilizado. Uma declaração compõe-se de uma
propriedade e seu valor.
Propriedade- define o que será estilizado;
Valor- define o quanto ou como será estilizado.
“Evite usar expressões como atributo CSS em vez de propriedade CSS e comando
CSS no lugar de declaração CSS, entre outras” (SILVA, 2008:215).
Uma regra de estilo pode ter mais de uma declaração, desta forma facilita a
compreensão se escrevermos cada declaração em uma linha:
p{
Color: #CCCCCC;
Background-color: #C8C8C8
}
---
Se utilizarmos no valor de uma propriedade, uma palavra composta, deve-se utilizar
aspas duplas ou simples:
p{
Font-family: “times new Roman”;
}
---
Não se utiliza aspas em palavras separadas por hífen:
p{
Font-family; sans-serif;
Material Elaborado pela Professora Denise Lima (Disciplina Desenvolvimento para
Web I – URCAMP/BAGÉ - 2010)
3. }
Comentários são dados informativos para o próprio desenvolvedor web não se perder
diante de uma folha com tantas declarações de estilo. Se usam desta forma:
/* Este é um bloco de comentário em linhas
Contendo informações sobre um trecho da folha de estilos*/
Declarando Folhas de Estilo - quais são as maneiras de se
aplicar a folha de estilos (CSS):
Estilo LOCAL (INLINE)
Se aplica diretamente dentro da tag de abertura do elemento através do atributo style:
<p style=“font-size: 10pt; color: red;”>
Texto com fonte grande e na cor vermelha
</p>
Estilo INCORPORADO
Se aplica dentro da seção head do documento e com o uso do elemento style:
<head>
...
<style type=“text/css”>
p{
Font-size:12pt;
Color: red;
Font-family: Georgia, Serif;
}
</style>
</head>
...
Estilo EXTERNO
O documento com extensão .css aonde estarão as regras de estilo, é linkado ao
arquivo .html:
Dentro da seção head do documento HTML escreve-se:
<link rel=“stylesheet” type= “text/css” href=“estilo.css” />
Em um documento estilo.css escreve-se somente:
p{
Font-size: large;
Color: red;
Font-family: Georgia, Serif;
}
Os documentos HTML obedecem a uma hierarquia na aplicação, ao mesmo tempo, de
estilo local, incorporado e externo. Por exemplo utilizamos um documento.css para
aplicar estilos em um site com mais de 30 páginas, mas, precisamos em uma única
página alterar a cor de fundo, nesse caso, utilizaremos o estilo local (inline). O estilo é
aplicado diretamente na tag body. O documento HTML obedece ao estilo local porque
Material Elaborado pela Professora Denise Lima (Disciplina Desenvolvimento para
Web I – URCAMP/BAGÉ - 2010)
4. ele têm prevalência sobre o estilo externo. Por sua vez o estilo incorporado têm
prevalência sobre o estilo externo mas não sobre o local.
<body style=“background-color: #000000”;>
>>Estilo externo (sem prevalência sobre os outros tipos de aplicação de folha de
estilo, mas é o estilo que deve ser aplicado em primeiro lugar)
>>Estilo incorporado (prevalência sobre o estilo externo somente)
>>Estilo local (in line) (prevalência sobre os outros tipos de estilo)
MACEDO, Marcelo da Silva. CSS (Folhas de Estilo) - Dicas & Truques. Rio de
Janeiro: Editora Ciência Moderna Ltda, 2006.
SILVA, Marcelo Samy Silva. Criando sites com HTML: Sites de alta qualidade
com HTML e CSS. São Paulo: Novatec Editora, 2008.
Material Elaborado pela Professora Denise Lima (Disciplina Desenvolvimento para
Web I – URCAMP/BAGÉ - 2010)