lavesan/css.md

## css.md

      
    Raw
  

              css.md
            
          
Display

Permite alinhar um componente de maneiras diferentes


Position

Permite posicionar um elemento livremente


Box

Colocando espaçamentos dentro de uma box(pode chamar de componente também)


Background

Possibilidades de estilização do background


Content

Escrevendo o conteúdo de uma tag no css


Estrutura

Como chamar as coisas para estilizar no css


Escrita

Estilização da escrita


Animação

Animando com css puro


Flutuações

Flutuar elementos para deixá-los em algum canto


Cursor

Estilizando o cursor do mouse


Escondendo o texto

Se o texto ultrapassa o tamanho máximo da box


Visibilidade de um componente

Altero a visibilidade de algo mas o espaço que é dele continua lá


Background

Colocar imagem no backgroung via css, posicionar...


Browsers

Compartibilidade dos browsers com as propriedades css


Display


none: o elemento desaparece
block: deixa o elemento pegando toda uma linha para si
inline: deixa o elemento pegando apenas o espaço necessário na linha
inline-block: fica na mesma linha e permite margin top e bottom, além de width e height
Se eu for usar, e ficar uma linha em branco no meio, só fazer:

<div style="display: inline-block">
	<p>Colocando uma div do lado da outra</p>
</div><div style="display: inline-block">
	<p>O espaço no meio desaparece</p>
</div>
<!-- Colocar o acima ao invés do abaixo -->
<div style="display: inline-block">
	<p>Colocando uma div do lado da outra</p>
</div>
<div style="display: inline-block">
	<p>O espaço no meio desaparece</p>
</div>
grid

Alinha os elemento como se fosse uma tabela. um grid
/** Faz com que as colunas se ajustem para ter o mesmo tamanho, posso setar quantas em quiser que as filhas vão pegando o que eu colocar */
grid-template-columns: auto auto auto;
grid-template-columns: 50% 25% 25%;
grid-template-columns: 40px 40px 50px;
/** Repete a mesma opção para várias linhas */
grid-template-columns: repeat(numero_linhas, auto, auto, auto);
/** Divide em fragmentos (O total é 12fr) */
grid-template-columns: 3fr 6fr 3fr;
/** Faz o mesmo que o grid-template-columns, só que para linhas */
grid-template-rows: 3fr 6fr 3fr;

grid: alinha os elemento como se fosse uma tabela. um grid

grid-template-columns: auto auto auto ...; Isso faz com que as colunas se ajustem para ter o mesmo tamanho, posso setar quantas em quiser que as filhas vão pegando o que eu colocar

Posso repetir a mesma opção para várias linhas

repeat(numero_linhas, auto, auto, auto)


Posso dividir em fragmentos (soma todas e divide dando 100% total)

3fr 6fr 3fr


grid-template-rows: 80px 200px; Faz o mesmo do de columns, só que para as linhas
justify-content e align-content:

* space-evenly; Deixa o espaçamento entres os elementos pegando todo espaço restante igualmente

* space-around;

* space-between;

* center;

* start;

* end;
grid-column-gap: 50px; Espaço entre colunas
grid-row-gap: 30px; Espaço entre linhas
grid-gap: 40px 20px; Espaço entre os 2
ex.:


<div class="grid-container">  <!-- Aqui coloco o display:grid e pa -->
    <div class="first-element-style">1</div>
    <div class="second-element-style">2</div>
</div>

Estilizando nos elementos dentro:
* grid-column-start: 1; Esta coluna ocupa o grid 1
* grid-column-end: 3; e vai até o grid 3
* grid-row-start: 1; Esta linha ocupa o grid 1
* grid-row-end: 2; e vai até o grid 2
* grid-column: 1 / 5; Começa coluna 1 e acaba na 5
* grid-column: 1 / span 3; Começa coluna 1 e ocupa 3 colunas
* grid-row: 1 / 4; Começa linha 1 e acaba na 4
* grid-row: 1 / span 2; Começa linha 1 e pula 2
* grid-area: 1 / 2 / 5 / 6; Começa na linha 1 e acaba na 5 e começa na coluna 2 e acaba na 6
* grid-area: 2 / 1 / span 2 / span 3; Começa na 2 e ocupa 2 linhas e começa na coluna 1 e ocupa 3 colunas


inline-grid
flex:

No flex-container:
flex-direction:

column; os elementos ficam em uma só coluna de cima pra baixo
column-reverse; os elementos ficam em uma só coluna de baixo pra cima
row; os elementos ficam em uma só linha de cima pra baixo
row-reverse; mesmo do row mas ao contrário


flex-wrap:

wrap; os elementos se “embrulham”, ficando em baixo quando não tem espaço na mesma linha ou coluna
nowrap; não se embrulham
wrap-reverse; os elementos se “embrulham” ao contrário


flex-flow:

Consigo Setar o flex-direction e os flex-wrap.
exp.: column wrap;
justify-content (Alinha os elementos verticalmente e pode preencher os espaços entre as colunas)
center; centraliza os elementos
flex-start; deixa alinhados no começo do flex
flex-end; deixa alinhados no final do flex
space-around; preenche com espaços entre os elementos e após eles
space-between; preenche com espaços entre os elementos


align-items (Alinha os elementos horizontalmente)

center; centraliza
flex-start; Alinha no começo
flex-end; Alinha no fim
stretch; Expande os elementos para ele pegar toda height
baseline; Alinha os elementos de acordo com as linhas de base de seus textos


align-content (Preenche os espaço entre as colunas)

space-between; as linhas ficam com o mesmo espaço entre elas para preencher toda altura
space-around; seta uma margem igual à todas as linhas para preencher toda altura
stretch; Expande os elementos de cada linha igualmente para preencherem a altura
center; Deixa as linhas bem no meio da altura
flex-start; Deixa todas as linhas no começo do flex
flex-end; Deixa todas as linhas no final do flex


Nos elementos dentro do flex-container:

order
recebe um número inteiro (default: 0) e define a ordem que o elemento vai aparecer no grid
flex-grow
recebe um número inteiro (default: 1) para definir quão maior vai ser a largura dos elementos em comparação aos outros
flex-shrink
recebe um número inteiro (default: 1) para definir quão menor vai ser a largura dos elementos em comparação aos outros
flex-basis
200px; seta a largura inicial de um elemento
flex
flex-grow flex-shrink flex-basis; seta esses 3 na ordem
align-self
override o align-items, para apenas 1 elemento.


ex.:

<div class="flex-container">  <!-- Aqui coloco o display:flex e pa -->
  <div class="first-element-style">1</div>
  <div class="second-element-style">2</div>
</div>
position:


static: (padrão) elemento reenderiza em ordem, como aparece no fluxo do documento
relative: O elemento vira uma referência, um pai do absolute
absolute: elemento posicionado de acordo com o relative

Os elementos ficam na distância de acordo com o elemento de posição relative mais próximo:

top: 2px
bottom: 4px
right: 1px
left: 0

! Lembrando que os outros também utilizam disto, tirando o relative!


fixed: elemento fica no mesmo canto e segue o scroll
sticky: elemento posicionado de acordo com o scroll da página, “sticking” num lugar

/** O elemento precisa ser filho direto do <body></body> */
.elemento {
	position: sticky;
	top: 0;
}

initial: volta a posição original
inherit: herda o position do parente mais próximo

Posso colocá-lo por baixo ou por cima de um elemento

z-index: 1 -> todos abaixo daqui ficam abaixo dele, todos com z-index maior que 1 ficam acima.

Box

Os três seguem a mesma lógica (padding, border e margin)
margin

Ele coloca um espaçamento fora do componente

margin: 12px 5px 2px 20px; Para todos (em ordem): top, right, bot, left
margin: 12px 20px; (top & bot), (left & right)
margin: 12px 5px 20px; (top), (right & left), (bot)
margin: 12px; todos fica com 12px
margin-top: cima
margin-right: direita
margin-bot: baixo
margin-left: esquerda

padding

Ele coloca um espaçamento dentro do componente (da borda até a quantidade de pixels que eu disser)

padding-top: cima
padding-right: direita
padding-bot: baixo
padding-left: esquerda
padding: 20px;

border

Ele estiliza a borda do componente em si

border-top: cima
border-right: direita
border-bot: baixo
border-left: esquerda
border: 20px solid #FFF; espessura da borda/ estilo da borda/ cor da borda

box-sizing

O tamanho da box, já contando width e height
/** Apenas o content é considerado para fazer o tamanho */
box-sizing: content-box;
/** Considera até a borda para dar um width final */
box-sizing: border-box;
background


background: color image repeat position;


background-color: cor do background


background-image: usa uma imagem como background		(background-image: url(“imagem.png”);)


background-repeat: repete a imagem

repeat-x (horizontal)
repeat-y (vertical)


background-position: posição da imagem


background-attachment: fixed - não segue o scroll


Content

Adiciona algum conteúdo antes ou depois, utilizando o after e o before

Conteúdo antes do elemento

div : after{
	content: ”Texto antes”;
color: #F0F;
}

Conteúdo depos do elemento

div : before{
	content: “Texto depois”;
	color: #0FF;
}
Estrutura do css

Classe

.class{
}
ID

Só pode haver 1 elemento com o mesmo ID
#id{
}
Condições


Junção de styles:

div, h2{
}

Algo dentro de algo(primeiro “form” vai ser estilizado):

div > form{
}

Se houver algum “p” no mesmo escopo do “h1”, o primeiro “p” após ele, vão ser estilizados:

h1 + p {
}

Se houver algum “p” no mesmo escopo do “h1”, TODOS os “p” após ele, vão ser estilizados:

h1 ~ p {
}
Estilos de escrita


color: cor da fonte;
font-family: família da fonte;
font-size: tamanho da fonte;
font-style: estilo da fonte;
font-variant: fontes maiúsculas de menor altura;
normal: simplesmente normal
small-caps: deixar tudo pequeno
initial: volta ao inicial
inherit: características do parente
font-weight: bordas da fonte;
font-stretch: grau de expansão/contração dos glifos;
condensed: deixa o texto estreito
normal: normal
expanded: deixa o texto largo
font: todas as outras em ordem;

@fontface
Usado para se linkar fontes externas que estejam no seu projeto e utiliza-las dentro do projetos
@fontface {
	font-family: ‘nome_da_fonte’;
	url: (‘diretório_da_fonte’);
	font-stretch: ;
	font-style: normal/italic/oblique;
	font-weight: light/normal/bold;
	unicode-range: ;
}
Transform

* {
    transform: rotate(20deg); // rotaciona, basicamente
    transform: skewY(40deg); // existem o X e Z também
    transform: scaleY(1.5); // Vai de 0 até 2
}
Animation

1. Com keyframes

Uso o
@keyframes nome_da_animação{
	from {propriedades iniciais}
	to {vai virar isso aqui}
}

@keyframes nome_da_animação{
	0% {propriedades iniciais}
	25% {aqui vai ficar assim}
	50% {aqui vai ficar assim}
	75% {aqui vai ficar assim}
	100% {propriedades finais}
}

ex.:

@keyframes example {
	0%   {background-color:red; left:0px; top:0px;}
	25%  {background-color:yellow; left:200px; top:0px;}
	50%  {background-color:blue; left:200px; top:200px;}
	75%  {background-color:green; left:0px; top:200px;}
	100% {background-color:red; left:0px; top:0px;}
}
Para linkar essa animação à tag, só é colocar dentro da classe

animation-name: nome_da_animação;
duração da animação:
animation-duration: 4s;
delay antes da animação acontecer:
animation-delay: 2s;
número de vezes que a animação vai acontecer:
animation-iteration-count: 3;
animation-iteration-count: infinite;

2. Com transição

transition-property: width; // Propriedade a ser mudada
transition-duration: 2s;    // Tempo da transição
transition: 2s; // Transição de todas as propriedades (por 2 segundos)
transition: width 2s; // Transição apenas de 1 propriedade
transition: width 2s, heigh 4s; // Transição de 2 propriedades com temps diferentes
Alterando propriedade da transição

transition-timing-function: ease; 		      // o default, começo lento, acelera e acaba mais lento
transition-timing-function: ease-in; 		      // começo lento
transition-timing-function: ease-out; 		      // final lento
transition-timing-function: ease-in-out; 	      // começo e final lento
transition-timing-function: linear; 		      // mesmas velocidade do início ao começo
transition-timing-function: cubic-bezier(n, n, n, n); // Posso setar manualmente, com o 'n' indo de 1 à 0
Tempo para animação acontecer

transition-delay: 1s;   // Tepo para uma animação acontecer
-webkit-transition-delay: 1s; // No safari
Cursor


https://www.w3schools.com/cssref/tryit.asp?filename=trycss_cursor

Escondendo o texto

Colocando '...' quando o texto passa do width necessário
/** não deixa uma linha quebrar quando ultrapassar o width */
white-space: nowrap;
/** esconde o texto que passa do width */
overflow: hidden;
/** coloca '...' no texto que passou do width */
text-overflow: ellipsis;
Flutuações


float
Pega o 1º elemento e posiciona em algum lado, depois o 2º e assim vai

/** elementos à direita */
float: right;
/** elementos à esquerda */
float: left;

clear
Desocupa o espaço que estiver de algum lado, colocando tudo para baixo

/** Tudo à esquerda */
clear: left;
/** Tudo à direita */
clear: right;
/** Tudo à esquerda e direita */
clear: both;
Visibilidade

visibility: hidden;	// esconde o elemento mas continua deixando o espaço para ele (não pode receber focus também)
visibility: visible;    // valor default, deixa o elemento visível
visibility: collapse;   // esconde rows ou columns de uma table, sem precisar recalcular os valores para tabela (seu espaço continua lá)
visibility: inherit;	// pega o visibility do pai
visibility: initial;	// visibility inicial do projeto
visibility: unset;	// 
Background

/** Cor de um background */
background-color: #000;
/** Colocar uma imagem no background */
background-image: url(../diretorio);
/** Repetir ou não uma imagem que está no background */
background-repeat: no-repeat;
/** Posicionar uma image que está no backoground */
background-position: center;
background-position: top;
background-position: left;
background-position: right;
background-position: 25% 75%;
background-position: right 35% bottom 45%;
Compatibilidade dos BROWSERS com as propriedades CSS

https://caniuse.com/
https://daneden.github.io/animate.css/4

  
## especifidades.md

      
    Raw
  

              especifidades.md
            
          
    Especificades

// tudo que não é alguma regra, é aplicado o estilo
.classe:not(:first-child) {}
// o estilo é aplicado independente de qualquer regra
.classe {width: 100% !important}
// nth-child: seleciona os filhos de acordo com uma regra
// :nth-of-type() também pode ser usado no lugar dele
// elementos ímpares
.classe:nth-child(odd) {}
// elementos pares
.classe:nth-child(even) {}
// de 4 em 4 filhos
.classe:nth-child(4n) {}
// somento o 4º filho
.classe:nth-child(4) {}
// os primeiros 3 elementos
.classe:nth-child(-n + 3) {}
// do 8º até o 15º elementos p de um grupo de irmãos
p:nth-child(n+8):nth-child(-n+15) {}
Nível de prioridades


important! (não recomendado)
seletores mais específicos (tipo isso: .classe .outra-classe > p)
última regra processada (css lê de baixo para cima, o último lido fica com prioridade, isso tendo o mesmo seletor)


## nomenclaturas.md

      
    Raw
  

              nomenclaturas.md
            
          
    Dash-case

Camel-case


## responsividade.md

      
    Raw
  

              responsividade.md
            
          
    Media Query

/** Se a largura for no máximo 600px, a estilização acontece */
@media(max-width: 600px) {
  .classe {
    display: block;
  }
}
/** Se cair numa regra OU noutra */
@media(max-width: 600px), (orientation: portrait) {
  .classe {
    display: flex;
  }
}
/** Se cair numa regra E noutra */
@media(max-width: 600px) and (orientation: portrait) {
  .classe {
    display: flex;
  }
}
Regras


max-width (largura máxima)

menor ou igual


min-width (largura mínima para a estilização acontecer)

maior ou igual


orientation

portrait (Quando está no formato retrato)
landscape (Formato paisagem)


## scroll-grudando.md

      
    Raw
  

              scroll-grudando.md
            
          
    Como deixar a tela grudando no elemento abaixo ao ser feito o scroll

No elemento pai:
/** Tenho de informar uma altura para o pai */
height: 100vh;

/** O 'y' diz que será feito no eixo y, e mandatory é o comportamento */
scroll-snap-type: y mandatory;
No elemento filho
height: 100vh;

/**
  Sendo um 'start', ele prende no começo
  Sendo um 'center', ele prende no meio
  Sendo um 'end', ele prende no fim
*/
scroll-snap-align: start;

  
## seletores.md

      
    Raw
  

              seletores.md
            
          
    Basico

// classe
.classe {}
// id
#id {}
// tag (div por exemplo)
div {}
// um atributo de algo
.classe[type="text"] {}
// tudo
* {}
Pseudo classes

// classe clicada 1 vez
.classe:active {}
// passando mouse por cima
.classe:hover {}
// primeira letra da tag
.classe:first-letter {}
// primeiro elemento filho
.classe:first-child {}
// último elemento filho
.classe:last-child {}
// checkbox ou radio checado
.classe:checked {}
Pseudo elementos

// Estilo depois da tag
.classe::after {}
// Estilo antes da tag
.aclsse::before {}
Regras de seleção

// quando há uma div e uma label no mesmo nível um do lado do outro
div + label {}
// quando há uma div e uma label no mesmo nível
div ~ label
// primeira label filha de div
div > label
// toda label filha de div
div label

  
## unidades.md

      
    Raw
  

              unidades.md
            
          
    Absolutas

Medidas com valores fixos

px

pixels


cm

centímetros


mm

milimetros


pt

72pt = 1 polegada


in

polegadas


Viewport

Medidas em relação ao tamanho da tela.

Vão de 0 a 100

vh

(100vh é a altura da tela toda)


vw

(100vw é a largura da tela toda)


vmin

(pega em relação a MENOR dimensão (se é a largura, vai ser ela. Se for a altura, vai ser ela.))


vmax

(pega em relação a MAIOR dimensão (se é a largura, vai ser ela. Se for a altura, vai ser ela.))


%

Font

Multiplica a fonte com o número passado

rem

Tamanho em relação ao tamanho da fonte na RAIZ da aplicação


em

Tamanho em relação ao tamanho ATUAL da fonte
exp.: 2em (2x o tamanho atual da fonte)


%