Material css parte I

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)

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;

}
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


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 css parte I

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a Material css parte I

Mais de Denise Lima

Material css parte I