Colégio Pedro II - Campus São Cristóvão III Introdução à Ciência da Computação - Prof.

Bianca

Estudo dirigido CSS - Introdução à Ciência da Computação

PARTE 1

Tópicos:
● Introdução ao CSS
● Seletores
● Propriedades

Introdução ao CSS
1) Quantas são as formas possíveis de inserir CSS nas páginas web? Quais
são elas? Escreva um código que deixe a cor de fundo do corpo da página
(body) azul para cada uma das formas de usar CSS e indique quais são as
semelhanças e diferenças entre cada uma delas.
2) Quais são as partes que compõem uma regra em CSS? Explique cada uma e
escreva um exemplo, sinalizando onde está cada uma das partes.
3) O que é ordem de precedência em CSS? Em qual ocasião a ordem de
precedência se torna uma questão relevante no desenvolvimento web?
4) No caso de redundância no CSS escrito em uma folha de estilo externa e no
CSS inline, escrito diretamente no elemento, qual dos dois códigos
prevalecerá, isto é, qual deles terá a maior precedência?
5) Identifique nas frases abaixo qual o seletor e a propriedade adequados para
fazer a modificação desejada:
a) Mudar o alinhamento dos parágrafos
b) Mudar a imagem de fundo da tabela de ID t1
c) Modificar a borda das imagens de classe destaque
Colégio Pedro II - Campus São Cristóvão III Introdução à Ciência da Computação - Prof. Bianca

Seletores
1) O que é um seletor de elemento? Cite alguns exemplos.
2) O seletor de classe é utilizado para a aplicação de CSS em elementos
pertencentes a classes específicas. Qual é a sintaxe desse seletor?
3) Qual é a sintaxe utilizada para seletores de ID? Quantos elementos um
seletor de ID pode modificar em uma mesma página web? Por quê?
4) Explique o funcionamento de um seletor descendente. Para facilitar, você
pode criar um exemplo para ilustrar sua explicação.
5) Qual é a diferença entre os seletores do tipo :hover e :focus?
6) Os seletores do tipo :first-child e :last-child são utilizados para referenciar,
respectivamente, o primeiro e o último elemento-filho.
a) Escreva uma regra CSS que modifique a cor de fundo da primeira
linha de uma tabela para cinza.
b) Escreva outra regra que modifique a fonte do último item de uma lista
não ordenada para Arial tamanho 18px.
7) O seletor :nth-child() afeta o enésimo elemento-filho, seguindo alguma
fórmula ou critério. Quais são os valores que podem ser inseridos dentro dos
parênteses para estabelecer este critério, e de que forma? Cite exemplos.
8) Qual é a diferença entre os seletores de pseudo-classes (precedidos por
apenas : ) e os seletores de pseudoelementos (precedidos por :: )? Cite
alguns exemplos de seletores de pseudoelementos e explique suas
respectivas aplicações.
9) Para que servem os seletores de atributo?
10)Escreva os seletores para os seguintes elementos:
a) A primeira linha de uma tabela
b) A última célula de cada linha de uma tabela
c) Os itens ímpares de uma lista ordenada
d) Começando pelo segundo item de uma lista não ordenada, de forma
recorrente a cada 3 itens (isto é, o seletor vai afetar o segundo
elemento, o quinto, o oitavo e assim sucessivamente)
e) Todas as imagens da página
f) O corpo da página
g) Elementos da classe “info”
Colégio Pedro II - Campus São Cristóvão III Introdução à Ciência da Computação - Prof. Bianca

h) Campos de texto longo, ao passar o mouse por cima

i) Campos de texto longo, ao serem clicados
j) Botões do tipo “reset”
k) Botões do tipo “reset”, ao passar o mouse por cima
l) Células de dados e células de cabeçalho da tabela
m) Elementos da classe “c1” e o elemento de ID “principal”
n) Campos do tipo “password” ao serem selecionados e o primeiro
campo de texto do formulário
o) Elemento de ID “conteudo_principal”
p) Imagens dentro de elementos da classe “lateral”
q) A primeira letra dos parágrafos de classe “inicio”
Colégio Pedro II - Campus São Cristóvão III Introdução à Ciência da Computação - Prof. Bianca

Propriedades
1) Explique a diferença entre as propriedades que iniciam com “font” e as
propriedades que iniciam com “text”. Cite um exemplo para ilustrar sua
explicação.
2) Qual o nome da propriedade que modifica a cor dos textos de um elemento?
Quais são os valores que tal propriedade aceita? Cite exemplos.
3) Qual o nome da propriedade que modifica a cor de fundo de um elemento?
Quais são os valores aceitos por tal propriedade? Cite exemplos.
4) É possível atribuir cores com transparência às propriedades citadas nas
questões 2 e 3? De que maneira?
5) O que faz a propriedade font-size? Quais são os valores que ela aceita? Cite
exemplos.
6) Quais são as propriedades utilizadas para deixar um texto em itálico e em
negrito, respectivamente? Quais são os diferentes valores aceitos por elas e
o que eles significam?
7) Qual propriedade utilizamos para trocar a fonte da página?
a) É necessário especificar um nome de fonte específico? Explique.
b) O que é fallback? É possível criar um fallback para as fontes? Caso
possível, explique como isso é feito.
8) Como fazer um texto sublinhado, riscado ou com efeitos como sobrelinha e
outros? Qual (ou quais) a(s) propriedade(s) utilizada(s) para isso? Quais
valores são aceitos e qual efeito cada valor produz?
9) Como trocar o alinhamento de um texto? Explique em detalhes (nome da(s)
propriedade(s) envolvida(s) e os valores possíveis com seus respectivos
efeitos)
10) Quais são as propriedades que podem ser aplicadas a imagens de fundo?
a) Quais as funcionalidades de cada uma delas e quais valores elas
aceitam, e com qual efeito?
11) Explique as diferenças entre o que as propriedades padding, margin e
border definem. Faça um esquema gráfico para melhor visualização dessas
diferenças.
12)Quais são as propriedades que especificam a altura e a largura dos
elementos, respectivamente?
Colégio Pedro II - Campus São Cristóvão III Introdução à Ciência da Computação - Prof. Bianca

13)Quais são as propriedades que podem ser utilizadas para flexibilizar o valor
padrão estipulado para largura ou altura? De que maneira essas
propriedades podem ser utilizadas?
14)“Shorthand” é o nome dado a uma propriedade que condensa duas ou mais
propriedades em si. As propriedades border, padding e margin são
conhecidas como “propriedades shorthand” por esse motivo. Quais são as
propriedades condensadas em cada uma delas?
15)Para centralizar um elemento, como uma div, parágrafo ou tabela (entre
outros), é necessário dar ao elemento uma largura que seja menor que 100%
e acrescentar a ele a declaração margin: auto;.
a) Explique a necessidade de realizar esses dois passos para a
centralização do elemento.
b) Qual é o papel da declaração margin: auto;? Como essa declaração
funciona?
c) A declaração margin: auto; também pode ser substituída por margin:
0 auto; Qual a diferença entre essas declarações?