SlideShare uma empresa Scribd logo
1 de 15
Textos (fontes)
CSS - Style Sheet
Professor: Jolvani
Aula 13
Textos (fontes) - CSS
 Estilização de fontes
 Para definir uma fonte:
Textos (fontes) - CSS
 Pode-se definir uma família de fontes:
 Declaramos varias fontes e a ultima delas é genérica
 Temos dois tipos de fontes: Seguras e Genéricas.
 Seguras: são encontradas em praticamente todos os SOs.
 São 9 fontes....
Textos (fontes) - CSS
 Com essa declaração, Primeiro será verificado a existência da fonte
“lucida grande” depois “lucida sans” e assim por diante
 A ordem das declarações indicam qual a fonte que será apresentada por
primeiro... E por fim a fonte genérica (sans-serif).
 O W3C define 5 fontes genéricas se as outras falharem a fonte
genérica deverá funcionar.
Textos (fontes) - CSS
 Diferença entre sans-serif e serif
 Traços de acabamento
 Definir estilo de para fonte: font-style:
 Normal: normal;
 Itálico: italic;
 Oblíquo: oblique;
 Valor herdado: inherit;
Textos (fontes) - CSS
 Tonalidade da fonte: font-weight: (bold, lighter, e valores de 100 a 900)
 Transforma letras Minúscula em maiúscula (só que um pouco menor que
as leras maiúsculas originais): font-variant:small-caps.
 Tamanho do texto: font-size: 20px;
Textos (fontes) - CSS
 Podemos abreviar nossa estilização.... Usando apenas font:
 Composta por:
 Font-style
 Font-weight
 Font-variant
 Font-size
 Font-family
Textos (Espaçamento e
Alinhamento)
CSS - Style Sheet
Professor: Jolvani
Aula 14
Textos (Espaçamentos e Alinhamentos) - CSS
 Espaçamentos entre as letras: usa-se o atributo letter-spacing:
 Espaçamento entre palavras: usa-se o atributo word-spacing:
Espaçamento entre as linhas - line-height:
controla a altura dos blocos in-line dentro
dos elementos em bloco:
Textos (Espaçamentos e Alinhamentos) - CSS
 A propriedade line-heigth pode receber número:
 Ou porcentagem (%), quando usamos número, o valor (2) é multiplicado
pelo tamanho da fonte, na porcentagem é em relação ao valor do
tamanho da fonte também.
 Manipulação com vertical-align: Primeiro marcamos nosso texto...
 Valores: vertical-align:sup; -> text-top; text-botton.
 Dependendo da fonte sua alteração será maior ou menor...
Textos (Espaçamentos e Alinhamentos) - CSS
 Alinhamentos: text-align -> left, center, right, justify;
 “Identando” o texo -> “Indentação” no texto: text-indent: Recebe
valores negativos.
Textos (Decoração)
CSS - Style Sheet
Professor: Jolvani
Aula 15
Textos (Decoração) - CSS
 Decoração 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 capitalização: text-transform: capitalize; coloca primeira
letra em maiúsculo. Todos em caixa alta: text-transform: uppercase;
Textos (Decoração) - CSS
 Caixa baixa: text-transform: lowercase;
Próxima Aula: Background

Mais conteúdo relacionado

Destaque

Aula 11 04-14 prática html
Aula 11 04-14 prática htmlAula 11 04-14 prática html
Aula 11 04-14 prática htmlJolvani Morgan
 
Aula 09. efeito cascata e herança
Aula 09. efeito cascata e herançaAula 09. efeito cascata e herança
Aula 09. efeito cascata e herançaJolvani Morgan
 
Aula 28,29 e 30 w3 c, versões, html5
Aula 28,29 e 30   w3 c, versões, html5Aula 28,29 e 30   w3 c, versões, html5
Aula 28,29 e 30 w3 c, versões, html5Jolvani Morgan
 
Aula 18. estilização de cabeçalhos
Aula 18. estilização de cabeçalhosAula 18. estilização de cabeçalhos
Aula 18. estilização de cabeçalhosJolvani Morgan
 
Aula 32. menu só com css
Aula 32. menu só com cssAula 32. menu só com css
Aula 32. menu só com cssJolvani Morgan
 
Aula 01 introdução css
Aula 01 introdução cssAula 01 introdução css
Aula 01 introdução cssJolvani Morgan
 
Aula 03. utilização inline, incorporado e externo
Aula 03. utilização inline, incorporado e externoAula 03. utilização inline, incorporado e externo
Aula 03. utilização inline, incorporado e externoJolvani Morgan
 
Aula 16 e 17. background
Aula 16 e 17. backgroundAula 16 e 17. background
Aula 16 e 17. backgroundJolvani Morgan
 
Aula 24,25,26 e 27. posicionamento
Aula 24,25,26 e 27. posicionamentoAula 24,25,26 e 27. posicionamento
Aula 24,25,26 e 27. posicionamentoJolvani Morgan
 
Aula 22 e 23. menu drop down com j query
Aula 22 e 23. menu drop down com j queryAula 22 e 23. menu drop down com j query
Aula 22 e 23. menu drop down com j queryJolvani Morgan
 
Aula 12. medidas absolutas e relativas
Aula 12. medidas absolutas e relativasAula 12. medidas absolutas e relativas
Aula 12. medidas absolutas e relativasJolvani Morgan
 
Aula 34. bordas arredondadas e sombreamento
Aula 34. bordas arredondadas e sombreamentoAula 34. bordas arredondadas e sombreamento
Aula 34. bordas arredondadas e sombreamentoJolvani Morgan
 
Aula 06, 07 e 08 seletores compostos e pseudo seletores
Aula 06, 07 e 08 seletores compostos e pseudo seletoresAula 06, 07 e 08 seletores compostos e pseudo seletores
Aula 06, 07 e 08 seletores compostos e pseudo seletoresJolvani Morgan
 
Aula 19 e 20. estilização de links
Aula 19 e 20. estilização de linksAula 19 e 20. estilização de links
Aula 19 e 20. estilização de linksJolvani Morgan
 
Aula 28,29,30 e 31. layout (tableless)
Aula 28,29,30 e 31. layout (tableless)Aula 28,29,30 e 31. layout (tableless)
Aula 28,29,30 e 31. layout (tableless)Jolvani Morgan
 
Aula 25 e 26 formulário acessibilidade
Aula 25 e 26 formulário acessibilidadeAula 25 e 26 formulário acessibilidade
Aula 25 e 26 formulário acessibilidadeJolvani Morgan
 
Aula 06, 07 e 08 seletores compostos e pseudo seletores
Aula 06, 07 e 08 seletores compostos e pseudo seletoresAula 06, 07 e 08 seletores compostos e pseudo seletores
Aula 06, 07 e 08 seletores compostos e pseudo seletoresJolvani Morgan
 

Destaque (19)

Aula 11 04-14 prática html
Aula 11 04-14 prática htmlAula 11 04-14 prática html
Aula 11 04-14 prática html
 
Aula 09. efeito cascata e herança
Aula 09. efeito cascata e herançaAula 09. efeito cascata e herança
Aula 09. efeito cascata e herança
 
Aula 28,29 e 30 w3 c, versões, html5
Aula 28,29 e 30   w3 c, versões, html5Aula 28,29 e 30   w3 c, versões, html5
Aula 28,29 e 30 w3 c, versões, html5
 
Aula 18. estilização de cabeçalhos
Aula 18. estilização de cabeçalhosAula 18. estilização de cabeçalhos
Aula 18. estilização de cabeçalhos
 
Aula 32. menu só com css
Aula 32. menu só com cssAula 32. menu só com css
Aula 32. menu só com css
 
Aula 01 introdução css
Aula 01 introdução cssAula 01 introdução css
Aula 01 introdução css
 
Aula 03. utilização inline, incorporado e externo
Aula 03. utilização inline, incorporado e externoAula 03. utilização inline, incorporado e externo
Aula 03. utilização inline, incorporado e externo
 
Aula 20 div e spans
Aula 20 div e spansAula 20 div e spans
Aula 20 div e spans
 
Aula 16 e 17. background
Aula 16 e 17. backgroundAula 16 e 17. background
Aula 16 e 17. background
 
Aula 33. css sprite
Aula 33. css spriteAula 33. css sprite
Aula 33. css sprite
 
Aula 24,25,26 e 27. posicionamento
Aula 24,25,26 e 27. posicionamentoAula 24,25,26 e 27. posicionamento
Aula 24,25,26 e 27. posicionamento
 
Aula 22 e 23. menu drop down com j query
Aula 22 e 23. menu drop down com j queryAula 22 e 23. menu drop down com j query
Aula 22 e 23. menu drop down com j query
 
Aula 12. medidas absolutas e relativas
Aula 12. medidas absolutas e relativasAula 12. medidas absolutas e relativas
Aula 12. medidas absolutas e relativas
 
Aula 34. bordas arredondadas e sombreamento
Aula 34. bordas arredondadas e sombreamentoAula 34. bordas arredondadas e sombreamento
Aula 34. bordas arredondadas e sombreamento
 
Aula 06, 07 e 08 seletores compostos e pseudo seletores
Aula 06, 07 e 08 seletores compostos e pseudo seletoresAula 06, 07 e 08 seletores compostos e pseudo seletores
Aula 06, 07 e 08 seletores compostos e pseudo seletores
 
Aula 19 e 20. estilização de links
Aula 19 e 20. estilização de linksAula 19 e 20. estilização de links
Aula 19 e 20. estilização de links
 
Aula 28,29,30 e 31. layout (tableless)
Aula 28,29,30 e 31. layout (tableless)Aula 28,29,30 e 31. layout (tableless)
Aula 28,29,30 e 31. layout (tableless)
 
Aula 25 e 26 formulário acessibilidade
Aula 25 e 26 formulário acessibilidadeAula 25 e 26 formulário acessibilidade
Aula 25 e 26 formulário acessibilidade
 
Aula 06, 07 e 08 seletores compostos e pseudo seletores
Aula 06, 07 e 08 seletores compostos e pseudo seletoresAula 06, 07 e 08 seletores compostos e pseudo seletores
Aula 06, 07 e 08 seletores compostos e pseudo seletores
 

Semelhante a Estilização de Fontes CSS

Html aula 11 - CSS, Fonte, tamanho da fonte, Negrito, Itálico, Obliquo, Cor
Html aula 11 - CSS, Fonte, tamanho da fonte, Negrito, Itálico, Obliquo, CorHtml aula 11 - CSS, Fonte, tamanho da fonte, Negrito, Itálico, Obliquo, Cor
Html aula 11 - CSS, Fonte, tamanho da fonte, Negrito, Itálico, Obliquo, CorErick L. F.
 
Propriedades css e propriedades de fontes de texto
Propriedades css e propriedades de fontes de texto Propriedades css e propriedades de fontes de texto
Propriedades css e propriedades de fontes de texto Filipe Rezende
 
Propriedades css e propriedades de fontes de texto
Propriedades css e propriedades de fontes de textoPropriedades css e propriedades de fontes de texto
Propriedades css e propriedades de fontes de textoFilipe Rezende
 
15 CSS - Trabalhando com fontes
15 CSS - Trabalhando com fontes15 CSS - Trabalhando com fontes
15 CSS - Trabalhando com fontesCentro Paula Souza
 
Lm1 t15 tipografia digital parte_3
Lm1 t15 tipografia digital parte_3Lm1 t15 tipografia digital parte_3
Lm1 t15 tipografia digital parte_3Mariovski Sky
 
Aula III HTML - Criação de Sites I
Aula III HTML - Criação de Sites IAula III HTML - Criação de Sites I
Aula III HTML - Criação de Sites Iinfo_cimol
 

Semelhante a Estilização de Fontes CSS (11)

Tutorial Css Parte 2
Tutorial Css  Parte 2Tutorial Css  Parte 2
Tutorial Css Parte 2
 
Html aula 11 - CSS, Fonte, tamanho da fonte, Negrito, Itálico, Obliquo, Cor
Html aula 11 - CSS, Fonte, tamanho da fonte, Negrito, Itálico, Obliquo, CorHtml aula 11 - CSS, Fonte, tamanho da fonte, Negrito, Itálico, Obliquo, Cor
Html aula 11 - CSS, Fonte, tamanho da fonte, Negrito, Itálico, Obliquo, Cor
 
Propriedades css e propriedades de fontes de texto
Propriedades css e propriedades de fontes de texto Propriedades css e propriedades de fontes de texto
Propriedades css e propriedades de fontes de texto
 
Propriedades css e propriedades de fontes de texto
Propriedades css e propriedades de fontes de textoPropriedades css e propriedades de fontes de texto
Propriedades css e propriedades de fontes de texto
 
15 CSS - Trabalhando com fontes
15 CSS - Trabalhando com fontes15 CSS - Trabalhando com fontes
15 CSS - Trabalhando com fontes
 
Lm1 t15 tipografia digital parte_3
Lm1 t15 tipografia digital parte_3Lm1 t15 tipografia digital parte_3
Lm1 t15 tipografia digital parte_3
 
Css e iFrames
Css e iFramesCss e iFrames
Css e iFrames
 
Aula III HTML - Criação de Sites I
Aula III HTML - Criação de Sites IAula III HTML - Criação de Sites I
Aula III HTML - Criação de Sites I
 
CSS tipo de letra (fontes)
CSS tipo de letra (fontes)CSS tipo de letra (fontes)
CSS tipo de letra (fontes)
 
CSS Mastigado
CSS MastigadoCSS Mastigado
CSS Mastigado
 
RCOM 11ºAno - CSS
RCOM 11ºAno - CSSRCOM 11ºAno - CSS
RCOM 11ºAno - CSS
 

Mais de Jolvani Morgan

Aula 12. medidas absolutas e relativas
Aula 12. medidas absolutas e relativasAula 12. medidas absolutas e relativas
Aula 12. medidas absolutas e relativasJolvani Morgan
 
Aula 03. utilização inline, incorporado e externo
Aula 03. utilização inline, incorporado e externoAula 03. utilização inline, incorporado e externo
Aula 03. utilização inline, incorporado e externoJolvani Morgan
 
Aula 27 caracteres especiais & encoding
Aula 27 caracteres especiais & encodingAula 27 caracteres especiais & encoding
Aula 27 caracteres especiais & encodingJolvani Morgan
 
Aula 23 e 24 formulário controles
Aula 23 e 24 formulário controlesAula 23 e 24 formulário controles
Aula 23 e 24 formulário controlesJolvani Morgan
 
Aula 19 imagens mapeadas
Aula 19 imagens mapeadasAula 19 imagens mapeadas
Aula 19 imagens mapeadasJolvani Morgan
 
Aula 18 links email, call, chat
Aula 18 links email, call, chatAula 18 links email, call, chat
Aula 18 links email, call, chatJolvani Morgan
 
Aula 17 links internos
Aula 17 links internosAula 17 links internos
Aula 17 links internosJolvani Morgan
 
Aula 16 links relativos
Aula 16 links relativosAula 16 links relativos
Aula 16 links relativosJolvani Morgan
 
Aula 15 links introdução
Aula 15 links introduçãoAula 15 links introdução
Aula 15 links introduçãoJolvani Morgan
 

Mais de Jolvani Morgan (10)

Aula 12. medidas absolutas e relativas
Aula 12. medidas absolutas e relativasAula 12. medidas absolutas e relativas
Aula 12. medidas absolutas e relativas
 
Aula 03. utilização inline, incorporado e externo
Aula 03. utilização inline, incorporado e externoAula 03. utilização inline, incorporado e externo
Aula 03. utilização inline, incorporado e externo
 
Aula 02 sintaxe css
Aula 02 sintaxe cssAula 02 sintaxe css
Aula 02 sintaxe css
 
Aula 27 caracteres especiais & encoding
Aula 27 caracteres especiais & encodingAula 27 caracteres especiais & encoding
Aula 27 caracteres especiais & encoding
 
Aula 23 e 24 formulário controles
Aula 23 e 24 formulário controlesAula 23 e 24 formulário controles
Aula 23 e 24 formulário controles
 
Aula 19 imagens mapeadas
Aula 19 imagens mapeadasAula 19 imagens mapeadas
Aula 19 imagens mapeadas
 
Aula 18 links email, call, chat
Aula 18 links email, call, chatAula 18 links email, call, chat
Aula 18 links email, call, chat
 
Aula 17 links internos
Aula 17 links internosAula 17 links internos
Aula 17 links internos
 
Aula 16 links relativos
Aula 16 links relativosAula 16 links relativos
Aula 16 links relativos
 
Aula 15 links introdução
Aula 15 links introduçãoAula 15 links introdução
Aula 15 links introdução
 

Estilização de Fontes CSS

  • 1. Textos (fontes) CSS - Style Sheet Professor: Jolvani Aula 13
  • 2. Textos (fontes) - CSS  Estilização de fontes  Para definir uma fonte:
  • 3. Textos (fontes) - CSS  Pode-se definir uma família de fontes:  Declaramos varias fontes e a ultima delas é genérica  Temos dois tipos de fontes: Seguras e Genéricas.  Seguras: são encontradas em praticamente todos os SOs.  São 9 fontes....
  • 4. Textos (fontes) - CSS  Com essa declaração, Primeiro será verificado a existência da fonte “lucida grande” depois “lucida sans” e assim por diante  A ordem das declarações indicam qual a fonte que será apresentada por primeiro... E por fim a fonte genérica (sans-serif).  O W3C define 5 fontes genéricas se as outras falharem a fonte genérica deverá funcionar.
  • 5. Textos (fontes) - CSS  Diferença entre sans-serif e serif  Traços de acabamento  Definir estilo de para fonte: font-style:  Normal: normal;  Itálico: italic;  Oblíquo: oblique;  Valor herdado: inherit;
  • 6. Textos (fontes) - CSS  Tonalidade da fonte: font-weight: (bold, lighter, e valores de 100 a 900)  Transforma letras Minúscula em maiúscula (só que um pouco menor que as leras maiúsculas originais): font-variant:small-caps.  Tamanho do texto: font-size: 20px;
  • 7. Textos (fontes) - CSS  Podemos abreviar nossa estilização.... Usando apenas font:  Composta por:  Font-style  Font-weight  Font-variant  Font-size  Font-family
  • 8. Textos (Espaçamento e Alinhamento) CSS - Style Sheet Professor: Jolvani Aula 14
  • 9. Textos (Espaçamentos e Alinhamentos) - CSS  Espaçamentos entre as letras: usa-se o atributo letter-spacing:  Espaçamento entre palavras: usa-se o atributo word-spacing: Espaçamento entre as linhas - line-height: controla a altura dos blocos in-line dentro dos elementos em bloco:
  • 10. Textos (Espaçamentos e Alinhamentos) - CSS  A propriedade line-heigth pode receber número:  Ou porcentagem (%), quando usamos número, o valor (2) é multiplicado pelo tamanho da fonte, na porcentagem é em relação ao valor do tamanho da fonte também.  Manipulação com vertical-align: Primeiro marcamos nosso texto...  Valores: vertical-align:sup; -> text-top; text-botton.  Dependendo da fonte sua alteração será maior ou menor...
  • 11. Textos (Espaçamentos e Alinhamentos) - CSS  Alinhamentos: text-align -> left, center, right, justify;  “Identando” o texo -> “Indentação” no texto: text-indent: Recebe valores negativos.
  • 12. Textos (Decoração) CSS - Style Sheet Professor: Jolvani Aula 15
  • 13. Textos (Decoração) - CSS  Decoração 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 capitalização: text-transform: capitalize; coloca primeira letra em maiúsculo. Todos em caixa alta: text-transform: uppercase;
  • 14. Textos (Decoração) - CSS  Caixa baixa: text-transform: lowercase;