SEMANA 05 - CSS

Prévia do material em texto

Semana 05– Programando WEB
CSS e Projeto 01
Prof. MSc. Carlos Pereira
É a linguagem usada para estilizar a página web.
Criar nova página;
Criação de link de referência CSS;
Identificar.
CSS
Sintaxe do CSS:
seletor {
propriedade: valor;
}
HEADEAR
BODY
FOOTER
(cabeçalho)
(conteúdo principal)
(rodapé)
DIV
MAIN
SECTION
ID
CLASS
NAV
DIV
NAV
DIV
(blocos)
(conteúdo principal)
(sessões dentro do 
nosso conteúdo)
(indicação de navegação)
(indicação de navegação)
(blocos)
(blocos)
(identificador único)
(definição de uma classe e 
suas demais configurações, 
pode ser reutiliza, ou seja, 
um padrão)
CLASSES
usadas para agrupar elementos 
com características semelhantes. 
.destaque {
/* Estilos para elementos com a 
classe "destaque" */
}
ID
usados para identificar 
exclusivamente um elemento na 
página. 
#cabecalho {
/* Estilos para o elemento com o 
ID "cabecalho" */
}
PROPRIEDADES CSS
usadas para definir o estilo dos 
elementos selecionados. Cada 
propriedade define um aspecto 
específico do elemento, como cor, 
tamanho da fonte, margem, 
preenchimento, entre outros. 
color: Define a cor do texto.
font-size: Define o tamanho da 
fonte.
margin: Define o espaço ao redor 
do elemento.
padding: Define o espaço dentro 
do elemento.
background-color: Define a cor de 
fundo do elemento.
border: Define uma borda ao redor 
do elemento.
PROPRIEDADES CSS
p {
color: blue;
font-size: 16px;
margin: 10px;
padding: 5px;
background-color: #f0f0f0;
border: 1px solid #ccc;
}
BOX
BOX MODEL
uma representação visual de como 
o CSS trata os elementos HTML em 
relação ao espaço que ocupam em 
uma página da web.
h
e
ig
h
t
width
BOX MODEL
na prática
Padding
É um espaço 
transparente ao redor do 
conteúdo, cria um espaço 
entre o conteúdo e a 
borda da caixa, definido 
usando as propriedades:
• padding-top, 
• padding-right, 
• padding-bottom e 
• padding-left. 
Border
É uma linha que envolve 
o padding e o conteúdo. 
Você pode definir a 
espessura, estilo e cor da 
borda usando as 
propriedades:
• border-width, 
• border-style e
• border-color.
Margin: 
É o espaço transparente 
fora da borda da caixa. 
Elas determinam a 
distância entre uma caixa 
e outras caixas vizinhas. 
São definidos usando as 
propriedades:
• margin-top, 
• margin-right, 
• margin-bottom e 
• margin-left. 
BOX MODEL
Preenchimento da borda 
(distanciamento do conteúdo)
h
e
ig
h
t
width
padding
border
margin
circunda o conteúdo
espaço externo
A
n
at
o
m
ia
 d
a 
ca
ix
a 
d
a 
p
ág
in
a
A soma dessas partes (conteúdo + padding + border + margin) é o que determina o 
tamanho total da caixa em uma página web.
BOX SINZING
O dimensionamento de caixa, 
controlado pela propriedade box-
sizing, determina como o tamanho 
total de uma caixa é calculado. 
Existem dois valores principais 
para a propriedade box-sizing:
• Content-Box (Valor padrão): o 
tamanho total da caixa é calculado a 
partir do conteúdo, do padding e da 
borda, mas não inclui a margem. Isso 
significa que, se você definir um 
elemento com uma largura de 300 
pixels e adicionar um padding de 20 
pixels, a largura total da caixa será de 
340 pixels.
BOX SINZING
• Border-Box: Neste modo, o 
tamanho total da caixa é calculado a 
partir do conteúdo, do padding, da 
borda e da margem. Ou seja, a 
largura que você definir incluirá 
todos esses componentes. Isso é útil 
quando você deseja garantir que o 
tamanho total da caixa permaneça 
constante, independentemente do 
padding e da borda que você 
adicionar.
PROJETO
01
A proposta do projeto envolver a utiliza das 
linguagens HTML e o aprendizado do CSS em 
conjunto ao FIGMA e organização da 
informação e criação para o desenvolvimento 
de uma página da Loja Lego Marvel.
HTML
Marvel Lego
HOME
PRODUTO
CONTATO
.barra1 {
background: #F8BF2A;
width: 1920px;
height: 20px;
}
ACESSE
FIGMA
https://www.figma.com/file/pFqr91JXY4vEZkVrvLv27s/Projeto-02---
LEGO?type=design&node-id=0%3A1&mode=design&t=WvLdva94k6EmiYWa-1
IMAGENS
AVA 
https://www.figma.com/file/pFqr91JXY4vEZkVrvLv27s/Projeto-02---LEGO?type=design&node-id=0%3A1&mode=design&t=WvLdva94k6EmiYWa-1
carlos.magno@mg.senac.br