As propriedades para as fontes, definem as características (os valores na regra CSS) das letras que constituem os textos dentro dos elementos HTML.
As propriedades básicas para fontes e que abordaremos neste tutorial são as listadas abaixo:
- color:...................cor da fonte
- font-family:..........tipo de fonte
- font-size:.............tamanho de fonte
- font-style:............estilo de fonte
- font-variant:.........fontes maiúsculas de menor altura
- font-weight:.........quanto mais escura a fonte é (negrito)
- font:....................maneira abreviada para todas
as propriedades
Valores válidos para as propriedades da fonte
- color:
- código hexadecimal: #FFFFFF
- código rgb: rgb(255,235,0)
- nome da cor: red, blue, green...etc
- font-family:
- nome da família de fontes : define-se pelo nome da fonte,
p. ex:"verdana",
"helvetica", "arial", etc. - nome da família genérica: define-se pelo nome genérico,
p. ex:"serif",
"sans-serif", "cursive", etc.
- nome da família de fontes : define-se pelo nome da fonte,
- font-size:
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
- smaller
- larger
- length: uma medida reconhecida pelas CSS
(px, pt, em, cm, ...) - %
- font-style:
- normal: fonte normal na vertical
- italic: fonte inclinada
- oblique:fonte obliqua
- font-variant:
- normal: fonte normal
- small-caps: transforma em maiúsculas de menor altura
- font-weight:
- normal
- bold
- bolder
- lighter
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
Como estudar e entender os exemplos
Para cada propriedade apresento as regras CSS para um ou mais elementos HTML e definidas dentro de uma folha de estilos incorporada, bem como um trecho do documento HTML onde se aplicam as regras.A seguir mostro o efeito que a regra produz. Observe a regra e o efeito e para melhor fixar seu aprendizado reproduza o código no seu editor, mude os valores e veja o resultado no browser. Esta é a melhor e mais rápida maneira de você aprender CSS. Bons estudos! E faça ótimo proveito dos tutoriais.
color ... A cor da fonte
<html>
<head>
<style type="text/css">
<!--
h1 {color: #FF0000;}
h2 {color: #00FF00;}
p {color: rgb(0,0,255);}
-->
</style>
</head>
<body>
<h1>Cabeçalho com letras vermelhas</h1>
<h2>Cabeçalho com letras verdes</h2>
<p>Parágrafo com letras azuis</p>
</body>
</html>Cabeçalho com letras vermelhas
Cabeçalho com letras verdes
Parágrafo com letras azuis
font-family...O tipo de fonte
<html>
<head>
<style type="text/css">
<!--
h2 {font-family: arial, helvetica, serif;}
p {font-family: sans-serif;}
-->
</style>
</head>
<body>
<h2>Família por nome: arial, helvetica, serif;</h2>
<p>Família genérica: sans-serif;<p>
</body>
</html>Este é o efeito da folha de estilo acima:
Família por nome: arial, helvetica, serif;
Família genérica: sans-serif;
O browser assume o primeiro nome que ele reconhece na lista.
Separar cada nome por uma vírgula e sempre prever um nome genérico.
Se o nome da fonte for composto (mais de uma palavra, p. ex: Comic Sans MS), usar aspas duplas no nome. Se estiver definindo um atributo de "style" em HTML, onde as aspas duplas já estão presentes usar no nome de fonte composto, aspas simples.
font-size...O tamanho de fonte
<html>
<head>
<style type="text/css">
<!--
h1 {font-size: 14px;}
h2 {font-size: smaller;}
p {font-size: 100%;}
-->
</style>
</head>
<body>
<h1>Letras com tamanho: 14px</h1>
<h2>Letras com tamanho: smaller</h2>
<p>Letras com tamanho:100%</p>
</body>
</html>Letras com tamanho: 14px
Letras com tamanho: smaller
Letras com tamanho:100%
font-style...O estilo de fonte
<html>
<head>
<style type="text/css">
<!--
h1 {font-style: italic;}
h2 {font-style: normal;}
p {font-style: oblique;}
-->
</style>
</head>
<body>
<h1>Este é o estilo italic</h1>
<h2>Este é o estilo normal</h2>
<p>Este é o estilo oblique</p>
</body>
</html>Este é o estilo italic
Este é o estilo normal
Este é o estilo oblique
font-variant...fontes maiúsculas "menores"
<html>
<head>
<style type="text/css">
<!--
h3 {font-variant: normal;}
p{font-variant: small-caps;}
-->
p</style>
</head>
<body>
<h3>Este cabeçalho com letras normais</h3>
<p>Este parágrafo com letras em "small-caps"</p>
</body>
</html>Este cabeçalho com letras normais
Este parágrafo com letras em "small-caps"
font-weight...Peso das fontes - negrito (intensidade da cor)
<html>
<head>
<style type="text/css">
<!--
p {font-weight: bold;}
-->
</style>
</head>
<body>
<p>
Este é um parágrafo em negrito</p>
</body>
</html>Este é um parágrafo em negrito
font...Todas as propriedades das fontes em uma declaração
única
Esta é a maneira abreviada de você escrever uma regra para as propriedades das fontes.A sintaxe geral é esta:
font: [style] [variant] [weight] [size] [/line-height] [family]
| caption | icon | menu | message-box | small-caption | status-bar | inheritVocê pode declarar todas ou algumas das propriedades.
Os valores
size e family são obrigatórios. Os demais são facultativos (se você os omitir será adotado o valor default ou herdado do elemento pai).Os valores
style, variant, weight e size, podem ser declarados em qualquer ordem.<html>
<head>
<style type="text/css">
<!--
p {
font: italic small-caps bold 14px
"Comic Sans MS", sans-serif;
}
-->
</style>
</head>
<body>
<p>Parágrafo em declaração única</p>
</body>
</html>parágrafo em declaração única
caption, icon, menu, message-box, small-caption e status-bar referem-se às fontes usadas pelo sistema operacional do visitante do site e devem ser declarados isolados na propriedade font.- caption............fontes usadas em botões;
- icon.................fontes usadas em ícones;
- menu...............fontes usadas em menus;
- message-box...fontes ussadas em caixas de mensagens;
- small-caption...fontes usadas em pequenos controles;
- status-bar........fontes usadas na barra de status;
inherit é usado para herdar a fonte usada pelo elemento pai e também deve ser declarados isolados na propriedade font.<html>
<head>
<style type="text/css">
<!--
.p1 {
font: status-bar;
}
.p2 {
font: inherit;
.p3 {
font: small-caption ;
}
}
-->
</style>
</head>
<body>
<p class="p1">Parágrafo com fonte status-bar</p>
<p class="p2">Parágrafo com fonte inherit</p>
<p class="p3">Parágrafo com fonte small-caption</p>
</body>
</html>Parágrafo com fonte status-bar
Parágrafo com fonte inherit
Parágrafo com fonte small-caption
0 comentários:
Postar um comentário
Gostou do que encontrou aqui?
Comente este artigo que acabou de ler.
Quer entrar em contato ou tirar alguma dúvida? Formulário de Contato
Nos comentários dos artigos escreva apenas o que for referente ao tema.
Antes de Comentar leia nossa Política para Comentários para saber como interagir com nossos artigos, tirar suas dúvidas e ser respondido(a).