Interno
<style></style>
Externo
<link rel="stylesheet" href="./style.css" />
Universal * { backgroud: black; }
Tipo body { backgroud: black; }
Classes .bg-blck { backgroud: black; }
Atributos [type="text"] { backgroud: black; }
Pseudo :hover { backgroud: black; }
Id #conteudo { backgroud: black; }
Define a altura dos elementos. O que não inclui as margens, bordas e espaçamento. Permite herança explícita, uma vez definida a altura do elemento pai, é possível herdar para o elemento filho.
Obs: As propriedades max-height e min-height quando presentes, sobrescrevem a propriedade height.
Valores Possíveis auto | length | initial | inherit
Valor Padrão auto
Valor Herdado não
Existe um bug caso colocamos o DOCTYPE em local errado ou ele não exista, ele deixa o height do body como 100vh.
Define a largura dos elementos. O que não inclui as margens, bordas e espaçamento. Obs: As propriedades max-width e min-width quando presentes, sobrescrevem a propriedade width.
Valores Possíveis auto | length | fit-content | initial | inherit | max-content | min-content | revert | unset
Valor Padrão auto
Valor Herdado não
Quando definimos o width em uma div e inspecionamos ela verificamos que esta pega a linha inteira, isso acontece devido ao display block dessa tag, ou seja quando a div for inline , consiguiremos ver o width correto.
Tem também o max-width e min-width que tem precendencia sobre o width.
Define como a largura e altura de um elemento são calculadas. Se irão incluir o preenchimento e bordas ou não.
Valores possíveis: content-box | border-box | initial | inherit
Valor padrão: content-box
Valor herdado: não
Esta propriedade CSS especifica se o conteúdo deve ser cortado, adicionado uma barra de rolagem ou exibir o conteúdo do estouro de um elemento de nível de bloco quando este estoura nas bordas laterais.
Valores Possíveis: visible | hidden | scroll | auto | initial | inherit | unset
Valor Inicial: visible
Valor Herdado: não
Especificamos o overflow de cordenada x e y, caso não informamos o o segundo, os valores serão duplicados.
overflow: visible visible; // mostra o conteudo mesmo fora dos limites da caixa, este é o default
overflow: hidden visible; // Na cordenada x não é mostrada o conteudo que ultrapassou o limite.
overflow-x: scroll; // Na cordenada x é mostrado o scroll mesmo se o conteudo não estoura para fora da caixa.
overflow-y: auto; // Na cordenada y ele mostra a barra de scroll quando o conteudo estoura para fora.
As propriedade overflow-block e overflow-line é semelhante ao overflow mas só funciona no firefox.
Esta propriedade CSS é aplicada a elementos de linha, adicionando uma quebra de linha sempre que uma palavra for gerar um estouro na caixa. Toda vez que damos espaço ele recalcula para saber se vai ter quebra de linha.
Valores Possíveis normal | break-word | anywhere | initial | inherit | unset
Valor Inicial normal
Valor Herdado sim
O break-word ele quebra no meio da palavra.
.container {
width: min-content;
max-width: 150px;
overflow-wrap: break-word;
}
Neste caso quando tiver uma palavra maior que 150px, ela será quebrada. O min-content, faz o box se adaptar na maior palavra, mas no maximo 150px;
Esta propriedade CSS determina se e como um elemento HTML que possua essa propriedade poderá ser redimensionado pelo usuário.
Valores Possíveis none | both | horizontal | vertical | block | inline | initial | inherit | unset
Valor Inicial none OBS: O elemento textarea tem como padrão o valor both.
Valor Herdado não
- O
block | inlinesó funciona no firefox
Define a ordem de pilha de um elemento. O elemento com a maior ordem de pilha estará na frente.
Valores possíveis: auto | number | initial | inherit | unset
Valor padrão: auto
Valor herdado: não
O z-index não funciona com position static que é o padrão de todas as tags, ele funciona somente nas outras position como relative, absolut e outras.
Primeiro vamos ver o outline-style que define o estilo da linha de contorno do elemento.
Essa propriedade não faz parte do box-model, ele se parece como a borda de um box-model, mas ela está por fora da caixa.
Valores Possíveis auto | dashed | dotted | double | groove | hidden | inherit | initial | inset | none | outset | revert | ridge | solid | unset
Valor Padrão none * Em formularios o browser coloca essa propriedade como auto, nos inputs
Valor Herdado não
Como o outline não está dentro do box-model ele ocupa um mesmo ugar da margin.
outline-color - define a cor do outline, pode ser o color do elemento caso essa não for definida.
outline-width - define a largura do outline
outline-offset - define o espaço entre a linha de contorno e a borda do elemento.
outline - é uma propriedade abreviada: outline-width outline-style outline-color
Esta propriedade CSS define o comportamento de exibição de um elemento.
Valores Possíveis value | initial | inherit
Valor Padrão Depende do elemento
Valor Herdado não
Valores:
● inline ● block ● inline-block ● contents ● flex ● inline-flex ● grid ● inline-grid ● list-item ● run-in ● none ● table ● inline-table ● table-caption ● table-column-group ● table-header-group ● table-footer-group ● table-cell ● table-column ● table-row ● initial ● inherit
O inline x inline-block, o inline não aceita que o width seja alterado ou seja ele mantem a largura do conteúdo, o inline-block se comporta como o inline mas permite alterar o width do elemento.
O contents é parecido com o inline, mas ele não aceita que o backgroud seja alterado.
O flex tem nos seus filhos um comportamento de do diplay block, o inline-flex tem um comportamentodos seus filhos como inline-block.
O grid e inline-grid a mesma coisa que o flex e inline-flex.
O li possuem o display default list-item, exprime a semantica de lista.
O table possuem o display default table, exprime a semantica de uma tabela
Esta propriedade CSS define se uma imagem de plano de fundo será rolada com o restante da página ou não.
Valores Possíveis scroll | fixed | local | initial | inherit | unset Valor Padrão scroll Valor Herdado não
Esta propriedade CSS define a posição inicial de uma imagem de plano de fundo.
Valores Possíveis top | right | bottom | left | center | length | x% y% | initial | inherit | unset
Valor Padrão 0% 0%
Valor Herdado não
Considere um elemento div com width e height fixas de 200px:
O tamanho extrínseco ou não natural.
O min-content é o menor tamanho que uma caixa pode ter sem acontecer overflow em seu conteúdo.
width: min-content;
O max-content representa o tamanho ideal de uma caixa (em um determinado eixo) quando há espaço disponível infinito.
<div id="container">
<div class="item1">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</div>
<div class="item2">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</div>
</div>
O fit-content aplica o min-content e max-content em um elemento.
HTML
<section class="content-center">
<div>
<a href=""><img src="" /></a>
</div>
</section>
CSS
.content-center{
width: 100%; /* Tamanho do meu viewport */
max-width: 300px; /* Para limitar o tamanho em 300 pixel */
margin:auto; /* Colocar as margens automatica centralizando. */
/* overflow: hidden; Esconder se algo passar */
}
.content-center .text-center{ text-align: center; } /* para alinhar texto, mas pode alinha imagens*/
.content-center img{ width: 70%; }
Se eu colocar um padding: 20px em .content-center, ai teria um tamanho de 340 e não 300.
Posso usar box-sizing: border-box assim
Orientação
@media screen and (orientation:portrait) { .. }
@media screen and (orientation:landscape) { … }
Tamanhos
/*
##Device = Desktops
##Screen = 1281px to higher resolution desktops
*/
@media (min-width: 1281px) {
/* CSS */
}
/*
##Device = Laptops, Desktops
##Screen = B/w 1025px to 1280px
*/
@media (min-width: 1025px) and (max-width: 1280px) {
/* CSS */
}
/*
##Device = Tablets, Ipads (portrait)
##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) {
/* CSS */
}
/*
##Device = Tablets, Ipads (landscape)
##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
/* CSS */
}
/*
##Device = Low Resolution Tablets, Mobiles (Landscape)
##Screen = B/w 481px to 767px
*/
@media (min-width: 481px) and (max-width: 767px) {
/* CSS */
}
/*
##Device = Most of the Smartphones Mobiles (Portrait)
##Screen = B/w 320px to 479px
*/
@media (min-width: 320px) and (max-width: 480px) {
/* CSS */
}
padding: 0.75rem 0.5rem 0.75rem 0.25rem;
background-color: #fff;
background-clip: initial;
border: 0 solid transparent;
border-radius: 0.75rem;