Textos (fontes)

CSS - Style Sheet

Professor: Jolvani
Aula 13

Textos (fontes) - CSS

Estilizao de fontes

Para definir uma fonte:

Textos (fontes) - CSS

Pode-se definir uma famlia de fontes:

Declaramos varias fontes e a ultima delas genrica

Temos dois tipos de fontes: Seguras e Genricas.

Seguras: so encontradas em praticamente todos os SOs.

So 9 fontes....

Textos (fontes) - CSS

Com essa declarao, Primeiro ser verificado a existncia da fonte

lucida grande depois lucida sans e assim por diante

A ordem das declaraes indicam qual a fonte que ser apresentada por
primeiro... E por fim a fonte genrica (sans-serif).

O W3C define 5 fontes genricas se as outras falharem a fonte

genrica dever funcionar.

Textos (fontes) - CSS

Diferena entre sans-serif e serif

Traos de acabamento

Definir estilo de para fonte: font-style:

Normal: normal;

Itlico: italic;

Oblquo: oblique;

Valor herdado: inherit;

Textos (fontes) - CSS

Tonalidade da fonte: font-weight: (bold, lighter, e valores de 100 a 900)

Transforma letras Minscula em maiscula (s que um pouco menor que

as leras maisculas originais): font-variant:small-caps.

Tamanho do texto: font-size: 20px;

Textos (fontes) - CSS

Podemos abreviar nossa estilizao.... Usando apenas font:

Composta por:

Font-style

Font-weight

Font-variant

Font-size

Font-family

Textos (Espaamento e
Alinhamento)
CSS - Style Sheet
Professor: Jolvani
Aula 14

Textos (Espaamentos e Alinhamentos) - CSS

Espaamentos entre as letras: usa-se o atributo letter-spacing:

Espaamento entre palavras: usa-se o atributo word-spacing:

Espaamento entre as linhas - line-height:

controla a altura dos blocos in-line dentro
dos elementos em bloco:

Textos (Espaamentos e Alinhamentos) - CSS

A propriedade line-heigth pode receber nmero:

Ou porcentagem (%), quando usamos nmero, o valor (2) multiplicado

pelo tamanho da fonte, na porcentagem em relao ao valor do
tamanho da fonte tambm.

Manipulao com vertical-align: Primeiro marcamos nosso texto...

Valores: vertical-align:sup; -> text-top; text-botton.

Dependendo da fonte sua alterao ser maior ou menor...

Textos (Espaamentos e Alinhamentos) - CSS

Alinhamentos: text-align -> left, center, right, justify;

Identando o texo -> Indentao no texto: text-indent: Recebe

valores negativos.

Textos (Decorao)
CSS - Style Sheet
Professor: Jolvani
Aula 15

Textos (Decorao) - CSS

Decorao do texto: text-decoration -> underline (sublinhado), overline

(uma linha acima), line-through (linha cortando o texto), blink
(piscando);

Podemos ainda usar mais de um valor:

Efeitos de capitalizao: text-transform: capitalize; coloca primeira

letra em maisculo. Todos em caixa alta: text-transform: uppercase;

Textos (Decorao) - CSS

Caixa baixa: text-transform: lowercase;

Prxima Aula: Background