Curso Html e CSS

Páginas

Herança no CSS

Vamos entender o conceito de herança no css

Nada de mais. Basicamente é que todo elemento dentro de uma tag, herda as características da tag superior adicionadas no css. Porém, alguns elementos como borda e margin, não herdam características.

A mesma coisa acontece com a especificidade. Que significa que quanto mais específico for o "chamado" no css, maior prioridade ele possui.

Unidades de Medida no CSS

No css temos basicamente duas unidades de medidas. As absolutas e as relativas. Veremos uma pequena lista dessas unidades.

Unidades de Medidas Absolutas

px = Pixel. Não é exatamente o mesmo píxel do monitor. É um pouco maior que ele.
pt = Points. A unidade de medida mais utilizada para fontes e é adequada a impressão.
in = Polegada.
cm = Centímetros.
mm = Milímetros.

Unidades de Medidas Relativas

em = Unidade de medida relativa cujo tamanho é determinado pela font-size do íten superior á ele.
rem = Unidade de medida cujo tamanho é determinado pela font-size inicial para
% = Porcentagem. Unidade de medida cujo tamanho é determinado pelo tamanho do espaço disponível.
ex = Unidade de medida baseada na altura da letra 'X' da fonte padrão.
ch = Unidade de medida baeada no tamanho da letra da fonte.
vh e vw = Unidades de medida relativas do estilo viewport.
vmin = Unidade estilo viewport que se baseia no menor valor entre altura e largura da tela.
vmax = Unidade estilo viewport que se baseia no maior valor entre a altura e a largura da tela.

A unidade de medida "em" se baseia no font-size do iten superior á ele. Porém, o "rem" cujo 'r' significa root; baseia-se em um único íten que é o primeiro font-size no código css. E o faz ignorar quaisquer outras fontes ao longo do código.
A porcentagem trabalha com espaço disponível. E este espaço pode ser da tela, ou da div em que o elemento esta inserido.
Viewport significa espaço visível disponível ao usuário. A medida 'vh' é conforme o espaço que o usuário esta visualizando na tela.

O Inherit

"inherit" é utilizado para forçar uma herança. Isto é, ele serve para forçar um elemento para forçá-lo á herdar as definições do item pai, isto é, o elemento superior.

Tipos de Valores para Cores

Uma das formas de identificar as cores é pelo nome. Em programas como o Visual Code, podemos digitar o nome específico da cor, sempre em inglês. Red, Yelow, Blue, White, Black e assim por diante.
Porém nem todas as cores possuem nomes, já que a diversificação de tonalidades é infinita. Logo, temos outras formas de identificar uma cor. Por exemplo;
A Hexa decimal. São 6 unidades, ou 6 valores que irão corresponder ás cores, sempre começando com "#" da seguinte maneira:

Os 2 primeiros números são para as tonalidades do vermelho.
Os 2 valores no meio são para as tonalidades do verde.
Os 2 últimos valores são para as tonalidades do azul.

Os valores vão de 0 á 9 e de A á F. Sendo '0' o primeiro valor, portanto o menor, significando o mínimo de cor, e 'F' o último valor portanto o maior, significando o máximo de cor. Por exemplo;

#000000 = Significa "Zero de vermelho" + "Zero de verde" + "Zero de azul". Portanto, a cor que surgirá é o preto. Ausência de cor.
#FFFFFF = Significa "Vermelho Total" + "Verde Total" + "Azul total". E o resultado da mistura dessas cores é o branco.

Não há necessida de memorizar cores. São infinitas. Mas com o tempo e a prática, iremos memorizar algumas cores. Porém, é uma matemática simples;
Por exemplo; "#0000ff" é o código da cor azul. Zero vermelho, Zero verde, 100% azul.

RGB

RGB é também uma forma de classificar as cores com suas tonalidades. São 3 grupos de números que vão de '0' até '255'. Sendo '0' a ausência de cor, e '255' o máximo da cor. Por exemplo;
(255, 255, 255) = branco. (0, 0, 0) = preto. (255,0,0) = vermelho.

Adaptabilidade de imagens

Existe um comando específico no CSS para adaptar uma imagem na tela. É o Object-fit. Ele adapta a imagem conforme o espaço disponível ou definido pelo width e heigth.

object-fit: contain = Ele diminui a imagem até que inteira caiba no espaço determinado.
object-fit:cover = Ele diminui um pouco a imagem e corta, para que o centro da imagem seja preservado e mostrado ao usuário
object-fit: none = simplesmente corta a imagem sem fazer qualquer redimensionamento.

Colocando Vídeo do Youtube

Esta é a tag para inserir vídeos: < iframe src="" frameborder="0">< /iframe >.
O link do vídeo precisa ser completo, youtube.com/embed/sdoggmnrnbefidn

Este vídeo acima esta apenas inserido, mas não foi aplicado sobre ele a responsividade.

Neste vídeo acima, foi aplicado a responsividade pelo css. De maneira que ele fica sempre no centro, e nunca mostra a tarja preta nas lateriais, mantendo a proporção de tamanho ideal no vídeo. Verificar código css.

Função min e max no csss

Considere a imagem abaixo para efeito min e max no css. Para ver o efeito, é preciso diminuir ou aumentar a tela.