de
Tecnologia
de
So Paulo
Iniciante e Intermedirio
Folhas de Estilo
28.
29.
30.
31.
32.
Folhas de Estilo
FOLHAS DE ESTILO
"CRIANDO PGINAS COM ESTILO"
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:
Prof. Elisabete da Silva Santos
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>
<style type="text/css">
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>
Prof. Elisabete da Silva Santos
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"; }
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:
<style type="text/css">
<!-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)
Prof. Elisabete da Silva Santos
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; }
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; }
Exemplos
p { color: #5e82a4; }
li { color: rgb(0,0,255); }
b{ color: violet; }
Folhas de Estilo
Folhas de Estilo
Exemplo
body {padding-top:10;
}
body {padding-right:10%;
}
body {padding-bottom:5%;
}
body {padding-left:10%;
}
body {padding:10 5 10 5;
}
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;
}
Exemplo
img {width:370px;}
img {height:200px;}
Folhas de Estilo
Exemplo
p { margin-left : 50px; }
body { margin-right : 50px; }
p { margin-top : 6pt ;}
img { margin-bottom: 4pt; }
p { margin: 4pt 3pt 4pt 2pt;}
10
Folhas de Estilo
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.
<style type="text/css">
Elemento#NomedoID {propriedade:valor; ...}
</style>
Exemplo 21.1:
<head>
<style type="text/css">
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.
12
Folhas de Estilo
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>
<style type="text/css">
.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>
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>
<style type="text/css">
.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>
14
Folhas de Estilo
26. Layouts
Layouts basicamente referem-se a tamanho e posicionamento de elementos em uma pgina.
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>
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:
<style type="text/css">
.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 class="caixa">Caixa 3</div>
</div>
<div class="conteiner">
<div class="caixa dir">Caixa 4 - dir</div>
<div class="caixa">Caixa 5</div>
<div class="caixa">Caixa 6</div>
</div>
<div class="conteiner">
<div class="caixa esq">Caixa 7 - esq</div>
<div class="caixa dir">Caixa 8 - dir</div>
<div class="caixa">Caixa 9</div>
</div>
</body>
Prof. Elisabete da Silva Santos
FATEC-SP
16
Folhas de Estilo
17
Folhas de Estilo
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.
Prof. Elisabete da Silva Santos
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>
<img src="imagem1.gif">
</div>
Exemplo 27.1.2. Alpha Linear:
<div style="font-size: 24pt; font-family: arial black; height:1;
filter:Alpha(style=1)">
<h1> FILTRO ALPHA LINEAR </h1>
<img src="imagem1.gif">
</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>
<img src="imagem1.gif">
</div>
Exemplo 27.1.4. Alpha Radial Externo:
<div style="font-size: 24pt; font-family: arial black; height:1;
filter:Alpha(opacity=60, style=2)">
<h1> FILTRO ALPHA RADIAL EXTERNO </h1>
<img src="imagem1.gif">
</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.
Prof. Elisabete da Silva Santos
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.
Descrio
Define uma cor do cdigo RGB que sofrer o efeito de transparncia.
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.
20
Folhas de Estilo
de um espelho.
Exemplo 27.5.1. Fliph:
<div style="filter:fliph; height:1; font-size:20px;">
<h1> FILTRO FLIPH </h1>
<img src="imagem1.gif">
</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>
<img src="imagem1.gif">
</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).
21
Folhas de Estilo
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>
<img src="imagem1.gif">
</div>
27.11. Filtro Wave
O filtro Wave cria um efeito de ondulao no objeto.
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.
23
Folhas de Estilo
30. Bibliografia
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)
24
Folhas de Estilo
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
A shorthand property for
setting all of the properties
for the four borders in one
declaration
Values
border-width
border-style
border-color
IE F N W3C
4
1 4 1
25
Folhas de Estilo
border-bottom
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
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
A shorthand property for
border-top-width
setting all of the properties border-style
for the top border in one
border-color
declaration
Prof. Elisabete da Silva Santos
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
border-style
border-top-width
border-width
thin
medium
thick
length
A shorthand property for
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
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
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
position
visibility
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
A shorthand property for
font-style
setting all of the properties font-variant
for a font in one declaration font-weight
font-size/line-height
font-family
Prof. Elisabete da Silva Santos
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
A shorthand property for
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
Prof. Elisabete da Silva Santos
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-style-image
list-style-position
list-style-type
Description
A shorthand property for
setting all of the properties
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
IE F N W3C
4
1 6 1
31
Folhas de Estilo
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
A shorthand property for
setting the margin
properties in one
declaration
Sets the bottom margin of
an element
margin-left
margin-right
margin-top
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
A shorthand property for
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
32
Folhas de Estilo
OUTLINES (Cont.)
outline-width
Property
padding
Description
A shorthand property for
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
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
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
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
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
text-shadow
text-transform
unicode-bidi
white-space
word-spacing
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
35