Curso de CSS – Propriedade font e suas variáveis ( Aula 5)

Em CSS nós conceguimos alterar estilos em tudo que a gente imaginar, vimos na aula passada que nós podemos alterar fundos do layout por meio da propriedade background.

Hoje, nós iremos aprender com alterar estilos de toda a parte tipográfica de seu site, alterando tipos de fontes, tamanhos, cores entre outras, nós iremos utilizar a propriedade font e suas variáveis.

Esta tabela mostra a propriedade font e sua varáveis de forma que mostra seus valores referentes .

Propriedade font-family

A propriedade font-family é utilizada para mudar o estilo da fonte de sua página, de maneira simplificada chama-se de family está propriedade  por você apresentar vários tipos de fontes.

Bem, funciona assim, se na  sua máquina não estiver instalada a primeira fonte listada na propriedade font-family, passasse para a segunda fonte listada e assim por diante.

#seletor { font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;}

<div style="font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;">
conteúdo da div</div>

Propriedade font-size

Nós aplicamos font-size para aumentar o tamanho das fontes, os valores para essa propriedade são tudo referente a unidades de tamanho.

As unidades de tamanho são divididas em três grupos,  que são Unidades de tamanho relativas, Unidades de tamanho absolutas e porcentagem.

.seletor { font-size:50px;}
.seletor { font-size:xx-large;}
.seletor { font-size:larger;}
.seletor { font-size:80%;}
.seletor { font-size:x-small;}
.seletor { font-size:xx-small;}

Propriedade font-style

A propriedade font-style é usada para aplicar estilos (efeitos) à fonte com que está trabalhando, nós temos três valores para essa propriedade que são normal, italic e oblique.

.seletor { font-style:oblique;}
.seletor { font-style:normal;}
.seletor { font-style:italic;}

Propriedade font-weight

Para nós atribuirmos à uma fonte uma forma “negrita”, em CSS nós aplicamos a propriedade font-weight, os valores apresentados para essa propriedade é de 100 à 900 em um intervalo de 100 em 100.

Quando não há qualquer valor atribuído para weight, a mesma fica em seu valor padrão que é o valor normal que corresponde ao valor 400.

.seletor { font-weight:400;}/* 400 equivale ao valor normal*/
.seletor { font-weight:700;}/* 700 equivale ao valor bold*/
.seletor { font-weight: lighter;}
.seletor { font-weight: bolder;}

Propriedade font-variant

Utiliza-se a propriedade font-variant quando queremos alterar todas as letras minúsculas para maiúsculas, em uma porporção menor do que a normal.

Complicado? É parece ser difícil entender mas com o exemplo a baixo vai facilitar

- Bandeira

p { font-variant:small-caps;}
p { font-variant:normal;}

Propriedade color

Atribuimos à propriedade color valores referentes à cor com esta propriedade mudamos as cores das fontes, em CSS nós representamos cores de três formas, em formas de códigos hexadecimais, RGB e pelo nome da cor em inglês.

p { color:#008000;}
p { color:rgb(255,235,0);}
p { color: red;}