CSS Flashcards
Como funciona o estilo em cascata do CSS?
Como é uma folha de estilos em cascata, a cascata vai descendo, e o que eu faço no elemento pai reflete para o elemento filho.
Quando dois seletores afetam a mesma tag o efeito cascata resolve esse conflito
O ultimo item sobrescreve o anterior
Reset CSS. Por que precisamos tirar os estilos que o navegador cria automaticamente com o seletor global?
Para que o nosso estilo criado não seja influenciado pelo estilo que o navegador adiciona
Cada navegador tem uma estilização padrão que pode gerar conflitos de layout diante do seu projeto web.
Normalize: O que é?
A ideia de existir o Normalize CSS é a mesma que do Reset CSS, mas ele possui algumas diferenças importantes na hora de usar.
O principal objetivo do Normalize é deixar consistente a estilização padrão entre os navegadores.
O Reset CSS limpa TODOS os padrões dos navegadores. É uma forma muito agressiva de “limpeza”, enquanto o Normalize ainda mantém padrões que são úteis.
Normalize CSS corrige alguns bugs que existem nas estilizações padrões dos navegadores.
O que é float?
A propriedade float do CSS determina que um elemento deve ser retirado do seu fluxo normal e colocado ao longo do lado direito ou esquerdo do seu container para envolver texto em imagens por exemplo.
Embora os floats ainda possam ser usados para layout, hoje em dia, temos ferramentas muito mais eficientes para a criação de layout em páginas da web. Ou seja, Flexbox e Grid .
O que é z-index?
O eixo Z é o eixo responsável pelo cálculo e posicionamento da profundidade de algum elemento.
O z-index define a ordem de sobreposição dos elementos.
Os valores de z-index maiores aparecem na frente dos elementos com um valor de z-index inferior. Podem ser usados números negativos e positivos. O z-index só pode ser usado em elementos posicionados.
z-index only affects elements that have a position value other than static
Quais são as várias técnicas para “clearing” e quais delas são apropriadas para qual contexto?
A propriedade clear do CSS especifica se um elemento pode ter elementos flutuantes ao seu lado ou se devem ser movidos para abaixo dele (clear).
O valor da propriedade clear especifica o lado no qual o elemento flutuante não deve flutuar.
duas técnicas válidas usadas (clear floats):
Usar o “clearfix hack” no elemento pai ou usar a propriedade overflow com um valor diferente de “visible”.
Explique o que são CSS Sprites
Sprite é o nome dado para a técnica de combinar múltiplas imagens em um único arquivo.
Com isso conseguimos reduzir drasticamente o número de requisições no servidor e também reduzir o tempo de carregamento da página.
A maneira como referenciamos todas as imagens é calculando sua posição na imagem e, em seguida, usando esses números na propriedade background-position no css.
Para que serve o position absolute, relative e fixed?
Position especifica o método de posicionamento. Os elementos são position static por padrão.
Position relative coloca um elemento em relação à sua posição atual sem alterar o layout ao redor dele
Position absolute coloca um elemento em relação à posição de seu pai e altera o layout ao redor dele. O elemento sai do normal flow e consigo posicionar o elemento em qualquer lugar da página.
Position fixed posicionado em relação à janela de visualização, o que significa que sempre permanece no mesmo lugar, mesmo se a página for rolada.
Position sticky posição baseada no scroll.
O que é Especificidade CSS
Quatro niveis de especificidade
nivel 1 (1000): inline style nivel 2 (0100): ID nivel 3 (0010): class, pseudo class, attribute selector nivel 4 (0001): element selector, universal selector
O que são Seletores CSS
Os seletores CSS são usados para "encontrar" (ou selecionar) os elementos HTML que você deseja estilizar. Podemos dividir os seletores CSS em cinco categorias: Seletores simples (selecione os elementos com base na tag, id, classe) Combinator selectors (selecione os elementos com base em uma relação específica entre eles) Pseudo-class Selectors (selecione os elementos com base em um determinado estado) Pseudo elements (selecione e estilize uma parte de um elemento. São elementos que criamos via CSS, que não existem no HTML) Attribute selectors (selecione os elementos com base em um atributo ou valor de atributo)
Explique display block, inline e inline block
display block abrange toda a largura de seu container
display inline, ocupa a largura do conteudo e nao é possivel alterar width e heigth
inline-block ocupa a a largura do conteudo mas é possivel alterar o width e heigth
Unidades de medida CSS
Absolutas: pixels
Relativas:
em Essa unidade muda para os elementos filhos de acordo com o tamanho da fonte (font-size) do elemento pai
rem Enquanto o em está diretamente relacionado ao tamanho da fonte do elemento pai, o rem está relacionado com o tamanho da fonte do elemento root (raiz), no caso, a tag.
O que são Media Queries
Decide o que mostrar em telas de tamanho diferente. São a chave para o design responsivo.
O que é CSS Flexbox
Flexbox é um método de layout unidimensional para organizar itens em linhas ou colunas
O que é CSS Grid
CSS Grid Layout é um sistema de layout bidimensional. Ele permite organizar o conteúdo em linhas e colunas ao mesmo tempo
