Exercícios de CSS

Licenciatura em Comunicação e Multimédia

Docentes

António Sousa
Lio Gonçalves

Ano Letivo 2023/2024

 Universidade de Trás-os-Montes e Alto Douro
LICENCIATURA EM COMUNICAÇÃO E MULTIMÉDIA
INTRODUÇÃO AO DESENVOLVIMENTO WEB

- Sugere-se que os exercícios propostos sejam desenvolvidos utilizando um dos

seguintes editores:

Notepad++ Windows

Sublime Text 2 Mac

- Implemente, em cada exercício, documentos HTML e CSS que produzam o efeito no

browser semelhante ao apresentado nas figuras respetivas.

Exercício 1

a) Implemente a estrutura e o conteúdo do documento HTML apresentado de

seguida.

b) Implemente a formatação do documento anterior utilizando CSS tal como

apresentado na figura seguinte.

Exercícios de CSS 1
 Universidade de Trás-os-Montes e Alto Douro
LICENCIATURA EM COMUNICAÇÃO E MULTIMÉDIA
INTRODUÇÃO AO DESENVOLVIMENTO WEB

Exercício 2

a) Implemente a estrutura e o conteúdo do documento HTML apresentado de

seguida.

Exercícios de CSS 2
 Universidade de Trás-os-Montes e Alto Douro
LICENCIATURA EM COMUNICAÇÃO E MULTIMÉDIA
INTRODUÇÃO AO DESENVOLVIMENTO WEB

b) Implemente a formatação do documento anterior utilizando CSS tal como

apresentado na figura seguinte.

Exercícios de CSS 3
 Universidade de Trás-os-Montes e Alto Douro
LICENCIATURA EM COMUNICAÇÃO E MULTIMÉDIA
INTRODUÇÃO AO DESENVOLVIMENTO WEB

Exercício 3

a) Implemente a estrutura e o conteúdo do documento HTML apresentado de

seguida.

b) Implemente a formatação do documento anterior utilizando CSS tal como

apresentado na figura seguinte.

Exercícios de CSS 4
 Universidade de Trás-os-Montes e Alto Douro
LICENCIATURA EM COMUNICAÇÃO E MULTIMÉDIA
INTRODUÇÃO AO DESENVOLVIMENTO WEB

Exercício 4

a) Implemente a estrutura e o conteúdo do documento HTML apresentado de

seguida.

Exercícios de CSS 5
 Universidade de Trás-os-Montes e Alto Douro
LICENCIATURA EM COMUNICAÇÃO E MULTIMÉDIA
INTRODUÇÃO AO DESENVOLVIMENTO WEB

b) Implemente a formatação do documento anterior utilizando CSS tal como

apresentado na figura seguinte.

Exercícios de CSS 6
 Universidade de Trás-os-Montes e Alto Douro
LICENCIATURA EM COMUNICAÇÃO E MULTIMÉDIA
INTRODUÇÃO AO DESENVOLVIMENTO WEB

Exercício 5

a) Implemente a estrutura e o conteúdo do documento HTML com divs apresentado

de seguida.

Exercícios de CSS 7
 Universidade de Trás-os-Montes e Alto Douro
LICENCIATURA EM COMUNICAÇÃO E MULTIMÉDIA
INTRODUÇÃO AO DESENVOLVIMENTO WEB

b) Obtenha no site http://www.w3schools.com/css/css_boxmodel.asp/ a imagem do

exercício e insira-a como imagem de fundo. Abaixo da imagem tente reproduzir
a estrutura visível com divs. Implemente a formatação do documento anterior
utilizando CSS tal como apresentado na figura seguinte.

Exercícios de CSS 8
 Universidade de Trás-os-Montes e Alto Douro
LICENCIATURA EM COMUNICAÇÃO E MULTIMÉDIA
INTRODUÇÃO AO DESENVOLVIMENTO WEB

Exercício 6

a) Implemente a estrutura e o conteúdo do documento HTML apresentado de

seguida.

Exercícios de CSS 9
 Universidade de Trás-os-Montes e Alto Douro
LICENCIATURA EM COMUNICAÇÃO E MULTIMÉDIA
INTRODUÇÃO AO DESENVOLVIMENTO WEB

b) Implemente a formatação do documento anterior utilizando CSS tal como

apresentado na figura seguinte.

Exercícios de CSS 10
 Universidade de Trás-os-Montes e Alto Douro
LICENCIATURA EM COMUNICAÇÃO E MULTIMÉDIA
INTRODUÇÃO AO DESENVOLVIMENTO WEB

Exercício 7

a) Layout de 1 coluna: Implemente a estrutura e o conteúdo do documento HTML

apresentado de seguida.

Exercícios de CSS 11
 Universidade de Trás-os-Montes e Alto Douro
LICENCIATURA EM COMUNICAÇÃO E MULTIMÉDIA
INTRODUÇÃO AO DESENVOLVIMENTO WEB

b) Layout de 1 coluna: Implemente a formatação do documento anterior

utilizando CSS tal como apresentado na figura seguinte. Sempre que o ponteiro
do rato passar sobre uma das opções do menu, esta deve mudar a cor para verde.

Exercícios de CSS 12
 Universidade de Trás-os-Montes e Alto Douro
LICENCIATURA EM COMUNICAÇÃO E MULTIMÉDIA
INTRODUÇÃO AO DESENVOLVIMENTO WEB

Exercício 8

a) Layout de 2 colunas: Implemente a estrutura e o conteúdo do documento

HTML apresentado de seguida.

Exercícios de CSS 13
 Universidade de Trás-os-Montes e Alto Douro
LICENCIATURA EM COMUNICAÇÃO E MULTIMÉDIA
INTRODUÇÃO AO DESENVOLVIMENTO WEB

b) Layout de 2 colunas: Implemente a formatação do documento anterior

utilizando CSS tal como apresentado na figura seguinte. Sempre que o ponteiro
do rato passar sobre uma das opções do menu, esta deve mudar a cor para verde.

Exercícios de CSS 14
 Universidade de Trás-os-Montes e Alto Douro
LICENCIATURA EM COMUNICAÇÃO E MULTIMÉDIA
INTRODUÇÃO AO DESENVOLVIMENTO WEB

Exercício 9

a) Layout de 3 colunas: Implemente a estrutura e o conteúdo do documento

HTML apresentado de seguida.

Exercícios de CSS 15
 Universidade de Trás-os-Montes e Alto Douro
LICENCIATURA EM COMUNICAÇÃO E MULTIMÉDIA
INTRODUÇÃO AO DESENVOLVIMENTO WEB

b) Layout de 3 colunas: Implemente a formatação do documento anterior

utilizando CSS tal como apresentado na figura seguinte. Sempre que o ponteiro
do rato passar sobre uma das opções do menu, esta deve mudar a cor para verde.

Exercícios de CSS 16
 Universidade de Trás-os-Montes e Alto Douro
LICENCIATURA EM COMUNICAÇÃO E MULTIMÉDIA
INTRODUÇÃO AO DESENVOLVIMENTO WEB

Exercício 10

a) Implemente a estrutura e o conteúdo do documento HTML apresentado de

seguida.

Exercícios de CSS 17
 Universidade de Trás-os-Montes e Alto Douro
LICENCIATURA EM COMUNICAÇÃO E MULTIMÉDIA
INTRODUÇÃO AO DESENVOLVIMENTO WEB

b) Implemente a formatação do documento anterior utilizando CSS tal como

apresentado na figura seguinte. Sempre que o ponteiro do rato passar sobre uma
das opções do menu, esta deve mudar a cor para verde.

Exercícios de CSS 18