Você está na página 1de 86

TCNICAS DE PROGRAMAO

PARA INTERNET
PROF. VALRIA HELENA P. GERBELLI

C.S.S.
CASCADE STYLE SHEET

ESTILO

Define como elementos HTML devem ser exibidos


Styles foram adicionados ao HTML 4.0 para
resolver um problema
CSS poupa muito trabalho
Folhas de Estilo externas so armazenados em
arquivos CSS

ESTILO

HTML nunca foi destinado a conter etiquetas para a formatao de um documento.


HTML destinava-se a definir o contedo de um documento, como :
<h1> Este um cabealho </h1>
<p> Este um pargrafo. </p>
Quando tags como <font > e atributos de cor foram adicionados especificao
HTML 3.2 , comeou um pesadelo para os desenvolvedores web .
Desenvolvimento de grandes web sites, onde informaes de fontes e cor foram
adicionadas a cada pgina individual, tornou-se um processo longo e caro. Para
resolver este problema , o World Wide Web Consortium (W3C) criou CSS. Em
HTML 4.0 , toda a formatao pode (e deve !) Ser removido do documento HTML,
e armazenado em um arquivo CSS separado.

VA N TAG E N S D O C S S

A grande vantagem do uso de CSS a de separar a marcao


HTML, da apresentao do site. Em outras palavras, o HTML
responsvel por estruturar e marcar o contedo, e o CSS pelo
visual do documento.

HTML marca e estrutura textos, cabealhos, pargrafos, links,


botes, formulrios, imagens e demais elementos da pgina e CSS
define cores, posicionamento na tela, estilos de linhas, bordas e
tudo o mais relacionado apresentao.

VA N TAG E N S D O C S S

As definies de estilo so normalmente


guardados em arquivos .css externos. Com um
arquivo de folha de estilo externa , voc pode
alterar a aparncia de um site inteiro , alterando
apenas um arquivo !

A N AT O M I A D O E S T I L O

Um conjunto de regras CSS consiste em um seletor e um bloco de


declarao :

Os pontos seletor para o elemento HTML que voc quer para o


estilo. O bloco de declarao contm uma ou mais declaraes
separadas por ponto e vrgula. Cada declarao inclui um nome de
propriedade e um valor, separados por dois pontos .

A N AT O M I A D O E S T I L O

Seletor

H1

Declarao

Declao

{ COLOR : BLUE ; FONT-SIZE : 12PT; }


Propriedade

Valor

Propriedade

Valor

TIPOS DE ESTILO

InLine Local fica junto com a TAG HTML que deseja mudar :
<h1 style=color:red> MEU TTULO </h1>

Perceba que o atributo style est dentro da tag H1, porque esta
tag que eu desejo alterar a cor do texto, por isso chamada de
estilo local.

TIPOS DE ESTILO

Interno fica dentro da pgina HTML dentro da seo HEAD.


Precisa ter o nome da tag que ser alterada:
<html> <head>
<style>
h1
{
color : red;
}
</style>
<title> Minha Pgina de Estilos </title> </head>
<body>
<h1> Estilo Interno </h1>
</body>
</html>

TIPOS DE ESTILO

Externo fica em um arquivo fora da pgina HTML, e seu nome


tem a extenso .css e deve ser linkado para a pgina que ir utilizlo :
<html>
<head>
<link rel=stylesheet href=estilo_val.css type=text/css>
<title> Minha Pgina de Estilos </title> </head>
<body>
<h1> Estilo Interno </h1>
</body>
</html>

E S T I L O _ VA L . C S S

h1
{
color : red;
}

MENU.HTML

<html>
<head>
<link rel=stylesheet href=estilo1.css type=text/css>
<title> Menu </title> </head>
<body>
<table width=100%>
<tr>
<td> <a href=fontes.html target=leitura>Fontes</a> </td>
<td> <a href=links.html target=leitura>Links</a> </td>
<td> <a href=bordas.html target=leitura>Bordas</a> </td>
</tr>
</table>
<iframe src=entrada.html name=leitura width=100% height=100%> </iframe>
</body>
</html>

E N T R A DA . H T M L

<html>
<head>
<link rel=stylesheet href=estilo1.css type=text/css>
<title> Menu </title> </head>
<body>
<h1> BEM VINDO AO SITE DE ESTILOS </h1>
<h2> Estilo vai facilitar sua vida </h2>
<h3> Utilize o menu ao lado para navegar no site </h3>
<p>
<center><img src=sol.png></center>
</body>
</html>

ESTILO1.CSS

body
{
background:black;
color:white;
line-height:20px;
}
h1
{
color:yellow;
font-weight:bold;
font-family:Script,Georgia;
}
h2
{

color:cyan;
text-align:center;
}

USANDO CLASSES

A classe permitem que seja criado uma formatao que pode ser usada em
vrios elementos HTML, ou seja, ela aparecer no documento mais de uma
vez.
Imagine que um texto deve ter o tipo de fonte Comic Sans, cor azul e
sublinhado, pode ser um pargrafo, um titulo, uma clula de uma tabela, etc.
Podemos criar uma classe e utiliz-la onde quisermos.
Para criar uma classe devemos criar um nome que deve ser precedido por um
ponto :

.azul

USANDO CLASSES

.azul
{
font-family : Comic Sans Ms;
color : blue;
text-decoration : underline;

USANDO CLASSES

<html>
<head>
<title> Minha Pgina de Estilos </title> </head>
<body>
<h1 class=azul> Estilo Interno </h1>
<p class=azul>
Seu texto aqui.
</body>
</html>

USANDO DIVS

O nome div vem de diviso, e esta tag vai lhe dar o simples poder de dividir qualquer trecho de
seu cdigo. Isso mesmo, voc pode criar um bloco, uma diviso, e dentro deste bloco ter uma
imagem, links, textos e o que mais voc quiser.
E qual a vantagem disso? Voc vai poder aplicar o CSS nesse bloco, e tudo que estiver dentro
da div, seja imagem, texto, link ou o que mais for, vai receber aquelas regras de estilo.
Se voc fizer isso usando CLASS, por exemplo, vai ter que colocar esse seletor em cada tag.

bem comum dizer que a tag <div> um container para armazenar diversos elementos.
As divs so IMPORTANTSSIMAS para estruturar, criar uma ordem lgica e organizar um site.

USANDO DIVS

Voc cria uma div para o cabealho, outra para o contedo, outra div para os menus e uma
ltima para o rodap, ento usa o CSS para estilizar cada uma dessas divs separadamente.
Voc tambm poder criar outras divises dentro destas divs.
Por exemplo, na <div> do contedo, voc ter uma regio com o ttulo e talvez alguma imagem,
que voc queria chamar de "cabecalho-conteudo", pois o cabealho do contedo.
Em seguido o contedo textual, que voc chama de "conteudo" e no final do seu artigo voc
quer colocar uma regio com as referncias bibliogrficas "ref".
Ou seja, voc definiu uma regio no site, depois outras sub-regies.
Fonte : http://www.htmlprogressivo.net/

EXEMPLO DE DIVS

Para podermos formatar vrias DIVs devemos utilizar ID nos elementos HTML para usarmos
formatao CSS. Vejamos um exemplo simples :

<div>
Todo, qualquer e quantos elementos do HTML
voc queira colocar aqui.
</div>

EXEMPLO DE DIVS

Para podermos formatar vrias DIVs devemos utilizar ID nos elementos HTML para usarmos
formatao CSS. Vejamos um exemplo simples :

<div>
Todo, qualquer e quantos elementos do HTML
voc queira colocar aqui.
</div>

EXEMPLO DE DIVS

Como exemplo, vamos criar uma estrutura com cabealho, contedo e rodaps, diferentes :
<html>
<head>
<title> Como usar DIV </title>
<link rel="stylesheet" type="text/css" href="estilo.css"/>
</head>
<body>
<div id=cabecalho>
Contedo de cabealho
</div>
<div id=conteudo>
Contedo de cabealho
</div>
<div id=rodape>
Contedo de cabealho
</div>
</body>
</html>

EXEMPLO DE DIVS

Criando a folha de estilo.


O cabealho vai ter 85% de largura, altura de 220px, fundo laranja e alinhado ao centro.
#cabecalho
{
width: 85%;
height: 220px;
margin: 0 auto;
background:orange;
}

EXEMPLO DE DIVS

J nossa regio de contedo tambm ter a mesma largura, 820px de altura, cor de fundo
prata e alinhado no centro tambm.
#conteudo
{
width: 85%;
height: 820px;
background: silver;
}

EXEMPLO DE DIVS

O rodap ser alinhado ao centro, ter 40 pixels de altura e 85% de largura da tela do seu
browser, e ter uma borda cinza de 5 pixel de largura.
#rodape
{
width: 85%;
height: 40px;
text-align: center;
border: 5px solid gray ;
}

FUNDOS DIFERENTES

Com estilo possvel posicionar uma figura no corpo da pgina, os passos so


os seguintes :
Insira a figura;
background-image:url(arquivo.ext);
Determine se haver repetio ou no
background-repeat : repeat-x / repeat-y / no-repeat;
Determine a posio da repetio se houver
background-position : left / right / top / bottom / center / me px mt px;

E S Q U E R DA . H T M L

<html>
<head>
<link rel=stylesheet href=fundos.css type=text/css>
<title> FUNDOS </title> </head>
<body class=esquerda>
Fundo posicionado esquerda
</body>
</html>

D I R E I TA . H T M L

<html>
<head>
<link rel=stylesheet href=fundos.css type=text/css>
<title> FUNDOS </title> </head>
<body class=direita>
Fundo posicionado direita
</body>
</html>

TOPO.HTML

<html>
<head>
<link rel=stylesheet href=fundos.css type=text/css>
<title> FUNDOS </title> </head>
<body class=topo>
Fundo posicionado ao topo
</body>
</html>

BAIXO.HTML

<html>
<head>
<link rel=stylesheet href=fundos.css type=text/css>
<title> FUNDOS </title> </head>
<body class=baixo>
Fundo posicionado abaixo
</body>
</html>

POSICIONADO.HTML

<html>
<head>
<link rel=stylesheet href=fundos.css type=text/css>
<title> FUNDOS </title> </head>
<body class=posicionado>
Fundo posicionado abaixo
</body>
</html>

CENTRALIZADO.HTML

<html>
<head>
<link rel=stylesheet href=fundos.css type=text/css>
<title> FUNDOS </title> </head>
<body class=centralizado>
Fundo centralizado
</body>
</html>

FUNDOS.CSS

.esquerda
{
background-image:url(sol.jpg);
background-repeat:repeat-y;
}
.direita
{
background-image:url(sol.jpg);
background-repeat:repeat-y;
background-position:right;
}
.topo
{

background-image:url(sol.jpg);
background-repeat:repeat-x;
}

FUNDOS.CSS

.baixo
{
background-image:url(sol.jpg);
background-repeat:repeat-x;
background-position:bottom;
}
.posicionado
{
background-image:url(sol.png);
background-repeat:no-repeat;
background-position:300px 50px;
// margem esquerda e do topo
}
.centro
{
background-image:url(sol.jpg);
background-repeat:no-repeat;
background-position:center;
}

M U DA N D O O C U R S O R

possvel mudar a aparncia do cursor com estilo, apenas use a propriedade :

cursor:tipo;
Default

n-resize

nw-resize

Crosshair

ne-resize

progress

Hand

e-resize

not-allowed

Move

se-resize

no-drop

Text

s-resize

vertical-text

Wait

sw-resize

col-resize

Help

w-resize

row-resize

C A I X A S ( B O R DA S )

As caixas (bordas) podem ser usadas em pargrafos,


tabelas ou formulrios e at em frames. Eu criei um estilo
interno, com nomes diferentes para os pargrafos, na
verdade nomeei os pargrafos com os tipos das bordas. As
bordas podem ter espaos entre elas e o texto, podem ter
os quatro lados de estilos diferentes, ou ainda os quatro
lados com cores diferentes e at com espessuras
diferentes.

C A I X A S ( B O R DA S )

C A I X A S ( B O R DA S )

PARA OS QUATRO LADOS


border-width

espessura da borda

border-style

estilo da borda

border-color

cor da borda

PARA LADO SUPERIOR

PARA LADO INFERIOR

border-top-width

border-bottom-width

border-top-style

border-bottom-style

border-top-color

border-bottom-color

C A I X A S ( B O R DA S )

PARA LADO ESQUERDO

PARA LADO DIREITO

border-left-width

border-right-width

border-left-style

border-right-style

border-left-color

border-right-color
ALTERANDO TODAS AS PROPRIEDADES

border : espessura

tipo cor

border-right :espessura

tipo cor

Border-bottom : espessura

tipo cor

border-top : espessura

tipo cor

border-left : espessura

tipo cor

border-radius: valor;

B O R DA S A R R E D O N DA DA S

L I S TA S

Em HTML para usar listas no numeradas usamos apenas duas tags simples :
UL un-numered list (lista no numerada) que tem apenas 3 tipos de marcadores : circle bolinha vazia, disc (padro)
bolinha cheia ou square - quadrado
LI list item

<ul>
<li> Primeiro Item da Lista
<li> Segundo Item da Lista
<li> Terceiro Item da Lista
<li> Quarto Item da Lista
</ul>

L I S TA S

Para podermos usar uma figura s mesmo usando estilo.


Localize uma figura bem pequena, que possa ser usada como
marcador, e no arquivo externo do estilo coloque a seguinte
linha :
Li
{
list-style-image:url(marca_flor.gif);
}

I M P O RTA N D O F O N T E

Quando for necessrio


utilizar uma fonte que
no padro do S.O.,
baixe a fonte dos tipos
da tabela :

TIPO DA FONTE

FORMATO

EXTENSES

truetype

TrueType

.ttf

opentype

OpenType

.ttf, .otf

truetype-aat

TrueType with Apple Advanced Typography


extensions

.ttf

embedded-opentype

Embedded OpenType

.eot

svg

SVG Font

.svg, .svgz

woff

Web Open Font Format

. woff

I M P O RTA N D O F O N T E

Para utilizar a fonte externa :


/* indica fonte externa */
@font-face
{
/* d uma nome para a fonte */
font-family: rica;
/* indica o local e nome do arquivo da fonte */
src: url('Ricasso-Regular.woff');
}
h1
{
/* utilize a fonte onde desejar */
font-family : rica;
}

PSEUDO-ELEMENTO

Adiciona efeito a um seletor. Por exemplo o elemento A tem as propriedades ATIVO (link
ativo), VISITADO (link que j visitado), LINK (link no visitado) e SOBRE (com o mouse
apontado sobre ele). Os Pseudos-elementos da tag A so : LINK, VISITED, ACTIVE e
HOVER, e devem ser declaradores nesta ordem.

Como utilizar
Seletor:pseudo-elemento
A:pseudo-elemento

Declarao

Declao

{ COLOR : BLUE ; FONT-SIZE : 12PT; }


Propriedade

Valor

Propriedade

Valor

F O R M ATA N D O L I N K S

A Tag A tem um pseudo-elemento. O Link em HTML sempre foi um incmodo para todos,
pois nunca conseguamos tirar o sublinhado, apenas mudar a cor, e a fonte, mas o
cdigo ficava muito grande. Com o estilo, voc consegue muita coisa, desde tirar o
sublinhado, at colocar uma cor de fundo em um link.
a:link
{ link no visitado }
a:visited
{ link visitado }
a:hover
{ link com mouse em cima}

EXEMPLO DE LINKS

a:link
{

a:active
{

text-decoration : none;
color : red;
font-family : Georgia;
}
a:visited
{

text-decoration : none;
color : red;
font-family : Georgia;
}
a:hover
{

text-decoration : none;
color : red;
font-family : Georgia;
}

text-decoration : overline;
color : yellow;
font-family : Comic Sans Ms;
}

C A P I T U L A O F I R S T- L E T T E R

O pseudo-elemento first-letter cria o efeito de capitulao no pargrafo.

p
{
font-size: 16px;

}
p:first-letter
{
font-size:300%;
color : red;
}

P R I M E I R A L I N H A F I R S T- L I N E

O pseudo-elemento first-line cria o efeito apenas na primeira linha do pargrafo.

p
{
font-size: 16px;

}
p:first-line {
color: darkblue;
font-variant: small-caps;
}

FILTROS

F I LT R O S - C O N T R A S T

Ajusta o contraste da figura. Valor 0%


uma figura preta. Valor 100% no
altera figura. permitido valores
acima de 100% onde o contraste ser
menor. Caso no seja fornecido valor,
100% ser utilizado como padro.

-webkit-filter:contrast(4);

F I LT R O S - B L U R

Aplica Gaussian Blur a figura. O valor


define o desvio do raio padro para a
funo de Gauss, ou quantos pixels
se mistura na tela. Quanto maior o
valor, maior o borro. No aceita %.
Valores omitidos, assume como
padro o valor 0

-webkit-filter:blur(3px);

F I LT R O S - S P I A
Converte a imagem para spia. O
valor define a proporo da
converso . Um valor de 100 %
totalmente spia. Um valor de 0 no
deixa inalterada . Os valores entre 0%
e 100 % so multiplicadores lineares
sobre o efeito. Se o parmetro for
omitido, um valor de 100 %
assumido. Os valores negativos no
so permitidos.

-webkit-filter:sepia(1);

F I LT R O S - G R AY S C A L E

Converte a imagem em tons de cinza


. O valor define a proporo da
converso . Um valor de 100 %
totalmente em tons de cinza . Um
valor de 0 % no altera a imagem .
Os valores entre 0 % e 100 % so
multiplicadores lineares sobre o efeito
. Se o valor do parmetro omitido,
100 % ser assumido . Os valores
negativos no so permitidos.

-webkit-filter:grayscale(1);

F I LT R O S - B R I G H T N E S S

Faz a imagem parecer mais ou


menos brilhante . Um valor de 0% ir
criar uma imagem que
completamente preto /cinza. Um valor
de 100 % no altera imagem. Valores
superior a 100% so permitidos, e a
imagem fica mais brilhante. Se o valor
for omitido, o valor 100 % ser
utilizado .
-webkit-filter:brightness(2);

F I LT RO S D RO P - S H A D OW

Aplica-se um efeito de sombra para a


imagem de entrada . A sombra
efetivamente uma verso borrada,
compensao de mscara alfa
imagem da entrada da desenhado em
uma cor especfica, composta por
baixo da imagem . A funo aceita um
parmetro de tipo ( definido no CSS3
Fundos ) , com a excepo de que a
palavra-chave " inset " no
permitido
-webkit-filter:drop-shadow(12px 12px
7px rgba(0,0,0,0.5));

F I LT R O S H U E - R O TAT E

Aplica-se uma rotao de matizes na


imagem. O valor define o nmero de
graus em volta do crculo de cor que
ser ajustada . Um valor de 0deg no
altera a imagem. Se o valor for
omitido, um valor de 0deg assumido
. O valor mximo 360deg .
-webkit-filter:hue-rotate(40deg) ;

F I LT R O S O PAC I T Y

Aplica transparncia na imagem . O


valor define a converso . Um valor
de 0 % totalmente transparente. Um
valor de 100 % no altera imagem.
Os valores entre 0 % e 100 % so
multiplicadores lineares sobre o efeito
. Isto equivalente a multiplicar as
amostras de imagem de entrada pela
quantidade . Se o parmetro for
omitido, o valor de 100 % assumido
.Os valores negativos no so
permitidos
-webkit-filter:invert(3) ;

EFEITOS EM BROWSERS DIFERENTES

Prefixos so utilizados para que as formataes que so utilizadas em estilo, possam ter
o mesmo efeito em todos os Browser. Foi a maneira encontrada de permitir que os
usurios pudessem ver o mesmo efeito em todos, enquanto as regras no fossem
inseridas nos Browsers.

-khtml- (Konqueror, really old Safari)


-moz- (Firefox)
-o- (Opera)
-ms- (Internet Explorer)
-webkit- (Safari, Chrome)

LISTA DE PROPRIEDADES

http://www.blooberry.com/indexdot/css/propindex/all.htm

LISTA DE PROPRIEDADES - FUNDOS

PROPRIEDADE
background

FUNO
Define todos os parmetros referentes ao fundo de
um elemento. Aceita de 1 a 5 valores.

background-color | background-image | background-repeat | background-attachment | backgroundposition


background-color

Define a cor de fundo de um elemento.

nomecor | #rrggbb | #rgb | rgb(d%,d%,d%) | transparent

LISTA DE PROPRIEDADES - FUNDOS

PROPRIEDADE
background-image

FUNO
Define uma imagem como fundo de um
elemento.

url | none
background-repeat
repeat | repeat-x | repeat-y | no-repeat

Define se a imagem vai repetir (formando um


mosaico) ou no e a direo da repetio.

LISTA DE PROPRIEDADES - FUNDOS

PROPRIEDADE
background-attachment

FUNO
Define se a imagem de fundo de um elemento
ficar fixa ou se ir rolar junto com o contedo.

scroll | fixed
background-position

Define o ponto onde inicia o desenho da imagem


de fundo.

top left | top center | top right | center left | center center | center right | bottom left | bottom center |
bottom right | x% y% | x unids_css y unids_css

LISTA DE PROPRIEDADES - MARGENS

PROPRIEDADE
margin

FUNO
Define as 4 margens do elemento. Aceita de 1 a 4
valores.

margin-top | margin-right | margin-bottom | margin-left


margin-top
margin-right
margin-bottom
margin-left

auto | unids_css | %

Definem as margens superior, direita, inferior e


esquerda.

L I S TA D E P RO P R I E DA D E S - PA D D I NG

PROPRIEDADE
padding

FUNO
Define o espao entre o contedo e os 4 limites do
elemento. Aceita de 1 a 4 valores.

padding-top | padding-right | padding- bottom | padding-left


padding-top
padding-right
padding-bottom
padding-left

unids_css | %

Definem o espao entre o contedo e os limites


superior, direito, inferior e esquerdo.

LISTA DE PROPRIEDADES - POSIO

PROPRIEDADE
top
right
Bottom
left

FUNO
Definem a distncia do elemento em relao ao
limite do elemento que o contm

auto | unids_css | %
vertical-align

Define o alinhamento vertical do elemlento.

baseline | sub | super | top | text-top | middle | bottom | text-bottom | unids_css | %

LISTA DE PROPRIEDADES - POSIO

PROPRIEDADE
z-index

FUNO
Define a ordem de apresentao dos elementos
quando h sobreposio.

auto | nmero
overflow
visible | hidden | scroll | auto

Define o que deve ocorrer quando o contedo de


um elemento excede sua rea

LISTA DE PROPRIEDADES - DIMENSO

PROPRIEDADE
width
height

FUNO
Definem a largura e a altura de um elemento.

auto | unids_css | %
max-width
max-height
none | unids_css | %

Definem a largura mxima e a altura mxima de


um elemento.

LISTA DE PROPRIEDADES - DIMENSO

PROPRIEDADE
min-width
min-height

FUNO
Definem a largura mnima e a altura mnima de um
elemento.

none | unids_css | %
line-height

normal | nmero | unids_css | %

Define a distncia entre linhas de texto.

LISTA DE PROPRIEDADES - FONTE

PROPRIEDADE
font

FUNO
Define vrios valores da fonte.

font-family | font-size/line-height | font-style | font-weight | font-variant | caption | icon | menu | messagebox | small-caption | status-bar
font-family

family-name | generic-family

Define o tipo de fonte.

LISTA DE PROPRIEDADES - FONTE

PROPRIEDADE
font-size

FUNO
Define o tamanho da fonte.

xx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger | unids_css | %
font-style
normal | italic | oblique

Define o estilo da fonte.

LISTA DE PROPRIEDADES - FONTE

PROPRIEDADE
font-weight

FUNO
Define a espessura do trao da fonte.

normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
font-size-adjust
none | nmero

Define que o tamanho da fonte deve ser ajustado,


caso o browser tenha de utilizar outro tipo de fonte
que no o escolhido em font-family.

LISTA DE PROPRIEDADES - FONTE

PROPRIEDADE
font-variant

FUNO
Define se deve ser utilizado um tipo de fonte
"small-caps" ou normal.

normal | small-caps
font-stretch

Define uma contrao ou expanso na largura da


fonte.

normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semiexpanded | expanded | extra-expanded | ultra-expanded

LISTA DE PROPRIEDADES - TEXTO

PROPRIEDADE
color

FUNO
Define a cor do texto

nomecor | #rrggbb | #rgb | rgb(d,d,d) | rgb(d%,d%,d%)


text-align
left | right | center | justify

Define alinhamento do texto

LISTA DE PROPRIEDADES - TEXTO

PROPRIEDADE

FUNO
Define um deslocamento para a direita ou
esquerda da primeira linha do texto.

text-indent

unids_css | %
Define um efeito decorativo para o texto.

text-decoration
none | underline | overline | line-through | blink
text-shadow

Define uma sombra para o texto contido no elemento. Aceita 4 valores, sendo
um para a cor e os demais para as medidas da sombra. A primeira unidade
CSS representa o deslocamento horizontal da sombra, o segundo o
deslocamento vertical, e o terceiro a dissipao da sombra.

nome_da_cor; #rrggbb; #rgb; rgb(d,d,d); rgb(d%,d%,d%);

LISTA DE PROPRIEDADES - TEXTO

PROPRIEDADE
text-transform

FUNO
Define que o texto deve ser capitalizado ou ser
exibido todo em maisculas ou minsculas.

none | capitalize | uppercase | lowercase


letter-spacing
word-spacing
normal | unids_css

Definem um aumento ou diminuio no espao


entre os caracteres ou entre as palavras.

LISTA DE PROPRIEDADES - TEXTO

PROPRIEDADE
white-space

FUNO
Define o tratamento a ser dado ao espao em
branco existente dentro de um elemento

normal | pre | nowrap


direction
ltr | rtl

Define a direo em que escrito o texto. Da


esquerda para a direita ou da direita para a
esquerda

LISTA DE PROPRIEDADES - LISTA

PROPRIEDADE
list-style

FUNO
Define todos os parmetros referentes a uma lista.
Aceita de 1 a 3 valores

list-style-type | list-style-position | list-style-image


list-style-type

Define o tipo de marcador de item da lista.

none | disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-alpha |


upper-alpha | lower-greek | lower-latin | upper-latin | hebrew | armenian | georgian | cjk-ideographic |
hiragana | katakana | hiragana-iroha | katakana-iroha

LISTA DE PROPRIEDADES - LISTA

PROPRIEDADE
list-style-position

FUNO
Define a posio do marcador de item da lista

inside | outside
list-style-image

none | url

Define a imagem a ser utilizada como marcador de


item da lista.

LISTA DE PROPRIEDADES - TABELAS

PROPRIEDADE
border-collapse

FUNO
Define se os traos das bordas sero fundidos ou
mantidos separados.

collapse | separate
border-spacing
unids_css

Define a distncia entre as bordas de clulas


adjacentes. S aplicvel quando border-collapse
for separate

LISTA DE PROPRIEDADES - TABELAS

PROPRIEDADE
empty-cells
show | hide

FUNO
Define se as clulas sem contedo visvel devem
ter bordas ou no. S aplicvel quando bordercollapse for separate.

LISTA DE PROPRIEDADES - BORDAS

PROPRIEDADE
border

FUNO
Define estilos para as 4 bordas de um elemento.
Aceita de 1 a 3 valores.

border-style; border-width; border-color;


border-color

Define a cor das 4 bordas de um elemento. Aceita


de 1 a 4 valores

nome_da_cor; #rrggbb; #rgb; rgb(d%,d%,d%);


border-style

Define o estilo das 4 bordas de um elemento.


Aceita de 1 a 4 valores

none; hidden; dotted; dashed; solid; double; groove; ridge; inset; outset;

LISTA DE PROPRIEDADES - CONTORNO

PROPRIEDADE
outline

FUNO
Define o estilo para as linhas de contorno. Aceita
de 1 a 3 valores.

outline-style; outline-width; outline-color;


outline-color

Define a cor das linhas de contorno

invert; nome_da_cor; #rrggbb; #rgb; rgb(d,d,d); rgb(d%,d%,d%);


outline-offset
unidades_css

Define a distncia das linhas de contorno em


relao as bordas do elemento.

LISTA DE PROPRIEDADES - CONTORNO

PROPRIEDADE
outline-style

FUNO
Define o estilo das linhas de contorno

none; hidden; dotted; dashed; solid; double; groove; ridge; inset; outset;
outline-width
thin; medium; thick; unidades_css

Define a espessura das linhas de contorno

LISTA DE PROPRIEDADES BOX-SHADOW

PROPRIEDADE

box-shadow

FUNO
Define uma sombra a um elemento. Aceita 4
valores, sendo um para a cor e os demais para as
medidas da sombra. A primeira unidade CSS
representa o deslocamento horizontal da sombra, o
segundo o deslocamento vertical, e o terceiro a
dissipao da sombra.

nome_da_cor; #rrggbb; #rgb; rgb(d,d,d); rgb(d%,d%,d%);