Desenvolvimento Web 2.0 – Aula 4 – Fontes e Cores

Posted by: joseact Categories: Sem categoria

_{Inscreva-se no canal!}

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>