Click here to load reader

Aula 8 Formatando o texto (propriedades) · PDF fileAula 8 Formatando o texto (propriedades) Prof. Paulo Cesar F. De Oliveira, BSc, PhD 09/09/16 © P C F de Oliveira 2015 1

  • View
    221

  • Download
    0

Embed Size (px)

Text of Aula 8 Formatando o texto (propriedades) · PDF fileAula 8 Formatando o texto (propriedades)...

Aula 8Formatando o

texto(propriedades)

Prof. Paulo Cesar F. De Oliveira, BSc, PhD

09/09/16 P C F de Oliveira 2015 1

09/09/16 P C F de Oliveira 2015 2

Estilizar o texto?

09/09/16 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; }

09/09/16 P C F de Oliveira 2015 4

09/09/16 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; }

09/09/16 P C F de Oliveira 2015 6

pt (point) (1/72 de polegada)pc (pica) (1 pc = 12 pontos)mm milmetroscm centmetrosin polegadas

09/09/16 P C F de Oliveira 2015 7

emEquivale ao tamanho corrente da fonte

exAltura da letra minscula x da fonte

pxpixel (menor ponto que pode ser feito na tela do computador)

% Valores de porcentagem

09/09/16 P C F de Oliveira 2015 8

body { font-size: 16px; } h1 { font-size: 1.5em; } /* 1.5 x 16 = 24 */

09/09/16 P C F de Oliveira 2015 9

body { font-size: 16px; } h1 { font-size: 150%; } /* 150% x 16 = 24 */

09/09/16 P C F de Oliveira 2015 10

x-small

small

medium

large

x-large

xx-large

smaller

larger

xx-small

inherit

09/09/16 P C F de Oliveira 2015 11

Propriedade font-size

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

Continua no prximo slide

09/09/16 P C F de Oliveira 2015 12

Este um pargrafo (xx-small)

Este um pargrafo (x-small)

Este um pargrafo (small)

Este um pargrafo (medium)

Este um pargrafo (large)

Este um pargrafo (x-large)

Este um pargrafo (xx-large)

Continuao do slide anterior

09/09/16 P C F de Oliveira 2015 13

09/09/16 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; }

09/09/16 P C F de Oliveira 2015 15

bold

bolder

ligther

100 - 900

normal

inherit

09/09/16 P C F de Oliveira 2015 16

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 prximo slide

09/09/16 P C F de Oliveira 2015 17

p.v600 { font-weight: 600; } p.v700 { font-weight: 700; } p.v800 { font-weight: 800; } p.v900 { font-weight: 900; }

Isto um pargrafo.

Isto um pargrafo.

Isto um pargrafo.

Isto um pargrafo.

Continuao do slide anterior

09/09/16 P C F de Oliveira 2015 18

Isto um pargrafo.

Isto um pargrafo.

Isto um pargrafo.

Isto um pargrafo.

Isto um pargrafo.

Isto um pargrafo.

Isto um pargrafo.

Isto um pargrafo.

Isto um pargrafo.

Continuao do slide anterior

09/09/16 P C F de Oliveira 2015 19

09/09/16 P C F de Oliveira 2015 20

font-style

Afeta a postura do

texto

body { font-style: normal; }p { font-style: italic; }

09/09/16 P C F de Oliveira 2015 21

p.normal { font-style: normal; }p.italic { font-style: italic; }p.oblique { font-style: oblique; }

Isto um pargrafo no estilo "normal".

Isto um pargrafo no estilo "italic".

Isto um pargrafo no estilo "oblique".

09/09/16 P C F de Oliveira 2015 22

09/09/16 P C F de Oliveira 2015 23

font-variant

Altera variantes do

texto

body { font-variant: normal; }p { font-variant: small-caps; }

09/09/16 P C F de Oliveira 2015 24

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

Meu nome PC.

Meu nome PC.

09/09/16 P C F de Oliveira 2015 25

09/09/16 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; }

09/09/16 P C F de Oliveira 2015 27

weight

variant

family

style

inherit

size/line-height

09/09/16 P C F de Oliveira 2015 28

09/09/16 P C F de Oliveira 2015 29

Ateno

Propriedade font deve incluir no mnimo: font-size font-family

09/09/16 P C F de Oliveira 2015 30

p.ex1 { font: 15px arial, sans-serif; }

p.ex2 { font:italic bold 12px/30px Georgia, serif; }

09/09/16 P C F de Oliveira 2015 31

Isto um pargrafo. Isto

um pargrafo. Isto um pargrafo. Isto um pargrafo. Isto um pargrafo. Isto um pargrafo. Isto um pargrafo. Isto um pargrafo.

Isto um pargrafo. Isto

um pargrafo. Isto um pargrafo. Isto um pargrafo. Isto um pargrafo. Isto um pargrafo. Isto um pargrafo. Isto um pargrafo.

09/09/16 P C F de Oliveira 2015 32

09/09/16 P C F de Oliveira 2015 33

09/09/16 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%; }

09/09/16 P C F de Oliveira 2015 35

p.small { line-height: 70%; }p.big { line-height:200%; }

09/09/16 P C F de Oliveira 2015 36

Este um pargrafo com line-height

padro.A altura padro da linha na maioria dos

browsers cerca de 110% a 120%.

Este um pargrafo com line-

height menor.Este um pargrafo com line-height

menor.

Este um pargrafo com line-

height maior.Este um pargrafo com line-height

maior.

09/09/16 P C F de Oliveira 2015 37

09/09/16 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; }

09/09/16 P C F de Oliveira 2015 39

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

Pargrafo 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.

09/09/16 P C F de Oliveira 2015 40

Pargrafo 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.

Pargrafo 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.

09/09/16 P C F de Oliveira 2015 41

09/09/16 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; }

09/09/16 P C F de Oliveira 2015 43

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

Este o cabealho 1Este o cabealho 2Este o cabealho 3Este o cabealho 4

09/09/16 P C F de Oliveira 2015 44

09/09/16 P C F de Oliveira 2015 45

text-decoration

Coloca decorao

no texto

h1 { text-decoration: overline; }h1 { text-decoration: line-through; }h1 { text-decoration: blink; }

09/09/16 P C F de Oliveira 2015 46

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

Este cabealho 1Este cabealho 2Este cabealho 3Este cabealho 4

09/09/16 P C F de Oliveira 2015 47

09/09/16 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; }

09/09/16 P C F de Oliveira 2015 49

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

Algum texto aqui.

Algum texto aqui.

Algum texto aqui.

09/09/16 P C F de Oliveira 2015 50

09/09/16 P C F de Oliveira 2015 51

letter-spacing

Insere espaos

entre letras

p { letter-spacing: 8px; }p { letter-spacing: 1.5em; }

09/09/16 P C F de Oliveira 2015 52

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

Este o cabealho 1Este o cabealho 2Este o cabealho 3

09/09/16 P C F de Oliveira 2015 53

09/09/16 P C F de Oliveira 2015 54

word-spacing

Insere espaos entre

palavras

p { word-spacing: 8px; }p { word-spacing: 1.5em; }

09/09/16 P C F de Oliveira 2015 55

h1.esp3 { word-spacing: 3px; }h1.esp31 { word-spacing: -3px; }h1.esp12 { word-spacing: 12px; }

Este o pargrafo 1Este o pargrafo 2Este o pargrafo 3

09/09/16 P C F de Oliveira 2015 56

Search related