CSS: Fundamentos e Aplicações

Prévia do material em texto

1/10
AVA UNIVIRTUS
univirtus.uninter.com/ava/web
1. Curso: TECNOLOGIA EM ANÁLISE E DESENVOLVIMENTO DE SISTEMAS -
TELEPRESENCIAL - EAD
Disciplina(s):
Fundamentos da Programação Web
Questão 1/10 - Fundamentos da Programação Web
 
Observe o código abaixo, criado para estilizar um menu:
ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
 background-color: #f1f1f1;
 }
li{float:left;}
li a {
 display: block;
 color: #000;
 padding: 8px 16px;
 text-decoration: none;
 }
li a:hover {
 background-color: #555;
https://univirtus.uninter.com/ava/web/#/ava/AvaliacaoUsuarioHistorico/bqF4B29h7kHzgPcgE%252BR9Yg%253D%253D/novo/1/PmSAZ5NH25fSoFnET6II0w%253D%253D
2/10
 color: white;
 }
Com base no novo código CSS fornecido, analise as afirmativas abaixo e assinale V
para as verdadeiras e F para as Falsas sobre qual será o efeito visual quando o cursor
do mouse estiver sobre um elemento dentro de um elemento .
 
I. O texto dentro do elemento ficará em negrito.
II. O fundo do elemento ficará na cor cinza escuro (#555).
III. O texto dentro do elemento ficará na cor branca.
IV. O fundo do elemento ficará na cor cinza claro (#f1f1f1).
V. O elemento terá uma borda ao redor dele.
Agora, selecione a alternativa que apresenta a sequência correta de respostas:
Nota: 10.0
A F - V – V – F - F
Você assinalou essa alternativa (A)
Você acertou!
I. Falsa. O código não define nenhuma propriedade para tornar o texto
em negrito.II. Verdadeira. Quando o cursor do mouse estiver sobre um
elemento dentro de um elemento , o fundo do elemento 
ficará na cor cinza escuro (#555) devido à regra "li a:hover".
III. Verdadeira. O texto dentro do elemento ficará na cor branca
quando o cursor do mouse estiver sobre ele, também devido à regra "li
a:hover".
 
IV. Falsa. O código define a cor de fundo do elemento como cinza
claro (#f1f1f1), independentemente do cursor estar sobre o elemento
.
 V. Falsa. O código não define nenhuma propriedade para adicionar uma
borda ao redor do elemento quando o cursor estiver sobre ele.
B V - F - F – V - F
C V - V - V – F - V
D F - F - V – V - V
E V - F - F – V - F
Questão 2/10 - Fundamentos da Programação Web
3/10
 
No contexto da manipulação de CSS e do conceito de herança, analise as afirmações
a seguir e marque V para as asserções verdadeiras e F para as asserções falsas:
I. O modelo de árvore do documento (DOM) representa a hierarquia dos elementos em
uma página HTML.
II. A propriedade de largura (width) faz parte da herança em CSS.
 III. Por padrão, todas as propriedades CSS herdam valores definidos no elemento pai.
IV. O modelo de árvore do documento é semelhante a uma árvore genealógica,
representando os graus de parentesco entre os elementos.
 Agora, selecione a alternativa que apresenta a sequência correta de respostas:
Nota: 10.0
A F - V - F- F
B F - F - F - F
C V - V - V - F
D F - F - V - V
E V - F - F - V
Você assinalou essa alternativa (E)
Você acertou!
GABARITO: (LETRA E)
I. (V) - O modelo de árvore do documento (DOM) representa a hierarquia
dos elementos em uma página HTML. Ele organiza os elementos em uma
estrutura de árvore, onde cada elemento tem seus descendentes e
ascendentes.
II. (F) - A propriedade de largura (width) não faz parte da herança em CSS.
Ela precisa ser definida explicitamente em cada elemento.
III. (F) - Por padrão, nem todas as propriedades CSS herdam valores
definidos no elemento pai. Algumas propriedades possuem herança,
enquanto outras não.
IV. (V) - O modelo de árvore do documento é semelhante a uma árvore
genealógica, representando os graus de parentesco entre os elementos,
com elementos pai, filho e irmão.
Questão 3/10 - Fundamentos da Programação Web
 
4/10
O HTML é responsável pela estruturação dos conteúdos a serem exibidos nas páginas.
O CSS possui uma finalidade específica na diagramação de páginas. 
A respeito do CSS, qual é a finalidade do CSS em relação ao HTML e o que é um bloco
de declaração em CSS?
Nota: 10.0
A O CSS tem como finalidade especificar a apresentação da página HTML,
enquanto o bloco de declaração em CSS contém uma ou mais declarações
que definem a estilização de um elemento HTML.
Você assinalou essa alternativa (A)
Você acertou!
O CSS tem como finalidade especificar a apresentação da página HTML,
enquanto o bloco de declaração em CSS contém uma ou mais declarações
que definem a estilização de um elemento HTML.
B O CSS tem como finalidade estruturar o conteúdo das páginas HTML,
enquanto o bloco de declaração em CSS contém uma ou mais declarações
que definem o comportamento de um elemento HTML.
C O CSS tem como finalidade controlar as interações do usuário com a página
HTML, enquanto o bloco de declaração em CSS contém uma ou mais
declarações que definem as propriedades de um elemento HTML.
D O CSS tem como finalidade substituir o HTML na construção de páginas web,
enquanto o bloco de declaração em CSS contém uma ou mais declarações
que definem a função de um elemento HTML.
E O CSS tem como finalidade substituir completamente o HTML na construção
de páginas web, enquanto o bloco de declaração em CSS contém uma ou
mais declarações que definem as funções de um elemento HTML.
Questão 4/10 - Fundamentos da Programação Web
 
Observe o trecho da página exibido na web:
Listas não ordenadas
HTML
CSS
JavaScript
Listas Ordenadas
1. HTML
2. CSS
3. JavaScript
5/10
A respeito do código para criar as listas acima, analise as assertivas que seguem e
marque V para as asserções verdadeiras, e F para as asserções falsas.
 I. Para criar uma lista não ordenada utiliza-se a tag .
 II. Para criar uma lista ordenada utiliza-se a tag . 
 III. Para colocar um item abaixo do outros nas listas acima, utiliza-se a tag .
 IV. Para colocar um item abaixo do outros nas listas acima, utiliza-se a tag .
 Agora, selecione a alternativa que apresenta a sequência correta:
Nota: 10.0
A F – V – V -F
B V – V – F -V
C V – V – V -V
D F – F – F - F
E V – V – F - F
Você assinalou essa alternativa (E)
Você acertou!
São falsas as assertivas III e IV. Para criar uma lista, tanto ordenada quanto
não ordenada se utiliza a tag para criar os itens, não se utiliza nem 
nem para esse objetivo
Questão 5/10 - Fundamentos da Programação Web
 
CSS (Cascading Style Sheets) é uma linguagem de estilo utilizada para definir a
aparência e o layout dos elementos de uma página da web. Com o uso do CSS, é
possível criar páginas visualmente atraentes, permitindo uma melhor experiência do
usuário. Ele trabalha em conjunto com o HTML para separar o conteúdo da página da
sua apresentação, possibilitando a criação de estilos para coisas como fontes, cores,
layout, entre outros. Para declarar CSS, utilizamos os seletores.
Sobre o uso dos seletores CS, analise as afirmações que seguem e marque V para as
asserções verdadeiras, e F para as asserções falsas.
 
I. Seletores simples definem elementos com base no nome, id e classe.
II. Seletores de combinação selecionam elementos com base em um relacionamento
específico entre eles.
 III. Seletores de pseudoclasse selecionam elementos com base em determinado estado.
IV. Seletores de pseudoelementos selecionam e estilizam um elemento.
6/10
V. Seletores de atributo selecionam elementos com base em um atributo ou valor de
atributo.
Agora, selecione a alternativa que apresenta a sequência correta:
Nota: 10.0
A F - V - V - F- F
B V - F - F - V- V
C V - V - V - F- V
Você assinalou essa alternativa (C)
Você acertou!
I. (V) Seletores simples definem elementos com base no nome, id e classe.
 Essa afirmação está correta. Os seletores simples permitem selecionar
elementos com base em seu nome (tag), id ou classe. Por exemplo, podemos
usar o seletor de classe (".classe") para selecionar todos os elementos que
possuem uma determinada classe atribuída.
II. (V) Seletores de combinação selecionam elementoscom base em um
relacionamento específico entre eles.
 Essa afirmação também está correta. Os seletores de combinação permitem
selecionar elementos com base em seu relacionamento específico com outros
elementos. Por exemplo, o seletor filho (">") seleciona os elementos que são
filhos diretos de outro elemento, enquanto o seletor adjacente ("+") seleciona
o elemento imediatamente seguinte ao elemento de referência.
III. (V) Seletores de pseudoclasse selecionam elementos com base em
determinado estado.
Essa afirmação está correta. Os seletores de pseudoclasse permitem
selecionar elementos com base em seu estado ou interação com o usuário.
Por exemplo, o seletor ":hover" seleciona um elemento quando o cursor do
mouse está sobre ele, e o seletor ":checked" seleciona elementos de input
que estão marcados, como checkboxes ou radios.
IV. (F) Seletores de pseudoelementos selecionam e estilizam um elemento.
 Essa afirmação está incorreta. Os seletores de pseudoelementos são usados
para selecionar e estilizar elementos específicos dentro de outros elementos,
como a primeira linha de um parágrafo ou o primeiro caractere de um
elemento. Eles são representados por "::" (dois sinais de dois pontos). Por
exemplo, "::first-line" seleciona a primeira linha de um elemento.
V. (V) Seletores de atributo selecionam elementos com base em um atributo
ou valor de atributo. Essa afirmação está correta. Os seletores de atributo
permitem selecionar elementos com base em um atributo específico ou em
seu valor. Por exemplo, o seletor "[href]" seleciona elementos que possuem o
atributo "href", enquanto o seletor "[type='text']" seleciona elementos de input
cujo atributo "type" é igual a "text".
D F - F - V - V- V
7/10
E V - F - V - F- F
Questão 6/10 - Fundamentos da Programação Web
 
Observe o código abaixo:
a:link {
 color: red;
 }
Agora você pode escolher a alternativa que corresponde ao conceito apresentado na
declaração acima.
Nota: 10.0
A Herança de propriedades em CSS.
B Seletores de classe em CSS.
C Seletores de pseudoclasse em CSS.
Você assinalou essa alternativa (C)
Você acertou!
A declaração faz referência à utilização de pseudoclasse em CSS, que
permite selecionar um elemento que não consta na árvore do documento
utilizando a sintaxe com um sinal de dois-pontos (:) seguido do nome da
pseudoclasse.
D Seletores de atributo em CSS.
E Seletores de pseudoelemento em CSS.
Questão 7/10 - Fundamentos da Programação Web
 
O seletor de id é uma forma de selecionar um elemento HTML específico usando o
atributo id. Para isso, utiliza-se o caractere hash (#) seguido do id do elemento.
Agora você pode analisar as questões e marcar V ou F para cada afirmação com base
no seu conhecimento sobre o seletor de id em CSS.
I. O seletor de id é usado para selecionar vários elementos com o mesmo id em uma
página. II. O id de um elemento HTML é único dentro de uma página.
 III. O seletor de id usa o caractere ponto (.) seguido do id do elemento.
8/10
IV. O seletor de id é usado para estilizar elementos com base em um atributo específico.
 Agora, selecione a alternativa que apresenta a sequência correta:
Nota: 10.0
A F - V - F- F
Você assinalou essa alternativa (A)
Você acertou!
I. (F) - O seletor de id não é usado para selecionar vários elementos com o
mesmo id em uma página. O id de um elemento HTML deve ser único
dentro de uma página.
II. (V) - O id de um elemento HTML é único dentro de uma página. Isso
significa que não deve haver mais de um elemento com o mesmo id.
III. (F) - O seletor de id utiliza o caractere hash (#) seguido do id do
elemento para selecioná-lo, não o caractere ponto (.).
IV. (F) - O seletor de id não é usado para estilizar elementos com base em
um atributo específico. Em vez disso, ele é usado exclusivamente para
selecionar um elemento específico com base em seu id.
B V - F - F - V
C V - V - V - F
D F - F - V - V
E V - F - V - F
Questão 8/10 - Fundamentos da Programação Web
 
A sigla HTML significa Hypertext Markup Language. Em português Linguagem de
Marcação de Hipertexto. HTML é o coração da web. O desenvolvimento do HTML teve
vários visionários que contribuíram para seu desenvolvimento. A esse respeito, analise
as assertivas que seguem e marque V para as asserções verdadeiras, e F para as
asserções falsas.
 I. Vannevar Bush projetou o Memex, em 1945, Tratava-se de uma máquina que tornava
possível copiar imagens entre documentos.
 II. Theodor (Ted) Nelson criou o termo hipertexto/hipermídia. Criou o projeto Xanadu,
cuja ideia era disponibilizar textos paralelos. Com essa proposta, é possível visualizar
documentos e suas conexões precisas, utilizando duas janelas.
 III. Tim Berners-Lee, em 1990, desenvolveu o HTML, com o objetivo de trocar
informações entre pesquisadores de Universidades.
9/10
Agora, selecione a alternativa que apresenta a sequência correta:
Nota: 10.0
A F – V – V
Você assinalou essa alternativa (A)
Você acertou!
(I) = é falsa a alternativa I (Tratava-se de uma máquina, onde era possível
fazer links entre documentos). As alternativas II e III são verdadeiras.
B V – V – F
C V – V – V
D F – F – F
E F – V – F
Questão 9/10 - Fundamentos da Programação Web
 
Observe o trecho de código abaixo:
1. 
2. HTML
3. CSS
4. JavaScript
5. 
O código que completa as linhas 1 e 5 para criar uma lista ordenada é:
Nota: 10.0
A e
B e 
Você assinalou essa alternativa (B)
Você acertou!
a Tag utilizada para criar uma lista ordenada é a tag .
C e 
D e 
E e 
10/10
Questão 10/10 - Fundamentos da Programação Web
 
Podemos utilizar um pseudoelemento para estilizar parte de um elemento. Como a
primeira letra de uma palavra, ou de uma linha.
Qual das seguintes opções descreve corretamente o uso do pseudoelemento ::after no
CSS?
Nota: 10.0
A O pseudoelemento ::after é usado para selecionar o elemento antes do
conteúdo do elemento principal.
B O pseudoelemento ::after é usado para selecionar o elemento depois do
conteúdo do elemento principal.
Você assinalou essa alternativa (B)
Você acertou!
O pseudoelemento ::after é usado para selecionar o elemento depois do
conteúdo do elemento principal.
C O pseudoelemento ::after é usado para selecionar a primeira linha do
elemento principal.
D O pseudoelemento ::after é usado para selecionar a primeira letra do
elemento principal.
E O pseudoelemento ::after é usado para selecionar os marcadores de uma
lista.