Github -> https://desktop.github.com/download/ ou clique aqui
Git -> https://git-scm.com ou clique aqui
VScode -> https://code.visualstudio.com ou clique aqui
Gimp -> https://www.gimp.org ou clique aqui
Dafont -> https://www.dafont.com/pt/ ou clique aqui
Google Fonts -> https://fonts.google.com ou clique aqui
MyFonts -> https://www.myfonts.com/pt/pages/whatthefont ou clique aqui
Font Finder By What font -> https://www.whatfontis.com ou clique aqui
Font Squirrel -> https://www.fontsquirrel.com/matcherator ou clique aqui
W3Schools -> https://www-w3schools-com.translate.goog/html/html_symbols.asp?_x_tr_sl=en&_x_tr_tl=pt&_x_tr_hl=pt&_x_tr_pto=tc ou clique aqui
Emojipedia -> https://emojipedia.org ou clique aqui
Google Fonts (tambem não sabia que tinha icones) -> https://fonts.google.com/icons?icon.size=24&icon.color=%23e3e3e3 ou clique aqui
Adobe Color -> https://color.adobe.com/pt/explore ou clique aqui
Paletton -> https://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF ou clique aqui
Coolors (pago) -> https://coolors.co/82d173-abfaa9-95a3b3-4c2c69-42253b ou clique aqui
Favicon -> https://favicon.io ou clique aqui
Web Developer -> https://addons.opera.com/pt-br/extensions/details/web-developer/ ou clique aqui
ColorZilla -> https://chromewebstore.google.com/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=pt-BR ou clique aqui
Fonts Ninja -> https://chromewebstore.google.com/detail/fonts-ninja/eljapbgkmlngdpckoiiibecpemleclhh?hl=pt-br ou clique aqui
Window Resizer -> https://chromewebstore.google.com/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh?hl=pt-BR ou clique aqui
# = id
. = classe
: = pseudo-classe
:: = pseudo-elemento
> = filho
qual a diferença dos seguintes codigos em css3:
thead > tr > td {
1. Seletor de Descendência Direta (Filho)
O que faz: Aplica o estilo apenas às células (<td>) que são filhas diretas de uma linha (<tr>), que por sua vez deve ser filha direta de um cabeçalho de tabela (<thead>).
Relação: É uma hierarquia rígida. Se houver um <td> dentro de um <tbody>, este seletor não o afetará.
Uso comum: Quando você quer estilizar especificamente o conteúdo do cabeçalho da tabela sem afetar o resto dela.
}
thead, tr, td {
2. Seletor de Agrupamento (Múltiplos)
O que faz: A vírgula funciona como um "e". O estilo será aplicado a todos os elementos <thead>, a todos os <tr> e a todos os <td> do seu documento,
independentemente de onde estejam.
Relação: Não há hierarquia. São três seletores independentes compartilhando a mesma regra
}
strothead > tr, td {
3. Mistura de Hierarquia e Agrupamento (Caso 1)
O que faz: Aqui temos dois grupos distintos separados pela vírgula:
thead > tr: Aplica às linhas que são filhas diretas do <thead>.
td: Aplica a todos os <td> da página (mesmo os que estão fora do <thead>).
Resultado: As linhas do cabeçalho e todas as células da tabela (corpo e cabeçalho) receberão o estilo.
}
thead, tr > td {
4. Mistura de Hierarquia e Agrupamento (Caso 2)
O que faz: Também divide em dois grupos:
thead: Aplica ao elemento de cabeçalho da tabela.
tr > td: Aplica a todas as células que são filhas diretas de uma linha.
Resultado: O elemento <thead> será estilizado, assim como praticamente todos os <td> da sua página, já que quase todo <td> é filho de um <tr>.
}
thead tr td {
5. Este é o chamado Seletor de Descendência (espaço em branco).
Diferente do símbolo de maior (>), que exige que o elemento seja um filho direto, o espaço é muito mais "liberal".
O que ele faz: Este seletor aplica o estilo a qualquer <td> que esteja dentro de um <tr>, desde que esse <tr> esteja dentro de um <thead>.
A diferença crucial entre > e (espaço): thead > tr (Filho Direto): O tr precisa ser o filho imediato do thead. Se houvesse qualquer outra tag envolvendo o tr,
o seletor deixaria de funcionar.
thead tr (Descendente): O tr pode estar em qualquer nível de profundidade dentro do thead. O CSS vai "garimpar" o documento até encontrar um tr que tenha um
thead como ancestral (pai, avô, bisavô, etc.).
}
height
width
border
padding = fica entre a borda e o conteúdo da caixa
margin
outline = fica entre a margin e o border
div
h1 à h6
p
main
header
nav
article
aside
footer
form
video
span
a
code
small
strong
em
sup - sub
label
button
input
select
ANATOMIA PARA TABELAS GRANDES
TABLE
CAPTION
THEAD
TR, TD, TH
TBODY
TR, TD, TH
TFOOT
TR, TD, TH
Typical Device Breakpoints = Pontos de interrupção típicos do dispositivo
-----------------------------------------------------------------------------------------
Pequena telas: até 600px
Celular: de 600px até 768px
Tablet: de 768px até 992px
Desktop: de 992px até 1.200px
Grandes Telas: acima de 1.200px