Aula 5 Construção de Páginas

•

ESTÁCIO

N A

27/03/2019

E aí, curtiu este material?

Ajude a incentivar outros estudantes a melhorar o conteúdo

Gostou desse material? Compartilhe! 🧡

Construção de Web Sites

51 Materiais compartilhados

Baixe o app para aproveitar ainda mais

Leia os materiais offline, sem usar a internet. Além de vários outros recursos!

Prévia do material em texto

Fundamentos de 
Construção de Sites
Aula 5
1
Mais CSS
• Revisando...
– Finalidade do CSS: definições de estilo do HTML
– Regras CSS
seletor {propriedade: valor;}
body {
color: #000000;
background-color: #ffffff;
}
2
Mais CSS
• É possível aplicar a regra a apenas um 
elemento ou a vários
• Exemplo: Sublinhar conteúdo
border-bottom: 1px solid black;
3
4
<!DOCTYPE html >
<html lang="pt"> 
 <head>
 <meta charset="utf-8" /> 
<title>Mais CSS exemplo 1</title>
<style type = "text/css">
h1, h2 {border-bottom: 1px solid #000000;}
</style>
</head>
<body>
<h1>Cabeçalho h1</h1>
<h2>Cabeçalho h2</h2>
<h3>Cabeçalho h3</h3>
<h4>cabeçalho h4</h4>
<p>Parágrafo</p>
</body>
</html>
5
<!DOCTYPE html >
<html lang="pt"> 
 <head>
 <meta charset="utf-8" /> 
<title>Mais CSS exemplo 2</title>
<style type = "text/css">
h1, h2 {border-bottom: 1px solid #000000;}
h1 {color: #ff0000;}
</style>
</head>
<body>
<h1>Cabeçalho h1</h1>
<h2>Cabeçalho h2</h2>
<h3>Cabeçalho h3</h3>
<h4>cabeçalho h4</h4>
<p>Parágrafo</p>
</body>
</html>
Específico de h1
Funcionamento dos Seletores
• Em uma página HTML todos 
os elementos são herdeiros do 
elemento <body>
• Se um estilo for definido para 
este elemento ele será 
aplicado a todos os demais
6
html
head body
p h1 h2 ul
li
Herança
• Regra geral: todas propriedades relacionadas a 
estilos que afetam a aparência do texto são 
herdadas 
color: font-size, font-family...
• Mas nem todas propriedades são herdadas
– Podem existir definições específica para elementos 
(e.g. border...- veremos adiante...)
7
8
<!DOCTYPE html >
<html lang="pt"> 
 <head>
 <meta charset="utf-8" /> 
<title>Mais CSS exemplo 3</title>
<style type = "text/css">
body {color: #00ff00;}
h1, h2 {border-bottom: 1px solid #000000;
 color: #ff0000;} 
</style>
</head>
<body>
<h1>Cabeçalho h1</h1>
<h2>Cabeçalho h2</h2>
<h3>Cabeçalho h3</h3>
<h4>cabeçalho h4</h4>
<p>Parágrafo</p>
</body>
</html>
Classes de elementos
• Um site sobre times de futebol
• Desejo que o texto seja da cor do time
• Uma possibilidade (NÃO RECOMENDÁVEL) é 
usar estilos inline
9
10
<body>
<h1 style="color: #ff0000">Internacional</h1>
<p style="color: #ff0000">
O Sport Club Internacional (conhecido apenas por Internacional,
 Inter, SC Internacional ou ainda Inter de Porto Alegre e cujo acrônimo é SCI) 
é um clube brasileiro de futebol da cidade de Porto Alegre, no Rio Grande do Sul. 
</p>
<h1 style="color: #0000ff">Grêmio</h1>
<p style="color: #0000ff">
O Grêmio Foot-Ball Porto Alegrense (conhecido apenas por Grêmio) 
é um clube de futebol brasileiro da cidade de Porto Alegre, no Rio Grande do Sul. 
</p>
</body>
Classes de elementos
• Outra possibilidade (MELHOR) é trabalhar com 
o elemento class
11
12
<!DOCTYPE html >
<html lang="pt"> 
 <head>
 <meta charset="utf-8" /> 
<title>CSS Exemplo 6</title>
<style type = "text/css">
body {color: #000000;}
h1.inter {color: #ff0000;}
h1.gremio {color: #0000ff;}
p.inter {color: #ff0000;}
p.gremio {color: #0000ff;}
</style>
</head>
<body>
<h1 class="inter">Internacional</h1>
<p class="inter">
O Sport Club Internacional (conhecido apenas por Internacional, Inter, SC Internacional ou 
ainda Inter de Porto Alegre e cujo acrônimo é SCI) 
é um clube brasileiro de futebol da cidade de Porto Alegre, no Rio Grande do Sul. 
</p>
<h1 class="gremio">Grêmio</h1>
<p class="gremio">
O Grêmio Foot-Ball Porto Alegrense (conhecido apenas por Grêmio) 
é um clube de futebol brasileiro da cidade de Porto Alegre, no Rio Grande do Sul. 
</p>
</body>
</html>
13
<!DOCTYPE html >
<html lang="pt"> 
 <head>
 <meta charset="utf-8" /> 
<title>CSS Exemplo 7</title>
<style type = "text/css">
body {color: #000000;}
.inter {color: #ff0000;}
.gremio {color: #0000ff;}
</style>
</head>
<body>
<h1 class="inter">Internacional</h1>
<p class="inter">
O Sport Club Internacional (conhecido apenas por Internacional, Inter, SC Internacional ou 
ainda Inter de Porto Alegre e cujo acrônimo é SCI) 
é um clube brasileiro de futebol da cidade de Porto Alegre, no Rio Grande do Sul. 
</p>
<h1 class="gremio">Grêmio</h1>
<p class="gremio">
O Grêmio Foot-Ball Porto Alegrense (conhecido apenas por Grêmio) 
é um clube de futebol brasileiro da cidade de Porto Alegre, no Rio Grande do Sul. 
</p>
</body>
</html>
Classes de elementos
• É possível associar um elemento a mais de uma 
classe
14
15
<!DOCTYPE html >
<html lang="pt"> 
 <head>
 <meta charset="utf-8" /> 
<title>CSS Exemplo 8</title>
<style type = "text/css">
body {color: #000000;}
.inter {color: #ff0000;}
.gremio {color: #0000ff;}
.pelotas {color: #ffd700;}
.campeaodomundo{border-bottom: 1px solid #000000;}
</style>
</head>
<body>
<h1 class="inter campeaodomundo">Internacional</h1>
<p class="inter">
O Sport Club Internacional (conhecido apenas por Internacional, Inter, SC Internacional ou 
ainda Inter de Porto Alegre e cujo acrônimo é SCI) 
é um clube brasileiro de futebol da cidade de Porto Alegre, no Rio Grande do Sul. 
</p>
<h1 class="gremio campeaodomundo">Grêmio</h1>
<p class="gremio">
O Grêmio Foot-Ball Porto Alegrense (conhecido apenas por Grêmio) 
é um clube de futebol brasileiro da cidade de Porto Alegre, no Rio Grande do Sul. 
</p>
<h1 class="pelotas">Pelotas</h1>
<p class="pelotas">
O Esporte Clube Pelotas é um clube de futebol brasileiro da cidade de Pelotas, no Rio Grande do Sul.
</p>
</body>
</html>
Aplicação de estilos
• CSS - Cascading Style Sheets
– Cascata está relacionado a forma como é aplicada uma regra CSS em 
função de sua importância/prioridade. 
– Podem existir conflitos de regras: mais de uma regra para um elemento
• Ordem de aplicação básica
– Estilo para o elemento é aplicado
– Caso não exista estilo para o elemento, o elemento herda o estilo do 
elemento pai
– Caso não exista estilo nem para o elemento nem para o elemento pai é 
usado o padrão do browser
16
Aplicação de estilos
• Além disto...
– Estilo inline (dentro de um elemento HTML)
– Folha de estilo Incorporada (definida na <head>)
– Folha de estilo Externa
– Estilo padrão do navegador
• Alguns navegadores permitem que os usuários definam 
seus estilos (estes ficam com a prioridade)
http://en.wikipedia.org/wiki/Stylish
• Quando não é possível determinar a prioridade é usado 
o estilo que aparece por último no arquivo CSS
17
18
<!DOCTYPE html >
<html lang="pt"> 
 <head>
 <meta charset="utf-8" /> 
<title>Mais CSS exemplo 3</title>
<style type = "text/css">
h1, h2 {border-bottom: 1px solid #000000;
 color: #ff0000;} 
h1 {color: #00ff00;}
</style>
</head>
<body>
<h1>Cabeçalho h1</h1>
<h2>Cabeçalho h2</h2>
<h3>Cabeçalho h3</h3>
<h4>cabeçalho h4</h4>
<p>Parágrafo</p>
</body>
</html>
19
<!DOCTYPE html >
<html lang="pt"> 
 <head>
 <meta charset="utf-8" /> 
<title>Mais CSS exemplo 4</title>
<style type = "text/css">
h1 {color: #00ff00;}
h1, h2 {border-bottom: 1px solid #000000;
 color: #ff0000;} 
</style>
</head>
<body>
<h1>Cabeçalho h1</h1>
<h2>Cabeçalho h2</h2>
<h3>Cabeçalho h3</h3>
<h4>cabeçalho h4</h4>
<p>Parágrafo</p>
</body>
</html>
Box Model
• Todos elementos HTML podem ser considerados como “caixas“ 
(boxes)
• No contexto de CSS, Box Model ou Modelo de Caixa é usado para 
layout
• O CSS Box Model é essencialmente um box que envolve 
elementos HTML
– Margin. Área ao redor da borda. É completamente transparente.
– Border. Uma borda vai ao redor do padding (enchimento) e do 
conteúdo.
– Padding (Enchimento). É uma área ao redor do conteúdo. É 
completamente transparente 
– Content. É oconteúdo onde o texto e imagens são mostrados.
• O uso do Box Model permite colocar bordas ao redor de elementos 
e também determinar espaços entre elementos
20
Box Model
21
Margin
Padding
Border
Content
Box Model
22
body {
color: #000000;
background-color: #ffffff;
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: 14px;
text-align: justify;
margin: 25px;
border: 4px solid #0000ff;
padding: 50px;
width:1200px;
}
h1 {
font-size: 35px;
}
Box Model
23
margin
padding border
Propriedades - Margin
24
• Com mesmo tamanho
margin: 25px;
• Especificar
margin-top:25px;
margin-right:50px;
margin-bottom:75px
margin-left:100px;
OU
margin:25px 50px 75px 100px; 
Propriedades - Padding
25
• Com mesmo tamanho
padding: 25px;
• Especificar
padding-top:25px;
padding-right:50px;
padding-bottom:75px
padding-left:100px;
OU
padding:25px 50px 75px 100px; 
Propriedades - Border
26
• Especificando propriedades
border-width 
border-style (dotted, dashed, double)
border-color
border: 4px solid #0000ff
Box Model
27
body {
color: #000000;
background-color: #00ff00;
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: 14px;
text-align: justify;
margin: 25px;
border: 4px solid #0000ff;
padding: 50px;
width:1200px;
}
h1 {
font-size: 35px;
}
Largura Total do Elemento = 
width + left padding + right 
padding + left border + right 
border + left margin + right 
margin
Altura Total do Elemento = 
height + top padding + bottom 
padding + top border + bottom 
border + top margin + bottom 
margin
Box Model
28
body {
color: #000000;
background-color: #ffffff;
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: 14px;
text-align: justify;
margin: 25px;
border: 4px solid #0000ff;
padding: 50px;
width:1200px;
}
h1 {
margin: 10px;
border: 4px solid #0000ff;
padding: 10px;
width:300px;
text-align: center;
}
Miscelânea: 
Mudando aparência do texto
• letter-spacing: define o espaço entre as 
letras do texto.
• word-spacing: define espaçamento entre 
as palavras do texto.
• text-align: define tipos de alinhamentos 
para o texto: left, right, center e justify.
• text-decoration: define aspectos do texto
29
	Slide 1
	Mais CSS
	Mais CSS
	Slide 4
	Slide 5
	Funcionamento dos Seletores
	Herança
	Slide 8
	Classes de elementos
	Slide 10
	Classes de elementos
	Slide 12
	Slide 13
	Classes de elementos
	Slide 15
	Aplicação de estilos
	Aplicação de estilos
	Slide 18
	Slide 19
	Box Model
	Box Model
	Box Model
	Box Model
	Propriedades - Margin
	Propriedades - Padding
	Propriedades - Border
	Box Model
	Box Model
	Miscelânea: Mudando aparência do texto