(CSS) - Propriedades Básicas - profª msc. elizabete munzlinger

Introdução
à
Tecnologia
Web
CSS
–
Cascading
Style
Sheets
Propriedades
Profª
MSc.
Elizabete
Munzlinger
www.elizabete.com.br
Profª
MSc.
Elizabete
Munzlinger
www.elizabete.com.br
Cascading
Style
Sheets
–
Propriedades
Índice
Lista de Propriedades CSS............................................................................................ 3
Formatação de Fundo ........................................................................................... 3
background-color............................................................................................. 3
background-image........................................................................................... 3
background-repeat .......................................................................................... 3
background-attachment ................................................................................... 3
background-position ........................................................................................ 3
Formatação de Listas ....................................................................................... 3
list-style-image................................................................................................ 3
list-style-position ............................................................................................. 3
list-style-type .................................................................................................. 3
Ainda as mesmas propriedades de fundo, texto, fonte e caixa ............................ 3
Formatação de Texto ............................................................................................ 4
color............................................................................................................... 4
text-align ........................................................................................................ 4
text-decoration................................................................................................ 4
text-indent ...................................................................................................... 4
text-transform ................................................................................................. 4
direction ......................................................................................................... 4
line-height ...................................................................................................... 4
letter-spacing .................................................................................................. 4
word-space ..................................................................................................... 4
vertical-align ................................................................................................... 4
white-space .................................................................................................... 4
Ainda as mesmas propriedades de fundo, fonte e caixa...................................... 4
Formatação de Links ............................................................................................. 4
Pseudo-Classe a:link ........................................................................................ 4
Pseudo-Classe a:visited.................................................................................... 4
Pseudo-Classe a:hover..................................................................................... 4
Pseudo-Classe a:active..................................................................................... 4
Ainda as mesmas propriedades de fundo, texto, fonte e caixa ............................ 4
Formatação de Fonte ............................................................................................ 5
font-family ...................................................................................................... 5
font-size ......................................................................................................... 5
font-style ........................................................................................................ 5
font-variant..................................................................................................... 5
font-weight ..................................................................................................... 5
Ainda as mesmas propriedades de fundo, texto e caixa ...................................... 5
Formatação de Caixa ............................................................................................ 5
width .............................................................................................................. 5
height............................................................................................................. 5
1
Profª
MSc.
Elizabete
Munzlinger
www.elizabete.com.br
padding .......................................................................................................... 5
padding-top .................................................................................................... 5
padding-right .................................................................................................. 5
padding-bottom............................................................................................... 5
padding-left .................................................................................................... 5
border-color .................................................................................................... 5
border-bottom-color ........................................................................................ 5
border-left-color .............................................................................................. 5
border-right-color ............................................................................................ 5
border-top-color .............................................................................................. 5
border-style .................................................................................................... 5
border-bottom-style......................................................................................... 5
border-left-style .............................................................................................. 5
border-right-style ............................................................................................ 5
border-top-style .............................................................................................. 5
border-width ................................................................................................... 5
border-bottom-width ....................................................................................... 5
border-left-width ............................................................................................. 5
border-right-width ........................................................................................... 5
border-top-width ............................................................................................. 5
margin-top...................................................................................................... 5
margin-right.................................................................................................... 5
margin-bottom ................................................................................................ 5
margin-left ...................................................................................................... 5
Formatação de Formulário..................................................................................... 6
As mesmas propriedades de fundo, texto, fonte e caixa ..................................... 6
Formatação de Tabelas ......................................................................................... 6
As mesmas propriedades de fundo, texto, fonte e caixa ..................................... 6
Posicionamento dos elementos na página............................................................... 6
bottom ........................................................................................................... 6
left ................................................................................................................. 6
right ............................................................................................................... 6
top ................................................................................................................. 6
overflow ......................................................................................................... 6
position .......................................................................................................... 6
z-index ........................................................................................................... 6
float ............................................................................................................... 6
Referências Bibliográficas............................................................................................. 7
2
Profª
MSc.
Elizabete
Munzlinger
www.elizabete.com.br
Lista
de
Propriedades
CSS
(parcial)
Formatação
de
Fundo
Propriedade
background­color
Descrição
Valores
Possíveis
cor
de
fundo
background­image
background­repeat
imagem
de
fundo
repetir
imagem
de
fundo
até
preencher
a
tela
background­attachment
define
se
a
imagem
é
fixa
ou
se
rola
junto
com
a
página
background­position
posição
inicial
da
imagem
de
fundo
color_name
[red];
hex_number
[#ff0000];
rgb_number
[rgb(255,0,0)];
transparent;
inherit
(herdar)
url('URL'),
none
(nenhuma),
inherit
repeat;
repeat‐x;
repeat‐y;
no‐repeat;
inherit
scroll;
fixed;
inherit
left
top/left
center/left
bottom/right
top/right
center/right
bottom/center
top/center
center/center
bottom;
x%
y%
[0%
0%]
[100%
100%]
[50%
0%];
inherit
Formatação
de
Listas
Propriedade
list­style­image
list­style­position
list­style­type
Descrição
Valores
Possíveis
Especifica
uma
imagem
para
o
marcador
da
lista
Especifica
se
o
marcador
aparecerá
dentro
ou
fora
da
área
do
conteúdo
da
lista
Tipo
de
marcador
da
lista
URL,
none,
inherit
inside,
outside,
inherit
None,
disc,
circle,
square,
decimal,
decimal‐leading‐zero
(01,
02,
03,
etc.),
armenian,
georgian
(an,
ban,
gan,
etc.),
lower‐alpha
(a,
b,
c,
d,
e,
etc.),
upper‐alpha
(A,
B,
C,
D,
E,
etc.),
lower‐greek
(alpha,
beta,
gamma,
etc.),
lower‐latin
(a,
b,
c,
d,
e,
etc.),
upper‐latin
(A,
B,
C,
D,
E,
etc.),
lower‐roman
(i,
ii,
iii,
iv,
v,
etc.),
upper‐roman
(I,
II,
III,
IV,
V,
etc.),
inherit
Ainda
as
mesmas
propriedades
de
fundo,
texto,
fonte
e
caixa
3
Profª
MSc.
Elizabete
Munzlinger
www.elizabete.com.br
Formatação
de
Texto
Propriedade
Descrição
Valores
Possíveis
color
cor
do
texto
text­align
text­decoration
text­indent
Alinhamento
do
texto
Decoração
do
texto
Indentação
do
texto
na
primeira
linha
Controla
a
transformação
das
letras
Direção
do
texto
Espaçamento
entre
linhas
Espaçamento
entre
letras
Espaçamento
entre
palavras
Alinhamento
vertical
text­transform
direction
line­height
letter­spacing
word­space
vertical­align
white­space
color_name
[red];
hex_number
[#ff0000];
rgb_number
[rgb(255,0,0)];
transparent;
inherit
left,
right,
center,
justify
none,
underline,
overline,
line‐through,
blink
length,
%
none,
capitalize,
uppercase,
lowercase
ltr
(left‐to‐right),
rtl
(right‐to‐left)
normal,
number,
length,
%
normal,
length
normal,
length
baseline,
sub,
super,
top,
text‐top,
middle,
bottom,
text‐bottom,
length,
%
pre,
normal,
nowrap
Define
como
o
espaço
em
branco
dentro
de
um
elemento
é
tratado
Ainda
as
mesmas
propriedades
de
fundo,
fonte
e
caixa
Formatação
de
Links
Propriedade
Descrição
Valores
Possíveis
Pseudo­Classe
a:link
Pseudo­Classe
a:visited
um
link
normal
Propriedades
de
fundo,
fonte,
texto
e
caixa
Um
link
que
o
usuário
Propriedades
de
fundo,
fonte,
texto
e
caixa
tenha
visitado
Pseudo­Classe
a:hover
um
link
quando
o
Propriedades
de
fundo,
fonte,
texto
e
caixa
usuário
passa
o
mouse
sobre
Pseudo­Classe
a:active
Um
link
no
momento
Propriedades
de
fundo,
fonte,
texto
e
caixa
em
que
for
clicado
OBS:
Ao
escrever
as
pseudo­classes
em
CSS
deve­se
respeitar
a
seguinte
ordem:
1º
a:link
{
...
}
2º
a:visited
{
...
}
3º
a:hover
{
...
}
4º
a:active
{
...
}
Ainda
as
mesmas
propriedades
de
fundo,
texto,
fonte
e
caixa
4
Profª
MSc.
Elizabete
Munzlinger
www.elizabete.com.br
Formatação
de
Fonte
Propriedade
Descrição
font­family
Família
de
fonte
font­size
Tamanho
da
fonte
Valores
Possíveis
nome
da
família
(Verdana,
Arial,
Helvetica,
sans­serif)
nome
genérico
(Serif/
Sans­Serif)
inherit
xx‐small,
x‐small,
small,
medium,
large,
x‐large,
xx‐large,
smaller,
larger,
length,
%,
inherit
normal,
italic,
oblique,
inherit
normal,
small‐caps,
inherit
font­style
font­variant
Estilo
de
letra
da
fonte
Especifica
se
o
texto
deve
ser
exibido
em
small‐caps
font­weight
Peso
de
uma
fonte
normal,
bold,
bolder,
lighter,
100,
200,
300,
(quão
negrito
será)
400,
500,
600,
700,
800,
900,
inherit
Ainda
as
mesmas
propriedades
de
fundo,
texto
e
caixa
Formatação
de
Caixa
Propriedade
width
height
padding
padding­top
padding­right
padding­bottom
padding­left
border­color
border­bottom­color
border­left­color
border­right­color
border­top­color
border­style
border­bottom­style
border­left­style
border­right­style
border­top­style
border­width
border­bottom­width
border­left­width
border­right­width
border­top­width
margin­top
margin­right
margin­bottom
margin­left
Descrição
Valores
Possíveis
Largura
Altura
Enchimento
geral
direita
inferior
esquerda
length,
%
length,
%
length,
%
Cor
da
borda
geral
Cor
da
borda
inferior
Cor
da
borda
esquerda
Cor
da
borda
direita
Cor
da
borda
superior
Estilo
da
borda
geral
inferior
esquerda
direita
superior
Espessura
da
borda
geral,
inferior
esquerda
direita
superior
Margem
superior,
direita
inferior
esquerda
color_name,
hex_number,
rgb_number,
transparent,
inherit
5
none,
hidden,
dotted,
dashed,
solid,
double,
groove,
ridge,
inset,
outset,
inherit
thin,
medium,
thick,
length,
inherit
auto,
length,
%
Profª
MSc.
Elizabete
Munzlinger
www.elizabete.com.br
Formatação
de
Formulário
Propriedade
Descrição
Valores
Possíveis
As
mesmas
propriedades
de
fundo,
texto,
fonte
e
caixa
Formatação
de
Tabelas
Propriedade
Descrição
Valores
Possíveis
As
mesmas
propriedades
de
fundo,
texto,
fonte
e
caixa
Posicionamento
dos
elementos
na
página
Propriedade
bottom
left
right
top
overflow
position
z­index
float
Descrição
Valores
Possíveis
Posicionamento
do
elemento
em
relação
à
base
Posicionamento
do
elemento
em
relação
à
esquerda
Posicionamento
do
elemento
em
relação
à
direita
Posicionamento
do
elemento
em
relação
ao
topo
Especifica
o
que
acontece
se
o
conteúdo
de
uma
caixa
transbordar
Especifica
o
tipo
de
posicionamento
de
um
elemento
Define
a
ordem
da
pilha
de
um
elemento
Especifica
se
uma
caixa
deve
flutuar
e
em
que
direção
auto,
length,
%,
inherit
auto,
length,
%,
inherit
auto,
length,
%,
inherit
auto,
length,
%,
inherit
auto,
hidden,
scroll,
visible,
inherit
absolute,
fixed,
relative,
static,
inherit
number,
auto,
inherit
left,
right,
none,
inherit
Explicação completa e detalhes sobre as diferenças de renderização pelos navegadores.
http://www.blooberry.com/indexdot/css/propindex/all.htm
Indicação de livro para aquisição:
SILVA, Maurício Samy. Construindo Sites com CSS e (X)HTML: Sites controlados por folhas de
estilos em cascata. São Paulo: Novatec, 2008.
Mais informações sobre este livro em: http://www.livrocss.com.br/index.php
6
Profª
MSc.
Elizabete
Munzlinger
www.elizabete.com.br
Referências
Bibliográficas
1. SILVA,
Maurício
Samy.
Construindo
Sites
com
CSS
e
(X)HTML:
Sites
controlados
por
folhas
de
estilos
em
cascata.
São
Paulo:
Novatec,
2008.
2. SILVA,
Maurício
Samy.
CSS
Interativo.
Disponível
online
em:
[http://imasters.uol.com.br/cssinterativo/]
3. FREEMAN,
Eric,
FREEMAN,
Elisabeth.
Use
a
Cabeça:
HTML
com
CSS
e
XHTML
.
Rio
de
Janeiro:
Alta
Books,
2008.
4. CSS.
CSS
Zen
Garden.
Disponível
online
em:
[http://www.csszengarden.com/]Registro
BR.
Disponível
em:
[http://registro.br]
5. CSS.W3C
Recomendation:
Cascading
Style
Sheets
Home
Page.
Disponível
online
em:
[http://www.w3.org/Style/CSS/]
6. MACEDO,
Marcelo
da
Silva.
Construindo
sites
adotando
padrões
Web.
Rio
de
Janeiro:
Ciência
Moderna,
2004.
7. MARCONDES,
Christian
Alfim.
HTML
fundamental
4.0.
São
Paulo:
Érica,
2005.
8. CARDOSO,
Márdel.
Desenvolvimento
web
para
o
ensino
superior.
Rio
de
Janeiro:
Axcel
Books,
2004.
9. W3C.
Word
Wide
Web
Consortium.
Disponível
online
em:
[http://www.w3.org/]
10. HTML.
HTML
Working
Group.
Disponível
online
em:
[http://www.w3.org/html/wg/]
11. HTML.
W3C
Recomendation:
HTML
4.01
Specification.
Disponível
online
em:
[http://www.w3.org/TR/html4/]
12. XHTML.
W3C
Recomendation:
XHTML
1.0
The
Extensible
HyperText
Markup
Language
(Second
Edition).
A
Reformulation
of
HTML
4
in
XML
1.0.
Disponível
online
em:
[http://www.w3.org/TR/xhtml1/]
13. HTML.
Overview
of
HTML.
Disponível
online
em:
[http://www.w3.org/html/]
14. HTML.
HTML
Validator
W3C.
Disponível
online
em:
[http://validator.w3.org/]
15. DOCTYPE.
Recommended
list
of
DOCTYPE
W3C.
Disponível
online
em:
[http://www.w3.org/QA/2002/04/valid‐dtd‐list.html]
16. Webdesign.
Revista
Webdesign.
Rio
de
Janeiro:
Artecom,
2010,
2011.
7