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 2

Estilizar o texto?

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 4

Família de Fontes

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 13

Resultado

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 15

bold

bolder

ligther

100 - 900

normal

inherit

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>


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>


06/05/15 © P C F de Oliveira 2015 19

Resultado

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 22

Resultado

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


<style>p.normal { font-variant: normal; }p.small { font-variant: small-caps; }


<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 25

Resultado

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 28

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


<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 32

Resultado

06/05/15 © P C F de Oliveira 2015 33

Outras Propriedades

Ajustes para linhas de texto

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


<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 37

Resultado

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


<style> p.vem { text-indent: 2em; } p.pct { text-indent: 25%; } p.neg { text-indent: -35px; }


<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


<style> h1 { text-align: center; } h2 { text-align: left; } h3 { text-align: right; }h4 { text-align: justify; }


<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


<style>h1 { text-decoration: overline; }h2 { text-decoration: line-through; }h3 { text-decoration: underline; }h4 { text-decoration: blink; }


<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


<style>p.uppercase { text-transform: uppercase; }p.lowercase { text-transform: lowercase; }p.capitalize { text-transform: capitalize; }


<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


<style>h1 { letter-spacing: 3px; }h2 { letter-spacing: -3px; }h3 { letter-spacing: 6px; }


<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; }


<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

Aula 8 Formatando o texto (propriedades) · propriedades em uma regra h3 ... especificar uma medida...

Documents

Transcript of Aula 8 Formatando o texto (propriedades) · propriedades em uma regra h3 ... especificar uma medida...