Reset Global

Reset CSS global do projeto.


* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  width: 100%;
  height: 100vh;
  position: relative;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
}

body {
  font-family: var(--font-family);
}

button,
input,
select,
textarea {
  font-family: inherit;
}

ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

h1,
h2,
h3,
p,
a,
blockquote,
dd {
  margin: 0;
  padding: 0;
}

Display inline e block

O display inline e block são dois tipos de display que podem ser usados para controlar como um elemento é exibido na página. O display inline é usado para exibir um elemento como uma linha, enquanto o display block é usado para exibir um elemento como um bloco. O display inline-block é usado para exibir um elemento como um bloco, mas com a possibilidade de ser inline.

Display inline

Inline

Inline block

Block

.inline {
  display: inline;
  border: 1px solid red;
  margin: 4px;
}
.inline-block {
  display: inline-block;
  border: 1px solid red;
  margin: 4px;
}
.block {
  display: block;
  border: 1px solid red;
  margin: 4px;
}

Display grid

Demonstrações visuais das propriedades de CSS Grid.

grid-template: columns | rows

gap

grid-template-columns

grid-template-rows

grid: column | row

grid-column

grid-row

grid-area

align-content | justify-content

align-content · justify-content · place-content

align-items | justify-items

align-items · justify-items · place-items

align-self | justify-self

align-self · justify-self · place-self

Pseudo-classes

Estados especiais de um elemento, sem precisar adicionar classes no HTML.

:focus

Elemento em foco, usando o teclado (Tab).

Navegue com Tab

:active

Quando clicamos no elemento.

Clique e segure

:visited

Para links que já foram visitados.

Link externo (visite e volte)

a {
  display: inline-block;
  padding: 1rem 2rem;
  font-size: 1.5rem;
  font-family: Arial;
  text-decoration: none;
  background: #caf;
  color: #217;
}

a:focus {
  outline: 3px solid #217;
  outline-offset: 4px;
}

a:active {
  background: #217;
  color: #caf;
}

a:visited {
  background: #acf;
  color: #512;
}

Seletores

Seletores estruturais para escolher elementos pela posição na lista.

:first-child

Seleciona o primeiro elemento.

Item 1
Item 2
Item 3
Item 4

:last-child

Seleciona o último elemento.

Item 1
Item 2
Item 3
Item 4

:nth-child

4 (quarto elemento), even (pares), odd (ímpares), 3n (de 3 em 3).

:nth-child(4)

1
2
3
4
5

:nth-child(even)

1
2
3
4
5

:nth-child(odd)

1
2
3
4
5

:nth-child(3n)

1
2
3
4
5
6

/* primeiro elemento */
.lista-1 li:first-child {
  background: #caf;
}

/* último elemento */
.lista-1 li:last-child {
  background: #cfa;
}

/* quarto elemento */
.lista-2 li:nth-child(4) {
  background: #caf;
}

/* pares */
.lista-3 li:nth-child(even) {
  background: #caf;
}

/* ímpares */
.lista-4 li:nth-child(odd) {
  background: #caf;
}

/* de 3 em 3 */
.lista-5 li:nth-child(3n) {
  background: #caf;
}

:not

O :not nega a seleção de um elemento específico.

Item 1
Item 2
Item 3
Item 4

.lista-6 li:not(:last-child) {
  border-bottom: 2px solid #217;
}

Material de Estudo

Filtros