A propriedade abreviada font em CSS
Na lição anterior, analisamos muitas
propriedades para texto. Muitas vezes é bastante trabalhoso
escrever cada uma dessas propriedades separadamente,
portanto, no CSS, para maior conveniência, existe
uma propriedade abreviada especial font.
Esta propriedade permite definir simultaneamente
o tamanho da fonte, a família, o peso, o estilo itálico
e o entrelinhamento.
A propriedade descrita tem a seguinte sintaxe:
font-style font-weight font-size / line-height font-family
Neste caso, a ordem das propriedades é importante,
e font-size e font-family são obrigatórios.
Preste atenção ao fato de que
outras propriedades, além das descritas acima na sintaxe,
não estão incluídas nesta propriedade abreviada.
Vamos ver alguns exemplos.
Exemplo
Suponha que temos os seguintes estilos:
p {
font-size: 16px;
font-family: Arial;
}
Vamos reescrevê-los usando a propriedade abreviada:
p {
font: 16px Arial;
}
Exemplo
Suponha que temos os seguintes estilos:
p {
font-size: 16px;
font-family: Arial;
line-height: 50px;
}
Vamos reescrevê-los usando a propriedade abreviada:
p {
font: 16px/50px Arial;
}
Exemplo
Suponha que temos os seguintes estilos:
p {
font-size: 16px;
font-family: Arial;
font-weight: bold;
}
Vamos reescrevê-los usando a propriedade abreviada:
p {
font: bold 16px Arial;
}
Exemplo
Suponha que temos os seguintes estilos:
p {
font-size: 16px;
font-family: Arial;
font-weight: bold;
line-height: 50px;
font-style: italic;
}
Vamos reescrevê-los usando a propriedade abreviada:
p {
font: bold italic 16px/50px Arial;
}
Tarefas práticas
Simplifique o código usando a propriedade abreviada
font:
p {
font-family: "Times New Roman";
font-size: 13px;
line-height: 20px;
}
Simplifique o código usando a propriedade abreviada
font:
p {
width: 300px;
font-family: Arial;
color: red;
font-size: 40px;
font-weight: bold;
}
Simplifique o código usando a propriedade abreviada
font:
p {
font-family: Arial;
font-size: 40px;
font-weight: bold;
text-indent: 50px;
font-style: italic;
line-height: 60px;
}