Css 2

Faculdade
de
Tecnologia
de
So Paulo
Cascading Style Sheets - CSS
Iniciante e Intermedirio
Formatando pginas em HTML

(com exemplos)
Prof. Elisabete da Silva Santos
Departamento de Processamento de Dados

FATEC-SP
2007
Folhas de Estilo
FOLHAS DE ESTILO ..................................................................................................................................................... 4

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
INTRODUO A FOLHAS DE ESTILO ...................................................................................................................... 4

ESTILO INLINE ...................................................................................................................................................... 4
ESTILO INCORPORADO .......................................................................................................................................... 4
ESTILO EXTERNO .................................................................................................................................................. 5
COMENTRIOS INSERIDOS NO CDIGO ................................................................................................................. 6
PROPRIEDADES DE FONTE ..................................................................................................................................... 6
PROPRIEDADES DE TEXTO ..................................................................................................................................... 7
PROPRIEDADES DE PLANO DE FUNDO ................................................................................................................... 7
PROPRIEDADE DE CORES DE FONTES .................................................................................................................... 7
PROPRIEDADES DE LINKS ................................................................................................................................. 8
PROPRIEDADES DE BARRA DE ROLAGEM ......................................................................................................... 8
PROPRIEDADES DE LISTAS................................................................................................................................ 8
PROPRIEDADES DE PADDING ............................................................................................................................ 9
PROPRIEDADES DE BORDAS ............................................................................................................................. 9
PROPRIEDADES DE REDIMENSIONAMENTO ....................................................................................................... 9
PROPRIEDADES DE MARGENS......................................................................................................................... 10
PROPRIEDADES DE POSICIONAMENTO ............................................................................................................ 10
SELETOR DE GRUPO ....................................................................................................................................... 10
SELETOR CONTEXTUAL .................................................................................................................................. 11
SELETOR DE CLASSE ...................................................................................................................................... 11
SELETOR DE ID .............................................................................................................................................. 12
SELETOR DE CLASSE E ID .............................................................................................................................. 12
SELETOR UNIVERSAL ..................................................................................................................................... 13
PROPRIEDADES DE CURSOR............................................................................................................................ 13
CAMADAS ...................................................................................................................................................... 14
LAYOUTS ....................................................................................................................................................... 15
FILTROS ......................................................................................................................................................... 18
27.1. Filtro Alpha............................................................................................................................................................. 18
27.2. Filtro Blur ............................................................................................................................................................... 19
27.3. Filtro Chroma:......................................................................................................................................................... 20
27.4. Filtro Dropshadow .................................................................................................................................................. 20
27.5. Filtro FlipH ............................................................................................................................................................. 21
27.6. Filtro FlipV ............................................................................................................................................................. 21
27.7. Filtro Glow.............................................................................................................................................................. 21
27.8. Filtro Gray............................................................................................................................................................... 22
27.9. Filtro Invert ............................................................................................................................................................. 22
27.10. Filtro Motion Blur................................................................................................................................................. 22
27.11. Filtro Wave ........................................................................................................................................................... 22
27.12. Filtro Xray............................................................................................................................................................. 23
28.
29.
30.
31.
32.
INSERINDO UM CONE NA BARRA DE ENDEREO E NA GUIA DO NAVEGADOR................................................ 23

ALGUMAS PALAVRAS... .................................................................................................................................. 23
BIBLIOGRAFIA ................................................................................................................................................ 24
TUTORIAIS ..................................................................................................................................................... 24
CSS2 REFERENCE .......................................................................................................................................... 25

FATEC-SP
Folhas de Estilo
FOLHAS DE ESTILO
"CRIANDO PGINAS COM ESTILO"
1. Introduo a Folhas de Estilo

Folhas de Estilo em Cascata (Cascading Style Sheets ou CSS) so regras utilizadas para a
formatao de pginas HTML. Atravs delas o cdigo HTML otimizado, podendo complementar
as definies obtidas atravs de tags HTML, como tambm alterar e criar efeitos especiais em
ttulos, textos e elementos como imagens, formulrios, barras de rolagem etc. Portanto, tm como
pr-requisito o conhecimento da linguagem HTML..
As tags HTML sem as marcas <(sinal de menor) e > (sinal de maior) so utilizadas como
elementos (seletores) em Folhas de Estilo.
H trs modos de insero de regras para os elementos em uma pgina HTML:
Inline - Dentro da tag HTML;
Incorporado Dentro do cabealho da pgina HTML;
Externo Em um arquivo externo.
Se houver conflito de regras entre os modos de insero, prevalecer o modo que for definido
mais prximo a tag.
O resultado de Folhas de Estilo pode variar de acordo com o navegador utilizado, recomendvel
testar em alguns navegadores (browser) como o Internet Explorer, Netscape, pera, Firefox...
2. Estilo Inline
O estilo Inline quando definimos as regras de Folhas de Estilo dentro da tag HTML, no corpo da
pgina. Esta regra afeta somente a tag utilizada:
<body>
<tag style="propriedade1:valor1; propriedade2:valor2a, valor2b;...">
</body>
Atributos / Formato
Tag
Style
Propriedade
Valor
Descrio
Tag HTML a ser formatada com Folhas de Estilo
Chamada das regras de Folhas de Estilo
Tipo de estilo a ser definido
Contedo do tipo de estilo
Exemplo 2.1:
<body>
<h3 style="color:red; text-decoration:underline;" > Ttulo </h3>
</body>
3. Estilo Incorporado
O Estilo Incorporado quando definimos as regras de Folhas de Estilo no cabealho do
documento HTML, entre as tags <style> e </style>. Neste modo, a pgina toda contemplada
com as regras:
FATEC-SP
Folhas de Estilo
<head>
<style type="text/css">
seletor {propriedade1:valor1;
propriedade2:valor2,valor3;
}
</style>
</head>
Propriedade / Formato
<style> e </style>
Type
Seletor
Propriedade
Valor
Descrio
Tags de incio e trmino de definio de Folhas de Estilo
Tipo ("text/css") - Texto contendo Folhas de Estilo em Cascata
Tag html sem as marcas <" e >" (elemento)
Tipo de estilo a ser definido
Contedo do tipo de estilo
Exemplo 3.1:
<head>
h1 { color:red;
font-style:"italic";
}
</style>
</head>
<body>
<h1> Ttulo utilizando o estilo definido no cabealho </h1>
Texto normal entre as tags de ttulo...
<h1> Outro ttulo utilizando o estilo definido no cabealho </h1>
</body>
4. Estilo Externo
O Estilo Externo quando definimos as regras de Folhas de Estilo em um arquivo parte (bloco
de notas), salvo com extenso .css. As regras de estilos afetaro as pgina HTML que fizerem
chamada a este arquivo.
No arquivo externo s definimos as regras, ele no possui indicaes de incio e trmino do
cdigo. muito til para alterar a aparncia de vrias pginas ao mesmo tempo.
A chamada deste arquivo feita no cabealho de cada pgina HTML:
<head>
<link rel="..." href="..." type="...">
</head>
Atributos
Link
Rel
Href
Type
Descrio / Opes
Ligao entre a pgina e o arquivo externo
Informa ao navegador o que ele ir encontrar ("stylesheet")
Endereo do arquivo externo contendo as regras de estilos
Formato do estilo Texto de Folhas de Estilo em Cascata
Exemplo 4.1:
<head>
<link rel="stylesheet" href="estilo1.css" type="text/css">
</head>
FATEC-SP
Folhas de Estilo
<body>
<b> Negrito utilizando o estilo definido no arquivo externo </b1>
<p> Pargrafo utilizando o estilo definido no arquivo externo </p>
</body>
Contedo do arquivo externo: estilo1.css:
b {background-color: "red"; color: "white"; font-size: "14pt"; }
p {color: "green"; font-style: "italic"; }
5. Comentrios Inseridos no Cdigo

Utilizamos as marcas de comentrio para ocultarmos os comentrios escritos dentro do cdigo
CSS, para que eles no apaream quando a pgina for carregada, nem provoquem erros.
/*
Comentrio
*/
Exemplo 5.1:
/*
Linha 1 de comentrio
Linha 2 de comentrio... */
Podemos comentar Folhas de Estilo com as tags de comentrio de HTML, para os navegadores
que no suportam Folhas de Estilo e to pouco a tag <nostyle>.
Exemplo 5.2:
<!-P {color:blue;}
-->
</style>
6. Propriedades de Fonte
Tabela de propriedades de estilos aplicveis em fontes.
Propriedades
Descrio / Opes
Font-family
Famlia genrica de fontes
(Arial / Courier / Helvtica / Tahoma....)
Font-size
Tamanho da fonte (unidades: pt / cm / px /
in / % / xx-small / x-small / medium / large /
x-large / xx-large / larger)
Font-style
Estilo da fonte
(normal / italic / oblique )
Font-variant
Aplica uma variao na fonte
(normal / small-caps)
Font-weight
Espessura do traado da fonte
(extra-light / light / demi-light / medium /
demi-bold / bold / extra-bold / px)
Font
Atalho para definir todas as propriedades da
fonte(font-style / font-variant / font-weight /
font-size / font-family / line-height)
FATEC-SP
Exemplos
p { font-family: Arial, Courier;
}
p { font-size: 12pt;
}
p { font-style : italic;
}
p {font-variant: small-caps;
}
p { font-weight: bold;
}
p { font :arial, italic, 3pt;
}
Folhas de Estilo
7. Propriedades de Texto
Tabela de propriedades de estilos aplicveis em textos.
Propriedades
Descrio / Opes
Line-height
Espaamento entre pargrafos
(pt / cm / px / in / %)
Text-align
Alinhamento do texto
(left / center / right / justify)
Text-decoration Demais estilos de uma fonte
(none / underline / overline/ blink /
line-through)
Text-indent
Indentao de texto (recuo da primeira linha)
(pt / cm / px / in)
Word-spacing
Controla o espao entre as palavras
(normal / no)
Letter-spacing
Controla o espao entre as letras
(normal / no)
Vertical-align
Controla o alinhamento vertical do elemento
(baseline / middle / sub / super / text-top /
Text- bottom / %)
Text-transform
Modifica o estado de um texto, ex.: de
maiscula para minscula
(none/ uppercase / lowercase / capitalize)
Exemplos
p { line-height : 30pt;
}
p { text-align : center;
}
p { text-decoration: italic;
}
p { text-indent : 6pt;
}
p { word-spacing: 4pt;
}
p { letter-spacing: 2pt;
}
p { vertical-align: sub;
}
p { text-transform: uppercase; }
8. Propriedades de Plano de Fundo

Tabela de propriedades de estilos aplicveis em plano de fundo.
Propriedades
Descrio / Opes
BackgroundCor de fundo de um texto ou pgina
color
(RGB / Hexa / Nome da cor em Ingls )
BackgroundDefine uma imagem de fundo para um
image
elemento
BackgroundDetermina a forma de repetio de uma
repeat
imagem de fundo
(repeat / repeat-x / repeat-y / no-repeat)
BackgroundDefine se a imagem de fundo deve rolar
attachment
junto com a pgina. (scroll / fixed)
Backgroundposition
Background
Define a posio da imagem de fundo

(par de valores / n / % / top / bottom / left /
right / center)
Atalho para todas as propriedades de
background.
Exemplos
body { background-color:"blue";
}
body { background-image:
url(imagem.jpg); }
body { background-repeat:
no-repeat; }
body { background-attachment:
"fixed"; }
body { background-position:
top center"; }
body { background:
url("foto1.jpg) beige
no-repeat fixed right; }
9. Propriedade de Cores de Fontes

Tabela de propriedade de estilos de cores aplicveis em fontes.
Propriedade
Descrio / Opes
Color
Cor do texto ou elemento no primeiro plano
(RGB / Hexadecimal / Nome da cor em
Ingls )
FATEC-SP
Exemplos
p { color: #5e82a4; }
li { color: rgb(0,0,255); }
b{ color: violet; }
Folhas de Estilo
10. Propriedades de Links

Tabela de propriedades de estilos aplicveis em links (pseudo-classes).
Propriedades
Descrio / Opes
Exemplos
A:link
Link normal (Link antes de ser clicado)
a:link {color:"blue"; }
A:active
Link ativado (Link da pgina atual carregada) a:active {color:green";}
A:visited
Link visitado (Link aps ter sido visitado)
a:visited {color:"red"; }
A:hover
Quando o cursor passa sobre o Link
a:hover{bgcolor:"yellow";}
11. Propriedades de Barra de Rolagem

Tabela de propriedades de estilos aplicveis em barras de rolagem.
Propriedades
Descrio / Opes
Exemplos
Scrollbar-arrow- Cor da seta da barra de rolagem.
body {scrollbar-arrow-color: "blue";
color
}
ScrollbarCor da borda direita e inferior da
body {scrollbar-darkshadow-color:
darkshadowbarra de rolagem.
"red;"
color
}
Scrollbar-trackCor do trilho da barra de rolagem.
body {scrollbar-track-color: "yellow";
color
}
Scrollbar-faceCor do carrinho da barra de rolagem. body {scrollbar-face-color: "violet";
color
}
ScrollbarCor da sombra da borda direita e
body {scrollbar-shadow-color: "gray";
shadow-color
inferior da barra de rolagem.
}
(cor compacta)
ScrollbarCor da borda esquerda, superior e da body {scrollbar-highlight-color:
highlight-color
base da barra de rolagem.
"beige";}
Scrollbar-3dlight- Cor da borda esquerda e superior da body {scrollbar-3dlight-color: "brown";
color
barra de rolagem.
}
Scrollbar-baseCor padro para todos os elementos body {scrollbar-base-color: "green";
color
da barra de rolagem.
}
12. Propriedades de Listas

Definindo o formato de exibio de elementos de uma lista, seus espaos e marcadores.
Propriedade
Descrio
Exemplo
Display
Define como o elemento deve ser mostrado li {display:inline;
na tela ou em uma pgina impressa.
}
(block / list-item / inline / none)
White-space
Determina como os espaos em branco
img {white-space:pre;
entre os elementos devero ser tratados.
}
(normal / pre / nowrap)
List-style-type
Define a aparncia dos marcadores da lista. ul {list-style-type:upper-alpha;
(disc/circle/square/decimal/lower-roman/
)
upper-roman/lower-alpha/upper-alpha/none)
List-style-image Define a imagem que ser usada como
ul {list-style-image:
marcador de lista. ( none / url(...) )
url(imagem.gif);}
List-style-position Define como o marcador de lista ser
ul {list-style-position:inside;)
exibido em relao ao contedo.
(outside / inside )
List-style
Atalho que define a posio, o tipo ou
ul {list-style:inside square;
imagem ao mesmo tempo.
)
FATEC-SP
Folhas de Estilo
13. Propriedades de Padding

Definindo a distncia entre um elemento e a sua rea limite.
Propriedade
Descrio
Padding-top
Define a distncia entre o elemento e o
limite da rea pelo lado superior. (0 / n / %)
Padding-right
limite da rea pelo lado direito. (0 / n / %)
Padding-bottom Define a distncia entre o elemento e o
limite da rea pelo lado inferior. (0 / n / %)
Padding-left
limite da rea pelo lado esquerdo. (0 / n / %)
Padding
Atalho para definir todas as propriedades do
padding sentido horrio. (0 / n / %)
Exemplo
body {padding-top:10;
}
body {padding-right:10%;
}
body {padding-bottom:5%;
}
body {padding-left:10%;
}
body {padding:10 5 10 5;
}
14. Propriedades de Bordas

Definindo bordas para um elemento da pgina.
Propriedade
Descrio
border-top-width Largura da borda superior de um elemento
(thin / medium / thick / n)
border-rightLargura da borda direita de um elemento
width
border-bottomLargura da borda inferior de um elemento
width
border-left-width Largura da borda esquerda de um elemento
border-width
Atalho para definir a largura de todas as
bordas (thin / medium / thick / n)
border-color
Define a cor da borda de um elemento
(cor vlida em ingls / RGB / Hexadecimal)
border-style
Define o estilo da borda
(none / dotted / dashed / solid / double /
groove / ridge / inset / outset)
border-top
Atalho para definir a largura, estilo e cor da
borda superior ( nesta ordem)
border-right
borda direita ( nesta ordem)
border-bottom
borda inferior ( nesta ordem)
border-left
borda esquerda ( nesta ordem)
border
Atalho para definir a largura, estilo e cor de
todas as bordas ( nesta ordem)
Exemplo
img {border-top-width:4pt;
}
p {border-right-width:3pt;
}
img {border-bottom-width:4pt;
}
b {border-left-width:3pt;
}
img {border-width:thin;
}
i
{border-color:red;
}
img {border-style:groove;
}
div {border-top: 3pt solid red;
}
Img {border-right: 4pt solid
blue;}
U {border-bottom: 3pt solid
green;}
img {border-left: 4pt solid
yellow;}
img {border: 4pt solid yellow;
}
15. Propriedades de Redimensionamento

Permite o redimensionamento de elementos dentro da pgina.
Propriedade
Descrio
width
Largura de um elemento (px / in / cm)
Height
Altura de um elemento (px / in / cm)
FATEC-SP
Exemplo
img {width:370px;}
img {height:200px;}
Folhas de Estilo
16. Propriedades de Margens

Definindo margens em elementos, textos ou imagens.
Propriedade
Descrio
Margin-left
Margem esquerda de um elemento
(0 / auto / pt / cm / px / in)
Margin-right
Margem direita de um elemento
Margin-top
Margem superior de um elemento
Margin-bottom
Margem inferior de um elemento
Margin
Atalho para definir todas as propriedades da
margem de um elemento.
Exemplo
p { margin-left : 50px; }
body { margin-right : 50px; }
p { margin-top : 6pt ;}
img { margin-bottom: 4pt; }
p { margin: 4pt 3pt 4pt 2pt;}
17. Propriedades de Posicionamento

Permite o posicionamento de um elemento em relao a outros elementos da pgina.
Propriedade
Descrio
Exemplo
Position
Posio do elemento em relao a pgina
img {position:absolute;
ou a outro elemento.
top:10; left:50;
(absolute / relative / static)
background:blue;}
Top
Posio do elemento em relao ao topo da p {position:absolute;
pgina ou a um outro elemento.
top:30; l eft:70;
(% / px)
background:red;}
Left
Posio do elemento em relao ao lado
div {position:absolute;
esquerdo da pgina ou a um outro elemento.
top:50; left:90;
(% / px)
background:green;}
Float
Envolve um elemento ao redor de outro
img {float: left;}
(alinhamento) - (none / left / right)
Clear
Controla a flutuao de um elemento em
img {clear:right;}
relao a outro. (none / right / left / both)
18. Seletor de Grupo

O seletor de grupo uma espcie de atalho, criando um conjunto de mesmas propriedades.
Selecionamos os elementos que devero ser formatados e os separamos por vrgulas.
Exemplo 18.1.:
<head>
h1, p, div {font-style:italic;}
</style>
</head>
<body>
<h1> Fonte em itlico </h1>
</p> Fonte em itlico </p>
<div> Fonte em itlico </div>
</body>
Neste exemplo, <H1>, <P> e <DIV> sairo em itlico.
FATEC-SP
10
Folhas de Estilo
19. Seletor Contextual

O seletor contextual permite um controle mais detalhado sobre a aparncia dos elementos HTML
em sua pgina. declarado de acordo com um contexto, sem vrgulas entre os elementos.
Um elemento s formatado quando estiver contido em um outro elemento.
Exemplo 19.1:
<head>
p b {text-decoration:underline;}
</style>
</head>
<body>
<b>Negrito fora de pargrafo</b>
<p> Pargrafo sem negrito</p>
<p> Pargrafo...<b> Negrito dentro do pargrafo</b>...pargrafo.</p>
</body>
Neste exemplo, sero formatados todos os negritos que estiverem dentro de pargrafos.
20. Seletor de Classe

As classes em CSS permitem definir diversas variaes para um nico elemento.
Para defini-las, basta utilizarmos um ponto (.) seguido pelo nome da classe a ser definida.
As classes podem estar associadas a um elemento especfico ou no.
Elas so chamadas atravs da palavra-chave "class" inserida na tag HTML que ser afetada
pelo estilo.
Elemento.NomedaClasse {propriedade:valor; ...}
</style>
Exemplo 20.1:
<head>
h3.classe1 {color:green; }
h3.classe2 {font-style:italic;}
</style>
</head>
<body>
<h3> sem estilo </h3>
<h3 class="classe1"> Estilo classe1 </h3>
<h3 class="classe2"> Estilo classe2 </h3>
</body>
Exemplo 20.2:
<head>
.classe3
{cursor:help;}
</style>
</head>
FATEC-SP
11
Folhas de Estilo
<body>
<a href="pag1.html" class="classe3"> link1 </a><br>
</body>
Neste exemplo, o formato do cursor mudar para uma interrogao (?) ao passar sobre o link.
Podemos usar a classe3 em qualquer tag HTML, pois ela no est vinculada a um elemento especfico.
21. Seletor de ID
A HTML introduziu o atributo ID, um identificador utilizado para garantir valores nicos sobre o
documento. O ID funciona semelhante s classes e representado pelo smbolo # (em ingls
conhecido como number sign, mas no Brasil como: sustenido, jogo da velha, cardinal, hash,
cerquinha, tralha, grade etc.)
A chamada da regra feita atravs do atributo ID da tag HTML.
Elemento#NomedoID {propriedade:valor; ...}
</style>
Exemplo 21.1:
<head>
p#id1{letter-spacing:0.5cm;}
#id2 {border:red groove 0.5cm;}
</style>
</head>
<body id="id2">
<p> Pargrafo sem id </p>
<p id="id1"> Pargrafo com id1 </p>
<img src="imagem1.jpg" id="id2">
</body>
Obs.: Utilizamos o id2 para formatar as tags <body> e <img> da HTML.
22. Seletor de Classe e ID

Podemos utilizar classes e identificadores na mesma tag e at com os mesmos nomes.
Exemplo 22.1:
<head>
.estilo1 {color:red;}
h2#estilo1{letter-spacing:0.4cm;}
</style>
</head>
<body>
<h2> h2 sem id </h2>
<h2 id="estilo1" class="estilo1"> h2 com id e classe</h2>
</body>
FATEC-SP
12
Folhas de Estilo
23. Seletor Universal

O seletor universal um dos mais poderosos em CSS e atua como um coringa, estilizando todos
os elementos de uma pgina. Ele representado por um asterisco *.
No exemplo a seguir, podemos alterar o preenchimento e a margem de cada elemento da pgina,
apenas com uma nica regra.
Exemplo 23.1:
<head>
* {padding: 20;
margin:20;
}
</style>
</head>
<body>
Corpo da pgina com margem e preenchimento
<h2>Ttulo com margem e preenchimento </h2>
<p> Pargrafo com margem e preenchimento</p>
<b> Negrito com margem e preenchimento </b>
</body>
24. Propriedades de Cursor

Alterando o formato do ponteiro do mouse atravs de classes.
Propriedade
Cursor
Descrio
Exemplo
.ponteiro {cursor:crosshair;}
Tipo de cursor
(hand/crosshair/help/move/wait/text/
n-resize/ne-resize/nw-resize/s-resize/
se-resize/sw-resize/e-resize/w-resize/url())
Exemplo 24.1:
<head>
.cursor1 {cursor: crosshair;
}
.cursor2 {cursor: help;
}
.cursor3 {cursor: wait;
}
</style>
</head>
<body>
<h2 class="cursor1"> Ttulo com cursor Crosshair </h2>
<p class="cursor2"> Pargrafo com cursor Help</p>
<a href="#" class="cursor3"> Link com cursor Wait </b>
</body>

FATEC-SP
13
Folhas de Estilo
25. Camadas
Uma camada uma seo de uma pgina da Web que pode ser tratada como uma entidade
separada. Ela se utiliza das propriedades de Folhas de Estilo e utilizada com linguagens de script,
pode ser atualizada, reposicionada na tela e tornada oculta ou aparente dinamicamente.
Propriedades
Position
Left / Top
Width / Height
Z-Index
Visibility
Background-color
Layer-background-color
Background-image
Layer-background-image
Descrio / Opes
Posio da camada no documento
(static/absolute/relative)
Deslocamento para a posio do item
Especifica a largura e altura do item
Especifica a sobreposio dos itens
Especifica se o item visvel (visible/hidden/inherit)
Cor de fundo para o texto da camada
Cor de fundo para a camada inteira
Imagem de fundo para o texto da camada
Imagem de fundo para a camada inteira
O browser Netscape utiliza a tag <LAYER> para definir camadas, mas esta tag no suportada pelo
I.E., por isso, comum verificarmos a criao de camadas atravs da tag <DIV> ou <SPAN> que so
aceitas pelos dois navegadores e com a qual iremos trabalhar.
Exemplo 25.1:
<body>
<div id="camada1" style="position:absolute; left:100;
top:100;background-color:blue">
Este o texto da camada
</div>
</body>
Exemplo 25.2:
<head>
.quadro {position:absolute;
top:50px;
left: 300px;
width:150px;
height:150px;
background:url(imagem1.jpg);
color:green;
font-size:16pt;
}
</style>
</head>
<body>
<span class=quadro>
Texto da camada
</span>
</body>

FATEC-SP
14
Folhas de Estilo
26. Layouts
Layouts basicamente referem-se a tamanho e posicionamento de elementos em uma pgina.
26.1. Centralizando um design com margens automticas

Para centralizar um div container (caixa grande que contm outras caixas) horizontalmente na
janela:
Defina a largura do div container (px ou %).

Configure as margens horizontais como auto.
Configure uma largura mnima para funcionar corretamente no Netscape (verso 6 ou
superior), quando a janela do navegador for reduzida abaixo da largura do container
(min-width).
Como o IE executa incorretamente text-align:center, centralizando tudo, utilize-o
ento no seletor body alinhado tudo, inclusive o container e ento alinhe o contedo do
container esquerda.
Obs,:O IE 5.x e IE 6 no modo no padro ignora margens automticas.

Exemplo 26.1.
#container { width:720px;
/* 720px para se ajustar

a resoluo 800x600 */
margin:0 auto;
text-align:left;
background-color:#ffffff;
padding:10px;
}
body {text-align:center;
background-color:#ccccff;
font-size:1em;
min-width: 760px;
}
</style>
</head>
<body>
<div id="container">
<h2> Ttulo 1 </h2>
Texto texto texto texto texto texto texto texto
<h2> Ttulo 2 </h2>
Texto texto texto texto texto texto texto texto
</div>
</body>
Trs dos mais importantes conceitos de CSS so flutuao, posicionamento e modelo de

caixa. Esses conceitos controlam a maneira como os elementos sero organizados e exibidos
em uma pgina, formando a base do layout CSS.
As caixas substituem com excelncia as tabelas que alguns programadores ou softwares

utilizam para organizar os dados.
FATEC-SP
15
Folhas de Estilo
26.2. Caixas
O modelo de caixa uma das pedras angulares da CSS e determina a maneira como os
elementos sero exibidos e como eles interagem entre si. Cada elemento na pgina
considerado uma caixa retangular composta de padding, border e margin.
26.2.1 Caixas Flutuantes
Caixas flutuantes podem ser mudadas para a esquerda ou para a direita, at que sua borda
externa toque a borda da caixa que a contm ou uma outra caixa flutuante. Caixas flutuantes no
esto no fluxo normal do documento. Se no houver espao horizontal suficiente, as caixas
flutuantes que no couberem sero deslocadas para baixo.
Exemplo 26.2.1.1:
.conteiner {border: 1px dotted red;
width: 760px;
overflow: hidden;
margin-bottom: 40px;
background: #FFFCC4;
}
.caixa {background: beige;
border: 1px dotted gray;
width: 200px;
height: 100px;
margin: 20px;
padding:10px;
}
.esq {float:left;
margin-left:10px; margin-right:45px;
}
.dir {float:right;
}
</style>
</head>
<body>
<div class="conteiner">
<div class="esq caixa">Caixa 1 - esq</div>
<div class="caixa">Caixa 2</div>
</div>
<div class="caixa dir">Caixa 4 - dir</div>
</div>
<div class="caixa esq">Caixa 7 - esq</div>
<div class="caixa dir">Caixa 8 - dir</div>
</div>
</body>
FATEC-SP
16
Folhas de Estilo
26.2.2. Caixas com cantos arredondados

Para criar uma caixa com os cantos arredondados, crie duas figuras com cantos arredondados,
uma para ser utilizada como imagem de plano de fundo na parte superior da caixa e a outra na
parte inferior.
A cor das figuras deve ser igual cor de plano de fundo da caixa. A largura da caixa deve ser
igual a largura da imagem.
Ex: top.jpg
bottom.jpg
Exemplo 26.2.2.1:
<head>
<style>
.box {width:307px;
background:gray url(bottom.jpg) no-repeat left bottom;
}
.box h3 {background:url(top.jpg) no-repeat left top;
padding: 10px 20px 0px 20px;
}
.box p {padding: 0px 0px 10px 20px;
}
</style>
</head>
<body>
<div class="box">
<h3> Ttulo do texto </h3> teste
<p> Texto do pargrafo <br>
Texto do pargrafo <br>
Texto do pargrafo <br>
</p>
</div>
</body>
26.3. Menu deslizante
Menu deslizante um conjunto de links formatados como caixas, que se deslocam com a
passagem do mouse sobre eles. O deslizamento se d pela alterao da margem do link, criando
um recuo quando o usurio passa com o ponteiro do mouse sobre ele.
No exemplo abaixo, foi adicionado uma imagem de segundo plano na situao visited, alinhada
direita da caixa, para indicar link j visitado.
Exemplo 26.3.1:
<style>
body {background:rgb(253,253,187);
}
a {display:block; width: 6em;
color:white; text-decoration:none;
border-bottom:white solid 1px;
font-size:1em; line-height:15px;
padding:0.2em; text-align:center;
background:violet;
}
FATEC-SP
17
Folhas de Estilo
a:visited {background: violet url("seta2.png") no-repeat right;

display:block; width: 6em;
color:white; text-decoration:none;
border-bottom:white solid 1px;
font-size:1em; line-height:15px;
padding:0.2em;
text-align:center;
}
a:hover {background: purple;
font-style:italic; font-weight:bold;
color:yellow; text-align:center;
width: 6em; margin-left:20;
}
</style>
</head>
<body>
<a
<a
<a
<a
</body>
href="pag1.html">
href="pag2.html">
href="pag3.html">
href="pag4.html">
link1
link2
link3
link4
</a>
</a>
</a>
</a>
27. Filtros
Efeitos visuais apareceram pela primeira vez como controles de ActiveX e posteriormente foram
incorporados como propriedades de Folhas de Estilo aceitas inicialmente pelo browser Internet
Explorer v4.0.
Efeitos anteriormente que s poderiam ser criados com aplicativos como o Photoshop em
arquivos de imagem agora podem ser usados em qualquer objeto HTML, como por exemplos
bloco de texto, tabelas, links, bordas etc e inclusive criar efeitos dinmicos!!
Eles so fceis de aprender e basicamente sua sintaxe a seguinte:
<div style="filter:nome(parmetro=valor, parmetro=valor,etc...)">
objeto
</div>
Onde nome define o tipo de filtro, parmetro define suas propriedades de formatao e valor,
suas unidades que geralmente so graus, pixels, %, etc.
A seguir, ser apresentada uma relao de filtros em ordem alfabtica, bem como seus
parmetros e alguns exemplos interessantes. Voc pode aplicar diversos filtros em um mesmo
objeto, criando uma variedade de efeitos conforme manda a sua imaginao.
Obs.: Para executar os exemplos fornecidos nesta apostila, escolha imagens coloridas, do tipo
.jpg (fotografia) e .gif (desenho).
27.1. Filtro Alpha
O filtro Alpha cria um efeito de transparncia total ou parcial no objeto por ele envolvido, de forma
que quanto menor for a sua graduao de porcentagem, definida por opacity=%, maior ser a
sua transparncia.
FATEC-SP
18
Folhas de Estilo
Parmetros:
Propriedades
Opacity
FinishOpacity
Style
StartX
StartY
FinishX
FinishX
Descrio / Opes
Apresenta o grau de transparncia do objeto e seu valor refere-se a %.
Opacity=100 apresenta um objeto totalmente opaco e opacity=0 um objeto
totalmente invisvel.
Define o nvel de opacidade e seus valores vo de 0 a 100%.
Seus estilos podem ser 0 (uniforme), 1 (linear), 2 (radial) ou 3 Retangular.
Coordenada horizontal para comeo do gradiente de opacidade.
Coordenada vertical para comeo do gradiente de opacidade.
Coordenada horizontal para o fim do gradiente de opacidade.
Coordenada vertical para o fim do gradiente de opacidade.
Nos exemplos a seguir, formatamos um texto em azul e inclumos uma imagem colorida.
Aplicaremos neles diversos graus de opacidade com estilos diferentes, testados no I.E.
Texto e Imagem Sem Filtros:
<body text="blue">
<h1> TEXTO E IMAGEM SEM FILTRO </h1>
<img src="imagem1.gif">
Exemplo 27.1.1. Alpha Uniforme:
<div style="font-size: 24pt; font-family: arial black; height:1;
filter:Alpha(opacity=20)">
<h1> FILTRO ALPHA UNIFORME </h1>
</div>
Exemplo 27.1.2. Alpha Linear:
filter:Alpha(style=1)">
<h1> FILTRO ALPHA LINEAR </h1>
</div>
Exemplo 27.1.3. Alpha Radial Interno:
<div style="font-size:24pt; font-family: arial black; height:1;
filter:Alpha(opacity=0, FinishOpacity=50, style=2)">
<h1> FILTRO ALPHA RADIAL INTERNO </h1>
</div>
Exemplo 27.1.4. Alpha Radial Externo:
filter:Alpha(opacity=60, style=2)">
<h1> FILTRO ALPHA RADIAL EXTERNO </h1>
</div>
27.2. Filtro Blur
O filtro Blur cria um efeito difuso diminuindo a definio das bordas do objeto. Sua sombra
apresenta a mesma cor do objeto, porm com uma textura mais atenuada.
FATEC-SP
19
Folhas de Estilo
Parmetros:
Propriedades
Add
Direction
Strength
Descrio / Opes
Parmetro booleano, 1 Sombreamento ntido, 0 Sombreamento difuso.
Define o ngulo em que o efeito deve acontecer.
Seu valor vai de 0 (topo) em incrementos de 45 graus at 315 graus.
Define o comprimento que o efeito deve ter. Default = 5.
Exemplo 27.2.1. Blur:

<div style="height:1; filter:blur(direction=45,add=0,strength=6)">
<h1> FILTRO BLUR </h1>
<img src="imagem1.gif.jpg">
</div>
Obs.: No exemplo dado, repare que a difuso acompanha as cores do texto.
27.3. Filtro Chroma:
O filtro Chroma torna uma cor especfica do objeto transparente. No exemplo a seguir, a imagem
imagem1.gif possui um fundo branco, que cria um contraste com o background da pgina.
Porm, com o filtro chroma, o fundo branco (#FFFFFF) da imagem pode ser neutralizado
simulando uma imagem GIF de fundo transparente.
Parmetros:
Propriedade
color
Descrio
Define uma cor do cdigo RGB que sofrer o efeito de transparncia.
Exemplo 27.3.1. Chroma:

<body bgcolor="navy" text=white>
<div style="filter:chroma(color=ffffff); height:1">
<h1> FILTRO CHROMA </h1>
</div>
obs.: O filtro no funcionar se a cor selecionada para o efeito no existir na figura.
27.4. Filtro Dropshadow
O filtro Dropshadow cria um eleito de sombra slida no objeto, que pode ser direcionada
conforme o ngulo desejado.
Parmetros:
Propriedades
Color
Offx
Offy
Positive
Descrio / Opes
Define a cor RGB (#rrggbb) da sombra. Os valores so em hexadecimal.
Determina a distncia de afastamento em "x" (horizontal).
Os valores em pixels (px) podem ser positivos ou negativos.
Determina a distncia de afastamento em "y" (vertical).
Os valores em pixels (px) podem ser positivos ou negativos.
Parmetro booleano: 1 para sombra positiva. 0 para sombra negativa.

FATEC-SP
20
Folhas de Estilo
Exemplo 27.4.1. Dropshadow:

<div style="filter:dropshadow(color=#1e90ff,offx=-3,offy=-3,
positive=1); height:1">
<h1> FILTRO DROPSHADOW </h1>
</div>
Obs.: Embora esse filtro possa ser aplicado em qualquer objeto, ele apresentar um melhor
resultado em fontes ou imagens com fundos transparentes ou vazados.
27.5. Filtro FlipH
O filtro Fliph cria no objeto um efeito de imagem invertida no sentido horizontal, como o reflexo
de um espelho.
Exemplo 27.5.1. Fliph:
<div style="filter:fliph; height:1; font-size:20px;">
<h1> FILTRO FLIPH </h1>
</div>
27.6. Filtro FlipV
O filtro Flipv cria no objeto um efeito de imagem invertida no sentido vertical, como o reflexo
na superfcie de um lago.
Exemplo 27.6.1. Flipv:
<div style="filter:flipv; height:1; font-size:20px;">
<h1> FILTRO FLIPV </h1>
</div>
27.7. Filtro Glow
O filtro Glow cria um efeito de borramento nos contornos do objeto. Este borramento pode
assumir uma cor diferente do objeto. No exemplo a seguir, o objeto possui bordas brancas e o
texto est escrito em preto, no entanto, seu borramento azul (color=#0000FF).
Parmetros:
Propriedades
Color
Strength
Descrio / Opes
Define a cor RGB (#rrggbb) do borramento.
Determina a distncia de afastamento do efeito. Seu valor em pixels (px) e
pode ser valor positivo (borramento externo) ou negativo (borramento interno).
Exemplo 27.7.1. Glow:

<body>
<div style="filter:glow(color=#0000FF, strength=10); height:1">
<h1> FILTRO GLOW </h1>
</div>

FATEC-SP
21
Folhas de Estilo
27.8. Filtro Gray

O filtro Gray anula os efeitos de cor do objeto apresentando-o em tons de cinza.
Exemplo 27.8.1. Gray:
<body text=red>
<div style="filter:gray; height:1">
<h1> FILTRO GRAY </h1>
</div>
27.9. Filtro Invert
O filtro Invert tem a propriedade de inverter a matriz de cores do objeto criando um efeito
semelhante ao negativo de uma fotografia.
Exemplo 27.9.1. Invert:
<body text=red>
<div style="filter:invert; height:1">
<h1> FILTRO INVERT </h1>
</div>
27.10. Filtro Motion Blur
O filtro Motion Blur cria um efeito de movimento no objeto.
Parmetros:
Propriedades
Strenght
Direction
Descrio / Opes
Define o comprimento do efeito, seu valor em pixels.
Define o grau em que o efeito deve ocorrer.
Ele pode ser de 0 a 360 graus.
progid:DXImageTransform.Microsoft Parmetros proprietrios da Microsoft.
No exemplo a seguir, repare que as imagens com efeito Motion Blur sofrem uma deslocao
no sentido do movimento que o efeito causou. Isso acontece porque o efeito passa a fazer parte
da imagem alterando o seu centro de equilbrio.
Exemplo 27.10.1. Motion Blur:
<div
style="filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=40,
direction=30);
height:1; ">
<h1> FILTRO MOTION BLUR </h1>
</div>
27.11. Filtro Wave
O filtro Wave cria um efeito de ondulao no objeto.

FATEC-SP
22
Folhas de Estilo
Parmetros:
Propiedades
add
freq
lightstrength
phase
strength
Descrio / Opes
Parmetro booleano: 1 cria o efeito wave, 0 anula o efeito.
Define o nmero de ondulaes que o objeto deve sofrer.
Define a intensidade de ondulao luminosa. Seu valor vai de 0 a 100%.
Define a freqncia da ondulao, seu valor vai de 0 a 360graus.
Define a intensidade da ondulao da imagem.
Exemplo 27.11.1. Wave:

<div style="filter:wave(freq=13,lightstrength=30); height:1">
<h1> FILTRO WAVE </h1>
</div>
27.12. Filtro Xray
O filtro Xray cria um efeito semelhante ao filtro Gray transformando as cores do objeto em tons
de cinza s que em negativo.
Exemplo 27.12.1. Xray:
<div style="filter:xray; height=1">
<h1> FILTRO WAVE </h1>
</div>
28. Inserindo um cone na Barra de Endereo e na Guia do Navegador

Para inserir um cone na barra de endereo de alguns navegadores e tambm em sua guia (aba),
faa a chamada da imagem atravs do link abaixo a partir do cabealho da pgina HTML,
atribuindo o valor shortcut icon propriedade rel da tag link.
<head>
<link rel="shortcut icon" href="icone1.ico">
</head>
29. Algumas palavras...

A apostila terminou, mas CSS no termina aqui...
Muitos recursos ainda so oferecidos em termos de estilizao de pginas, alguns podem ser
aprendidos atravs de livros, Internet...
Mas a criatividade ainda impera! Ela no tem limites!
Portanto, se voc gostou, os prximos passos agora com voc.
Pesquise, teste, invente, observe!!!
E boa caminhada!

FATEC-SP
23
Folhas de Estilo
30. Bibliografia
Criando Pginas Web com CSS

Andy Budd Cameron Moll Simon Collison
Ed. Pearson / Prentice Hall - 2006
Iniciando em Javascript 1.5

Adrian Kingsley-Hughes
Kathie Kingsley-Hughes
Ed. Makron Books - 2001
HTML 4 com XML

Gerardo Mazzetti - Carlos Mink
Ed. Makron Books - 2000
Javascript 1.3 - Aprenda em 24 horas

Michael Moncur
Ed. Campus - 1999
Revista on the Net Especial HTML

Ano1 - n 04
31. Tutoriais
http://www.w3.org/TR/REC-CSS1-961217
http://www.w3.org/1999/REC-CSS1-19990111
http://www.w3.org/TR/REC-CSS1
http://orbita.starmedia.com/~edaurelio/css.htm (2001/2004)

FATEC-SP
24
Folhas de Estilo
32. CSS2 Reference

From http://www.w3schools.com
Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.
W3C: The number in the "W3C" column indicates in which CSS recommendation the property is
defined (CSS1 or CSS2).
BACKGROUND
Property
background
backgroundattachment
background-color
background-image
background-position
background-repeat
Description
A shorthand property for
setting all background
properties in one
declaration
Values
background-color
background-image
background-repeat
backgroundattachment
background-position
Sets whether a background scroll
image is fixed or scrolls
fixed
with the rest of the page
Sets the background color color-rgb
of an element
color-hex
color-name
transparent
Sets an image as the
url
background
none
Sets the starting position of top left
a background image
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x-% y-%
x-pos y-pos
Sets if/how a background
repeat
image will be repeated
repeat-x
repeat-y
no-repeat
IE F N W3C
4
1 6 1
BORDER
Property
border
Description
setting all of the properties
for the four borders in one
declaration
Values
border-width
border-style
border-color

FATEC-SP
IE F N W3C
4
1 4 1
25
Folhas de Estilo
border-bottom

border-bottom-width
setting all of the properties border-style
for the bottom border in one border-color
declaration

FATEC-SP
26
Folhas de Estilo
BORDER (Cont.)
Property
border-bottom-color
border-bottom-style
border-bottom-width
border-color
border-left
border-left-color
border-left-style
border-left-width
border-right
border-right-color
border-right-style
border-right-width
border-style
border-top
Description
Sets the color of the bottom
border
Sets the style of the bottom
border
Sets the width of the
bottom border
Sets the color of the four

borders, can have from one
to four colors
for the left border in one
declaration
Sets the color of the left
border
Sets the style of the left
border
Sets the width of the left
border

for the right border in one
declaration
Sets the color of the right
border
Sets the style of the right
border
Sets the width of the right
border
Values
border-color
IE F N W3C
4
1 6 2
border-style
thin
medium
thick
length
color
border-left-width
border-style
border-color
border-color
border-style
thin
medium
thick
length
border-right-width
border-style
border-color
border-color
border-style
thin
medium
thick
length
Sets the style of the four
none
borders, can have from one hidden
to four styles
dotted
dashed
solid
double
groove
ridge
inset
outset
border-top-width
setting all of the properties border-style
for the top border in one
border-color
declaration
FATEC-SP
27
Folhas de Estilo
BORDER (Cont.)
Property
border-top-color
Description
Sets the color of the top
border
Values
border-color
IE F N W3C
4
1 6 2
border-top-style
Sets the style of the top

border
Sets the width of the top
border
border-style
border-top-width
border-width
thin
medium
thick
length
thin
setting the width of the four medium
borders in one declaration, thick
can have from one to four length
values
CLASSIFICATION
Property
clear
cursor
display
Description
Sets the sides of an
element where other
floating elements are not
allowed
Specifies the type of cursor
to be displayed
Sets how/if an element is

displayed
Values
left
right
both
none
url
auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
none
inline
block
list-item
run-in
compact
marker
table
inline-table
table-row-group
table-header-group

FATEC-SP
IE F N W3C
4
1 4 1
28
Folhas de Estilo
CLASSIFICATION (Cont.)
Property
display (cont.)
Description
Sets how/if an element is
displayed
float
Sets where an image or a

text will appear in another
element
Places an element in a
static, relative, absolute or
fixed position
position
visibility
Sets if an element should

be visible or invisible
Values
table-footer-group
table-row
table-column-group
table-column
table-cell
table-caption
left
right
none
static
relative
absolute
fixed
visible
hidden
collapse
IE F N W3C
4
1 4 1
DIMENSION
Property
height
line-height
max-height
max-width
min-height
min-width
width
Description
Sets the height of an
element
Values
auto
length
%
Sets the distance between normal
lines
number
length
%
Sets the maximum height none
of an element
length
%
Sets the maximum width of none
an element
length
%
Sets the minimum height of length
an element
%
Sets the minimum width of length
an element
%
Sets the width of an
auto
element
%
length
IE F N W3C
4
1 6 1
FONT
Property
Font
Description
Values
font-style
setting all of the properties font-variant
for a font in one declaration font-weight
font-size/line-height
font-family
FATEC-SP
IE F N W3C
4
1 4 1
29
Folhas de Estilo
FONT (Cont.)
Property
Font (cont.)
font-family
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-weight
Description
Values
caption
setting all of the properties icon
for a font in one declaration menu
message-box
small-caption
status-bar
A prioritized list of font
family-name
generic-family
family names and/or
generic family names for an
element
Sets the size of a font
xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
length
%
Specifies an aspect value none
for an element that will
number
preserve the x-height of the
first-choice font
Condenses or expands the normal
current font-family
wider
narrower
ultra-condensed
extra-condensed
condensed
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded
Sets the style of the font
normal
italic
oblique
Displays text in a smallnormal
caps font or a normal font small-caps
Sets the weight of a font
normal
bold
bolder
lighter
100
200
300
400
500
600
700
FATEC-SP
IE F N W3C
4
1 4 1
30
Folhas de Estilo
FONT (Cont.)
Property
font-weight (cont.)
Description
Sets the weight of a font
Property
content
Description
Generates content in a
document. Used with the
:before and :after pseudoelements
Values
800
900
IE F N W3C
4
1 4 1
GENERATED CONTENT
counter-increment
counter-reset
quotes
Values
IE
string
url
counter(name)
counter(name, liststyle-type)
counters(name, string)
counters(name, string,
list-style-type)
attr(X)
open-quote
close-quote
no-open-quote
no-close-quote
Sets how much the counter none
increments on each
identifier number
occurrence of a selector
Sets the value the counter none
is set to on each
identifier number
occurrence of a selector
Sets the type of quotation none
marks
string string
F N W3C
1 6 2
LIST AND MARKER

Property
list-style
list-style-image
list-style-position
list-style-type
Description
for a list in one declaration
Sets an image as the listitem marker
Sets where the list-item
marker is placed in the list
Sets the type of the list-item
marker
Values
list-style-type
list-style-position
list-style-image
none
url
inside
outside
none
disc
circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-alpha
upper-alpha
lower-greek
lower-latin

FATEC-SP
IE F N W3C
4
1 6 1
31
Folhas de Estilo
LIST AND MARKER (Cont.)

Property
list-style-type (cont.)
marker-offset
Description
Values
Sets the type of the list-item upper-latin
marker
hebrew
armenian
georgian
cjk-ideographic
hiragana
katakana
hiragana-iroha
katakana-iroha
auto
length
IE F N W3C
4
1 4 1
MARGIN
Property
margin
margin-bottom
Description
setting the margin
properties in one
declaration
Sets the bottom margin of
an element
margin-left
Sets the left margin of an

element
margin-right
Sets the right margin of an

element
margin-top
Sets the top margin of an

element
Values
margin-top
margin-right
margin-bottom
margin-left
auto
length
%
auto
length
%
auto
length
%
auto
length
%
IE F N W3C
4
1 4 1
OUTLINES
Property
outline
outline-color
outline-style
Description
setting all the outline
properties in one
declaration
Sets the color of the outline
around an element
Sets the style of the outline
around an element
Values
outline-color
outline-style
outline-width
IE F
- 1.5
N W3C
- 2
color
invert
none
dotted
dashed
solid
double
groove
ridge
inset
outset
1.5
1.5

FATEC-SP
32
Folhas de Estilo
OUTLINES (Cont.)
outline-width
Sets the width of the outline thin

around an element
medium
thick
length
Property
padding
Description
setting all of the padding
properties in one
declaration
Sets the bottom padding of
an element
Values
padding-top
padding-right
padding-bottom
padding-left
length
%
IE F N W3C
4
1 4 1
Sets the left padding of an

element
Sets the right padding of an
element
Sets the top padding of an
element
length
%
length
%
length
%
1.5
PADDING
padding-bottom
padding-left
padding-right
padding-top
POSITIONING
Property
bottom
clip
left
overflow
position
right
Description
Sets how far the bottom
edge of an element is
above/below the bottom
edge of the parent element
Sets the shape of an
element. The element is
clipped into this shape, and
displayed
Sets how far the left edge
of an element is to the
right/left of the left edge of
the parent element
Sets what happens if the
content of an element
overflow its area
Values
auto
%
length
IE F N W3C
5
1 6 2
shape
auto
auto
%
length
visible
hidden
scroll
auto
Places an element in a
static
static, relative, absolute or relative
fixed position
absolute
fixed
Sets how far the right edge auto
of an element is to the
%
left/right of the right edge of length
the parent element

FATEC-SP
33
Folhas de Estilo
POSITIONING (Cont.)
Property
top
vertical-align
z-index
Description
Sets how far the top edge
of an element is
above/below the top edge
of the parent element
Sets the vertical alignment
of an element
Sets the stack order of an

element
Values
auto
%
length
IE F N W3C
4
1 4 2
baseline
sub
super
top
text-top
middle
bottom
text-bottom
length
%
auto
number
Values
collapse
separate
length length
IE F N W3C
5
1 7 2
TABLE
Property
border-collapse
border-spacing
caption-side
empty-cells
table-layout
Description
Sets the border model of a
table
Sets the distance between
the borders of adjacent
cells (only for the
"separated borders" model)
Sets the position of the
caption according to the
table
top
bottom
left
right
Sets whether cells with no show
visible content should have hide
borders or not (only for the
"separated borders" model)
Sets the algorithm used to auto
lay out the table
fixed
TEXT
Property
color
direction
letter-spacing
text-align
Description
Sets the color of a text
Sets the text direction
Increase or decrease the
space between characters
Aligns the text in an
element
Values
color
ltr
rtl
normal
length
left
right
center
justify

FATEC-SP
IE F N W3C
3
1 4 1
6
1 6 2
4
34
Folhas de Estilo
TEXT (Cont.)
Property
text-decoration
Description
Adds decoration to text
text-indent
Indents the first line of text

in an element
text-shadow
text-transform
Controls the letters in an

element
unicode-bidi
white-space
word-spacing
Sets how white space

inside an element is
handled
Increase or decrease the
space between words
Values
none
underline
overline
line-through
blink
length
%
none
color
length
none
capitalize
uppercase
lowercase
normal
embed
bidi-override
normal
pre
nowrap
normal
length
IE F N W3C
4
1 4 1
PSEUDO-CLASSES
Pseudo-class
:active
:focus
:hover
:link
:visited
:first-child
:lang
Purpose
Adds special style to an activated element
Adds special style to an element while the element
has focus
Adds special style to an element when you mouse
over it
Adds special style to an unvisited link
Adds special style to a visited link
Adds special style to an element that is the first
child of some other element
Allows the author to specify a language to use in a
specified element
IE F N W3C
4
1 8 1
- - 2
4
3
3
1
1
1
4
4
7
1
1
2
N
8
8
8
8
W3C
1
1
2
2
PSEUDO-ELEMENTS
Pseudo-element
:first-letter
:first-line
:before
:after
Purpose
Adds special style to the first letter of a text
Adds special style to the first line of a text
Inserts some content before an element
Inserts some content after an element
IE F
5 1
5 1
1.5
1.5
(Copyright Refsnes Data)

FATEC-SP
35

Css 2

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Css 2

Diunggah oleh

Hak Cipta:

Format Tersedia

Faculdade

Cascading Style Sheets - CSS

Formatando pginas em HTML

Prof. Elisabete da Silva Santos

Departamento de Processamento de Dados

FOLHAS DE ESTILO ..................................................................................................................................................... 4

INTRODUO A FOLHAS DE ESTILO ...................................................................................................................... 4

INSERINDO UM CONE NA BARRA DE ENDEREO E NA GUIA DO NAVEGADOR................................................ 23

Prof. Elisabete da Silva Santos

1. Introduo a Folhas de Estilo

5. Comentrios Inseridos no Cdigo

8. Propriedades de Plano de Fundo

Define a posio da imagem de fundo

9. Propriedade de Cores de Fontes

10. Propriedades de Links

11. Propriedades de Barra de Rolagem

12. Propriedades de Listas

13. Propriedades de Padding

14. Propriedades de Bordas

15. Propriedades de Redimensionamento

16. Propriedades de Margens

17. Propriedades de Posicionamento

18. Seletor de Grupo

19. Seletor Contextual

20. Seletor de Classe

22. Seletor de Classe e ID

23. Seletor Universal

24. Propriedades de Cursor

Prof. Elisabete da Silva Santos

Prof. Elisabete da Silva Santos

26.1. Centralizando um design com margens automticas

Defina a largura do div container (px ou %).

Obs,:O IE 5.x e IE 6 no modo no padro ignora margens automticas.

/* 720px para se ajustar

Trs dos mais importantes conceitos de CSS so flutuao, posicionamento e modelo de

As caixas substituem com excelncia as tabelas que alguns programadores ou softwares

26.2.2. Caixas com cantos arredondados

a:visited {background: violet url("seta2.png") no-repeat right;

Exemplo 27.2.1. Blur:

Exemplo 27.3.1. Chroma:

Prof. Elisabete da Silva Santos

Exemplo 27.4.1. Dropshadow:

Exemplo 27.7.1. Glow:

Prof. Elisabete da Silva Santos

27.8. Filtro Gray

Prof. Elisabete da Silva Santos

Exemplo 27.11.1. Wave:

28. Inserindo um cone na Barra de Endereo e na Guia do Navegador

29. Algumas palavras...

Prof. Elisabete da Silva Santos

Criando Pginas Web com CSS

Iniciando em Javascript 1.5

HTML 4 com XML

Javascript 1.3 - Aprenda em 24 horas

Revista on the Net Especial HTML

Prof. Elisabete da Silva Santos

32. CSS2 Reference

Prof. Elisabete da Silva Santos

A shorthand property for

Prof. Elisabete da Silva Santos

Sets the color of the four

A shorthand property for

Sets the style of the top