Skip to content

tonylampada/eunaoaguentomaisnaosabercss

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 
 
 
 
 
 
 

Repository files navigation

eunaoaguentomaisnaosabercss

Condensação dos meus aprendizados sobre CSS

Links:

(valeu aih galera)

1. Seletores:

/* Isso seleciona a porra toda */
* {
	...
}

/* Todos os <h1>'s */
h1 {
	...
}

/* Todos os <span>'s descendentes de <p>'s */
p span {
	...
}
  • .classe
  • #id
  • Id's devem ser únicos
  • Dá pra combinar classes diferentes no mesmo elemento.
  • > Filhos diretos
  • + Irmão seguinte
  • ~ Quaisquer irmãos subsequentes
  • + e ~ só pegam os irmão que aparecem DEPOIS do elemento
  • [atributo]
  • [atributo="valor"]
  • [atributo^="startswith"]
  • [atributo$="endswith"]
  • [atributo*="contains"]

(Muito foda isso...)

  • a:link - links nao visitados
  • a:visited - links ja visitados
  • :target - o div com id="ancora" se o cara caiu no link que termina com #ancora
  • :hover - mouse em cima
  • :active - mouse clicado em cima
  • :focus - links ou inputs que estão com foco
  • :enabled - inputs/botoes habilitados
  • :disabled - inputs/botoes desabilitados
  • :checked - checkbox/radio selecionados
  • :empty - só seleciona se tiver vazio
  • :not() - só seleciona quem não obedecer a condição do seletor
  • :first-child - só o primeiro filho
  • :last-child - só o último filho
  • :only-child - só se for filho único
  • :nth-child(even) - só os filhos pares
  • :nth-child(odd) - só os filhos ímpares
  • :nth-child(3n+2) - 2o, 5o, 8o...
  • div:nth-of-type(3n+2) - 2o, 5o, 8o... mas só os divs
  • div:only-of-type - só se for o único div filho
  • Pseudoelementos podem vir com :: ou com : (prefira :: por clareza)
  • ::first-line - seleciona só a primeira linha do texto dentro do elemento
  • ::first-letter - seleciona só a primeira LETRA do texto dentro do elemento
  • ::before - ADICIONA um pseudoelemento como primeiro filho do elemento.
  • ::after - ADICIONA um pseudoelemento como último filho do elemento.
  • ::before e ::after tem que ter um atributo content (que seja no minimo uma string vazia)
  • O atributo content pode ser: ** Uma string ** Uma chamada da funcão url ** Uma chamada da função attr (que pega o valor de um atributo do elemento)
  • Dá pra criar formas interessantes (círculos, elipses, etc) com before e after
/* Adiciona um ícone de telefone depois */
.phone::after {
	content: "\2706";
}

/* Adiciona um ícone de pdf antes */
.pdf::before {
	content: url(../img/pdf.gif);
	margin: 0 8px;
}

/* Adiciona a url do link depois */
.pdf::after {
	content: attr(href);
	padding-left: 10px;
	color: red;
}

O Box Model

Flexbox

Media Queries

About

Condensação dos meus aprendizados sobre CSS

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published