Aula04 pptx

Prévia do material em texto

DEV Full Stack - HTML e CSS
Aula 04 – Princípios de CSS
Eduardo Xavier
Aula 4: Princípios de CSS
● Tópicos:
–
–
–
 Agrupamento de Estilos
Seletores CSS
Cores, Fundos e Comentários
CSS
▪ O que é CSS?
● CSS é uma abreviação para “Cascading Style 
Sheets” (Folhas de Estilo em Cascata).
● É um conjunto de intruções usado para descrever 
como os elementos de uma página HTML devem ser 
apresentados ao usuário final.
● Essas instruções podem ser incluídas em tags 
específicas, definidas como regras para toda uma 
página, ou seram armazenadas em arquivos externos 
para serem referenciadas por diversas páginas.
CSS: Sintaxe
▪ Quando definimos instruções CSS dentro de uma tag hospedeira, usamos o atributo 
style:
● Mudou a cor
Mudou o tamanho●
▪ Quando usamos a tag dentro da página ou fazemos referência a um arquivo 
CSS externo, a sintaxe é:
▪ https://www.w3schools.com/html/html_styles.asp
https://www.w3schools.com/html/html_styles.asp
Atividade 04
● Pizzaria com Estilo
– Dessa vez, tente utilizar a tag
 para formatar as 
informações de sua pizzaria.
– Use mais de uma tag na 
página, criando estilos diferentes 
para cada trecho.
Pizzaria
Agrupamento de Estilos
● Já vimos que é possível aplicar umaou mais
formatações de estilo a uma tag HTML por meio do
atributo “style”, porém, esta solução não é muito prática para formatar 
documentos muito grandes ou necessidades maiores de padronização.
É possível agrupar todas as definições de estilo de uma página HTML em uma 
única tag ou em um arquivo separado que é referenciado na página 
por meio de uma tag .
●
● https://www.w3schools.com/css/css_intro.asp 
https://www.w3schools.com/css/css_howto.asp●
https://www.w3schools.com/css/css_intro.asp
https://www.w3schools.com/css/css_howto.asp
Seletores CSS
● Seletores (selectors) CSS são utilizados para definir características de formatação para 
determinados grupos de tags ou elementos.
– Seletores simples (baseados em nome, id, classe)
● https://www.w3schools.com/css/css_selectors.asp
– Combinações de seletores
● https://www.w3schools.com/css/css_combinators.asp
– Pseudo classes de elementos (comportamentos)
● https://www.w3schools.com/css/css_pseudo_classes.asp
– Pseudo elementos
● https://www.w3schools.com/css/css_pseudo_elements.asp
https://www.w3schools.com/css/css_selectors.asp
https://www.w3schools.com/css/css_combinators.asp
https://www.w3schools.com/css/css_pseudo_classes.asp
https://www.w3schools.com/css/css_pseudo_elements.asp
Atividade 01
● Pizzaria com estilo externo
– Altere seu site de pizzaria para 
utilizar um arquivo externo de 
CSS.
– Acrescente novas funcionalidades 
utilizando seletores que definem 
pseudo classes à sua escolha.
Nova 
Pizzaria
Cores, Fundos e Comentários
● Cores (por nome, rgb, hexadecimal e hsl) 
https://www.w3schools.com/css/css_colors.asp●
● Fundos (cores, imagens e posicionamento) 
https://www.w3schools.com/css/css_backgrounds.asp●
● Comentários 
https://www.w3schools.com/css/css_comments.asp●
https://www.w3schools.com/css/css_colors.asp
https://www.w3schools.com/css/css_backgrounds.asp
https://www.w3schools.com/css/css_comments.asp
Margens e Dimensionamento
● Margens externas e internas
– https://www.w3schools.com/css/css_border.asp 
https://www.w3schools.com/css/css_margin.asp–
● Tamanhos
– https://www.w3schools.com/css/css_dimension.asp
● Box model
– https://www.w3schools.com/css/css_boxmodel.asp
https://www.w3schools.com/css/css_border.asp
https://www.w3schools.com/css/css_margin.asp
https://www.w3schools.com/css/css_dimension.asp
https://www.w3schools.com/css/css_boxmodel.asp
Textos, Fontes e Links
● Textos
–
–
–
–
Cores e alinhamento 
Decoração e transformação 
Transformação e sombras
https://www.w3schools.com/css/css_text.asp
● Fontes
–
–
–
–
Famílias e fallbacks Estilos 
e tamanhos Fontes externas 
de fontes
https://www.w3schools.com/css/css_font.asp
● Links
–
–
Atributos link, visited, hover, active
https://www.w3schools.com/css/css_link.asp
https://www.w3schools.com/css/css_text.asp
https://www.w3schools.com/css/css_font.asp
https://www.w3schools.com/css/css_link.asp
Atividade 02
● Pizzaria decorada
– Hora de aplicar algumas 
melhorias no cardápio de sua 
pizzaria.
– Estabeleça uma paleta de cores 
para ser o padrão de seu negócio e 
“decore” sua página utilizando 
essas cores para mudar textos, 
fundos e bordas.
Pizzaria
Desafio Extra-Classe
● Pesquise na internet alguns layouts interessantes e tente 
reproduzir algo semelhante em seu site de pizzaria.
● Crie um formulário de pedidos para que seus clientes 
encomendem as pizzas do cardápio.
● Crie uma página inicial que apresente seu estabelecimento.
Início
Cardápio Pedidos
Links Interessantes
● Aqui estão alguns links interessantes para complementar seu aprendizado:
– HTML e CSS - Universidade Virtual de São Paulo (TV 
Cultura)● https://www.youtube.com/watch?v=IAkJmOCr3VM 
https://www.youtube.com/watch?v=PBk5HxF1cxM●
– Seletores CSS
● https://code.tutsplus.com/pt/tutorials/the-30-css-selectors-you-must-memorize--net
- 16048
https://www.youtube.com/watch?v=IAkJmOCr3VM
https://www.youtube.com/watch?v=PBk5HxF1cxM
https://code.tutsplus.com/pt/tutorials/the-30-css-selectors-you-must-memorize--net-16048
https://code.tutsplus.com/pt/tutorials/the-30-css-selectors-you-must-memorize--net-16048
https://code.tutsplus.com/pt/tutorials/the-30-css-selectors-you-must-memorize--net-16048
Fim da Aula