Aula 13, 14 e 15. textos (fontes, espaçamento, alinhamento e decoração)
Click here to load reader
-
Upload
jolvani-morgan -
Category
Documents
-
view
166 -
download
1
Transcript of Aula 13, 14 e 15. textos (fontes, espaçamento, alinhamento e decoração)
![Page 1: Aula 13, 14 e 15. textos (fontes, espaçamento, alinhamento e decoração)](https://reader038.fdocumentos.com/reader038/viewer/2022100605/559b67a11a28ab363c8b487b/html5/thumbnails/1.jpg)
Textos (fontes)
CSS - Style SheetProfessor: Jolvani
Aula 13
![Page 2: Aula 13, 14 e 15. textos (fontes, espaçamento, alinhamento e decoração)](https://reader038.fdocumentos.com/reader038/viewer/2022100605/559b67a11a28ab363c8b487b/html5/thumbnails/2.jpg)
Textos (fontes) - CSS
Estilização de fontes
Para definir uma fonte:
![Page 3: Aula 13, 14 e 15. textos (fontes, espaçamento, alinhamento e decoração)](https://reader038.fdocumentos.com/reader038/viewer/2022100605/559b67a11a28ab363c8b487b/html5/thumbnails/3.jpg)
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....
![Page 4: Aula 13, 14 e 15. textos (fontes, espaçamento, alinhamento e decoração)](https://reader038.fdocumentos.com/reader038/viewer/2022100605/559b67a11a28ab363c8b487b/html5/thumbnails/4.jpg)
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.
![Page 5: Aula 13, 14 e 15. textos (fontes, espaçamento, alinhamento e decoração)](https://reader038.fdocumentos.com/reader038/viewer/2022100605/559b67a11a28ab363c8b487b/html5/thumbnails/5.jpg)
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;
![Page 6: Aula 13, 14 e 15. textos (fontes, espaçamento, alinhamento e decoração)](https://reader038.fdocumentos.com/reader038/viewer/2022100605/559b67a11a28ab363c8b487b/html5/thumbnails/6.jpg)
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;
![Page 7: Aula 13, 14 e 15. textos (fontes, espaçamento, alinhamento e decoração)](https://reader038.fdocumentos.com/reader038/viewer/2022100605/559b67a11a28ab363c8b487b/html5/thumbnails/7.jpg)
Textos (fontes) - CSS
Podemos abreviar nossa estilização.... Usando apenas font:
Composta por:
Font-style
Font-weight
Font-variant
Font-size
Font-family
![Page 8: Aula 13, 14 e 15. textos (fontes, espaçamento, alinhamento e decoração)](https://reader038.fdocumentos.com/reader038/viewer/2022100605/559b67a11a28ab363c8b487b/html5/thumbnails/8.jpg)
Textos (Espaçamento e
Alinhamento)
CSS - Style SheetProfessor: Jolvani
Aula 14
![Page 9: Aula 13, 14 e 15. textos (fontes, espaçamento, alinhamento e decoração)](https://reader038.fdocumentos.com/reader038/viewer/2022100605/559b67a11a28ab363c8b487b/html5/thumbnails/9.jpg)
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 - align-height:
controla a altura dos blocos in-line dentro
dos elementos em bloco:
![Page 10: Aula 13, 14 e 15. textos (fontes, espaçamento, alinhamento e decoração)](https://reader038.fdocumentos.com/reader038/viewer/2022100605/559b67a11a28ab363c8b487b/html5/thumbnails/10.jpg)
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...
![Page 11: Aula 13, 14 e 15. textos (fontes, espaçamento, alinhamento e decoração)](https://reader038.fdocumentos.com/reader038/viewer/2022100605/559b67a11a28ab363c8b487b/html5/thumbnails/11.jpg)
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.
![Page 12: Aula 13, 14 e 15. textos (fontes, espaçamento, alinhamento e decoração)](https://reader038.fdocumentos.com/reader038/viewer/2022100605/559b67a11a28ab363c8b487b/html5/thumbnails/12.jpg)
Textos (Decoração)
CSS - Style SheetProfessor: Jolvani
Aula 15
![Page 13: Aula 13, 14 e 15. textos (fontes, espaçamento, alinhamento e decoração)](https://reader038.fdocumentos.com/reader038/viewer/2022100605/559b67a11a28ab363c8b487b/html5/thumbnails/13.jpg)
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;
![Page 14: Aula 13, 14 e 15. textos (fontes, espaçamento, alinhamento e decoração)](https://reader038.fdocumentos.com/reader038/viewer/2022100605/559b67a11a28ab363c8b487b/html5/thumbnails/14.jpg)
Textos (Decoração) - CSS
Caixa baixa: text-transform: lowercase;
![Page 15: Aula 13, 14 e 15. textos (fontes, espaçamento, alinhamento e decoração)](https://reader038.fdocumentos.com/reader038/viewer/2022100605/559b67a11a28ab363c8b487b/html5/thumbnails/15.jpg)
Próxima Aula: Background