CSS - Perguntas para uma entrevista de emprego

Introdução

Procurando uma forma de ajudar os(as) desenvolvedores(as) que estão fora do mercado do mercado de trabalho, eu decidi iniciar uma série de posts onde eu abordo perguntas e respostas recorrentes de uma entrevista para uma vaga de desenvolvedor.

Esse é o quarto post da série e desta vez eu focarei no CSS, um mecanismo para adicionar estilo a um documento web e um dos pilares do desenvolvimento frontend. E assim como nos primeiros posts, eu caprichei para o conteúdo ser o mais rico possível, então aproveitem a leitura <3

CSS

1. O que é o CSS?

CSS é o acrônimo de Cascading Style Sheets. Ele é uma linguagem de estilo bastante simples para elementos HTML. É bem popular em web design, e sua aplicação também é comum em XHTML.

2. Quais as limitações do CSS?

As limitações são:

• Não é possível subir por seletores
• Limitações do controle vertical
• Nenhuma expressão
• Nenhuma declaração de coluna
• Pseudo-classe não controlada por comportamento dinâmico
• Regras, estilos, segmentação por texto específico não é possível

3. Quais as vantagens do CSS?

Algumas das vantagens são:

• Consistência em todo o site
• Reformatação de página
• Acessibilidade
• Conteúdo separado da apresentação

4. Quais as diferentes maneiras de integrar o CSS em uma página web?

Existem três maneiras de fazer essa integração.

1 - Inline: elementos HTML podem ter o CSS aplicado a eles através do atributo style. 2 - Embutido (Embedded): colocando o código em uma tag style dentro do head. 3 - Importado: colocando o CSS em um arquivo externo e linkando isso.

5. Quais as vantagens e desvantagens do CSS externo?

Vantagens:

• Um arquivo pode ser usado para controlar vários documentos com estilos diferentes.
• Vários elementos HTML podem ter muitos documentos, que podem ter classes diferentes.
• É possível agrupar estilos em situações compostas.

Desvantagens:

• É necessário fazer download extra para importar documentos com informações de estilo.
• Para renderizar o documento, a folha de estilos externa deve ser carregada.
• Não é prático para pequenas definições de estilo.

6. Quais as vantagens e desvantages do CSS embutido?

Vantagens:

• Várias tags podem ser criadas em um único documento.
• Estilos, em situações complexas, podem ser aplicados usando os métodos Selector e Grouping.
• Não é necessário downloads extras.

Desvantagens:

• Multiplos documentos não podem ser controlados.

7. Liste os atributos das fontes.

• Font-style
• Font-variant
• Font-weight
• Font-size/line-height
• Font-family
• Caption
• Icon

8. O que são pseudo-elementos?

Pseudo-elementos são utilizados ​​para adicionar efeitos especiais a alguns seletores. Em alguns casos, quando não é possível adicionar marcação ou estilo extra para o documento, podemos utilizar os pseudo-elementos. Isso nos permitirá uma marcação extra no documento, sem interferir no 'documento real'.

9. O que é o CSS Box Model e quais são os seus elementos?

Ele define o design e o layout dos elementos CSS. Os elementos são:

• Margin: a camada superior, a estrutura geral é mostrada.
• Border: são mostrados o padding e o content, com uma borda ao seu entorno
• Padding: O espaço é mostrado.
• Content: o conteúdo real é mostrado.

10. Compare cores em RGB com cores em Hexadecimal.

No código de cores em hexadecimal, uma cor é representada por 6 caracteres. É uma combinação de letras e números precedidas por #, por exemplo:

 .g {
   color: #00FAFA;
  }

Já no código de cores em RGB, uma cor é representada por uma mistura de vermelho, verde e azul. A estrutura fica da seguinte maneira: rgb (red, green, blue). Nesse caso, os valores podem estar entre 0 e 255, por exemplo:

 .g {
   color: rgb(231, 25, 134);
  }

11. Como a dimensão de um elemento pode ser definida?

A dimensão de um objeto pode ser definida pelas seguintes propriedades:

• Height
• Max-height
• Max-width
• Min-height
• Min-width
• Width

12. Como o z-index funciona?

O z-index possiblita fazer a sobreposição de elementos HTML usando CSS. Para especificar o elementro sobreposto, ele recebe um número que pode ser positivo ou negativo, sendo o valor padrão zero. Então um elemento com z-index: 10, irá se sobrepor a um elemento cujo z-index não foi declarado.

13. O que * { box-sizing: border-box; } faz e quais suas vantagens?

Por padrão, os elementos têm box-sizing: content-box aplicado e apenas o tamanho do conteúdo está sendo contabilizado. box-sizing: border-box altera como a largura e a altura dos elementos serão calculadas, incluindo a borda e o padding nesse cálculo. Então:

• A altura de um elemento agora é calculada pela altura do conteúdo + padding vertical + largura da borda vertical.
• A largura de um elemento agora é calculada pela largura do conteúdo + padding horizontal + largura da borda horizontal.

Levar em conta o padding e a borda casa com a maneira como os designers imaginam o conteúdo em grades.

14. Qual a diferença entre os posicionamentos relative, fixed, absolute and static?

• static - A posição padrão; o elemento fluirá para a página como faria normalmente. As propriedades top, right, bottom, left e z-index não se aplicam.
• relative - A posição do elemento é ajustada em relação a si mesma, sem alterar o layout (e, assim, deixa um espaço para outro elemento na sua posição).
• absolute - O elemento é removido do fluxo da página e posicionado em uma posição específica em relação ao seu parente mais próximo, caso haja algum parente, ou em relação ao bloco inicial. Esses elementos não afetam a posição de outros elementos.
• fixed - O elemento é removido do fluxo da página e posicionado em uma posição específica em relação à viewport e não se move durante o scroll.
• sticky - A posição stick é um híbrido entra a fixed e a relative. O elemento é tratado como position: relative até cruzar um limite especificado, quando começar a ser tratado como position: fixed.

Conclusão

Por hora é só pessoal! Apesar de eu ter trazido apenas as questões que achei mais recorrentes para um post sobre o CSS, você pode encontar muitas outras nesse repositório aqui. Fique de olho também nos próximos posts relativos a entrevistas de emprego, e se surgirem dúvidas ou sugestões, não deixem de mandar aí nos comentários!