FWD 8

CSS
Continuao
Adicionar cores ao Heading e

Background
A propriedade color define a cor num
documento html
EX: h1 {
color: red;
}
O elemento HTML que marca cabealhos
o elemento <h1>. O cdigo acima
define todos os <h1> na cor vermelha.
A propriedade 'background-color'
A propriedade background-color define a cor do
fundo de um elemento.
Ex: body {
background-color: red }
h1 { color: blue; background-color: green; }
O elemento <body> contm todo o contedo de
um documento HTML
Inserir imagens de fundo

[background-image]
A propriedade CSS background-image
usada para definir uma imagem de fundo.
Para inserir uma imagem de fundo na
pgina basta aplicar a propriedade
background-image ao elemento
<body> e especificar o caminho onde a
imagem est gravada.
Exemplo
body {
background-color: red;
background-image: url("butterfly.gif");
}
h1 {
color: blue;
background-color: green;
}
Isto significa que a imagem est localizada no
mesmo diretrio da folha de estilos.
Para outro directorio seria;
url("../images/butterfly.gif")
Imagem de fundo repetida [backgroundrepeat]

No exemplo anterior a imagem da borboleta
repetiu tanto na vertical como na horizontal
cobrindo toda a tela.
A propriedade background-repeat controla o
comportamento de repetio da imagem de fundo.
A tabela a seguir mostra os quatro diferentes
valores para
Valorbackground-repeat
Descrio
Background-repeat:
repeat-x
A imagem se repete na horizontal
background-repeat:
repeat-y
A imagem se repete na vertical
background-repeat:
repeat
A imagem se repete tanto na horizontal como

na vertical
background-repeat: norepeat
A imagem no se repete
Image de fundo fixa [backgroundattachment]

A propriedade background-attachment define
se a imagem ser fixa ou se ir rolar juntamente
com o elemento que a contm.
Uma imagem de fundo fixa permanece no mesmo
lugar e no rola com a tela ao contrrio da
imagem que no fixa e rola acompanhando o
contedo da tela.
A tabela a seguir mostra diferentes valores para
background-attachment
Valor
Descrio
Background-attachment: scroll
A imagem rola com a

pgina
Background-attachment: fixed
A imagem fixa
O cdigo abaixo fixa a imagem na tela

body {
background-color: red;
background-repeat: no-repeat; backgroundattachment: fixed;
}
h1 {
color: blue;
background-color: white;
}
Posio da imagem de fundo [backgroundposition]

Por padro uma imagem de fundo posicionada no
canto superior esquerdo da tela.
A propriedade background-position permite alterar
este posicionamento padro e colocar a imagem em
qualquer lugar na tela.
Existem vrias maneiras de definir o
posicionamento da imagem na tela definindo
valores para background-position.
As coordenadas podem ser expressas em
percentagem da largura da janeja, em unidades
fixas (pixels, centmetros, etc.) ou pode-se usar as
palavras top, bottom, center, left e right.
Exemplo no modelo de coordenadas
Imagem posicionada no canto inferior direito

da pgina
body {
background-color: white;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}
h1 {
color: green;
background-color: brown;
}
Famlia de fontes [font-family]

A propriedade font-family usada para
definir uma lista de fontes e sua prioridade

para apresentao de um elemento em
uma pgina.
Nome para famlias de fontes
- Exemplos para este tipo (normalmente
conhecidas como "font") so "Arial", "Times New
Roman" ou "Tahoma".
Ex:
- h1 {font-family: arial, verdana;}
- h2 {font-family: "Times New Roman", serif;}
- h3 {font-size: 120px;}
Famlias genricas
Famlias genricas so fontes que
pertencem a um grupo com aparncia
uniforme.
Um exemplo so as fontes sans-serif que
englobam a coleo de fontes.
h1 { font-family: arial, verdana, sansserif; }
h2 { font-family: "Times New Roman", serif;
}
Diferena entre familia de fontes
Estilo da fonte [font-style]

A propriedade font-style define a escolha da
fonte em normal, italic ou oblique.
EX:
h1 { font-family: arial, verdana, sans-serif;
h2 {font-family: "Times New Roman", serif; fontstyle: italic; }
Fonte variante [font-variant]

A propriedade font-variant usada para escolher
as variantes normal ou small-caps.
Uma fonte small-caps aquela que usa letras
maisculas de tamanhos reduzidos.
Ex:
h1 { font-variant: small-caps; }
h2 { font-variant: normal;
}
Tamanho da fonte [font-size]

O tamanho da fonte definido pela propriedade
font-size.
Existem muitas unidades (p. ex.:. pixels e
percentagens) que podem ser usadas para definir
o tamanho da fonte.
Ex:
h1 { font-size: 30px; }
h2 { font-size: 12pt; }
h3 { font-size: 120%; }
p { font-size: 1em; }
END

FWD 8

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

FWD 8

Загружено:

Авторское право:

Доступные форматы

CSS

Adicionar cores ao Heading e

Inserir imagens de fundo

Imagem de fundo repetida [backgroundrepeat]

A imagem se repete na horizontal

A imagem se repete na vertical

A imagem se repete tanto na horizontal como

Image de fundo fixa [backgroundattachment]

A imagem rola com a

O cdigo abaixo fixa a imagem na tela

Posio da imagem de fundo [backgroundposition]

Exemplo no modelo de coordenadas

Imagem posicionada no canto inferior direito

Famlia de fontes [font-family]

definir uma lista de fontes e sua prioridade

Diferena entre familia de fontes

Estilo da fonte [font-style]

h2 {font-family: "Times New Roman", serif; fontstyle: italic; }

Fonte variante [font-variant]

Tamanho da fonte [font-size]

Вам также может понравиться