GABARITO

1 Quando você escreve propriedades CSS, você não pode simplesmente inventá-las como achar melhor. Por exemplo, "cor" é uma propriedade CSS real, e essa é a propriedade que determina a cor do texto de um elemento. Acerca da propriedade do CSS que estabelece o raio da borda inferior esquerda do box, assinale a altenativa CORRETA:

a) ( ) border-bottom-left-radius.

b) ( ) border-top-left-radius.

c) ( ) border-bottom-right-radius.

d) ( ) border-radius.

2 As folhas de estilo externas são a melhor maneira de projetar, porque permitem que você tenha todas as informações de estilo em um arquivo que você anexa a todas as páginas do seu site, criando um único design. Com base nas definições sobre folha de estilo, analise as sentenças a seguir:

I- Se você precisar atualizar a aparência de todo o site, precisará editar apenas um arquivo CSS, e não cada página separadamente.

II- Uma folha de estilo interna é colocada fora da página Web para maior facilidade no acesso ao site.

III- As folhas de estilo externas permitem que as páginas da Web carreguem mais rapidamente, devido ao fato de que os navegadores armazenam em cache (salva) a folha de estilo utilizada e, ao acessar outra página no mesmo site, utilizam a mesma folha de estilo externa, mas já armazenada localmente no computador do usuário.

Assinale a alternativa CORRETA :

a) ( ) As sentenças I e II estão corretas.

b) ( ) Somente a sentença II está correta.

c) ( ) As sentenças I e III estão corretas.

d) ( ) Somente a sentença III está correta.

3 Utilizamos os seletores para controlar o design de páginas Web e para estilizar elementos de acordo com determinados critérios. Considerando o conceito de seletor em CSS, classifique V para as sentenças verdadeiras e F para as falsas.

( ) O seletor de tipo permite que você estilize todos os elementos de um tipo semelhante de uma só vez.

( ) Não há distinção entre maiúsculas e minúsculas ao nomear classes de estilo.

( ) Ao contrário dos seletores de tipo, todos os nomes de seletores de classe devem começar com um ponto (devido a isso, os navegadores encontram esses seletores na folha de estilo).

Assinale a alternativa que apresenta a sequência CORRETA:

a) ( ) V – F – F.

b) ( ) V – F – V.

c) ( ) F – V – F.

d) ( ) F – F – V.

4 Herança em CSS nada mais é do que um método de replicar várias propriedades CSS relacionadas a um elemento de página para elementos aninhados (descendentes). Disserte sobre como o conceito de herança ajuda o código a ser melhor utilizado.

R.: O mecanismo de herança possui um sistema multinível e se estende não apenas aos descendentes diretos do elemento, mas também é transferido para todos os elementos aninhados. O mecanismo de herança reduz significativamente o código CSS, por exemplo, se nosso elemento <strong> recebesse a cor padrão, preto, teríamos que definir separadamente um estilo para esse elemento que determinaria a cor e o tipo de fonte, o que aumenta significativamente os custos trabalhistas para desenvolver uma página específica.

5 Ao trabalhar com texto, muitas vezes, torna-se necessário colocar as linhas de um parágrafo mais próximas umas das outras, ou vice-versa, para esticá-las. A distância entre as linhas de base de linhas adjacentes é chamada de espaçamento entre linhas ou entrelinhas. Em CSS, a propriedade line-height é responsável pelo espaçamento entre linhas. Quanto maior o valor dessa propriedade, maior será o intervalo entre as linhas. Nesse contexto, disserte sobre as palavras-chave utilizadas na decoração de texto em CSS.

R.: none - especifica o texto normal (sem decoração). Este é o padrão;

underline - define uma linha abaixo do texto;

overline - define uma linha acima do texto;

line through - define uma linha através do texto (tachado).

GABARITO

1 Atributos CSS são propriedades que influenciam o estilo e o layout dos elementos HTML. Cada propriedade controla uma pequena parte do estilo geral. Existem centenas de propriedades disponíveis para uso em CSS. Várias propriedades podem ser montadas para decidir o estilo geral de um elemento. Acerca do atributo CSS, assinale a alternativa CORRETA:

a) ( ) Limit.

b) ( ) Tag.

c) ( ) Id.

d) ( ) Head.

2 O que é Web design responsivo? É principalmente um layout de grade flexível ou, em outras palavras, "fluido", do seu site, estruturado com base em unidades de medida relativas, que permite usar um layout para diferentes tipos de dispositivos, imagens e vídeos flexíveis e consultas de mídia. Com base no conceito de design responsivo, analise as sentenças a seguir.

I- O Web design responsivo inclui uma grade de layout de site flexível, imagens e vídeos flexíveis, consultas de mídia e aprimoramento progressivo.

II- O Web design responsivo não é uma tecnologia separada ou um método específico de construção de páginas do site, pois contém muitos métodos de layout, graças aos quais o layout do seu site se adaptará a diferentes condições.

III- Para ajustar a página na tela do dispositivo, os navegadores móveis não reduzem sua escala de exibição em tela.

Assinale a alternativa CORRETA:

a) ( ) As sentenças I e II estão corretas.

b) ( ) Somente a sentença II está correta.

c) ( ) As sentenças I e III estão corretas.

d) ( ) Somente a sentença III está correta.

3 O Módulo caixa flexível, geralmente referido como flexbox, foi projetado como um modelo de layout unidimensional e como um método que poderia oferecer distribuição de espaço entre itens em uma interface e poderosos recursos de alinhamento. Sobre o conceito de direção na flexbox, classifique V para as verdadeiras e F para as falsas.

( ) A propriedade CSS flex-direction permite especificar a direção na qual os itens flexíveis são dispostos em um contêiner flexível.

( ) Se o elemento não for um elemento flex (não dentro de um elemento pai que seja um bloco ou contêiner flex embutido), a propriedade flex-direction e quaisquer propriedades destinadas a funcionar com elementos flex ainda terão efeito sobre tais elementos.

( ) O row-reverse faz com que os itens flex sejam exibidos horizontalmente como uma linha, semelhante ao valor de linha, mas a linha é formada na direção oposta.

Assinale a alternativa que apresenta a sequência CORRETA:

a) ( ) V – F – F.

b) ( ) V – F – V.

c) ( ) F – V – F.

d) ( ) F – F – V.

4 O flexbox foi introduzido como parte de um módulo separado, módulo de layout de caixa flexível CSS. Esse módulo (especificação) descreve um modelo CSS otimizado para design de interface do usuário e permite resolver rapidamente tarefas importantes ao construir um layout. Disserte sobre tais tarefas.

R.: Entre as tarefas, estão: o alinhamento vertical do bloco dentro do elemento pai, colocando colunas de layout da mesma altura, independentemente de como elas são preenchidas com conteúdo; a disposição dos elementos filhos do contêiner na direção que precisamos, enquanto distribui a largura ou altura disponíveis entre si, independentemente de sua quantidade disponível, sem causar estouro no elemento pai; a alteração da ordem dos elementos, independentemente da ordem em que eles são descritos no modelo de objeto do documento DOM.

5 A propriedade flex CSS é uma abreviação para propriedades que permitem especificar o tamanho padrão para um elemento flex, e o quanto o elemento pode crescer e diminuir em relação ao resto dos elementos flex no mesmo contêiner. Disserte sobre tais propriedades.

R.: As propriedades são:

• flex-grow (padrão 0);

• flex-shrink (padrão 1);

• flex-basis (o padrão é auto).

Algumas nuances do uso da propriedade flex são:

• se um valor numérico for especificado, ele será definido para a propriedade flex-grow , se as unidades CSS forem especificadas, então para flex-basis;

se o segundo valor for um valor numérico, ele será definido como flex-shrink, e se as unidades CSS forem especificadas, ele será definido como flex-basis.

GABARITO

1 A linguagem CSS3 oferece a possibilidade do uso de fontes da Web, ou seja, fontes que não precisam ser instaladas no computador. Atualmente, os browsers suportam diversos tipos de formatos de fonte. A fim de oferecer suporte a metadados adicionais, o formato que o W3C suporta e que se deve utilizar. Sobre isso, assinale a alternativa CORRETA:

a) ( ) SVG.

b) ( ) OTF.

c) ( ) TTF.

d) ( ) WOFF.

2 O plano de fundo de um elemento é o tamanho total do elemento, incluindo valores de preenchimento e borda, mas não incluindo o valor de margem, a propriedade margin. Com base nas definições e conceitos, analise as sentenças a seguir.

I- Para definir uma imagem como plano de fundo, é preciso usar a propriedade background-image e especificar o caminho para o arquivo de imagem.

II- É aconselhável não configurar nada como alternativa à imagem. Se a imagem não for carregada por algum motivo, o melhor é não ter nenhum indicativo.

III- Ao usar um caminho relativo, a imagem de fundo deve ser especificada em relação ao endereço do arquivo da folha de estilo, e não à página HTML na qual a imagem de fundo deve ser usada.

Assinale a alternativa CORRETA.

a) ( ) As sentenças I e II estão corretas.

b) ( ) Somente a sentença II está correta.

c) ( ) As sentenças I e III estão corretas.

d) ( ) Somente a sentença III está correta.

3 Uma declaração de propriedade CSS consiste em um nome de propriedade e um valor de propriedade. O nome da propriedade vem primeiro, depois um cólon, e depois o valor. De acordo com as propriedades para trabalhar com imagens de fundo em CSS, classifique V para as sentenças verdadeiras e F para as falsas.

( ) Padding box: a imagem de fundo é posicionada a partir do canto superior esquerdo do elemento (a imagem não passa por baixo da borda do elemento nesses lados).

( ) Content box: a imagem de fundo é posicionada a partir do canto superior esquerdo do elemento (a imagem vai abaixo da borda do elemento).

( ) Border-box: a imagem de fundo é posicionada a partir do canto superior esquerdo do conteúdo do elemento.

Assinale a alternativa que apresenta a sequência CORRETA.

a) ( ) V – F – F.

b) ( ) V – F – V.

c) ( ) F – V – F.

d) ( ) F – F – V.

4 A propriedade de fundo CSS define a posição inicial da imagem de fundo para um elemento. É uma propriedade abreviada para definir as propriedades CSS de cor de fundo, de fundo, de repetição de fundo, de fundo e de posição de fundo. Qual é exatamente a diferença entre a propriedade background-origin e background-clip?

R.: A propriedade background-clip, ao contrário de background-origin, recorta a parte do plano de fundo que está fora dos quadros especificados. A propriedade background-origin determina apenas como a imagem de fundo é posicionada.

5 Com a propriedade CSS list-style-position, você pode especificar a posição do marcador ou número em relação ao item da lista. Como é utilizado esse marcador?

R.: Para colocar um marcador (número) dentro do elemento da lista junto com o conteúdo, você deve usar o valor dentro de; e, para colocá-lo fora do elemento da lista, você deve usar o valor fora de.