top 30 popular css interview questions
Lista das perguntas mais populares da entrevista de CSS com respostas:
O CSS questões que cobrem quase todas as categorias CSS básicas e avançadas são explicadas com exemplos.
CSS é um dos recursos mais essenciais do desenvolvimento web. É uma linguagem pela qual podemos descrever a aparência das páginas da web.
Portanto, é essencial cobrir todas as partes básicas e avançadas do CSS. Para se tornar um bom desenvolvedor web e quebrar a entrevista do desenvolvedor web com sucesso, você precisa aprender CSS.
Perguntas frequentes da entrevista sobre CSS
A seguir está a lista das perguntas e respostas mais frequentes das entrevistas de CSS em termos simples para seu fácil entendimento.
Vamos começar!!
P # 1) O que é CSS?
Responda: CSS descreve o estilo de uma página da web em HTML. É uma linguagem pela qual podemos definir o comportamento de uma página HTML. Descreve como o conteúdo HTML será mostrado na tela.
CSS controla o layout de várias páginas da web em HTML. CSS é conhecido como Cascading Style Sheet.
Q # 2) Nomeie todos os módulos que são usados na versão atual do CSS.
Resposta: Existem vários módulos em CSS, conforme declarado abaixo:
- Seletores
- Box Model
- Planos de fundo e fronteiras
- Efeitos de texto
- Transformações 2D / 3D
- Animações
- Layout de múltiplas colunas
- Interface de usuário.
Q # 3) Distinguir entre CSS2 e CSS3.
Responda: As diferenças entre CSS2 e CSS3 são as seguintes:
- O CSS3 está dividido em duas seções, chamadas de módulo. Já no CSS2, tudo acessa em um único documento com todas as informações nele.
- Módulos CSS3 são suportados em quase todos os navegadores e, por outro lado, módulos CSS e CSS2 não são suportados em todos os navegadores.
- Em CSS3, descobriremos que muitas características relacionadas a gráficos foram introduzidas, como raio de borda ou sombra de caixa, flexbox.
- No CSS3, um usuário pode precisar várias imagens de fundo em uma página da web usando propriedades como estilos de imagem de fundo, posição de fundo e repetição de fundo.
P # 4) Cite diferentes tipos de CSS.
Resposta: Existem três tipos de CSS, conforme mencionado abaixo:
- Externo: Eles são gravados em arquivos separados.
- Interno: Eles são citados no início do documento de código da página da web.
- Em linha: Estes são escritos ao lado do texto.
P # 5) Por que a folha de estilo externa é útil?
Responda: A folha de estilo externa é muito útil, pois escrevemos todos os códigos de estilo em um único arquivo e pode ser usada em qualquer lugar apenas referindo-se ao link desse arquivo de folha de estilo externo.
Portanto, se fizermos alguma alteração nesse arquivo externo, as alterações também poderão ser observadas na página da web. Assim, podemos dizer que é muito útil e facilita o seu trabalho ao trabalhar em arquivos maiores.
Q # 6) Quais são os usos de uma folha de estilo incorporada ?
Responda: A folha de estilo incorporada nos dá o privilégio de definir estilos em um lugar em um documento HTML.
Podemos gerar várias classes usando uma folha de estilo incorporada para usar em vários tipos de tag de uma página da web e também não há nenhum download extra necessário para importar as informações.
Exemplo:
p { font-family: georgia, serif; font-size: x-large; color:#ff9900; } a:hover { color: LimeGreen; text-decoration: none; } Embedded style sheet gives us the privilege to define styles at one place in a HTML document. We can generate multiple classes using embedded style sheet to use on multiple tag types a web page and also there is no extra downloading required importing the information.
P # 7) Como usar o seletor CSS?
Responda: Usando o seletor CSS, podemos escolher o conteúdo que queremos estilizar de forma que possamos dizer que é uma ponte entre a folha de estilo e os arquivos HTML.
A sintaxe do seletor CSS é “selecionar” os elementos HTML criados em seu id, classe, tipo, etc.
Q # 8) Explique o conceito de Tweening.
Responda: Tweening é o processo no qual criamos quadros intermediários entre duas imagens para obter a aparência da primeira imagem que se desenvolve na segunda imagem.
É usado principalmente para criar animações.
Q # 9) Definir scripts de imagem CSS.
Responda: Os scripts de imagem CSS são um grupo de imagens colocadas em uma imagem. Ele reduz o tempo de carregamento e o número de solicitações para o servidor enquanto projeta várias imagens em uma única página da web.
P # 10) Explique o termo Web design responsivo.
Responda: É um método no qual projetamos e desenvolvemos uma página da web de acordo com as atividades e condições do usuário, que se baseiam em vários componentes como o tamanho da tela, a portabilidade da página da web nos diferentes dispositivos, etc. Isso é feito usando diferentes layouts e grades flexíveis.
Q # 11) O que são contadores CSS?
Responda: Os contadores CSS são variáveis que podem ser incrementadas por regras de CSS que o inspetor rastreia quantas vezes a variável foi usada.
P # 12) O que é especificidade CSS?
Responda: A especificidade do CSS é uma pontuação ou classificação que decide qual declaração de estilo deve ser usada para um elemento. (*) este seletor universal tem baixa especificidade, enquanto os seletores de ID têm alta especificidade.
Existem quatro categorias em CSS que autorizam o nível de especificidade do seletor.
- Estilo embutido
- IDs
- Classes, atributos e pseudo classes.
- Elementos e pseudo-elementos.
Q # 13) Como podemos calcular a especificidade?
Responda: Para calcular a especificidade vamos começar com 0, então temos que adicionar 1000 para cada ID e temos que adicionar 10 aos atributos, classes ou pseudo-classes com cada nome de elemento ou pseudo-elemento e depois temos que adicionar 1 a eles .
Exemplo:
h2 #content h2 heading
P # 14) Como podemos fazer um canto arredondado usando CSS?
Responda: Podemos fazer um canto arredondado usando a propriedade “border-radius”. Podemos aplicar essa propriedade a qualquer elemento.
Exemplo:
#rcorners1 { border-radius: 25px; background: #715751; padding: 20px; width: 200px; height: 150px; } Rounded corners for an element with a specified background color:
Rounded corners!
P # 15) Como você adicionará imagens de borda a um elemento HTML?
Responda: Podemos definir a imagem a ser usada como imagem de borda ao lado de um elemento usando a propriedade CSS “imagem de borda”.
Exemplo:
#borderimg { border: 15px solid transparent; padding: 20px; border-image: url(border.png) 30 round; }Q # 16) O que são gradientes em CSS?
Responda: É uma propriedade do CSS que permite exibir uma transformação suave entre duas ou mais cores especificadas.
Existem dois tipos de gradientes presentes no CSS. Eles estão:
- Gradiente linear
- Gradiente Radial
P # 17) O que é CSS flexbox?
Responda: Ele permite que você projete uma estrutura de layout responsiva e flexível sem usar qualquer flutuação ou propriedade de posicionamento de CSS. Para usar CSS flexbox, você precisa definir inicialmente um flex container.
Exemplo:
.flex-container { display: flex; background-color: #f4b042; } .flex-container > div { background-color: #d60a33; margin: 10px; padding: 20px; font-size: 30px; } 1 2 3 Example of flex box.
Q # 18) Escreva todas as propriedades do flexbox.
Responda: Existem várias propriedades do flexbox que são usadas na página HTML da web.
Eles estão:
- direção flexível
- envoltório flexível
- flex-flow
- justify-content
- itens de alinhamento
- align-content
P # 19) Como alinhar a imagem verticalmente em uma divisão que se estende verticalmente em toda a página da web?
Responda: Isso pode ser feito usando a sintaxe verticle-align: middle no elemento e ainda podemos vincular os dois spans de texto com outro span e depois disso, temos que usar verticle-align: middle no conteúdo #icon.
Q # 20) Qual é a diferença entre preenchimento e margem?
Responda: Em CSS, a margem é a propriedade pela qual podemos criar espaço ao redor dos elementos. Podemos até mesmo criar espaço para as fronteiras externas definidas.
Em CSS, temos a propriedade de margem da seguinte maneira:
- margem superior
- margem direita
- margem inferior
- Margem esquerda
A propriedade Margin tem alguns valores definidos conforme mostrado abaixo.
- Auto - Usando este navegador de propriedade calcula a margem.
- Comprimento - Ele define os valores da margem em px, pt, cm etc.
- % - Ele define a largura% do elemento.
- Herdar - Por esta propriedade, podemos herdar a propriedade margin do elemento pai.
Em CSS, o preenchimento é a propriedade pela qual podemos gerar espaço em torno do conteúdo de um elemento, bem como dentro de qualquer borda conhecida.
O preenchimento CSS também tem propriedades como,
- Tampo de enchimento
- Padding-right
- Fundo acolchoado
- Preenchimento esquerdo
Valores negativos não são permitidos no preenchimento.
div { padding-top: 60px; padding-right: 40px; padding-bottom: 50px; padding-left: 70px; }Q # 21) Qual é o uso do Box Model em CSS?
Responda: Em CSS, o modelo de caixa é uma caixa que vincula todos os elementos HTML e inclui recursos como margens, borda, preenchimento e o conteúdo real.
Usando um modelo de caixa, teremos autoridade para adicionar as bordas ao redor dos elementos e também podemos definir o espaço entre os elementos.
P # 22) Como podemos adicionar ícones à página da web?
Responda: Podemos adicionar ícones à página da web em HTML usando uma biblioteca de ícones como font-awesome.
Temos que adicionar o nome da classe de ícone dada a qualquer elemento HTML embutido. ( ou) Os ícones nas bibliotecas de ícones são vetores escalonáveis que podem ser personalizados com CSS.
P # 23) O que é uma pseudoclasse CSS?
Responda: É uma classe usada para definir um estado especial de um elemento HTML.
Esta classe pode ser usada para definir o estilo de um elemento quando um usuário o espionou e também pode definir o estilo de um elemento HTML quando ele recebe o foco.
selector:pseudo-class { property:value; }P # 24) Explique o conceito de pseudo-elementos em CSS.
Responda: É um recurso do CSS que é usado para estilizar as partes fornecidas de um elemento.
Por exemplo ,podemos estilizar a primeira letra ou linha de um elemento HTML.
selector::pseudo-element { property:value; }P # 25) O que é opacidade CSS?
Responda: É a propriedade que desenvolve a transparência de um elemento.
Por esta propriedade, podemos tornar transparente a imagem que pode assumir os valores de 0,0-1,0. Se o valor for menor, a imagem é mais transparente. O IE8 e as versões anteriores do navegador podem assumir os valores de 0 a 100.
img { opacity: 0.6; filter: alpha(opacity=60); /* For IE8 and earlier */}Q # 26) Escreva todos os estados de posição usados em CSS.
Resposta: No CSS, existem quatro estados de posição, conforme declarado abaixo:
- Estático (padrão)
- Relativo
- Fixo
- Absoluto
Q # 27) O que são barras de navegação em CSS?
Responda: Usando barras de navegação, podemos transformar uma página HTML comum em uma página da web mais dinâmica e específica do usuário. Basicamente, é uma lista de links, daí o uso de
- e
- elementos fazem todo o sentido.
ul { list-style-type: none; margin: 0; padding: 0; }P # 28) Quais são as diferenças entre relativo e absoluto em CSS?
Responda: A principal diferença entre relativo e absoluto é que 'relativo' é usado para a mesma tag em CSS e significa que se escrevermos à esquerda: 10px, o preenchimento mudará para 10px à esquerda, enquanto absoluto é totalmente relativo ao não pai estático.
Isso significa que, se escrevermos left: 10px, o resultado será 10px longe da borda esquerda do elemento pai.
Q # 29) Defina declarações 'importantes' usadas em CSS.
Responda: Declarações importantes são definidas como aquelas declarações que têm mais importância do que a declaração normal.
Durante a execução, essas declarações substituem a declaração que tem menos importância.
Por exemplo, se houver dois usuários com uma declaração importante, uma das declarações substituirá a declaração de outro usuário.
Por exemplo:
Corpo {fundo: # FF00FF! Importante; cor azul}qa perguntas e respostas da entrevista de emprego
Nesse corpo, o fundo tem mais peso do que a cor.
Q # 30) Defina diferentes métodos em cascata que podem ser usados dentro da ordem em cascata.
Responda: A ordem em cascata é em si um método de classificação que permite muitos outros métodos de classificação diferentes:
a) Classificar por origem: Existem algumas regras que podem fornecer uma forma alternativa definida como:
- O peso normal da folha de estilo de um provedor específico será substituído pelo peso aumentado da folha de estilo do usuário.
- As regras da folha de estilo de um determinado usuário serão substituídas pela largura normal da folha de estilo do provedor.
b) Classificar pela especificidade do seletor: O seletor menos específico foi substituído pelo seletor mais específico.
Por exemplo , Um seletor contextual é menos específico em comparação com o seletor de ID, que é mais específico e com esse seletor contextual é substituído pelo seletor de ID.
c) Classificar por ordem especificada: Isso ocorre quando os dois seletores têm o mesmo peso e as outras propriedades além da especificação que serão vistas para substituição.
Exemplo:
Todos os outros estilos serão substituídos se o atributo de estilo for usado para estilo embutido.
Além disso, se o elemento de link for usado para estilo externo, ele substituirá o estilo importado.
Q # 31) Diferencie entre elemento embutido e bloco.
Responda: O elemento embutido não possui um elemento para definir a largura e altura e também não possui a quebra de linha.
Exemplo: em, forte, etc.
Especificação do elemento de bloco:
- Eles têm a quebra de linha.
- Eles definem a largura definindo um recipiente e também permitem definir a altura.
- Ele também pode conter um elemento que ocorre no elemento embutido.
Exemplo:
largura e altura
max-width e max-height
largura mínima e altura mínima
hi (i = 1-6) - elemento de título
p- Elemento de parágrafo.P # 32) Como o conceito de herança é aplicado em CSS?
Responda: Herança é um conceito no qual a classe filha herdará as propriedades de sua classe pai. É um conceito usado em muitas linguagens e é a maneira fácil de definir novamente a mesma propriedade.
É usado em CSS para definir a hierarquia do nível superior ao inferior. As propriedades herdadas podem ser substituídas pela classe dos filhos se o filho usar o mesmo nome.
Exemplo:
Corpo {tamanho da fonte: 15pt;}
E outra definição está sendo definida na classe infantil
Corpo {tamanho da fonte: 15pt;}
H1 {tamanho da fonte: 18pt;}Todo o texto do parágrafo será mostrado utilizando a propriedade e será definido no corpo exceto para o estilo H1 que mostrará o texto somente na fonte 18.
Q # 33) Diferencie o ID e a classe.
Responda: Tanto o ID quanto a classe são usados em HTML e atribuem o valor do CSS.
Veja abaixo as diferenças:
- O ID é um tipo de elemento que atribui exclusivamente um nome a um elemento específico, enquanto a classe possui um elemento com um determinado conjunto de propriedades que pode ser usado para o bloco completo.
- O id pode ser usado como um elemento porque pode identificá-lo exclusivamente, enquanto a classe também é definida para bloquear os elementos e aplica muitas tags onde quer que seja usada.
- O ID fornece a restrição de usar suas propriedades para um elemento específico, enquanto na classe a herança é aplicada a um bloco ou grupo específico do elemento.
Conclusão
Esta lista de perguntas e respostas da entrevista irá ajudá-lo a quebrar a entrevista do desenvolvedor da Web para um nível mais fresco e também de experiência. Estas são as perguntas frequentes feitas na entrevista.
Espero que este artigo ajude a decifrar e enfrentar qualquer entrevista relacionada a CSS para um desenvolvedor Web.
Leitura sugerida = >> Perguntas e respostas da entrevista para desenvolvedores da web
Desejamos a todos muito sucesso !!
Leitura recomendada