Material css parte I

Material Elaborado pela Professora Denise Lima (Disciplina Desenvolvimento para Web I – URCAMP/BAGÉ - 2010)

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


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.

Technology

Material css parte I