Como funciona a regra da cascata no CSS?
A regra da cascata diz que os elementos do CSS serão lidos de cima para baixo, assim como uma cascata. Portanto, os elementos que estiverem mais embaixo prevalecerão.
O que é especificidade e qual a diferença entre a especificidade do seletor pela tag, seletor pela classe e seletor pelo id.
A regra da especificidade diz que os elementos mais específicos terão prioridade no código CSS. Cada seletor do CSS possui um número de especificidade: as tags têm 1 ponto de especificidade, as classes têm 10 pontos e os IDs têm 100 pontos. O seletor com mais pontos terá preferência.
Combinação de seletores, mostrando a combinação com espaço .primeiro h1, a combinação de filho .primeira > h1, a combinação de soma .primeira h1 + h1.
No CSS, é possível combinar seletores para indicar relações entre elementos. O seletor com espaço (ex: .primeiro h1) seleciona qualquer que esteja dentro de um elemento com a classe .primeiro, independentemente do nível (filho, neto etc.). Já o seletor com maior que (.primeira > h1) seleciona apenas os que são filhos diretos do elemento com a classe .primeira, ignorando os que estiverem em níveis mais profundos. Por fim, o seletor com sinal de mais (.primeira h1 + h1) seleciona um que vem imediatamente após outro dentro do elemento .primeira, ou seja, são irmãos adjacentes.
Funcionamento das pseudo-classes: first-child, last-child, nth-child, nth-of-type
As pseudo-classes :first-child, :last-child, :nth-child() e :nth-of-type() são usadas no CSS para selecionar elementos com base em sua posição dentro do elemento pai. A pseudo-classe :first-child seleciona o primeiro filho de um elemento pai, enquanto :last-child seleciona o último filho. Já :nth-child(n) seleciona o n-ésimo filho, podendo usar números ou fórmulas, sem considerar o tipo da tag. Por outro lado, :nth-of-type(n) também seleciona pela posição, mas considera somente os elementos do mesmo tipo (mesma tag), ignorando os demais.
Diferenças entre display inline e display block, inclusive as propriedades que podem ser aplicadas a um que não se aplicam ao outro.
Elementos com display: block ocupam toda a largura disponível do contêiner e sempre começam em uma nova linha. Eles permitem o uso das propriedades width, height, padding, margin e border tanto na horizontal quanto na vertical. Já os elementos com display: inline se alinham lado a lado, ocupando apenas o espaço necessário ao seu conteúdo. Eles não aceitam width e height, e as propriedades padding, margin e border só têm efeito completo na horizontal, sendo ignoradas ou limitadas na vertical. Essas diferenças afetam diretamente a forma como os elementos são posicionados e estilizados na página.
Elementos são por padrão display block:
- h1
- p
- div
- section
- main
- header
- nav
Elementos são por padrão display inline:
- a
- strong
- span
- img
Serventia das propriedades margin, padding e border e TODAS as opções possíveis de shorthand
As propriedades margin, padding e border são usadas no CSS para controlar os espaçamentos e a estrutura visual dos elementos. O padding define o espaço interno entre o conteúdo e a borda do elemento. O border é a linha visível que envolve o conteúdo e o padding. Já o margin define o espaço externo, ou seja, a distância entre o elemento e os elementos ao redor. Essas propriedades podem ser escritas de forma resumida (shorthand) com até quatro valores. Com 1 valor, aplica-se a todos os lados. Com 2 valores, o primeiro define o espaçamento vertical e o segundo, o horizontal. Com 3 valores, define-se top, horizontal e bottom, respectivamente. Com 4 valores, aplica-se no sentido horário: top, right, bottom e left. Também é possível aplicar os espaçamentos de forma específica usando sufixos como top, right, bottom e left, para indicar os lados físicos. Além disso, existem os sufixos lógicos block e inline.
Utilização da propriedade box-sizing: border-box
Ao usar box-sizing: border-box, a largura e a altura do elemento passam a incluir o conteúdo, o padding e a borda, mantendo o tamanho total da caixa fixo. Sem essa propriedade, a largura e altura definidas no CSS consideram apenas o conteúdo, e qualquer padding ou borda será adicionado ao tamanho total do elemento.