Aula 2

UFC

Enviado por Paulo Junior em 17/08/2013
Esta é uma pré-visualização de arquivo. Entre para ver o arquivo original
Desenvolvimento de Software 
para WEB 
 
Fundamentos de CSS 
Prof. Regis Pires Magalhães 
regispires@lia.ufc.br 
Efeito cascata 
• É o estabelecimento de uma prioridade para 
aplicação da regra de estilo ao elemento. 
• Fatores para determinar a prioridade: tipo de 
folha de estilo, o local físico da folha de estilo no 
seu todo, o local físico da regra de estilo na folha 
de estilo e a especificidade da regra de estilo. 
 
Regra CSS 
• Possui três partes: 
▫ Seletor 
 elemento HTML identificado por sua tag, classe ou ID, 
e para o qual a regra será válida 
▫ Propriedade 
 atributo do elemento HTML ao qual será aplicada a 
regra 
▫ Valor 
 característica específica a ser assumida pela 
propriedade 
• Sintaxe: 
▫ seletor { propriedade: valor; } 
 
Regra CSS 
• Exemplos 
p { 
 font-size: 12px; /* ponto-e-vírgula é facultativo */ 
} 
 
body { 
 color: #000; 
 background: #fff; 
 font-weight: bold; /*ponto-e-vírgula é facultativo */ 
} 
 
Regra CSS 
• Exemplos 
body { 
 background-color: #fff; 
} 
 
h3 { 
 font-family: "Comic Sans MS"; 
 /* palavra composta entre aspas duplas */ 
} 
 
p { 
 text-align: right; 
 color: #f00; 
} 
Agrupamento de seletores 
• Vários seletores podem ser agrupados em uma 
regra CSS. 
h1, h2, h3, h4, h5, h6 { 
 color: #0f0; 
} 
Seletor classe 
• Exemplos 
p.cor-um { 
 color:#000; 
} 
 
p.cor-dois { 
 color:#00f; 
} 
<p class ="cor-um"> este parágrafo será na cor preta.</p> 
 
<p class ="cor-dois">este parágrafo será na cor azul.</p> 
Classe aplicável a qualquer 
elemento HTML 
.cor-tres { 
 color: #00f; 
} 
<h2 class="cor-tres"> 
 Este cabeçalho é na cor azul. 
</h2> 
 
<p class="cor-tres"> 
 Este parágrafo é na cor azul. 
</p> 
Omite-se o nome do 
elemento antes da 
classe. 
Seletor ID 
• Deve ser único. 
▫ Só pode ser aplicado a UM elemento HTML dentro 
do documento. 
• Sintaxe: 
▫ Um nome qualquer precedido do sinal #. 
#meuID { 
 propriedade: valor; 
} 
Seletores identificam tags específicas 
 <div class="pageFrame" id="pageHead"> 
 <h1> 
 Welcome, 
 <span id="custName">Armando</span> 
 <img src="welcome.jpg" id="welcome"/> 
 </h1> 
</div> 
• Nome de tag: h1 
• Nome de classe: .pageFrame 
• ID do elemento: #pageHead 
• Nome de tag e classe: div.pageFrame 
• Nome de tag e id: img#welcome 
• Relacionamento descendente: div #custName 
• Atributos herdam dos padrões do navegador, a menos 
que sejam sobrescritos. 
Exercício 
• Que seletor CSS estiliza somente a palavra 
“bar”? 
• <p class="a">foo, 
 <span class="a">bar<span></p> 
a) span.a 
b) p .a 
c) .a span 
d) Todas as respostas estão corretas. 
Comentários 
• Começam com "/*" e terminam com " */". 
• São ignorados pelo navegador. 
/* este é um comentário*/ 
p { 
 font-size: 14px; /* este é outro comentário*/ 
 color: #000; 
 font-family: Arial, Serif; 
} 
Tipos de CSS 
• Tipos de vinculação de folhas de estilo 
1. Inline. 
2. Incorporadas. 
3. Importadas ou linkadas a partir de um documento 
externo. 
 
Folha de estilo inline 
• regras CSS declaradas dentro da tag do 
elemento HTML com uso do atributo style. 
• só se aplica a um elemento HTML. 
• mistura a apresentação com a marcação 
<p style="color:#000; margin: 5px;"> 
Aqui um parágrafo de cor preta e com 5px nas 4 margens. 
</p> 
Folha de estilo incorporada ou interna 
<head> 
... 
 <style type="text/css"> 
 body { 
 background: #000; 
 url(imagens/minhaimagem.gif); 
 } 
 h3 { 
 color: #f00; 
 } 
 p { 
 margin-left: 15px; 
 padding:1.5em; 
 } 
 </style> 
... 
</head> 
Folha de estilo externa 
<head> 
 ... 
 <link rel="stylesheet" type="text/css" href="estilo.css"/> 
 ... 
</head> 
<head> 
... 
 <style type="text/css"> 
 @import url("estilo.css"); 
 </style> 
... 
</head> 
Linkado (maior compatibilidade) 
Importado 
Box model 
Tipos de unidades de medida 
• Unidade relativa 
▫ tomada em relação à outra medida. 
▫ apropriadas para ajustes de uso em diferentes tipos de mídia. 
▫ valor é tomado em relação: 
 em: ...ao tamanho da fonte ('font-size') herdada; 
 ex: ...a altura da letra x (xis) da fonte herdada; 
 px - pixel: ...ao dispositivo (midia) de exibição; 
 %: ...à percentagem de uma medida previamente definida. 
• Unidade absoluta 
▫ não referenciada a qualquer outra unidade e nem é herdada. 
▫ usadas quando as mídias de exibição são perfeitamente 
conhecidas 
 
Medidas de comprimento CSS 
div { margin: 1.5em; } 
h4 { margin: 2ex; } 
p { font-size: 14px; } 
.classe { padding: 90%; } 
hr { width: 14pt; } 
h1 { margin: 1pc; } 
h2 { font-size: 4mm; } 
p.classe { padding: 0.3cm; } 
h5.classe { padding: 0.5in; } 
Herança CSS 
... 
p {color: red;} 
p em {color: blue;} 
... 
<p>Texto do parágrafo com um <em>elemento 
EM</em> nele contido.</p> 
Herança CSS 
... 
div {color: red;} 
... 
<div> 
 <p>Texto do parágrafo com um <em>elemento 
EM</em> nele contido.</p> 
</div> 
 
Propriedades não herdadas 
• Imagine: 
▫ Criar uma borda no elemento raiz da página. 
 Problema: todos os subelementos herdariam a borda. 
 Solução: nem todas as propriedades são herdadas. 
• Propriedades não herdadas: 
▫ background, border (exceto: border-collapse e border-
spacing),clip, content, counter, clue, display, float, height, 
left, margin, outline, overflow, padding, page-
break, pause, play-during, position, right, table-
layout, text-decoration, top, unicode-bidi, vertical-
align, width, z-index. 
Links 
a:link {color: #696; text-decoration: none; 
 background-color: transparent} 
a:visited {color: #699; text-decoration: 
 none; background-color: transparent} 
a:hover {color: #c93; text-decoration: 
 underline; background-color: transparent} 
a:active { color: #900; text-decoration: 
 underline; background-color: transparent } 
position - propriedades 
• static (padrão) 
▫ Posiciona o elemento no fluxo normal da página e não permite ajustes 
externos. 
• absolute 
▫ Posiciona o elemento em qualquer local da página. 
▫ Posição “relativa” às laterais da página ou ao primeiro elemento posicionado 
(não static) no qual esteja contido. 
▫ O espaço original do elemento é liberado para ocupação dos demais elementos. 
• fixed 
▫ Posiciona o elemento relativo à janela do navegador e não move quando ocorre 
rolagem da página. 
• relative 
▫ O elemento colocado em sua posição normal na página e, depois, é deslocado 
de acordo com os valores definidos, deixando vazio o espaço onde ele ficaria. 
 Esse espaço passa a ser ocupado pelos demais elementos. 
• inherit 
▫ Valor da posição herdado do elemento pai. 
position 
• As propriedades top, left, bottom e right são usadas para 
posicionar elementos nas posições absolute, fixed e 
relative. 
• top e left são mais usadas. 
position 
• absolute 
▫ Corre com os elementos da página em caso de 
rolagem de tela. 
 
 
position 
• fixed 
▫ Semelhante ao absolute. 
▫ A diferença é que ele fica fixo, mesmo em caso de 
rolagem de tela. 
 
 
position 
• fixed 
position 
• fixed 
z-index 
• Elementos posicionados (absolute, relative ou 
fixed) podem ser colocados em camadas 
sobrepostas umas sobre as outras através da 
propriedade z-index. 
• Permite definir a ordem de posicionamento dos 
elementos em uma pilha. 
▫ Assim é possível definir que um elemento fique na 
frente ou atrás de outro. 
• O elemento que usa z-index não pode estar usando 
o posicionamento padrão (static). 
• Quando maior
o valor, mas à frente o elemento 
fica (mais “próximo da tela”). 
z-index 
• Valores possíveis: 
▫ auto (padrão) 
 Valor igual ao dos elementos pais. 
▫ valor 
 Ordem do elemento na pilha. 
 Números negativos são permitidos. 
▫ inherit 
 z-index herdado do elemento pai. 
z-index 
• Exemplo: 
img { 
 position:absolute; 
 left:0px; 
 top:0px; 
 z-index:-1; 
} 
float 
• Faz com que os elementos flutuem na página de acordo 
com determinada política 
• O mesmo design pode ser obtido usando elementos 
posicionados de forma absoluta ou float. 
▫ Posicionamento float é uma solução flexível para layouts 
multi-colunas e permite que elementos “limpem” elementos 
ao seu lado. 
• Funciona para o elemento onde for declarada. 
• Box retirado da sua posição normal do fluxo do 
documento. 
• O elemento seguinte “ocupa a vaga” onde estava o 
elemento que está usando float. 
float 
• Um elemento float normalmente deve ter uma largura 
(width) específica declarada com um valor diferente de 
‘auto’. 
• Valores possíveis: 
▫ left 
 O elemento flutua para a esquerda. 
▫ right 
 O elemento flutua para a direita 
▫ none (padrão) 
 O elemento não flutua e será exibido de acordo com o fluxo 
normal do navegador. 
▫ inherit 
 O valor deve ser herdado do elemento pai. 
float 
• Exemplo: 
 
p { 
 float: left; 
} 
 
Flutuar para a esquerda. 
Deixa elementos um ao lado do outro. 
 
float 
• Exemplo: 
 
img { 
 float: right; 
} 
 
Flutuar a imagem para a direita dentro do elemento 
onde ela está inserida. 
float 
• Exemplo: 
 
span.destaque { 
 width: 40%; 
 float: right; 
 background-color: #888; 
 border: 1px solid black; 
} 
 
clear 
• Especifica que nenhum elemento float possa 
ficar à esquerda ou direita (ou ambos) de um 
elemento em bloco. 
• O elemento com essa propriedade será movido 
para baixo até se livrar do elemento em bloco ao 
seu lado. 
clear 
• Valores possíveis: 
▫ left 
 Não permite elementos float do lado esquerdo. 
▫ right 
 Não permite elementos float do lado direito. 
▫ both 
 Não permite elementos float em nenhum lado (esquerdo 
ou direito). 
▫ none (padrão) 
 permite elementos float em ambos os lados (esquerdo e 
direito) 
▫ inherit 
 Valor herdado do elemento pai. 
Layout 
• Dividir a página em áreas usando o elemento div 
do HTML. 
• Cada área deve ter um nome bem representativo 
e não vinculado a informações sobre o estilo ou 
posicionamento a ser aplicado. 
▫ O estilo e o posicionamento podem ser 
modificados e o nome dado pode perder o sentido 
original. 
▫ Exemplos de “bons” nomes: 
 geral, container, menu, conteudo, destaque, rodape, 
footer, blogs, topo, centro, center, etc. 
Layout 
• Estruturar as áreas que esperamos no nosso 
layout. 
<div id="container"> 
 <div id="header"></div> 
 <div id="left"></div> 
 <div id="content"></div> 
 <div id="right"></div> 
 <div id="footer"></div> 
</div> 
Classificação dos layouts 
• Número de colunas 
• Largura da página 
▫ Fixa 
 A largura é fixa e não se expande ou se encolhe de acordo com 
a janela do navegador. 
 Melhor controle do design. 
▫ Líquida 
 O conteúdo da página se expande para se ajustar à pagina de 
acordo com as dimensões da janela do navegador. 
▫ Elástica 
 A largura é fixa, mas as margens se expandem ou se encolhem 
de acordo com a janela do navegador. 
 Normalmente posiciona o conteúdo no centro da página. 
Layout de largura fixa 
#container { 
 border: 1 px solid black; 
 width: 500px; 
} 
Layout de largura líquida 
#container { 
 border: 1 px solid black; 
 width: 80%; 
 min-width: 300px; 
} 
Layout de largura líquida 
* { 
 font-size: 14px; 
} 
 
#container { 
 border: 1 px solid black; 
 width: 40em; 
} 
Centralização do layout 
#container { 
 border: 1 px solid black; 
 width: 80%; 
 margin: 0 auto; 
} 
#container { 
 border: 1 px solid black; 
 width: 500px; 
 margin: 0 auto; 
} 
Propriedades adicionais 
• min-width 
▫ Define a largura mínima do elemento. 
• min-height 
▫ Define a altura mínima do elemento. 
Construção de layouts 
Passos: 
1. Escolher os containers de layout 
 
Construção de layouts 
Passos: 
2. Nomear os containers 
 
Construção de layouts 
Passos: 
3. Criar a marcação 
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 
 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
 <title>Page title</title> 
 <link rel="stylesheet" href="style.css" type="text/css" media="screen"> 
</head> 
<body> 
<div id="container"> 
 <div id="header"></div> 
 <div id="mainnav"></div> 
 <div id="menu"></div> 
 <div id="contents"></div> 
 <div id="footer"></div> 
</div> 
</body> 
</html> 
Construção de layouts 
Passos: 
4. Inserir conteúdo 
5. Posicionar os containers 
 body { 
 margin: 0; 
 padding: 0; 
 background: #ddd; 
} 
#container { 
 margin: 1em auto; 
 width: 650px; 
 background: #fff; 
} 
#header {background: #CF3;} 
#mainnav {background: #9F3; } 
#menu { 
 float: right; 
 width: 165px; 
 background: #6F9; 
} 
#contents { 
 float: left; 
 width: 440px; 
 background: #9FC; 
 margin: 0 0 0 20px; 
} 
#footer { 
 clear: both; 
 background: #FF9; 
} 
Construção de layouts 
Construção de layouts 
Passos: 
6. Folha de estilo para impressão 
 
<link rel="stylesheet" href="style.css" media="screen"> 
<link rel="stylesheet" href="print.css" media="print"> 
Construção de layouts 
body { 
 margin: 0; 
 padding: 0; 
 font: 100% arial, hevetica, sans-serif; 
 color: #000; 
 background-color: #fff; 
} 
a { 
 color: #000; 
 text-decoration: none; 
} 
#header { border-bottom: 1px solid #999; } 
#header h1 { color: #000; } 
#mainnav, #menu, .imagefloat, #skipmenu { 
display: none; } 
#menu ul { 
 margin-left: 0; 
 padding-left: 0; 
 list-style-type: none; 
 line-height: 165%; 
} 
#contents p { line-height: 165%; } 
.blogentry { border-bottom: 1px 
solid #999; } 
.blogentry ul { 
 list-style-type: none; 
 text-align: right; 
 margin: 1em 0; 
 padding: 0; 
 font-size: 95%; 
} 
.blogentry li { 
 display: inline; 
 padding: 0 0 0 7px; 
} 
#footer { 
 clear: both; 
 color: #000; 
 text-align: right; 
 padding: 5px; 
 font-size: 90%; 
 border-top: 1px solid #999; 
 margin-top: 2em; 
} 
6. Folha de estilo para impressão 
 
Layout de 2 colunas 
Layout de 2 colunas - HTML 
<div id="container"> 
 <div id="header"></div> 
 <div id="left"></div> 
 <div id="content"></div> 
 <div id="footer"></div> 
</div> 
Layout de 2 colunas - CSS 
div { 
 border: 1px solid black; 
} 
 
#container { 
 width: 600px; 
 margin: 0 auto; 
} 
 
#header { 
 height: 80px; 
 background: #DDD; 
} 
 
#left { 
 float: left; 
 width: 130px; 
 background: #666; 
} 
#content { 
 float:right; 
 width: 450px; 
} 
 
#footer { 
 clear:both; 
background: #DDD; 
} 
Layout de 3 colunas 
Layout de 3 colunas - HTML 
<div id="container"> 
 <div id="header"></div> 
 <div id="left"></div> 
 <div id="content"> 
 <div id="principal"></div> 
 <div id="right"></div> 
 </div> 
 <div id="footer"></div> 
</div> 
Layout de 3 colunas - CSS 
div { 
 border: 1px solid black; 
} 
 
#container { 
 width: 600px; 
 margin: 0 auto; 
} 
 
#header { 
 height: 80px; 
 background: #DDD;
} 
 
#left { 
 float: left; 
 width: 130px; 
 background: #666; 
} 
#content { 
 float:right; 
 width: 450px; 
} 
 
#principal { 
 float: left; 
 width: 340px; 
} 
 
#right { 
 float: right; 
 width: 100px; 
} 
 
#footer { 
 clear:both; 
 background: #DDD; 
} 
Bordas arredondadas e sombra com 
CSS3 
Bordas arredondadas e sombra com 
CSS3 
#container { 
 border: 2px solid; 
 width: 200px; 
 padding: 10px; 
 
 border-radius: 10px; 
 box-shadow: 10px 10px 5px #888; 
} 
Referências e Links importantes 
• Vídeos da Universidade XTI 
• www.w3schools.com 
• www.gimp.org 
• FREEMAN Eric & FREEMAN Elisabeth. Use a Cabeça! 
HTML com CSS e XHTML. Alta Books, 1ª Edição, 
2006. 
• Site sobre CSS e Padrões Web. Por Maurício “Maujor” 
Samy Silva. Disponível em: 
http://www.maujor.com/ 
• Apostila da K19 - Desenvolvimento Web com 
HTML, CSS e Javascript. 
 
Referências e Links importantes 
• SILVA, Maurício Samy. Construindo sites com CSS 
e (X)HTML – Sites controlados por folhas de 
estilo em cascata. São Paulo. Novatec Editora, 1ª 
Edição, 2008. 
• SILVA, Maurício Samy. CSS3 – Desenvolva 
aplicações web profissionais com o uso dos 
poderosos recursos de estilização das CSS3. São 
Paulo : Novatec Editora, 1ª Edição, 2010. 
• RODRIGUES, Andréa. Desenvolvimento para 
Internet. 1ª Edição, Editora do Livro Técnico, 2010.