Html CSS

Fontes Tipográficas - Textos

CSS – FORMATAÇÃO DE TEXTOS

CSS
• Font
• Text
• List

Font
• font - Todas propriedades em uma única declaração
• font-family - Família de fonte. Ex: Verdana, Arial, Times

• font-size - Tamanho da fonte
• font-style - Normal, itálico ou oblíquo
• font-variant - Para definir caixa alta ou normal
• font-weight - Peso da fonte. Negrito
• font-size – tamanho da fonte

Fontes vs Serifas

Generic family
Serif
Sans-serif
Monospace

Font family
Times New Roman
Georgia
Arial
Verdana
Courier New
Lucida Console

Font-family
• Comece com a fonte que você quer.
• Separado por vírgulas, coloque fontes alternativas, caso o navegador não encontre no sistema do usuário a fonte especificada. • Termine com uma família da fonte, para que o navegador selecione uma fonte qualquer desta família caso não encontre nenhuma definida anteriormente. font-family:"Times New Roman", Times, serif;

Exemplos p{ p{ font-style:italic; font-variant:small-caps; font-weight:bold; font-size:18px; font-family:Verdana, Geneva, sans-serif; }

font: italic small-caps bold 18px
Verdana, Geneva, sans-serif;

}

Text
• texto-indent – recuo a esquerda
• text-align – alinhamento do texto

• text-decoration – efeitos decorativos, como underline, tachado
• letter-spacing – espaçamento entre caracteres
• word-spacing – espaçamento entre palavras
• text-transform – transforma o texto em maiúsculas

Exemplo
P{
text-decoration:underline; text-transform:capitalize; letter-spacing:5px; text-align:justify; }

Listas

• list-style –Todas propriedades em uma única declaração

• list-style-image – Imagem aplicada aos elementos de uma lista
• list-style-type – Tipo de marcador. (Disco, circulo, Decimal, Romano, ...)
• list-style-position – Marcador “dentro” ou “fora do conteúdo”

Exemplo ul { list-style-image:url("star.jpg"); } ul ul { list-style-image:url("star2.jpg"); }