Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
Seletores CSS e Listas HTML
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Compartilhar
Prévia do material em texto
· Pergunta 1
0 em 1 pontos
O seletor .class no CSS seleciona elementos que tem um determinado valor desse atributo e permitem aplicar uma série de estilos. Um elemento HTML pode ter mais de uma classe associada, sendo o efeito cascata aplicado neste caso. A sintaxe básica do seletor .class está definido abaixo
.class {
css declarations;
}
Considere agora o trecho de código a seguir
<!DOCTYPE html> <html> <head> <style> p.center { text-align: center; color: red; } p.large { font-size: 300%; } </style> </head> <body> <h1 class="center">Cabeçalho 1</h1> <p class="center">Parágrafo 1</p> <p class="center large">Parágrafo 2</p> </body> </html>
Assinale a alternativa correta sobre o conteúdo renderizado a partir desse código:
Resposta Selecionada:
Os textos “Parágrafo 1” e “Parágrafo 2” serão exibidos na cor vermelha, centralizados e com fonte grande.
Resposta Correta:
O texto “Parágrafo 2” será exibido na cor vermelha, centralizado e com fonte grande.
Comentário da resposta:
Sua resposta está incorreta. Essa alternativa não corresponde a correta renderização do texto mencionado. O “Cabeçalho 1” apesar de ter a classe center, ela foi definida para o elemento de parágrafo <p> apenas. Por esse motivo, nenhuma propriedade será de fato aplicada a ele. O “Parágrafo 1” possui apenas a classe center. Esta classe tem as propriedades de alinhamento (centralizado) e cor (vermelho) definidas. Então “Parágrafo 1” serpa renderizado vermelho e renderizado. O “Parágrafo 2” está definido por duas classes: center e large. Com a propriedade cascata das folhas de estilo, todas as propriedades definidas nessas duas classes serão aplicadas a estes parágrafos. Por esse motivo, “Parágrafo 2” será renderizado na cor vermelha, centralizado e com fonte grande.
· Pergunta 2
0 em 1 pontos
No HTML usamos a tag form para delimitar a área na qual se encontram os campos a serem preenchidos pelo usuário, a fim de serem enviados para processamento no back-end (enquanto a página HTML é chamada de front-end da aplicação).
Considere o trecho de código abaixo referente a definição de um formulário e sua folha de estilo:
Definição html do formulário:
<form>
<label for="fname">Nome</label>
<input type="text" id="fnome" name="fnome">
</form>
Folha de estilo:
input {
width: 50%;
}
Sobre o trecho de código anterior, podemos afirmar que:
Resposta Selecionada:
O valor de “width” igual a 50% indica que o formulário como um todo ocupará 50% da tela.
Resposta Correta:
A propriedade “width” define que os campos de entrada terão largura igual a 50% do espaço ocupado pelo formulário.
Comentário da resposta:
Sua resposta está incorreta. Essa alternativa não corresponde a afirmativa correta sobre o trecho de código anterior. A propriedade “width” define que os campos de entrada terão largura igual a 50% do espaço ocupado pelo formulário. Não tem correlação com o tamanho do formulário em si.
· Pergunta 3
1 em 1 pontos
As istas são comumente utilizadas nas páginas html para apresentar de forma organizada uma enumeração de elementos. A tag <ul> representa uma lista não ordenada com as opções de bebidas em um restaurante, sendo cada item da lista determinado pelo elemento li. Considere a lista apresentada abaixo:
O trecho html que foi utilizado para renderizar essa lista está apresentado no trecho de código a seguir:
<ul>
<li>Café</li>
<li>Chá</li>
<li>Refrigerante</li>
</ul>
Com base nessas informações e sabendo que green é verde e yellow é amarelo, a opção que apresenta a correta definição do código css para alcançar a aparência da lista anterior está representado em
Resposta Selecionada:
ul {
background: green;
padding: 20px;
}
ul li {
background: yellow;
margin: 5px;
}
Resposta Correta:
ul {
background: green;
padding: 20px;
}
ul li {
background: yellow;
margin: 5px;
}
Comentário da resposta:
Resposta correta. A propriedade background é responsável por definir a cor de fundo de cada um dos elementos. No caso da lista apresentada, o conteiner/caixa mais externo é na cor verde. Cada um dos itens da lista tem um background na cor amarelo. A definição “ul li” indica que o estilo é aplicado aos itens das listas não ordenadas. Isso é interessante porque seria possível definir comportamentos distintos a elementos das listas ordenadas e não ordenadas de forma separada.
· Pergunta 4
0 em 1 pontos
A folha de estilo inline só se aplica a um elemento HTML. Esse formato de css perde muitas das vantagens das folhas de estilo, pois mistura a apresentação do conteúdo (html) com a marcação (css).
Assinale a alternativa que descreve uma situação em que é recomendado o uso da folha de estilo inline:
Resposta Selecionada:
Quando é necessário aplicar um estilo para todo o sistema web.
Resposta Correta:
Quando é necessário aplicar um estilo a uma única ocorrência de um elemento.
Comentário da resposta:
Sua resposta está incorreta. Essa alternativa não corresponde a definição de uso da folha de estilo inline. O uso mais recorrente deve ser da folha de estilo externa, que separa o conteúdo (html) da formatação (css) em um arquivo a parte. Posteriormente, a folha de estilo interna, deve ser utilizada para definir aparência em um documento. Por último deve ser utilizada a folha de estilo inline. A indicação de uso desta é por exceção, somente deve ser utilizada quando é necessário aplicar o estilo a uma única ocorrência de um elemento.
· Pergunta 5
0 em 1 pontos
Os links no html são definidos com a tag <a>. Em uma folha de estilo é possível alterar a aparência do link. Dentro desse contexto, o link possui diferentes estados que são descritos no css pela tag a, seguida do nome do estado:
a:link – o usuário ainda não visitou o link
a:visited - o usuário já visitou o link
a:hover – o link quando o mouse do usuário passa por cima
a:active – o momento em que um link é clicado
Sabendo dessa informação considere agora o trecho de código a seguir:
a:link {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
Podemos afirmar que os links na página que tem o css anterior associado irão se comportar da seguinte maneira:
Resposta Selecionada:
Os links não serão exibidos, pois a propriedade “text-decoration” foi definida como “none”.
Resposta Correta:
Os links nos estados “visited” e “active” terão o comportamento padrão.
Comentário da resposta:
Sua resposta está incorreta. Essa alternativa não corresponde ao comportamento que será renderizado pelos navegadores ao verem um link no corpo da página html. No trecho de código css os estados que estão sendo alterados são “link” e “active”. A propriedade “text-decoration” está relacionada com o sublinhado no link. Assim no estado “link” o link não estará com o sublinhado, mas no estado “hover” estará. Ou seja, quando o usuário passar o mouse por cima do link ele vai aparecer sublinhado. Os demais estados que não foram definidos terão o comportamento padrão que dependerá do navegador utilizado.
· Pergunta 6
0 em 1 pontos
O seletor #id tem um papel semelhante aos seletor .class, mas ele pode ser aplicado apenas uma vez em todo o HTML. A sintaxe de definição do seletor #id está apresentada a seguir:
#id { css declarations; }
Considere agora o trecho de código a seguir
<!DOCTYPE html> <html> <head> <style> #firstname { background-color: yellow; } </style> </head> <body> <h1>Seletor #id</h1> <div class="intro"> <p id="firstname">Meu nome é Mário.</p> <p id="hometown">Eu moro em São Paulo/SP.</p> </div> <p>Meu melhor amigo é o Valdemar.</p> </body> </html>
Assinale a alternativa correta sobre o conteúdo renderizado a partir desse código:
Resposta Selecionada:
Todos os três parágrafos serão exibidos de forma similar: todos terão a mesma cor de fundo.
Resposta Correta:Para que o texto “Eu moro em São Paulo/SP.” tenha a mesma cor de fundo que o texto “Meu nome é Mário.” podemos acrescentar “, #hometown” logo após o termo #firstname.
Comentário da resposta:
Sua resposta está incorreta. Essa alternativa não corresponde a renderização do texto mencionado. Somente um seletor id foi definido no trecho CSS e ele pode ser utilizado somente uma vez. Isso já ocorreu no texto “Meu nome é Mário.”. Apesar deste texto estar definido dentro da mesma div que “Eu moro em São Paulo/SP.”, o seletor id=”firstname” é aplicado somente a “Meu nome é Mário.”. O texto “Meu melhor amigo é o Valdemar.” não possui nenhum seletor ou propriedade para definir sua aparência, diferente do padrão (fonte na cor preta e sem cor de fundo). Para que o texto “Eu moro em São Paulo/SP.” tenha a mesma cor de fundo que o texto “Meu nome é Mário.” podemos acrescentar “, #hometown” logo após o termo #firstname:
#firstname, #hometown {
background-color: yellow;
}
· Pergunta 7
0 em 1 pontos
O css permite que você adicione diferentes tipos de fundos (background) para um determinado elemento. Os fundos podem ser definidos por imagens ou cores, além disso é possível definir a posição do background e se ele repetirá.
Analise os dois trechos de código css abaixo:
Trecho 1: #example1 { background-image: url(img_flwr.gif), url(paper.gif); background-position: right bottom, left top; background-repeat: no-repeat, repeat; } Trecho 2: #example1 { background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat; }
Sobre os dois trechos de código anterior, podemos afirmar que
Resposta Selecionada:
Os trechos de código são diferentes e indicam classes diferentes de fundos que podem ser utilizados no sistema web.
Resposta Correta:
Ambos os trechos são similares e indicam que duas imagens estarão sobrepostas como fundo.
Comentário da resposta:
Sua resposta está incorreta. Os dois trechos de código estão corretos e são similares. Eles definem duas imagens sobrepostas como imagens de fundo e define para cada uma delas as características de exibição em termos da posição e se irão ou não se repetir.
· Pergunta 8
1 em 1 pontos
Uma folha de estilo incorporada ou interna, é ideal para ser aplicada a uma única página. Com uma folha de estilo incorporada ou interna, você pode mudar a aparência de somente um documento, aquele onde a folha de estilo está incorporada.
Selecione a opção que descreve a forma correta para a utilizar uma folha de estilo interna:
Assinale a alternativa que descreve uma justificativa correta para o uso da tag alt:
Resposta Selecionada:
O código css deve ser declarado na seção head do documento com a tag de estilo <style>.
Resposta Correta:
O código css deve ser declarado na seção head do documento com a tag de estilo <style>.
Comentário da resposta:
Resposta correta. A folha de estilo interna é utilizada para definir o conteúdo no nível do documento, ou seja, o código css deve ser declarado na seção head do documento com a tag de estilo <style>. Em outras palavras, o código CSS deve ser declarado entre as tags <style> e </style>. Estas tags <style> e </style> são definidas dentro do escopo do cabeçalho da página.
· Pergunta 9
0 em 1 pontos
A extensão CSS significa Cascading Style Sheets ou Folhas de Estilo em Cascata. Esse nome advém da propriedade de sobreposição de estilo que ocorre entre as definições mais genéricas até as mais específicas. A regra é que quanto mais específico um estilo, a sua aplicação é priorizada.
Conhecendo esse conceito, considere agora os trechos de código a seguir que correspondem a um trecho de um arquivo de folha de estilos e um arquivo html:
Folha de estilo externa: meuEstilo.css
body {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 9px;
}
#conteudo p. minhaClasse {
color: #0f0; /* Cor verde */
}
#conteudo p {
color: #00f; /* Cor azul */
font-size: 18px;
}
p {
color: #f00; /* Cor vermelha */
font-size: 26px;
}
Arquivo html: minhaPagina.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="meuEstilo.css">
</head>
<div id="conteudo">
<p class="minhaClasse">
Parágrafo 1
</p>
</div>
<p>
Parágrafo 2
</p>
</html>
Com base no código apresentado anteriormente, podemos afirma que :
Resposta Selecionada:
A exibição do “Parágrafo 1” será na cor vermelha
Resposta Correta:
A exibição do “Parágrafo 2” será na cor vermelha
Comentário da resposta:
Sua resposta está incorreta. Essa alternativa não corresponde a correta aparência do conteúdo da tag <p> mencionada. Na folha de estilo externa, o escopo mais genérico é definida com a cor vermelha. A definição mais específica que esta é aquela que é atrelada ao identificado “conteudo”. Esse identificador foi utilizado na tag <div>. Posteriormente, a terceira definição mais específica é para a cor verde. Ela é aplicada para a tag <p> que está atrelada a uma tag externa a <p> com o valor de classe igual a “minhaClasse” e além disso, <p> está definida internamente a uma tag com o identificado “conteudo”. Este último caso ocorre para o parágrafo com conteúdo “Parágrafo 1”.
· Pergunta 10
0 em 1 pontos
O CSS disponibiliza diferentes sintaxes para os valores das cores. Um deles é o nome da cor na língua inglesa, como red (vermelho), white (branco) e black (preto). Uma segunda maneira é utilizar o valor hexadecimal correspondente a cor, como ff000 (vermelho), 00ffff (ciano) e bebebe [FS1] (cinza). A terceira forma é utilizar o padrão de cores RGB. Um valor de cor RGB é definida com três valores, representando respectivamente as cores vermelho (red), verde (green) e azul (blue). Por exemplo, a cor rgb (0,0,255) é renderizado no azul, pois o parâmetro azul é definido como o maior valor e os demais são definidos com o valor 0. Os valores de cores RGB são suportadas por todos os grandes navegadores.
Assinale qual das regras abaixo declara a sintaxe correta para que tanto parágrafos como as células de tabelas tenham o texto na cor vermelha
Resposta Selecionada:
p; td {color: rgb (255, 0, 0)}
Resposta Correta:
p, td {color: rgb (100%, 0, 0)}
Comentário da resposta:
Sua resposta está incorreta. Essa alternativa não está correta, pois a sintaxe que deve ser utilizada para a definição de propriedades css para mais de um elemento no html consiste em listar os elementos/tags separados por vírgula e indicar as propriedades seguindo a sintaxe propriedade: valor. Nessa opção a cor vermelha está representada no padrão rgb, formada por
Compartilhar