Manual de autenticação dos livros digitais formatando versão 2
Aula 8 Formatando o texto (propriedades) · propriedades em uma regra h3 ... especificar uma medida...
Transcript of Aula 8 Formatando o texto (propriedades) · propriedades em uma regra h3 ... especificar uma medida...
Aula 8Formatando o
texto(propriedades)
Prof. Paulo Cesar F. De Oliveira, BSc, PhD
06/05/15 © P C F de Oliveira 2015 1
06/05/15 © P C F de Oliveira 2015 3
font-family
Especificar uma fonte ou lista de fontes pelo
nome
body { font-family: Arial; }dt { font-family: Courier, monospace; }p { font-family: "Trebuchet MS", Verdana, sans-serif; }
06/05/15 © P C F de Oliveira 2015 5
font-size
Especificar o tamanho do
texto
body { font-size: 16px; }h1 { font-size: 150%; }
body { font-size: 16px; } h1 {font-size:1.5em;}
h1 { font-size: x-large; }
06/05/15 © P C F de Oliveira 2015 6
Unidades de Medida
pt (point) (1/72 de polegada)pc (pica) (1 pc = 12 pontos)mm milímetroscm centímetrosin polegadas
06/05/15 © P C F de Oliveira 2015 7
Unidades de Medida
emEquivale ao tamanho corrente da fonte
exAltura da letra minúscula ”x” da fonte
pxpixel (menor ponto que pode ser feito na tela do computador)
% Valores de porcentagem
06/05/15 © P C F de Oliveira 2015 8
Exemplo
body { font-size: 16px; } h1 { font-size: 1.5em; } /* 1.5 x 16 = 24 */
06/05/15 © P C F de Oliveira 2015 9
Exemplo
body { font-size: 16px; } h1 { font-size: 150%; } /* 150% x 16 = 24 */
06/05/15 © P C F de Oliveira 2015 10
x-small
small
medium
large
x-large
xx-large
smaller
larger
xx-small
inherit
06/05/15 © P C F de Oliveira 2015 11
Exemplo<!DOCTYPE html><html><head>
<title>Propriedade font-size</title><meta charset="utf-8"><style type="text/css">
p#xxs { font-size: xx-small; }p#xs { font-size: x-small; }p#s { font-size: small; }p#m { font-size: medium; }p#l { font-size: large; }p#xl { font-size: x-large; }p#xxl { font-size: xx-large; }
</style></head> Continua no próximo slide…
06/05/15 © P C F de Oliveira 2015 12
Exemplo
<body> <p id="xxs">Este é um parágrafo (xx-small)</p> <p id="xs">Este é um parágrafo (x-small)</p><p id="s">Este é um parágrafo (small)</p> <p id="m">Este é um parágrafo (medium)</p><p id="l">Este é um parágrafo (large)</p> <p id="xl">Este é um parágrafo (x-large)</p><p id="xxl">Este é um parágrafo (xx-large)</p>
</body></html>
Continuação do slide anterior
06/05/15 © P C F de Oliveira 2015 14
font-weight
Dar ênfase ao texto
body { font-weight: bold; }p { font-weight: lighter; }a { font-weight: 300; }
06/05/15 © P C F de Oliveira 2015 16
Exemplo<!DOCTYPE html><html>
<head><style>
p.normal { font-weight: normal; } p.bold { font-weight: bold; } p.bolder { font-weight: bolder; }p.lighter { font-weight: lighter; }p.v100 { font-weight: 100; } p.v200 { font-weight: 200; }p.v300 { font-weight: 300; } p.v400 { font-weight: 400; } p.v500 { font-weight: 500; }
Continua no próximo slide…
06/05/15 © P C F de Oliveira 2015 17
Exemplo
p.v600 { font-weight: 600; } p.v700 { font-weight: 700; } p.v800 { font-weight: 800; } p.v900 { font-weight: 900; }
</style></head> <body> <p class="normal">Isto é um parágrafo.</p><p class="bold">Isto é um parágrafo.</p> <p class="bolder">Isto é um parágrafo.</p><p class="lighter">Isto é um parágrafo.</p>
Continuação do slide anterior
06/05/15 © P C F de Oliveira 2015 18
Exemplo
<p class="v100">Isto é um parágrafo.</p> <p class="v200">Isto é um parágrafo.</p> <p class="v300">Isto é um parágrafo.</p> <p class="v400">Isto é um parágrafo.</p><p class="v500">Isto é um parágrafo.</p><p class="v600">Isto é um parágrafo.</p><p class="v700">Isto é um parágrafo.</p><p class="v800">Isto é um parágrafo.</p><p class="v900">Isto é um parágrafo.</p>
</body></html>
Continuação do slide anterior
06/05/15 © P C F de Oliveira 2015 20
font-style
Afeta a postura do
texto
body { font-style: normal; }p { font-style: italic; }
06/05/15 © P C F de Oliveira 2015 21
Exemplo
<!DOCTYPE html><html><head>
<style> p.normal { font-style: normal; }p.italic { font-style: italic; }p.oblique { font-style: oblique; }
</style></head><body>
<p class="normal">Isto é um parágrafo no estilo "normal".</p>
<p class="italic">Isto é um parágrafo no estilo "italic".</p>
<p class="oblique">Isto é um parágrafo no estilo "oblique".</p></body></html>
06/05/15 © P C F de Oliveira 2015 23
font-variant
Altera variantes do
texto
body { font-variant: normal; }p { font-variant: small-caps; }
06/05/15 © P C F de Oliveira 2015 24
Exemplo<!DOCTYPE html><html><head>
<style>p.normal { font-variant: normal; }p.small { font-variant: small-caps; }
</style></head><body>
<p class="normal">Meu nome é PC.</p><p class="small">Meu nome é PC.</p>
</body></html>
06/05/15 © P C F de Oliveira 2015 26
font
Coloca todas
propriedades em uma
regra
h3 { font: bold small-caps 1.5em Arial; }p { font: 1em sans-serif; }
06/05/15 © P C F de Oliveira 2015 27
weight
variant
family
style
inherit
size/line-height
Ordem é
importante
06/05/15 © P C F de Oliveira 2015 29
Atenção
Propriedade font deve incluir no mínimo:§ font-size§ font-family
06/05/15 © P C F de Oliveira 2015 30
Exemplo<!DOCTYPE html><html><head>
<style>p.ex1 { font: 15px arial, sans-serif; }
p.ex2 { font:italic bold 12px/30px Georgia, serif; }
</style></head>
06/05/15 © P C F de Oliveira 2015 31
Exemplo<body>
<p class="ex1">Isto é um parágrafo. Isto é um parágrafo. Isto é um parágrafo. Isto é um parágrafo. Isto é um parágrafo. Isto é um parágrafo. Isto é um parágrafo. Isto é um parágrafo.
</p><p class="ex2">Isto é um parágrafo. Isto é
um parágrafo. Isto é um parágrafo. Isto é um parágrafo. Isto é um parágrafo. Isto é um parágrafo. Isto é um parágrafo. Isto é um parágrafo.
</p></body></html>
06/05/15 © P C F de Oliveira 2015 34
line-height
Define altura da
linha
p { line-height: 2; }p { line-height: 2em; }p { line-height: 200%; }
06/05/15 © P C F de Oliveira 2015 35
<!DOCTYPE html><html><head>
<style>p.small { line-height: 70%; }p.big { line-height:200%; }
</style></head>
Exemplo
06/05/15 © P C F de Oliveira 2015 36
<body><p>Este é um parágrafo com line-height
padrão.<br>A altura padrão da linha na maioria dos
browsers é cerca de 110% a 120%.<br></p><p class="small">Este é um parágrafo com line-
height menor.<br>Este é um parágrafo com line-height
menor.<br></p><p class="big">Este é um parágrafo com line-
height maior.<br>Este é um parágrafo com line-height
maior.<br></p></body></html>
Exemplo
06/05/15 © P C F de Oliveira 2015 38
text-indent
Recua primeira linha do texto
p.1 { text-ident: 2em; }p.2 { text-ident: 25%; }p.3 { text-ident: -35px; }
06/05/15 © P C F de Oliveira 2015 39
<!DOCTYPE html><html><head>
<style> p.vem { text-indent: 2em; } p.pct { text-indent: 25%; } p.neg { text-indent: -35px; }
</style></head><body>
<p class="vem">Parágrafo 1. A propriedade text-indent recua somente a primeira linha do texto por um valor especificado. Você pode especificar uma medida de comprimento ou um valor em porcentagem.</p>
Exemplo
06/05/15 © P C F de Oliveira 2015 40
<p class="pct">Parágrafo 2. A propriedade text-indent recua somente a primeira linha do texto por um valor especificado. Você pode especificar uma medida de comprimento ou um valor em porcentagem.</p>
<p class="neg">Parágrafo 3. A propriedade text-indent recua somente a primeira linha do texto por um valor especificado. Você pode especificar uma medida de comprimento ou um valor em porcentagem.</p></body></html>
Exemplo
06/05/15 © P C F de Oliveira 2015 42
text-align
Efetua o alinhamento
do texto
h1 { text-align: center; }h2 { text-align: left; }h3 { text-align: right; }
06/05/15 © P C F de Oliveira 2015 43
<!DOCTYPE html><html><head>
<style> h1 { text-align: center; } h2 { text-align: left; } h3 { text-align: right; }h4 { text-align: justify; }
</style></head><body>
<h1>Este é o cabeçalho 1</h1><h2>Este é o cabeçalho 2</h2><h3>Este é o cabeçalho 3</h3><h4>Este é o cabeçalho 4</h4>
</body></html>
Exemplo
06/05/15 © P C F de Oliveira 2015 45
text-decoration
Coloca ”decoração”
no texto
h1 { text-decoration: overline; }h1 { text-decoration: line-through; }h1 { text-decoration: blink; }
06/05/15 © P C F de Oliveira 2015 46
<!DOCTYPE html><html><head>
<style>h1 { text-decoration: overline; }h2 { text-decoration: line-through; }h3 { text-decoration: underline; }h4 { text-decoration: blink; }
</style></head><body>
<h1>Este é cabeçalho 1</h1><h2>Este é cabeçalho 2</h2><h3>Este é cabeçalho 3</h3><h4>Este é cabeçalho 4</h4>
</body></html>
Exemplo
06/05/15 © P C F de Oliveira 2015 48
text-transform
Muda a caixa do
texto
h1 { text-transform: uppercase; }h1 {text-transform: lowercase; }h1 {text-transform: capitalize; }
06/05/15 © P C F de Oliveira 2015 49
<!DOCTYPE html><html><head>
<style>p.uppercase { text-transform: uppercase; }p.lowercase { text-transform: lowercase; }p.capitalize { text-transform: capitalize; }
</style></head><body>
<p class="uppercase">Algum texto aqui.</p><p class="lowercase">Algum texto aqui.</p><p class="capitalize">Algum texto aqui.</p>
</body></html>
Exemplo
06/05/15 © P C F de Oliveira 2015 51
letter-spacing
Insere espaços
entre letras
p { letter-spacing: 8px; }p { letter-spacing: 1.5em; }
06/05/15 © P C F de Oliveira 2015 52
<!DOCTYPE html><html><head>
<style>h1 { letter-spacing: 3px; }h2 { letter-spacing: -3px; }h3 { letter-spacing: 6px; }
</style></head><body>
<h1>Este é o cabeçalho 1</h1><h2>Este é o cabeçalho 2</h2><h3>Este é o cabeçalho 3</h3>
</body></html>
Exemplo
06/05/15 © P C F de Oliveira 2015 54
word-spacing
Insere espaços entre
palavras
p { word-spacing: 8px; }p { word-spacing: 1.5em; }
06/05/15 © P C F de Oliveira 2015 55
<!DOCTYPE html><html><head><style>
h1.esp3 { word-spacing: 3px; }h1.esp31 { word-spacing: -3px; }h1.esp12 { word-spacing: 12px; }
</style></head><body>
<h1 class="esp3">Este é o parágrafo 1</h1><h1 class="esp31">Este é o parágrafo 2</h1><h1 class="esp12">Este é o parágrafo 3</h1>
</body></html>
Exemplo