Css Simples

Faculdade de Tecnologia de São Paulo
Cascading Style Sheets - CSS
Iniciante e Intermediário
Formatando páginas 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. INTRODUÇÃO A FOLHAS DE ESTILO ...................................................................................................................... 4
2. ESTILO INLINE ...................................................................................................................................................... 4
3. ESTILO INCORPORADO .......................................................................................................................................... 4
4. ESTILO EXTERNO .................................................................................................................................................. 5
5. COMENTÁRIOS INSERIDOS NO CÓDIGO ................................................................................................................. 6
6. PROPRIEDADES DE FONTE ..................................................................................................................................... 6
7. PROPRIEDADES DE TEXTO ..................................................................................................................................... 7
8. PROPRIEDADES DE PLANO DE FUNDO ................................................................................................................... 7
9. PROPRIEDADE DE CORES DE FONTES .................................................................................................................... 7
10. PROPRIEDADES DE LINKS ................................................................................................................................. 8
11. PROPRIEDADES DE BARRA DE ROLAGEM ......................................................................................................... 8
12. PROPRIEDADES DE LISTAS................................................................................................................................ 8
13. PROPRIEDADES DE PADDING ............................................................................................................................ 9
14. PROPRIEDADES DE BORDAS ............................................................................................................................. 9
15. PROPRIEDADES DE REDIMENSIONAMENTO ....................................................................................................... 9
16. PROPRIEDADES DE MARGENS......................................................................................................................... 10
17. PROPRIEDADES DE POSICIONAMENTO ............................................................................................................ 10
18. SELETOR DE GRUPO ....................................................................................................................................... 10
19. SELETOR CONTEXTUAL .................................................................................................................................. 11
20. SELETOR DE CLASSE ...................................................................................................................................... 11
21. SELETOR DE ID .............................................................................................................................................. 12
22. SELETOR DE CLASSE E ID .............................................................................................................................. 12
23. SELETOR UNIVERSAL ..................................................................................................................................... 13
24. PROPRIEDADES DE CURSOR............................................................................................................................ 13
25. CAMADAS ...................................................................................................................................................... 14
26. LAYOUTS ....................................................................................................................................................... 15
27. 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. INSERINDO UM ÍCONE NA BARRA DE ENDEREÇO E NA GUIA DO NAVEGADOR................................................ 23
29. ALGUMAS PALAVRAS... .................................................................................................................................. 23
30. BIBLIOGRAFIA ................................................................................................................................................ 24
31. TUTORIAIS ..................................................................................................................................................... 24
32. CSS2 REFERENCE .......................................................................................................................................... 25
Profª. Elisabete da Silva Santos 3

FATEC-SP
Folhas de Estilo
FOLHAS DE ESTILO
"CRIANDO PÁGINAS COM ESTILO"
1. Introdução a Folhas de Estilo
Folhas de Estilo em Cascata (Cascading Style Sheets ou CSS) são regras utilizadas para a
formatação de páginas HTML. Através delas o código HTML é otimizado, podendo complementar
as definições obtidas através de tags HTML, como também alterar e criar efeitos especiais em
títulos, textos e elementos como imagens, formulários, barras de rolagem etc. Portanto, têm como
pré-requisito o conhecimento da linguagem HTML..
As tags HTML sem as marcas “<”(sinal de menor) e “>” (sinal de maior) são utilizadas como
elementos (seletores) em Folhas de Estilo.
Há três modos de inserção de regras para os elementos em uma página HTML:

Inline - Dentro da tag HTML;
Incorporado – Dentro do cabeçalho da página HTML;
Externo – Em um arquivo externo.
Se houver conflito de regras entre os modos de inserção, prevalecerá o modo que for definido
mais próximo a tag.
O resultado de Folhas de Estilo pode variar de acordo com o navegador utilizado, é recomendável
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
página. Esta regra afeta somente a tag utilizada:
<body>
<tag style="propriedade1:valor1; propriedade2:valor2a, valor2b;...">
</body>
Atributos / Formato Descrição

Tag Tag HTML a ser formatada com Folhas de Estilo
Style Chamada das regras de Folhas de Estilo
Propriedade Tipo de estilo a ser definido
Valor Conteúdo do tipo de estilo
Exemplo 2.1:
<body>
<h3 style="color:red; text-decoration:underline;" > Título </h3>
</body>
3. Estilo Incorporado
O Estilo é Incorporado quando definimos as regras de Folhas de Estilo no cabeçalho do

documento HTML, entre as tags <style> e </style>. Neste modo, a página 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 Descrição

<style> e </style> Tags de início e término de definição de Folhas de Estilo
Type Tipo ("text/css") - Texto contendo Folhas de Estilo em Cascata
Seletor Tag html sem as marcas “<" e “>" (elemento)
Propriedade Tipo de estilo a ser definido
Valor Conteúdo do tipo de estilo
Exemplo 3.1:
<head>
h1 { color:red;
font-style:"italic";
}
</style>
</head>
<body>
<h1> Título utilizando o estilo definido no cabeçalho </h1>
Texto normal entre as tags de título...
<h1> Outro título utilizando o estilo definido no cabeçalho </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 extensão .css. As regras de estilos afetarão as página HTML que fizerem
chamada a este arquivo.
No arquivo externo só definimos as regras, ele não possui indicações de início e término do
código. É muito útil para alterar a aparência de várias páginas ao mesmo tempo.
A chamada deste arquivo é feita no cabeçalho de cada página HTML:
<head>
<link rel="..." href="..." type="...">
</head>
Atributos Descrição / Opções

Link Ligação entre a página e o arquivo externo
Rel Informa ao navegador o que ele irá encontrar ("stylesheet")
Href Endereço do arquivo externo contendo as regras de estilos
Type 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> Parágrafo utilizando o estilo definido no arquivo externo </p>
</body>
Conteúdo do arquivo externo: estilo1.css:
b {background-color: "red"; color: "white"; font-size: "14pt"; }

p {color: "green"; font-style: "italic"; }
5. Comentários Inseridos no Código
Utilizamos as marcas de comentário para ocultarmos os comentários escritos dentro do código

CSS, para que eles não apareçam quando a página for carregada, nem provoquem erros.
/* Comentário */
Exemplo 5.1:
/* Linha 1 de comentário
Linha 2 de comentário... */
Podemos comentar Folhas de Estilo com as tags de comentário de HTML, para os navegadores
que não suportam Folhas de Estilo e tão pouco a tag <nostyle>.
Exemplo 5.2:

</style>
6. Propriedades de Fonte
Tabela de propriedades de estilos aplicáveis em fontes.

Propriedades Descrição / Opções Exemplos
Font-family Família genérica de fontes p { font-family: Arial, Courier;
(Arial / Courier / Helvética / Tahoma....) }
Font-size Tamanho da fonte (unidades: pt / cm / px / p { font-size: 12pt;
in / % / xx-small / x-small / medium / large / }
x-large / xx-large / larger)
Font-style Estilo da fonte p { font-style : italic;
(normal / italic / oblique ) }
Font-variant Aplica uma variação na fonte p {font-variant: small-caps;
(normal / small-caps) }
Font-weight Espessura do traçado da fonte p { font-weight: bold;
(extra-light / light / demi-light / medium / }
demi-bold / bold / extra-bold / px)
Font Atalho para definir todas as propriedades da p { font :arial, italic, 3pt;
fonte(font-style / font-variant / font-weight / }
font-size / font-family / line-height)

FATEC-SP
Folhas de Estilo
7. Propriedades de Texto
Tabela de propriedades de estilos aplicáveis em textos.

Line-height Espaçamento entre parágrafos p { line-height : 30pt;
(pt / cm / px / in / %) }
Text-align Alinhamento do texto p { text-align : center;
(left / center / right / justify) }
Text-decoration Demais estilos de uma fonte p { text-decoration: italic;
(none / underline / overline/ blink / }
line-through)
Text-indent Indentação de texto (recuo da primeira linha) p { text-indent : 6pt;
(pt / cm / px / in) }
Word-spacing Controla o espaço entre as palavras p { word-spacing: 4pt;
(normal / no) }
Letter-spacing Controla o espaço entre as letras p { letter-spacing: 2pt;
(normal / no) }
Vertical-align Controla o alinhamento vertical do elemento p { vertical-align: sub;
(baseline / middle / sub / super / text-top / }
Text- bottom / %)
Text-transform Modifica o estado de um texto, ex.: de p { text-transform: uppercase; }
maiúscula para minúscula
(none/ uppercase / lowercase / capitalize)
8. Propriedades de Plano de Fundo
Tabela de propriedades de estilos aplicáveis em plano de fundo.

Background- Cor de fundo de um texto ou página body { background-color:"blue";
color (RGB / Hexa / Nome da cor em Inglês ) }
Background- Define uma imagem de fundo para um body { background-image:
image elemento url(“imagem.jpg”); }
Background- Determina a forma de repetição de uma body { background-repeat:
repeat imagem de fundo no-repeat; }
(repeat / repeat-x / repeat-y / no-repeat)
Background- Define se a imagem de fundo deve rolar body { background-attachment:
attachment junto com a página. (scroll / fixed) "fixed"; }
Background- Define a posição da imagem de fundo body { background-position:
position (par de valores / n / % / top / bottom / left / top center"; }
right / center)
Background Atalho para todas as propriedades de body { background:
background. url("foto1.jpg”) beige
no-repeat fixed right; }
9. Propriedade de Cores de Fontes
Tabela de propriedade de estilos de cores aplicáveis em fontes.

Propriedade Descrição / Opções Exemplos
Color Cor do texto ou elemento no primeiro plano p { color: “#5e82a4”; }
(RGB / Hexadecimal / Nome da cor em li { color: “rgb(0,0,255)”; }
Inglês ) b{ color: “violet”; }
FATEC-SP
Folhas de Estilo
10. Propriedades de Links
Tabela de propriedades de estilos aplicáveis em links (pseudo-classes).

A:link Link normal (Link antes de ser clicado) a:link {color:"blue"; }
A:active Link ativado (Link da página atual carregada) a:active {color:green";}
A:visited Link visitado (Link após 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 aplicáveis em barras de rolagem.

Scrollbar-arrow- Cor da seta da barra de rolagem. body {scrollbar-arrow-color: "blue";
color }
Scrollbar- Cor da borda direita e inferior da body {scrollbar-darkshadow-color:
darkshadow- barra de rolagem. "red;"
color }
Scrollbar-track- Cor do trilho da barra de rolagem. body {scrollbar-track-color: "yellow";
color }
Scrollbar-face- Cor do carrinho da barra de rolagem. body {scrollbar-face-color: "violet";
color }
Scrollbar- Cor da sombra da borda direita e body {scrollbar-shadow-color: "gray";
shadow-color inferior da barra de rolagem. }
(cor compacta)
Scrollbar- Cor 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-base- Cor padrão para todos os elementos body {scrollbar-base-color: "green";
color da barra de rolagem. }
12. Propriedades de Listas
Definindo o formato de exibição de elementos de uma lista, seus espaços e marcadores.

Propriedade Descrição Exemplo
Display Define como o elemento deve ser mostrado li {display:inline;
na tela ou em uma página impressa. }
(block / list-item / inline / none)
White-space Determina como os espaços em branco img {white-space:pre;
entre os elementos deverão ser tratados. }
(normal / pre / nowrap)
List-style-type Define a aparência 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 relação ao conteúdo.
(outside / inside )
List-style Atalho que define a posição, o tipo ou ul {list-style:inside square;
imagem ao mesmo tempo. )
FATEC-SP
Folhas de Estilo
13. Propriedades de Padding
Definindo a distância entre um elemento e a sua área limite.

Padding-top Define a distância entre o elemento e o body {padding-top:10;
limite da área pelo lado superior. (0 / n / %) }
Padding-right Define a distância entre o elemento e o body {padding-right:10%;
limite da área pelo lado direito. (0 / n / %) }
Padding-bottom Define a distância entre o elemento e o body {padding-bottom:5%;
limite da área pelo lado inferior. (0 / n / %) }
Padding-left Define a distância entre o elemento e o body {padding-left:10%;
limite da área pelo lado esquerdo. (0 / n / %) }
Padding Atalho para definir todas as propriedades do body {padding:10 5 10 5;
padding – sentido horário. (0 / n / %) }
14. Propriedades de Bordas
Definindo bordas para um elemento da página.

border-top-width Largura da borda superior de um elemento img {border-top-width:4pt;
(thin / medium / thick / n) }
border-right- Largura da borda direita de um elemento p {border-right-width:3pt;
width (thin / medium / thick / n) }
border-bottom- Largura da borda inferior de um elemento img {border-bottom-width:4pt;
width (thin / medium / thick / n) }
border-left-width Largura da borda esquerda de um elemento b {border-left-width:3pt;
(thin / medium / thick / n) }
border-width Atalho para definir a largura de todas as img {border-width:thin;
bordas (thin / medium / thick / n) }
border-color Define a cor da borda de um elemento i {border-color:”red”;
(cor válida em inglês / RGB / Hexadecimal) }
border-style Define o estilo da borda img {border-style:”groove”;
(none / dotted / dashed / solid / double / }
groove / ridge / inset / outset)
border-top Atalho para definir a largura, estilo e cor da div {border-top: 3pt solid ”red”;
borda superior ( nesta ordem) }
border-right Atalho para definir a largura, estilo e cor da Img {border-right: 4pt solid
borda direita ( nesta ordem) ”blue”;}
border-bottom Atalho para definir a largura, estilo e cor da U {border-bottom: 3pt solid
borda inferior ( nesta ordem) ”green”;}
border-left Atalho para definir a largura, estilo e cor da img {border-left: 4pt solid
borda esquerda ( nesta ordem) ”yellow”;}
border Atalho para definir a largura, estilo e cor de img {border: 4pt solid ”yellow”;
todas as bordas ( nesta ordem) }
15. Propriedades de Redimensionamento
Permite o redimensionamento de elementos dentro da página.

width Largura de um elemento (px / in / cm) img {width:370px;}
Height Altura de um elemento (px / in / cm) img {height:200px;}

FATEC-SP
Folhas de Estilo
16. Propriedades de Margens
Definindo margens em elementos, textos ou imagens.

Margin-left Margem esquerda de um elemento p { margin-left : 50px; }
(0 / auto / pt / cm / px / in)
Margin-right Margem direita de um elemento body { margin-right : 50px; }
Margin-top Margem superior de um elemento p { margin-top : 6pt ;}
Margin-bottom Margem inferior de um elemento img { margin-bottom: 4pt; }
Margin Atalho para definir todas as propriedades da p { margin: 4pt 3pt 4pt 2pt;}
margem de um elemento.
17. Propriedades de Posicionamento
Permite o posicionamento de um elemento em relação a outros elementos da página.

Position Posição do elemento em relação a página img {position:absolute;
ou a outro elemento. top:10; left:50;
(absolute / relative / static) background:blue;}
Top Posição do elemento em relação ao topo da p {position:absolute;
página ou a um outro elemento. top:30; l eft:70;
(% / px) background:red;}
Left Posição do elemento em relação ao lado div {position:absolute;
esquerdo da página 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 “flutuação” de um elemento em img {clear:right;}
relação a outro. (none / right / left / both)
18. Seletor de Grupo
O seletor de grupo é uma espécie de atalho, criando um conjunto de mesmas propriedades.

Selecionamos os elementos que deverão ser formatados e os separamos por vírgulas.
Exemplo 18.1.:
<head>
h1, p, div {font-style:italic;}
</style>
</head>
<body>
<h1> Fonte em itálico </h1>
</p> Fonte em itálico </p>
<div> Fonte em itálico </div>
</body>
Neste exemplo, <H1>, <P> e <DIV> sairão em itálico.
FATEC-SP
Folhas de Estilo
19. Seletor Contextual
O seletor contextual permite um controle mais detalhado sobre a aparência dos elementos HTML
em sua página. É declarado de acordo com um contexto, sem vírgulas 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 parágrafo</b>
<p> Parágrafo sem negrito</p>
<p> Parágrafo...<b> Negrito dentro do parágrafo</b>...parágrafo.</p>
</body>
Neste exemplo, serão formatados todos os negritos que estiverem dentro de parágrafos.
20. Seletor de Classe
As classes em CSS permitem definir diversas variações 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 específico ou não.
Elas são “chamadas” através 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
Folhas de Estilo
<body>
<a href="pag1.html" class="classe3"> link1 </a><br>
</body>
Neste exemplo, o formato do cursor mudará para uma interrogação (?) ao passar sobre o link.
Podemos usar a classe3 em qualquer tag HTML, pois ela não está vinculada a um elemento específico.
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 símbolo # (em inglês
conhecido como number sign, mas no Brasil como: sustenido, “jogo da velha”, cardinal, hash,
cerquinha, tralha, grade etc.)
A “chamada” da regra é feita através 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> Parágrafo sem id </p>
<p id="id1"> Parágrafo 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
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 página. Ele é representado por um asterisco ‘*’.
No exemplo a seguir, podemos alterar o preenchimento e a margem de cada elemento da página,
apenas com uma única regra.
Exemplo 23.1:
<head>
* {padding: 20;
margin:20;
}
</style>
</head>
<body>
Corpo da página com margem e preenchimento
<h2>Título com margem e preenchimento </h2>
<p> Parágrafo com margem e preenchimento</p>
<b> Negrito com margem e preenchimento </b>
</body>
24. Propriedades de Cursor
Alterando o formato do ponteiro do mouse através de classes.

Cursor Tipo de cursor .ponteiro {cursor:crosshair;}
(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"> Título com cursor Crosshair </h2>
<p class="cursor2"> Parágrafo com cursor Help</p>
<a href="#" class="cursor3"> Link com cursor Wait </b>
</body>

FATEC-SP
Folhas de Estilo
25. Camadas
Uma camada é uma seção de uma página 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 Descrição / Opções

Position Posição da camada no documento
(static/absolute/relative)
Left / Top Deslocamento para a posição do item
Width / Height Especifica a largura e altura do item
Z-Index Especifica a sobreposição dos itens
Visibility Especifica se o item é visível (visible/hidden/inherit)
Background-color Cor de fundo para o texto da camada
Layer-background-color Cor de fundo para a camada inteira
Background-image Imagem de fundo para o texto da camada
Layer-background-image Imagem de fundo para a camada inteira
O browser Netscape utiliza a tag <LAYER> para definir camadas, mas esta tag não é suportada pelo
I.E., por isso, é comum verificarmos a criação de camadas através da tag <DIV> ou <SPAN> que são
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
Folhas de Estilo
26. Layouts
Layouts basicamente referem-se a tamanho e posicionamento de elementos em uma página.
26.1. Centralizando um design com margens automáticas
Para centralizar um div container (caixa grande que contém outras caixas) horizontalmente na
janela:
• Defina a largura do div container (px ou %).

• Configure as margens horizontais como auto.
• Configure uma largura mínima para funcionar corretamente no Netscape (versão 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
então no seletor body alinhado tudo, inclusive o container e então alinhe o conteúdo do
container à esquerda.
Obs,:O IE 5.x e IE 6 no modo não padrão ignora margens automáticas.
Exemplo 26.1.
#container { width:720px; /* 720px para se ajustar
a resolução 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> Título 1 </h2>
Texto texto texto texto texto texto texto texto
<h2> Título 2 </h2>
Texto texto texto texto texto texto texto texto
</div>
</body>
• Três dos mais importantes conceitos de CSS são flutuação, posicionamento e modelo de
caixa. Esses conceitos controlam a maneira como os elementos serão organizados e exibidos
em uma página, formando a base do layout CSS.
• As caixas substituem com excelência as tabelas que alguns programadores ou softwares
utilizam para organizar os dados.

FATEC-SP
Folhas de Estilo
26.2. Caixas
O modelo de caixa é uma das pedras angulares da CSS e determina a maneira como os
elementos serão exibidos e como eles interagem entre si. Cada elemento na página é
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 contém ou uma outra caixa flutuante. Caixas flutuantes não
estão no fluxo normal do documento. Se não houver espaço horizontal suficiente, as caixas
flutuantes que não couberem serão 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
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> Título do texto </h3> teste
<p> Texto do parágrafo <br>
Texto do parágrafo <br>
Texto do parágrafo <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 alteração da margem do link, criando
um recuo quando o usuário passa com o ponteiro do mouse sobre ele.
No exemplo abaixo, foi adicionado uma imagem de segundo plano na situação “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
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 href="pag1.html"> link1 </a>
</body>
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 dinâmicos!!
Eles são fáceis de aprender e basicamente sua sintaxe é a seguinte:
<div style="filter:nome(parâmetro=valor, parâmetro=valor,etc...)">

objeto
</div>
Onde nome define o tipo de filtro, parâmetro define suas propriedades de formatação e valor,
suas unidades que geralmente são graus, pixels, %, etc.
A seguir, será apresentada uma relação de filtros em ordem alfabética, bem como seus
parâmetros e alguns exemplos interessantes. Você pode aplicar diversos filtros em um mesmo
objeto, criando uma variedade de efeitos conforme manda a sua imaginação.
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 transparência total ou parcial no objeto por ele envolvido, de forma
que quanto menor for a sua graduação de porcentagem, definida por opacity=%, maior será a
sua transparência.

FATEC-SP
Folhas de Estilo
Parâmetros:
Opacity Apresenta o grau de transparência do objeto e seu valor refere-se a %.
Opacity=100 apresenta um objeto totalmente opaco e opacity=0 um objeto
totalmente invisível.
FinishOpacity Define o nível de opacidade e seus valores vão de 0 a 100%.
Style Seus estilos podem ser 0 (uniforme), 1 (linear), 2 (radial) ou 3 Retangular.
StartX Coordenada horizontal para começo do gradiente de opacidade.
StartY Coordenada vertical para começo do gradiente de opacidade.
FinishX Coordenada horizontal para o fim do gradiente de opacidade.
FinishX Coordenada vertical para o fim do gradiente de opacidade.
Nos exemplos a seguir, formatamos um texto em azul e incluímos 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 definição das bordas do objeto. Sua sombra
apresenta a mesma cor do objeto, porém com uma textura mais atenuada.
FATEC-SP
Folhas de Estilo
Parâmetros:
Add Parâmetro booleano, 1 Sombreamento nítido, 0 Sombreamento difuso.
Direction Define o ângulo em que o efeito deve acontecer.
Seu valor vai de 0 (topo) em incrementos de 45 graus até 315 graus.
Strength 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 difusão acompanha as cores do texto.
27.3. Filtro Chroma:
O filtro Chroma torna uma cor específica do objeto transparente. No exemplo a seguir, a imagem
imagem1.gif possui um fundo branco, que cria um contraste com o background da página.
Porém, com o filtro chroma, o fundo branco (#FFFFFF) da imagem pode ser neutralizado
simulando uma imagem GIF de fundo transparente.
Parâmetros:
Propriedade Descrição
color Define uma cor do código RGB que sofrerá o efeito de transparência.
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 não funcionará se a cor selecionada para o efeito não existir na figura.
27.4. Filtro Dropshadow
O filtro Dropshadow cria um eleito de sombra sólida no objeto, que pode ser direcionada
conforme o ângulo desejado.
Parâmetros:
Color Define a cor RGB (#rrggbb) da sombra. Os valores são em hexadecimal.
Offx Determina a distância de afastamento em "x" (horizontal).
Os valores em pixels (px) podem ser positivos ou negativos.
Offy Determina a distância de afastamento em "y" (vertical).
Os valores em pixels (px) podem ser positivos ou negativos.
Positive Parâmetro booleano: 1 para sombra positiva. 0 para sombra negativa.

FATEC-SP
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 superfície 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).
Parâmetros:
Color Define a cor RGB (#rrggbb) do borramento.
Strength Determina a distância 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
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.
Parâmetros:
Strenght Define o comprimento do efeito, seu valor é em pixels.
Direction Define o grau em que o efeito deve ocorrer.
Ele pode ser de 0 a 360 graus.
progid:DXImageTransform.Microsoft Parâmetros proprietários da Microsoft.
No exemplo a seguir, repare que as imagens com efeito Motion Blur sofrem uma deslocação
no sentido do movimento que o efeito causou. Isso acontece porque o efeito passa a fazer parte
da imagem alterando o seu centro de equilíbrio.
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 ondulação no objeto.

FATEC-SP
Folhas de Estilo
Parâmetros:
Propiedades Descrição / Opções
add Parâmetro booleano: 1 cria o efeito wave, 0 anula o efeito.
freq Define o número de ondulações que o objeto deve sofrer.
lightstrength Define a intensidade de ondulação luminosa. Seu valor vai de 0 a 100%.
phase Define a freqüência da ondulação, seu valor vai de 0 a 360graus.
strength Define a intensidade da ondulação 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 Endereço e na Guia do Navegador
Para inserir um ícone na barra de endereço de alguns navegadores e também em sua guia (aba),
faça a “chamada” da imagem através do link abaixo a partir do cabeçalho da página 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 não termina aqui...
Muitos recursos ainda são oferecidos em termos de estilização de páginas, alguns podem ser
aprendidos através de livros, Internet...
Mas a criatividade ainda impera! Ela não tem limites!
Portanto, se você gostou, os próximos passos agora é com você.
Pesquise, teste, invente, observe!!!
E boa caminhada!

FATEC-SP
Folhas de Estilo
30. Bibliografia
Criando Páginas 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
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 Description Values IE F N W3C
background A shorthand property for background-color 4 1 6 1
setting all background background-image
properties in one background-repeat
declaration background-
attachment
background-position
background- Sets whether a background scroll 4 1 6 1
attachment image is fixed or scrolls fixed
with the rest of the page
background-color Sets the background color color-rgb 4 1 4 1
of an element color-hex
color-name
transparent
background-image Sets an image as the url 4 1 4 1
background none
background-position Sets the starting position of top left 4 1 6 1
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
background-repeat Sets if/how a background repeat 4 1 4 1
image will be repeated repeat-x
repeat-y
no-repeat
BORDER
border A shorthand property for border-width 4 1 4 1
setting all of the properties border-style
for the four borders in one border-color
declaration
FATEC-SP
Folhas de Estilo
border-bottom A shorthand property for border-bottom-width 4 1 6 1

for the bottom border in one border-color
declaration

FATEC-SP
Folhas de Estilo
BORDER (Cont.)
border-bottom-color Sets the color of the bottom border-color 4 1 6 2
border
border-bottom-style Sets the style of the bottom border-style 4 1 6 2
border
border-bottom-width Sets the width of the thin 4 1 4 1
bottom border medium
thick
length
border-color Sets the color of the four color 4 1 6 1
borders, can have from one
to four colors
border-left A shorthand property for border-left-width 4 1 6 1
for the left border in one border-color
declaration
border-left-color Sets the color of the left border-color 4 1 6 2
border
border-left-style Sets the style of the left border-style 4 1 6 2
border
border-left-width Sets the width of the left thin 4 1 4 1
border medium
thick
length
border-right A shorthand property for border-right-width 4 1 6 1
for the right border in one border-color
declaration
border-right-color Sets the color of the right border-color 4 1 6 2
border
border-right-style Sets the style of the right border-style 4 1 6 2
border
border-right-width Sets the width of the right thin 4 1 4 1
border medium
thick
length
border-style Sets the style of the four none 4 1 6 1
borders, can have from one hidden
to four styles dotted
dashed
solid
double
groove
ridge
inset
outset
border-top A shorthand property for border-top-width 4 1 6 1
for the top border in one border-color
declaration

FATEC-SP
Folhas de Estilo
BORDER (Cont.)
border-top-color Sets the color of the top border-color 4 1 6 2
border
border-top-style Sets the style of the top border-style 4 1 6 2

border
border-top-width Sets the width of the top thin 4 1 4 1
border medium
thick
length
border-width A shorthand property for thin 4 1 4 1
setting the width of the four medium
borders in one declaration, thick
can have from one to four length
values
CLASSIFICATION
clear Sets the sides of an left 4 1 4 1
element where other right
floating elements are not both
allowed none
cursor Specifies the type of cursor url 4 1 6 2
to be displayed auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
display Sets how/if an element is none 4 1 4 1
displayed inline
block
list-item
run-in
compact
marker
table
inline-table
table-row-group
table-header-group

FATEC-SP
Folhas de Estilo
CLASSIFICATION (Cont.)
display (cont.) Sets how/if an element is table-footer-group 4 1 4 1
displayed table-row
table-column-group
table-column
table-cell
table-caption
float Sets where an image or a left 4 1 4 1
text will appear in another right
element none
position Places an element in a static 4 1 4 2
static, relative, absolute or relative
fixed position absolute
fixed
visibility Sets if an element should visible 4 1 6 2
be visible or invisible hidden
collapse
DIMENSION
height Sets the height of an auto 4 1 6 1
element length
%
line-height Sets the distance between normal 4 1 4 1
lines number
length
%
max-height Sets the maximum height none - 1 6 2
of an element length
%
max-width Sets the maximum width of none - 1 6 2
an element length
%
min-height Sets the minimum height of length - 1 6 2
an element %
min-width Sets the minimum width of length - 1 6 2
an element %
width Sets the width of an auto 4 1 4 1
element %
length
FONT
Font A shorthand property for font-style 4 1 4 1
setting all of the properties font-variant
for a font in one declaration font-weight
font-size/line-height
font-family

FATEC-SP
Folhas de Estilo
FONT (Cont.)
Font (cont.) A shorthand property for caption 4 1 4 1
setting all of the properties icon
for a font in one declaration menu
message-box
small-caption
status-bar
font-family A prioritized list of font family-name 3 1 4 1
family names and/or generic-family
generic family names for an
element
font-size Sets the size of a font xx-small 3 1 4 1
x-small
small
medium
large
x-large
xx-large
smaller
larger
length
%
font-size-adjust Specifies an aspect value none - - - 2
for an element that will number
preserve the x-height of the
first-choice font
font-stretch Condenses or expands the normal - - - 2
current font-family wider
narrower
ultra-condensed
extra-condensed
condensed
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded
font-style Sets the style of the font normal 4 1 4 1
italic
oblique
font-variant Displays text in a small- normal 4 1 6 1
caps font or a normal font small-caps
font-weight Sets the weight of a font normal 4 1 4 1
bold
bolder
lighter
100
200
300
400
500
600
700

FATEC-SP
Folhas de Estilo
FONT (Cont.)
font-weight (cont.) Sets the weight of a font 800 4 1 4 1
900
GENERATED CONTENT
content Generates content in a string 1 6 2
document. Used with the url
:before and :after pseudo- counter(name)
elements counter(name, list-
style-type)
counters(name, string)
counters(name, string,
list-style-type)
attr(X)
open-quote
close-quote
no-open-quote
no-close-quote
counter-increment Sets how much the counter none 2
increments on each identifier number
occurrence of a selector
counter-reset Sets the value the counter none 2
is set to on each identifier number
occurrence of a selector
quotes Sets the type of quotation none - 1 6 2
marks string string
LIST AND MARKER

list-style A shorthand property for list-style-type 4 1 6 1
setting all of the properties list-style-position
for a list in one declaration list-style-image
list-style-image Sets an image as the list- none 4 1 6 1
item marker url
list-style-position Sets where the list-item inside 4 1 6 1
marker is placed in the list outside
list-style-type Sets the type of the list-item none 4 1 4 1
marker disc
circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-alpha
upper-alpha
lower-greek
lower-latin

FATEC-SP
Folhas de Estilo
LIST AND MARKER (Cont.)

list-style-type (cont.) Sets the type of the list-item upper-latin 4 1 4 1
marker hebrew
armenian
georgian
cjk-ideographic
hiragana
katakana
hiragana-iroha
katakana-iroha
marker-offset auto 1 7 2
length
MARGIN
margin A shorthand property for margin-top 4 1 4 1
setting the margin margin-right
properties in one margin-bottom
declaration margin-left
margin-bottom Sets the bottom margin of auto 4 1 4 1
an element length
%
margin-left Sets the left margin of an auto 3 1 4 1
element length
%
margin-right Sets the right margin of an auto 3 1 4 1
element length
%
margin-top Sets the top margin of an auto 3 1 4 1
element length
%
OUTLINES
outline A shorthand property for outline-color - 1.5 - 2
setting all the outline outline-style
properties in one outline-width
declaration
outline-color Sets the color of the outline color - 1.5 - 2
around an element invert
outline-style Sets the style of the outline none - 1.5 - 2
around an element dotted
dashed
solid
double
groove
ridge
inset
outset

FATEC-SP
Folhas de Estilo
OUTLINES (Cont.)
outline-width Sets the width of the outline thin - 1.5 - 2
around an element medium
thick
length
PADDING
padding A shorthand property for padding-top 4 1 4 1
setting all of the padding padding-right
properties in one padding-bottom
declaration padding-left
padding-bottom Sets the bottom padding of length 4 1 4 1
an element %
padding-left Sets the left padding of an length 4 1 4 1

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

FATEC-SP
Folhas de Estilo
POSITIONING (Cont.)
top Sets how far the top edge auto 4 1 4 2
of an element is %
above/below the top edge length
of the parent element
vertical-align Sets the vertical alignment baseline 4 1 4 1
of an element sub
super
top
text-top
middle
bottom
text-bottom
length
%
z-index Sets the stack order of an auto 4 1 6 2
element number
TABLE
border-collapse Sets the border model of a collapse 5 1 7 2
table separate
border-spacing Sets the distance between length length - 1 6 2
the borders of adjacent
cells (only for the
"separated borders" model)
caption-side Sets the position of the top - 1 6 2
caption according to the bottom
table left
right
empty-cells Sets whether cells with no show - 1 6 2
visible content should have hide
borders or not (only for the
"separated borders" model)
table-layout Sets the algorithm used to auto 5 1 6 2
lay out the table fixed
TEXT
color Sets the color of a text color 3 1 4 1
direction Sets the text direction ltr 6 1 6 2
rtl
letter-spacing Increase or decrease the normal 4 1 6 1
space between characters length
text-align Aligns the text in an left 4 1 4 1
element right
center
justify

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

FATEC-SP

Css Simples

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Css Simples

Enviado por

Direitos autorais:

Formatos disponíveis

Faculdade de Tecnologia de São Paulo

Cascading Style Sheets - CSS

Formatando páginas em HTML

Profª. Elisabete da Silva Santos

Departamento de Processamento de Dados

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

Profª. Elisabete da Silva Santos 3

1. Introdução a Folhas de Estilo

Há três modos de inserção de regras para os elementos em uma página HTML:

Atributos / Formato Descrição

O Estilo é Incorporado quando definimos as regras de Folhas de Estilo no cabeçalho do

Propriedade / Formato Descrição

Atributos Descrição / Opções

Conteúdo do arquivo externo: estilo1.css:

b {background-color: "red"; color: "white"; font-size: "14pt"; }

5. Comentários Inseridos no Código

Utilizamos as marcas de comentário para ocultarmos os comentários escritos dentro do código

Tabela de propriedades de estilos aplicáveis em fontes.

Profª. Elisabete da Silva Santos 6

Tabela de propriedades de estilos aplicáveis em textos.

8. Propriedades de Plano de Fundo

Tabela de propriedades de estilos aplicáveis em plano de fundo.

9. Propriedade de Cores de Fontes

Tabela de propriedade de estilos de cores aplicáveis em fontes.

10. Propriedades de Links

Tabela de propriedades de estilos aplicáveis em links (pseudo-classes).

11. Propriedades de Barra de Rolagem

Tabela de propriedades de estilos aplicáveis em barras de rolagem.

12. Propriedades de Listas

Definindo o formato de exibição de elementos de uma lista, seus espaços e marcadores.

13. Propriedades de Padding

Definindo a distância entre um elemento e a sua área limite.

14. Propriedades de Bordas

Definindo bordas para um elemento da página.

15. Propriedades de Redimensionamento

Permite o redimensionamento de elementos dentro da página.

Profª. Elisabete da Silva Santos 9

16. Propriedades de Margens

Definindo margens em elementos, textos ou imagens.

17. Propriedades de Posicionamento

Permite o posicionamento de um elemento em relação a outros elementos da página.

18. Seletor de Grupo

O seletor de grupo é uma espécie de atalho, criando um conjunto de mesmas propriedades.

19. Seletor Contextual

20. Seletor de Classe

As classes em CSS permitem definir diversas variações para um único elemento.

Obs.: Utilizamos o id2 para formatar as tags <body> e <img> da HTML.

22. Seletor de Classe e ID

Profª. Elisabete da Silva Santos 12

23. Seletor Universal

24. Propriedades de Cursor

Alterando o formato do ponteiro do mouse através de classes.

Propriedade Descrição Exemplo

Profª. Elisabete da Silva Santos 13

Propriedades Descrição / Opções

Profª. Elisabete da Silva Santos 14

26.1. Centralizando um design com margens automáticas

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

Obs,:O IE 5.x e IE 6 no modo não padrão ignora margens automáticas.

Profª. Elisabete da Silva Santos 15

26.2.1 Caixas Flutuantes

26.2.2. Caixas com cantos arredondados

26.3. Menu deslizante

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