Flashcards de CSS

Patrocinador de categoria

CSS (Cascading Style Sheets) é uma linguagem de folhas de estilo usada para descrever a aparência e formatação de um documento escrito numa linguagem de marcação, criada por Håkon Wium Lie. É uma tecnologia chave da World Wide Web, desenhada para separar a apresentação da estrutura do documento. O CSS é caracterizado pela sua flexibilidade e poderosas capacidades de estilização, permitindo controlo preciso sobre o layout, cores, fontes e animações dos elementos da página. Esta linguagem oferece seletores e propriedades avançadas, proporcionando aos desenvolvedores ferramentas para criar interfaces visualmente atraentes e responsivas. O CSS também suporta a modularidade e reutilização de estilos, mantendo o desempenho e permitindo a criação de designs consistentes através de diferentes navegadores e dispositivos.

A nossa aplicação de flashcards inclui perguntas de entrevista sobre CSS cuidadosamente selecionadas com respostas abrangentes que o prepararão eficazmente para qualquer entrevista que exija conhecimento de CSS. IT Flashcards não é apenas uma ferramenta para quem procura emprego - é uma excelente maneira de reforçar e testar o seu conhecimento, independentemente dos seus planos de carreira atuais. O uso regular da aplicação ajudará a manter-se atualizado com as últimas tendências de CSS e manter as suas competências num nível elevado.

Exemplos de flashcards de CSS da nossa aplicação

Baixe nosso aplicativo na App Store ou Google Play para obter mais flashcards gratuitos ou assine para ter acesso a todos os flashcards.

Quais são as diferenças entre classes e IDs em CSS?

As classes e os identificadores são ferramentas CSS que permitem estilizar elementos HTML específicos. Embora ambos os métodos de seleção sejam quase idênticos, existem algumas diferenças.

1. Unicidade: As classes são não-únicas, o que significa que você pode usar as mesmas classes em muitos elementos diferentes. Por outro lado, os identificadores são únicos para uma página, o que significa que cada identificador só pode ser usado uma vez por página.

2. Especificidade: Os identificadores são mais específicos em comparação com as classes. Isso significa que se os estilos estiverem conflitando, os estilos dos identificadores substituirão os estilos das classes.

3. Aplicação JavaScript: Os identificadores são frequentemente usados para manipular elementos HTML usando JavaScript, enquanto as classes são menos usadas para esse propósito.

4. Escalabilidade: Os estilos de classe podem ser reutilizados por muitos elementos na página. Os identificadores são menos flexíveis e é mais provável que sejam usados para estilizar seções muito específicas.

Note que uma das melhores práticas é usar classes para estilos CSS e identificadores para JavaScript.

Como pode uma folha de estilo CSS ser vinculada a um documento HTML?

Uma folha de estilos CSS pode ser anexada a um documento HTML de uma das seguintes formas:

1. **Estilo em linha:** Os estilos são anexados diretamente aos elementos HTML usando o atributo `style`. Por exemplo:

<p style="color:red;">Este texto é vermelho</p>

Este método é raramente usado, tipicamente para alterações de estilo "única vez".

2. **CSS interno:** Os estilos são incluídos dentro das tags `<style>` na seção `<head>` do documento HTML. Exemplo:

<head>
     <style>
       p { color: red; }
     </style>
   </head>

Este método é útil para documentos HTML de página única.

3. **CSS externo:** O método mais comumente usado para anexar CSS. A folha de estilo CSS é escrita em um arquivo separado (geralmente com uma extensão .css) e anexada ao documento HTML usando um link na seção `<head>`. Exemplo:

<head>
     <link rel="stylesheet" type="text/css" href="styles.css">
   </head>

Este método é o mais comumente usado, pois permite atualização fácil, manutenção e compartilhamento de folhas de estilo entre diferentes documentos HTML.

O que são pseudoclasses em CSS e dê um exemplo de seu uso.

As pseudo-classes em CSS são adições de palavras-chave aos seletores que definem um estado particular de um determinado elemento. Elas permitem o estilo de elementos HTML não apenas com base nas informações contidas diretamente no código, mas também em um determinado contexto ou estado do elemento.

Por exemplo, a pseudo-classe :hover permite alterações visuais em um elemento quando passamos o mouse por ele. Outras pseudo-classes úteis incluem :active (quando o elemento está ativo ou clicado), :visited (quando um link foi visitado) ou :first-child (estiliza o primeiro filho de um determinado elemento).

O código de amostra mostra como a pseudo-classe :hover pode ser usada para alterar a cor de fundo de um determinado elemento quando se passa o mouse por ele:

button:hover {
  background-color: red;
}

Neste caso, a cor de fundo do botão mudará para vermelho quando o usuário passar o mouse sobre ele. Tal interação não seria possível sem o uso de uma pseudo-classe.

Quais são os métodos para posicionar elementos em CSS e quais limitações eles têm?

Em CSS, temos várias maneiras de posicionar elementos para escolher:

1. Estático: Esta é a configuração padrão na qual os elementos se empilham um após o outro conforme determinado pela estrutura HTML. A posição do elemento é irrelevante e não pode ser alterada usando as propriedades superior, direita, inferior ou esquerda. A limitação é a falta de controle sobre o posicionamento do elemento.

2. Relativo: Permite alterar a posição de um elemento em relação à sua localização original. A posição é determinada pelas propriedades superior, direita, inferior, esquerda, mas não afeta o layout de outros elementos. A limitação é que os elementos são simplesmente deslocados, não removidos do fluxo normal do documento.

3. Absoluto: A posição de um elemento é determinada em relação ao elemento de estrutura superior mais próximo posicionado de forma diferente de estática (relativa, absoluta, fixa, aderente). Se não houver tal elemento, a posição é determinada em relação ao próprio documento. O elemento é removido do fluxo normal do documento e não afeta o layout de outros elementos. A limitação é a necessidade de controlar o contexto de posicionamento.

4. Fixo: A posição de um elemento é determinada em relação às bordas do navegador. Tal elemento não se move mesmo ao rolar a página. Ele é removido do fluxo normal do documento e não afeta o layout de outros elementos. A limitação é a possibilidade de obscurecer outros elementos com o colocado permanentemente.

5. Adesivo: É uma combinação de posicionamento relativo e fixo. O elemento se comporta como um estático até que sua borda superior atinja um lugar específico (por exemplo, a borda superior da tela), então o elemento se comporta como se estivesse posicionado de forma fixa. A limitação é a necessidade de suporte do navegador.