CSS Flashcards
O que significa CSS?
Cascading Style Sheets (Folhas de Estilo em Cascata).
Qual é a função do CSS?
Estilizar e definir o layout de elementos HTML em uma página web.
Quais são os tipos de CSS?
Inline, Interno (no <style>), Externo (em arquivo .css).</style>
Como vincular um arquivo CSS externo ao HTML?
Usando a tag <link> no <head>:
<link rel="stylesheet" href="estilo.css">.
O que é uma propriedade CSS?
É o nome de um estilo que pode ser aplicado a um elemento, como color, font-size, etc.
O que é um seletor CSS?
É usado para selecionar elementos HTML para aplicar estilos.
O que faz o seletor * no CSS?
Seleciona todos os elementos da página.
Como selecionar um elemento por ID no CSS?
Usando o símbolo # seguido do ID, ex.: #meuID { color: red }
Como selecionar elementos por classe no CSS?
Usando o símbolo . seguido do nome da classe, ex.:
.minhaClasse { color: blue }
Como aplicar estilos a todos os <p> de uma página?
Usando o seletor de elemento: p { color: green }
O que é o modelo de caixa (box model) no CSS?
É o modelo que define o layout de elementos como sendo compostos por: content, padding, border e margin.
MBPC
Qual é a diferença entre padding e margin?
padding é o espaço interno entre o conteúdo e a borda, margin é o espaço externo entre a borda e outros elementos.
Como definir uma cor de fundo para um elemento?
Usando a propriedade background-color, ex.: background-color: yellow
Como alterar a cor do texto de um elemento?
Usando a propriedade color, ex.: color: red
Como alterar a fonte de um texto no CSS?
Usando a propriedade font-family, ex.: font-family: Arial, sans-serif
Como definir o tamanho da fonte de um texto?
Usando a propriedade font-size, ex.: font-size: 16px
Como alinhar texto ao centro no CSS?
Usando a propriedade text-align: center
Quais são os valores possíveis da propriedade position?
static, relative, absolute, fixed, sticky.
O que faz a propriedade z-index?
Controla a ordem de empilhamento de elementos, onde valores maiores ficam “sobre” os menores.
O que faz a propriedade display?
Define como um elemento HTML deve ser exibido na página.
Qual a diferença entre inline e block no CSS?
Elementos inline não quebram linha e ocupam apenas o espaço necessário, enquanto block ocupam toda a largura disponível e quebram linha.
O que faz a propriedade overflow?
Controla o que acontece com conteúdo que ultrapassa os limites do elemento, com valores como visible, hidden, scroll, auto.
Como criar bordas arredondadas no CSS?
Usando a propriedade border-radius, ex.: border-radius: 10px
Como criar sombras em elementos no CSS?
Usando a propriedade box-shadow, ex.: box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5)
Como definir uma largura máxima para um elemento?
Usando a propriedade max-width, ex.: max-width: 600px
Qual a diferença entre min-width e max-width?
min-width define a largura mínima de um elemento, e max-width define a largura máxima.
Como centralizar um elemento horizontalmente usando margin?
Definindo margin: auto em um elemento com largura fixa.
O que é flexbox no CSS?
É um modelo de layout que facilita o alinhamento e distribuição de elementos em contêineres.
Qual é a propriedade usada para ativar o flexbox?
display: flex
Como alinhar itens horizontalmente ao centro usando flexbox?
Usando justify-content: center
Como alinhar itens verticalmente ao centro usando flexbox?
Usando align-items: center
O que é a propriedade grid no CSS?
É um modelo de layout baseado em grades, que organiza elementos em linhas e colunas.
Qual é a propriedade usada para ativar o grid?
display: grid
Como definir o número de colunas em um grid?
Usando a propriedade grid-template-columns, ex.: grid-template-columns: 1fr 1fr 1fr
Como definir espaçamento entre itens no grid?
Usando a propriedade gap, ex.: gap: 10px
O que faz a propriedade transition no CSS?
Adiciona animações suaves entre mudanças de estado, ex.: transition: all 0.3s ease
Como adicionar uma animação no CSS?
Usando a propriedade animation com um @keyframes, ex.: animation: move 2s infinite
Quais são os principais valores de position?
static (padrão), relative (relativo à sua posição normal), absolute (relativo ao contêiner pai posicionado), fixed (relativo à janela do navegador), sticky (muda entre relative e fixed).
Como fazer um elemento ocupar 100% da largura da tela?
Usando width: 100%
O que é uma pseudo-classe no CSS?
É usada para estilizar elementos em estados específicos, ex.: :hover, :focus, :nth-child().
O que é uma pseudo-elemento no CSS?
É usado para estilizar partes específicas de um elemento, ex.: ::before, ::after.
Como aplicar estilos diferentes ao passar o mouse sobre um elemento?
Usando a pseudo-classe :hover, ex.: a:hover { color: red
Como estilizar o primeiro item de uma lista?
Usando :first-child, ex.: li:first-child { font-weight: bold
Como estilizar todos os itens pares de uma lista?
Usando :nth-child(even), ex.: li:nth-child(even) { background-color: lightgray
Para que serve a propriedade clip-path?
Define uma área de recorte para um elemento, exibindo apenas a parte dentro da área definida.
O que é herança no CSS?
Herança no CSS é o mecanismo pelo qual algumas propriedades de estilo são passadas de elementos pais para seus filhos.
Quais são algumas propriedades que são herdadas por padrão no CSS?
Propriedades herdadas incluem color, font-family, font-size, line-height e text-align.
Quais são algumas propriedades que não são herdadas por padrão no CSS?
Propriedades não herdadas incluem margin, padding, border e background.
Como você força um elemento a herdar uma propriedade do pai no CSS?
Você usa a palavra-chave inherit.
O que faz a palavra-chave initial no CSS?
A palavra-chave initial define a propriedade para seu valor padrão, que pode variar dependendo da propriedade.
O que faz a palavra-chave unset?
A palavra-chave unset reseta a propriedade para herdar se for uma propriedade herdável ou para seu valor inicial se não for.
Como a herança pode ser manipulada em um elemento filho?
A herança pode ser manipulada aplicando estilos específicos ao elemento filho ou usando palavras-chave como inherit, initial e unset.
O que são unidades relativas no CSS?
Unidades relativas são unidades de medida que dependem de outras dimensões como o tamanho da fonte do elemento pai ou a viewport.
O que significa a unidade em no CSS?
em refere-se ao tamanho da fonte do elemento pai. Se não definido herda do elemento avô.
O que é a unidade rem?
rem refere-se ao tamanho da fonte do elemento raiz (<html>) proporcionando uma unidade consistente independente da hierarquia.
Como funciona a unidade de porcentagem % no CSS?
A porcentagem define dimensões em relação ao elemento pai e pode ser aplicada a propriedades como width height padding e margin.
O que significa vw e como é calculado?
vw significa viewport width e representa 1% da largura total da viewport.
O que é vh em CSS?
vh significa viewport height e representa 1% da altura total da viewport.
O que é a unidade vmin?
vmin representa a menor dimensão da viewport seja largura ou altura.
O que significa vmax no CSS?
vmax representa a maior dimensão da viewport seja largura ou altura.
Por que rem é preferido em muitos casos?
rem é preferido por fornecer mais consistência ao longo da hierarquia de elementos ao contrário do em que depende do tamanho da fonte do pai.
Como as unidades relativas ajudam no design?
Elas permitem que os elementos se ajustem automaticamente ao tamanho da tela ou ao tamanho da fonte do pai facilitando o design responsivo.
Para colocar a cor de fundo vermelha apenas dos campos (inputs) do tipo text de um formulário, utiliza-se a instrução CSS
input [type=text] {background-color: #ff0000}
O que são Seletores Pseudo-classes?
As pseudo-classes são usadas para definir o estado de um elemento.
Lembrar que são os com 1 :
:hover Estiliza quando o elemento é sobrevoado pelo mouse.
:focus Estiliza quando o elemento está em foco.
:nth-child(n) Seleciona o n-ésimo filho de um elemento pai.
:first-child Seleciona o primeiro filho de um elemento pai.
:last-child Seleciona o último filho de um elemento pai.
:not(selector) Seleciona elementos que não correspondem ao seletor.
:checked Estiliza inputs (checkbox/radio) que estão marcados.
O que são Seletores Pseudo-elementos?
Os pseudo-elementos permitem que você estilize uma parte específica de um elemento.
Lembrar que são os com 2 ::
::before Insere conteúdo antes do conteúdo real do elemento.
::after Insere conteúdo depois do conteúdo real do elemento.
::first-line Estiliza apenas a primeira linha do texto.
::first-letter Estiliza apenas a primeira letra do texto.
::selection Estiliza o texto que está selecionado pelo usuário.
::placeholder Estiliza o texto do placeholder em inputs/textareas.
o que é Normalize CSS
Normalize CSS é uma abordagem que mantém os estilos padrão de elementos HTML, mas os normaliza, ou seja, os ajusta para que sejam mais consistentes entre navegadores.
o que é Reset CSS
Reset CSS é uma técnica que redefine as propriedades de estilo de todos os elementos HTML para um estado padrão
Qual a tag relacionada com animações no CSS?
@keyframes
