Fontes

Fontes são um componente muito importante da estilização de um website

Font-family => propriedade que define a fonte do texto, ela pode receber varias fontes para caso alguma não esteja disponível sempre tenha alguma para substituir.

●Font-family: <fonte>, <fonte>, <fonte genérica>

●Font-family: impact;

●Font-family: “Cantarell Light”; (fontes com espaços no nome devem ficar entre aspas)

Para  que os nossos textos sempre sigam um estilo de fonte parecido com a nossa primeira escolha existem as fontes genéricas que sempre estarão disponíveis, em css temos 5:

●font-family: serif;

●font-family: sans-serif;

●font-family: monospace;

●font-family: cursive;

●font-family: fantasy;

Estilos de fontes

Os estilos de fonte são:

●font-style => propriedade que altera o estilo da fonte.

• Font-styles: normal; (sem estilo)
• Font-style: italic; (itálico)
• font-style: oblique; (oblíquo, fonte normal mas inclinada)

●font-weight => propriedade que define se a fonte é está em negrito ou não.

• font-weight: normal;
• font-weight: bold; (negrito)

●Font-variant => propriedade que define se a fonte deve ser exibida em “small caps”.

• font-variant: normal;
• FONT-VARIANT: SMALL-CAPS; (TUDO EM MAIÚSCULO MAS MENOR)

Cores

Cores são um aspecto fundamental de qualquer tipo de design, obviamente o CSS também vai ter métodos para customizá-las.

CSS suporta os seguintes formatos de cores:

●Hexadecimal

●RGB or RGBA

●HSL or HSLA

●Nome da cor

Cores podem ser definidas em diversas propriedades alguns exemplos são:

#caixa {
	color: white; //cor do texto
	background-color: #992ac9; //cor do fundo
	border-color: rgba(216, 27, 27, 1); //cor da borda
}

<div id=”caixa”>Olá Mundo!</div>

Exercício

Usar os conceitos de cores e fontes abordados na aula para formatar a página “exercicio.html” para que tenha cores.

Dica: use o site www.w3schools.com/css para te ajudar

exercício.html

Arquivos da aula:

https://drive.google.com/drive/folders/1RVRQ9yerRmfH9eHuctRvsQYm99npwvI1?usp=sharing