Questões de Concurso sobre CSS

Uma equipe de desenvolvimento está criando um site responsivo e acessível que utiliza, entre outros recursos, HTMLS, CSS3, JSF e jQuery. A meta é garantir que o site seja adaptável a diferentes dispositivos e tamanhos de tela, atenda aos padrões de acessibilidade (WCAG 2.1) e possua menus dinâmicos e conteúdo interativo carregado de forma assíncrona. A estratégia que melhor implementa os requisitos é usar

No MPRS, a equipe de desenvolvimento está criando um portal interno de fácil navegação para os membros da instituição. Ao acessar o portal, os usuários poderão navegar entre diversas seções, como “Documentos”, “Processos” e “Atividades”. Para melhorar a usabilidade e facilitar a navegação, a equipe de design deseja que, ao clicar em um link de navegação para uma seção específica, o título dessa seção seja visualmente destacado. O objetivo é chamar a atenção do usuário para a seção à qual ele foi redirecionado. A tarefa do técnico de informática será implementar a estilização correta, utilizando uma pseudoclasse do CSS3 (Cascading Style Sheets, version 3), para que o título da seção receba um destaque assim que o link relacionado for clicado. A pseudoclasse do CSS3 que o técnico deverá utilizar é

HTML, CSS e JavaScript são tecnologias fundamentais para o desenvolvimento front‑end, sendo o HTML responsável pela estrutura da página, o CSS pelo estilo visual e o JavaScript pela interação dinâmica.

Assinale a opção que corresponde ao seletor CSS que pode ser utilizado para selecionar todos os elementos <p> que são filhos diretos de <div>.

A propriedade CSS que é usada para alterar a cor de fundo de um elemento é denominada

Flexbox ou CSS Flex Contêiner é um contêiner flexível em CSS cujo modelo de layout permite organizar os elementos de maneira flexível e eficiente. Com base na sintaxe de um contêiner flexível, qual é a propriedade e o valor que devem ser definidos?

O desenvolvedor da SEMCONGER precisa criar uma página dinâmica utilizando HTML, CSS e JavaScript para um sistema interno de gerenciamento de contratos. Ele deseja utilizar CSS para definir o layout responsivo e JavaScript para interatividade. A seguir está um trecho do código HTML com CSS embutido:

Assinale a alternativa que preenche corretamente a lacuna no código CSS, para que o div.container centralize o conteúdo tanto na horizontal quanto na vertical.

Programação front-end é a área do desenvolvimento web que se concentra na interface do usuário, ou seja, na parte visual e interativa de um site ou aplicativo. O objetivo é garantir que a interface seja atraente, funcional e responsiva, proporcionando uma boa experiência ao usuário. Para isso, o programador front-end usa linguagens de programação como HTML, CSS e JavaScript para criar layouts e interações.

No desenvolvimento de aplicações Web, considerando a interface de usuário das aplicações,

No desenvolvimento do portal institucional da PARANAPREVIDÊNCIA, você está trabalhando na implementação do menu de navegação e, para melhorar a experiência do usuário, decide aplicar um estilo visual distinto nos elementos de navegação que não contêm nenhum conteúdo, como links vazios ou ícones, para torná-los mais visíveis. Para isso, você opta por utilizar uma pseudoclasse do CSS 3 (Cascading Style Sheets, version 3) que permite aplicar um estilo específico a esses elementos.

Com base no caso exposto, assinale a alternativa que apresenta a pseudoclasse do CSS 3 que você utilizou para aplicar estilos a elementos que não têm filhos (nem texto, nem outros elementos).

Analise o seguinte trecho de código CSS:

.container {

display: flex;

flex-direction: column;

}

Qual o efeito causado pelo código acima?

Em CSS, a propriedade que é usada para definir a largura de um elemento é denominada

Considere o código HTML a seguir.

<div id="composicao" posicao="0">

<p posicao="1"> MPF </p><br/>

<p posicao="2"> MPT </p><br/>

<p posicao="3"> MPM </p><br/>

<p posicao="4"> MPDFT </p><br/>

</div>

E o respectivo código CSS:

div {

display: flex;

flex-direction: row-reverse;

}

p[posicao]::after {

content: "|";

}

#composicao p::before {

content: attr(posicao);

}

Após renderizar o código acima, um navegador web padrão exibe a linha:

O design responsivo é essencial para garantir que uma página web se adapte corretamente a diferentes tamanhos de tela, como computadores, tablets e celulares. Com base nisso, assinale a alternativa correta sobre como criar um layout responsivo:

Qual propriedade da Folha de Estilo em Cascata (Cascading Style Sheets - CSS) é utilizada para definir o espaço interno de um elemento?

MAZZA, L. HTML5 e CSSS Domine a Web do futuro. São Paulo: Casa do Código, 2014.

Ao estilizar um website responsivo, o desenvolvedor precisa de flexibilidade no layout, garantindo que o cabeçalho (<header>) ocupe toda a largura disponível e que seus itens internos (logotipo, menu e barra de busca) sejam distribuídos horizontalmente com espaçamento igual entre eles. Além disso, o logotipo deve permanecer fixo no canto esquerdo, enquanto o menu e a barra de busca devem se alinhar à direita, ocupando o espaço restante.

Assinale a opção que indica a combinação de propriedades CSS mais adequada para alcançar a distribuição horizontal flexível e o espaçamento igual dentro do <header>, e o valor da propriedade que deve ser aplicado ao item de menu ou barra de busca para que ele ocupe todo o espaço intermediário, empurrando o restante dos elementos para a direita

A propriedade border-style do CSS possui diversos estilos de bordas, sendo que cada um deles permite que o desenvolvedor desenvolva uma página site que especifique o tipo de borda a ser utilizada no elemento HTML.

O valor de border-style que define uma borda ranhurada 3D é

No desenvolvimento web, considere os seguintes trechos de código HTML e CSS.

Trecho de Código em HTML

Trecho de Código em CSS

Com base nos trechos de código apresentados, é correto afirmar que

Qual é o objetivo principal da meta tag viewport na construção de uma página web responsiva?

Durante o desenvolvimento de um novo sistema Web, foi especificado o requisito de que esse sistema utilizasse mecanismos para possibilitar um layout flexível. Qual técnica pode ser utilizada no CSS para atender a esse requisito?