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 Descrição Valores Possíveis
background­color cor de fundo color_name [red]; hex_number [#ff0000];
rgb_number [rgb(255,0,0)]; transparent;
inherit (herdar)
background­image imagem de fundo url('URL'), none (nenhuma), inherit
background­repeat repetir imagem de repeat; repeat‐x; repeat‐y; no‐repeat; inherit
fundo até preencher a
tela
background­attachment define se a imagem é scroll; fixed; inherit
fixa ou se rola junto
com a página
background­position posição inicial da left top/left center/left bottom/right
imagem de fundo 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 Descrição Valores Possíveis
list­style­image Especifica uma URL, none, inherit
imagem para o
marcador da lista
list­style­position Especifica se o inside, outside, inherit
marcador aparecerá
dentro ou fora da área
do conteúdo da lista
list­style­type Tipo de marcador da None, disc, circle, square, decimal,
lista 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 color_name [red]; hex_number [#ff0000];
rgb_number [rgb(255,0,0)]; transparent;
inherit
text­align Alinhamento do texto left, right, center, justify
text­decoration Decoração do texto none, underline, overline, line‐through, blink
text­indent Indentação do texto na length, %
primeira linha
text­transform Controla a none, capitalize, uppercase, lowercase
transformação das
letras
direction Direção do texto ltr (left‐to‐right), rtl (right‐to‐left)
line­height Espaçamento entre normal, number, length, %
linhas
letter­spacing Espaçamento entre normal, length
letras
word­space Espaçamento entre normal, length
palavras
vertical­align Alinhamento vertical baseline, sub, super, top, text‐top, middle,
bottom, text‐bottom, length, %
white­space Define como o espaço pre, normal, nowrap
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 um link normal Propriedades de fundo, fonte, texto e caixa
Pseudo­Classe a:visited 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 Valores Possíveis
font­family Família de fonte nome da família (Verdana, Arial, Helvetica,
sans­serif)
nome genérico (Serif/ Sans­Serif)
inherit
font­size Tamanho da fonte xx‐small, x‐small, small, medium, large,
x‐large, xx‐large, smaller, larger, length, %,
inherit
font­style Estilo de letra da fonte normal, italic, oblique, inherit
font­variant Especifica se o texto normal, small‐caps, inherit
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 Descrição Valores Possíveis
width Largura length, %
height Altura length, %
padding Enchimento geral length, %
padding­top direita
padding­right inferior
padding­bottom esquerda
padding­left
border­color Cor da borda geral color_name, hex_number, rgb_number,
border­bottom­color Cor da borda inferior transparent, inherit
border­left­color Cor da borda esquerda
border­right­color Cor da borda direita
border­top­color Cor da borda superior
border­style Estilo da borda geral none, hidden, dotted, dashed, solid, double,
border­bottom­style inferior groove, ridge, inset, outset, inherit
border­left­style esquerda
border­right­style direita
border­top­style superior
border­width Espessura da borda thin, medium, thick, length, inherit
border­bottom­width geral, inferior
border­left­width esquerda
border­right­width direita
border­top­width superior
margin­top Margem superior, auto, length, %
margin­right direita
margin­bottom inferior
margin­left esquerda

5
 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 Descrição Valores Possíveis
bottom Posicionamento do auto, length, %, inherit
elemento em relação à
base
left Posicionamento do auto, length, %, inherit
elemento em relação à
esquerda
right Posicionamento do auto, length, %, inherit
elemento em relação à
direita
top Posicionamento do auto, length, %, inherit
elemento em relação
ao topo
overflow Especifica o que auto, hidden, scroll, visible, inherit
acontece se o conteúdo
de uma caixa
transbordar
position Especifica o tipo de absolute, fixed, relative, static, inherit
posicionamento de um
elemento
z­index Define a ordem da number, auto, inherit
pilha de um elemento
float Especifica se uma caixa left, right, none, inherit
deve flutuar e em que
direção

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.