Curso de HTML5 e CSS3 Responsivo Aula 06 Estilizando menu e conhecendo os tipos de cores

Nessa vídeo aula vamos estilizar nosso menu e conhecer os vários tipos de cores que podemos aplicar em nossa folha de estilos.

Código CSS do menu desenvolvido na vídeo aula

/*MENU*/
.menu {
	display: block;
	float: right;
	margin-top: 40px;
	background: green
}
.menu li {
	font-weight: bold;
	text-transform: uppercase;
	display: inline-block;
	padding: 20px;

}
.menu li:hover{
	background:rgb(50,205,40)
}
.menu a{
	color:rgba(255,255,255,0.9)
}
.menu a:hover {
	color:#FF0000;
	text-decoration: underline
}

Resumo das propriedades CSS usadas

A propriedade CSS display especifica o tipo de caixa de renderização usada por um elemento. No HTML, os valores padrões da propriedade display são feitas a partir do comportamento descrito nas especificações HTML ou da folha de estilo padrão do navegador/usuário.

display: block

A declaração display: block faz com que o elemento HTML seja renderizado como bloco, tal como os parágrafos e os cabeçalhos o são. Um bloco contém um espaço em branco tanto em cima como embaixo e não permite outros elementos HTML ao lado

display: inline

A propriedade display: inline faz com que o elemento HTML seja renderizado inline, dentro do bloco na mesma linha.

O que é float e para que serve?

Float é uma propriedade CSS que usamos para posicionar algo na tela, seja um elemento em bloco ou em linha. Com a propriedade float definida, um elemento pode ser empurrado para esquerda ou para a direita, permitindo que os outros elementos possam organizar em torno dele.

font-weight

A propriedade CSS font-weight permite definir a espessura, o grau ou peso (weight) de negrito que queremos aplicar em uma fonte. Inclusive nos permitindo deixar mais espesso ou mais fina a fonte, tudo fica de acordo com sua vontade.

Valores

  • normal - Peso normal. O mesmo que 400.
  • bold - Peso negrito. O mesmo que 700.
  • lighter - Um peso de fonte mais claro que o elemento pai (dentre os pesos disponíveis da fonte).
  • bolder - Um peso de fonte mais escuro que o elemento pai (dentre os pesos disponíveis da fonte).
  • 100, 200, 300, 400, 500, 600, 700, 800, 900 - Pesos numéricos para fontes que oferecem mais que normal e negrito.

Tipos de cores

Normalmente em web trabalhamos com cores na forma de hexadecimal. É a forma mais comum e mais utilizada desde os primórdios do desenvolvimento web. Mesmo assim, há outros formatos menos comuns que funcionam sem problemas. Vamos conhecer as formas de cores mais usadas para aplicarmos uma cor e conhecer suas diferenças.

Definir uma cor pelo seu código hexadecimal

Esta é a maneira mais conhecida de definir uma cor. Convém ressaltar que em uma regra CSS é indiferente usar letras maiúsculas ou minúsculas na sintaxe hexadecimal de cores e também que é válido abreviar a notação para três dígitos.

color: #FF0000

Definir uma cor pelo seu código rgb

rgb é abreviatura para:

  • r = red (vermelha)
  • g = green (verde)
  • b = blue (azul)

Assim o código rgb(0, 0, 0) indica a cor preta e rgb(255, 255, 255) indica a cor branca. Duas são as maneiras de se definir a quantidade de cada uma das três cores:

  • Uma faixa de numeração de 0  até 255
  • Em percentagem de 0% até 100%

Não é válido usar em uma definição número e percentagem, ou seja, você só pode definir os 3 valores somente com números inteiros ou somente com números em porcentagem.

Definir uma cor pelo seu código rgba

O RGBA funciona da mesma forma que o RGB. No caso do RGBA, além dos 3 canais RGB (Red, Green e Blue) há um quarto canal, A (Alpha) que controla a opacidade da cor. Nesse caso, podemos controlar a opacidade da cor de background, borda, color ou qualquer propriedade que contenha cor sem afetar a transparência dos outros elementos.

color:rgba(255,255,255,0.9)

O último valor é referente ao canal Alpha, onde 1 é totalmente visível e 0 é totalmente invisível. No exemplo acima está com uma opacidade de 90%.

Definir cor pelo nome

Você pode definir uma cor usando o nome da cor em inglês, abaixo segue alguns exemplos

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, e yellow

background: green

 



Hospedagem Profissional de Sites