Tutorial CSS

Introduo
Folhas de estilos em cascata Cascading Style Sheets
(CSS) uma ferramenta fantstica para construo
do layout dos seus websites !ermite "ue #oc$ pro%ete
websites com uma tcnica completamente diferente da
con#encional e possibilita uma consider#el reduo de
tempo de trabalho Conhecer CSS uma necessidade para "ual"uer um
en#ol#ido com o pro%eto web
&ste tutorial iniciar #oc$ nas CSS em algumas poucas horas ' fcil de
entender e ensinar a #oc$ todas as tcnicas sofisticadas
(prender CSS di#ertido ) medida em "ue #oc$ for progredindo no
tututorial no es"uea de dedicar algum tempo para fa*er seus
e+perimentos com o "ue for aprendendo em cada lio
!ara usar CSS necessrio um conhecimento bsico de HTML Se
#oc$ no est familiari*ado com ,-./0 consulte nosso tutorial ,-./
antes de comear com CSS
Quais softwares eu precisarei?
!or fa#or0 e#ite usar softwares tais como Front!age0 1ream2ea#er ou
2ord para acompanhar este tutorial Softwares a#anados no
facilitaro seu aprendi*ado de CSS (o contrrio0 eles colocaro limites
para #oc$ e atrasaro seu aprendi*ado
-udo o "ue #oc$ precisa de um simples e gratuito editor de te+to
!or e+emplo0 .icrosoft 2indows #em com um programa chamado
3otepad 3ormalmente este programa est no diret4rio (ccessories no
menu Start 56 !rograms (lternati#amente #oc$ pode usar um editor de
te+to similar0 tal como0 !ico para /inu+ ou Simple -e+t para .acintosh
7m editor de te+to simples o ideal para o aprendi*ado de ,-./ e de
CSS por"ue eles no afetam e nem modificam o c4digo "ue #oc$ digita
(ssim os acertos e erros de codificao de#em8se e+clusi#amente a
#oc$ no ao software "ue #oc$ utili*a
9oc$ pode usar "ual"uer na#egador parta acompanhar este tutorial 34s
aconselhamos "ue #oc$ mantenha seu na#egador sempre atuali*ado e
utili*e a :ltima #erso dispon;#el
7m na#egador e um editor de te+tos simples tudo o "ue #oc$ precisa
9amos comear<
Lio 1: O que CSS
-al#e* #oc$ % tenha ou#ido falar em CSS0 mas no saiba o "ue significa
e+atamente 3esta lio #oc$ saber o "ue e para "ue ser#e CSS
CSS a abre#iatura para Cascading Style Sheets Folha de &stilos em
Cascata
O que eu posso fazer com CSS?
CSS uma linguagem para estilos "ue define o layout de documentos
,-./ !or e+emplo0 CSS controla fontes0 cores0 margens0 linhas0
alturas0 larguras0 imagens de fundo0 posicionamentos e muito mais
(guarde e #oc$ #er<
,-./ pode ser (in)de#idamente usado para definir o layout de websites
Contudo CSS proporciona mais op=es e mais preciso e sofisticado
CSS suportado por todos os na#egadores atuais
1epois de estudar algumas poucas li=es deste tutorial0 #oc$ estar em
condi=es de pro%etar uma folha de estilos0 usando CSS para dar um
grande #isual ao seu website
Qual a diferena entre CSS e HTML?
,-./ usado para estruturar conte:dos CSS usado para formatar
conte:dos estruturados
>?0 isto soa um tanto tcnico e confuso .as0 por fa#or continue lendo
-udo far sentido em bre#e
&m tempos passados "uando a .adonna era #irgem e um su%eito
chamado -im @erners /ee in#entou a 2orld 2ide 2eb0 a linguagem
,-./ era usada somente para estruturar te+tos 7m autor podia marcar
seus te+tos definindo Aisto um cabealho A ou Aisto um pargrafoA
usando tags ,-./ tais como <h1> e <p>
) medida "ue a 2eb ganha#a popularidade0 os designers comea#am a
sentir a necessidade de encontrar meios de construir layout para os
documentos online !ara suprir estas necessidades os fabricantes de
na#egadores (B"uela poca a 3etscape e a .icrosoft) in#entaram no#as
tags ,-./ tais como0 por e+emplo a tag <font> "ue se diferencia#a
das tags originais do ,-./ pelo fato de destinar8se B layout e no B
estrutura
Csto adicionalmente te#e o efeito de dis#irtuar o emprego de tags
inicialmente pro%etadas para estrutura como por e+emplo a tag Dtable6
"ue passaram a ser empregadas para layout .uitas destas no#as tags
para layout como a tag DblinE6 eram suportadas somente por um
determinado tipo de na#egador ( frase A9oc$ precisa do na#egador F
para #isuali*ar esta pginaA tornou8se comum nos websites
CSS foi in#entada para solucionar esta situao0 colocando B disposio
dos web designers meios sofisticados de pro%etar layouts suportados por
todos os na#egadores & ao mesmo tempo a separao dos estilos de
apresentao da marcao dos conte:dos torna a manuteno dos sites
bem mais fcil
Quais so os enef!cios do uso de CSS?
CSS uma re#oluo no mundo do web design >s benef;cios concretos
do uso de CSS incluemG
controle do layout de vrios documentos a partir de uma
simples folha de estilos;
maior preciso no controle do layout;
aplicao de diferentes layouts para servir diferentes
mdias (tela, impressora, etc.);
emprego de variadas, sofsticadas e avanadas tcnicas
de desenvolvimento.
Lio !: Como "unciona CSS
3esta lio #oc$ aprender a desen#ol#er sua primeira folha de estilos
9oc$ #er o bsico sobre o modelo CSS e "ue c4digo necessrio para
usar CSS em um documento ,-./
.uitas das propriedades usadas em Cascading Style Sheets (CSS) so
semelhantes B"uelas do ,-./ (ssim0 se #oc$ est acostumado a usar
,-./ para layout ir reconhecer muitos dos c4digos "ue usaremos
9amos dar uma olhada em um e+emplo concreto
" sinta#e $sica das CSS
Suponha "ue dese%amos uma cor de fundo #ermelha para a pgina webG
7sando HTML podemos fa*er assimG
<body bgcolor="#FF0000">
Com CSS o mesmo resultado ser obtido assimG
body {background-color: #FF0000;}
Como #oc$ pode notar os c4digos ,-./ e CSS so mais ou menos
parecidos > e+emplo acima ser#e tambm para demonstrar o
fundamento do modelo CSSG
.as0 onde colocar o c4digo CSSH ' isto "ue #eremos a seguir
"plicando CSS a um documento HTML
9oc$ pode aplicar CSS a um documento de tr$s maneiras distintas >s
tr$s mtodos de aplicao esto e+emplificados a seguir
Iecomendamos "ue #oc$ fo"ue no terceiro mtodo0 ou se%a o mtodo
e+terno
Mtodo %& 'n(line )o atriuto st*le+
7ma maneira de aplicar CSS pelo uso do atributo style do ,-./
-omando como base o e+emplo mostrado anteriormente a cor #ermelha
para o fundo da pgina pode ser aplicada conforme mostrado a seguirG
<html>
<head>
<title>Exemplo</title>
</head>
<body style="background-color: #FF0000;">
<p>Esta ma p!gina com fndo "ermelho</p>
</body>
</html>
Mtodo ,& 'nterno )a ta- st*le+
7ma outra maneira de aplicar CSS e pelo uso da tag <style> do ,-./
Como mostrado a seguirG
<html>
<head>
<title>Exemplo</title>
<style type="text/css">
body {background-color: #FF0000;}
</style>
</head>
<body>
<p>Esta ma p!gina com fndo "ermelho</p>
</body>
</html>
Mtodo .& /#terno )lin0 para uma fol1a de estilos+
> mtodo recomendado o de lincar para uma folha de estilos e+terna
7saremos este mtodo nos e+emplos deste tutorial
7ma folha de estilos e+terna um simples ar"ui#o de te+to com a
e+tenso #css -al como com "ual"uer outro tipo de ar"ui#o #oc$ pode
colocar uma folha de estilos tanto no ser#idor como no disco r;gido
9amos supor0 por e+emplo0 "ue sua folha de estilos tenha sido nomeada
de st$le#css e est locali*ada no diret4rio st$le -al situao est
mostrada a seguirG
> Atru"ueA criar um linE no documento ,-./ (defaulthtm) para a
folha de estilos (stylecss) > linE criado em uma simples linha de
c4digo ,-./ como mostrado a seguirG
<lin# rel="stylesheet" type="text/css"
re!="style/style"css" />
3otar "ue o caminho para a folha de estilos indicado no atributo href
&sta linha de c4digo de#e ser inserida na seo header do documento
,-./0 isto 0 entre as tags <head> e </head> Conforme mostrado
abai+oG
<html>
<head>
<title>$e docmento</title>
<l#nk rel="styleseet" type="text/css"
re!="style/style"css" />
</head>
<body>
%%%
&ste linE informa ao na#egador para usar o ar"ui#o CSS na renderi*ao
e apresentao do layout do documento ,-./
( coisa realmente inteligente disto "ue #rios documentos ,-./
podem lincar para uma mesma folha de estilos &m outras pala#ras isto
significa "ue um simples ar"ui#o ser capa* de controlar a apresentao
de muitos documentos ,-./
&sta tcnica pode economi*ar uma grande "uantidade de trabalho Se por
e+emplo0 #oc$ "uiser trocar a cor do fundo de um site com JKK pginas0
a folha de estilos e#ita "ue #oc$ edite manualmente uma a uma as
pginas para fa*er a mudana nos JKK documentos ,-./ 7sando
CSS a mudana se far em uns poucos segundos trocando8se a cor em
uma folha de estilos central
9amos praticar o "ue aprendemos
2aa 3oc4 mesmo
(bra o 3otepad (ou "ual"uer outro editor de te+to "ue "ueira usar) e crie
dois ar"ui#os um ar"ui#o ,-./ e um ar"ui#o CSS com os
seguintes conte:dosG
default51tm
<html>
<head>
<title>$e docmento</title>
<lin# rel="stylesheet" type="text/css" href="style%css"
/>
</head>
<body>
<h1>$inha primeira folha de estilos</h1>
</body>
</html>
st*le5css
body &
bac#grond'color( #FF0000)
*
Sal#e os dois ar"ui#os no mesmo diret4rio /embre8se de sal#ar os
ar"ui#os com a e+tenso apropriada (AcssA e AhtmA)
(bra de"ault#htm no seu na#egador e #e%a uma pgina com o fundo
#ermelho !arabns< 9oc$ construiu sua primeira folha de estilos<
Lio %: Cores e "undos
3esta lio #oc$ aprender como aplicar cores de primeiro plano e cores
de fundo no seu website (bordaremos ainda os mtodos a#anados de
controle e posicionamento de imagens de fundo Sero e+plicadas as
seguintes propriedades CSSG
color
ac!ground"color
ac!ground"image
ac!ground"repeat
ac!ground"attachment
ac!ground"position
ac!ground
Cor do primeiro plano& a propriedade 6color6
( propriedade color define a cor do primeiro plano de um elemento
Considere0 por e+emplo0 "ue dese%amos "ue todos os cabealhos de
primeiro n;#el no documento se%am na cor #ermelha > elemento
,-./ "ue marca tais cabealhos o elemento <h1> > c4digo a seguir
define todos os <h1> na cor #ermelha
h1 &
color: #!!0000;
*
#er e$emplo
(s cores podem ser definidas pelo seu #alor he+adecimal como no
e+emplo acima (LffKKKK)0 com uso do nome da cor (AredA) ou ainda
pelo seu #alor rgb (rgb(MNN0K0K))
" propriedade 6ac0-round(color6
( propriedade bac#grond'color define a cor do fundo de um
elemento
> elemento <body> contm todo o conte:do de um documento ,-./
(ssim0 para mudar a cor de fundo da pgina0 de#emos aplicar a
propriedade bac#grond'color ao elemento <body>
9oc$ pode aplicar cores de fundo para outros elementos0 inclusi#e para
cabealhos e te+tos 3o e+emplo abai+o foram aplicadas diferentes
cores de fundo para os elementos <body> e <h1>
body &
background-color: #FF$$%%;
*
h1 &
color( #++0000)
background-color: #F$&'0(;
*
#er e$emplo
3otar "ue foram aplicadas duas propriedades ao elemento <h1>
separadas por um ponto e #;rgula
'ma-es de fundo 7ac0-round(ima-e8
( propriedade CSS bac#grond'image usada para definir uma imagem
de fundo
7saremos a imagem de uma borboleta para e+emplificar a aplicao de
imagens de fundo 9oc$ pode fa*er o download da imagem mostrada
abai+o e us8la nos seus e+perimentos (cli"ue com o boto direito do
mouse sobre a imagem e escolha Asal#ar imagem comoA) ou #oc$
poder usar uma outra imagem "ual"uer ao seu gosto
!ara inserir uma imagem de fundo na pgina basta aplicar a propriedade
bac#grond'image ao elemento <body> e especificar o caminho para
onde est gra#ada a imagem
body &
bac#grond'color( #FF,,--)
background-#)age: url*"butter!ly"g#!"+;
*
h1 &
color( #++0000)
bac#grond'color( #F,+.0/)
*
#er e$emplo
3@G 3otar como foi especificado o caminho para a imagem usando
url&'butter"l$#(i"') Csto significa "ue a imagem est locali*ada no
mesmo diret4rio da folha de estilos !ode ser escolhido um outro
diret4rio para gra#ar as imagens e o caminho seria
url&'##*ima(es*butter"l$#(i"') ou at mesmo hosped8la na CnternetG
url&'htt+:**,,,#html#net*butter"l$#(i"')
'ma-em de fundo repetida 7ac0-round(repeat8
3o e+emplo anterior #oc$ obser#ou "ue a imagem da borboleta repetiu
tanto na #ertical como na hori*ontal cobrindo toda a telaH ( propriedade
bac#grond'repeat controla o comportamento de repetio da
imagem de fundo
( tabela a seguir mostra os "uatro diferentes #alores para bac#grond'
repeat
9alue :escription /#ample
0ac#grond'repeat(
repeat'x
% imagem se repete na #er
e$empl
hori&ontal o
bac#grond'repeat(
repeat'y
% imagem se repete na vertical
#er
e$empl
o
bac#grond'repeat(
repeat
% imagem se repete na tanto
na hori&ontal como na vertical
#er
e$empl
o
bac#grond'repeat(
no'repeat
% imagem no se repete
#er
e$empl
o
!or e+emplo0 o c4digo mostrado a seguir para "ue a imagem no se
repita na telaG
body &
bac#grond'color( #FF,,--)
bac#grond'image( rl1"btterfly%gif"2)
background-repeat: no-repeat;
*
h1 &
color( #++0000)
bac#grond'color( #F,+.0/)
*
#er e$emplo
'ma-e de fundo ;#a 7ac0-round(attac1ment8
( propriedade bac#grond'attachment define se a imagem ser fi+a ou
se ir rolar %untamente com o elemento "ue a contm
7ma imagem de fundo fi+a permanece no mesmo lugar e no rola com a
tela ao contrrio da imagem "ue no fi+a e rola acompanhando o
conte:do da tela
( tabela a seguir mostra os "uatro diferentes #alores para bac#grond'
attachment 9e%a os e+emplos para constatar a diferena entre imagem
fi+a e imegem "ue rola
9alue :escription /#ample
0ac#grond'attachment(
scroll
% imagem rola com a
pgina
#er
e$emplo
0ac#grond'attachment( fixed
% imagem f$a
#er
e$emplo
!or e+emplo0 o c4digo abai+o fi+a a imagem na tela
body &
bac#grond'color( #FF,,--)
bac#grond'image( rl1"btterfly%gif"2)
bac#grond'repeat( no'repeat)
background-attac)ent: !#xed;
*
h1 &
color( #++0000)
bac#grond'color( #F,+.0/)
*
#er e$emplo
<osio da ima-em de fundo 7ac0-round(
position8
!or padro uma imagem de fundo posicionada no canto superior
es"uerdo da tela ( propriedade bac#grond'position permite alterar
este posicionamento padro e colocar a imagem em "ual"uer lugar na
tela
&+istem #rias maneiras de definir o posicionamento da imagem na tela
definindo #alores para bac#grond'position -odas elas se utili*am
de um sistema de coordenadas !or e+emplo0 os #alores OJKKp+ MKKp+O
posiciona a imagem a JKKp+ do topo e a MKKp+ do lado es"uerdo da
%anela do na#egador
(s coordenadas podem ser e+pressas em percentagem da largura da
%ane%a0 em unidades fi+as (pi+els0 cent;metros0 etc) ou pode8se usar as
pala#ras top0 bottom0 center0 left e right ( figura a seguir ilustra o
modelo de coordenadasG
3a tabela a seguir so mostrados alguns e+emplos
9alue :escription
/#ampl
e
bac#grond'position(
3cm 3cm
% imagem posicionada a ' cm
da es(uerda e ' cm para ai$o
na pgina
#er
e$empl
o
bac#grond'position(
405 345
% imagem centrada na
hori&ontal e a um (uarto (')*)
para ai$o na pgina
#er
e$empl
o
bac#grond'position(
top right
% imagem posicionada no #er
canto superior direito da pgina
e$empl
o
3o e+emplo de c4digo a seguir a imagem posicionada no canto inferior
direito da pginaG
body &
bac#grond'color( #FF,,--)
bac#grond'image( rl1"btterfly%gif"2)
bac#grond'repeat( no'repeat)
bac#grond'attachment( fixed)
background-pos#t#on: r#gt botto);
*
h1 &
color( #++0000)
bac#grond'color( #F,+.0/)
*
#er e$emplo
Compilando 7ac0-round8
( propriedade bac#grond uma abre#iao para todas as propriedades
listadas anteriormente
Com bac#grond #oc$ declara #rias propriedades de modo abre#iado0
economi*ando digitao e alguns bites0 alm de tornar a folha de estilo
mais fcil de se ler e entender
!or e+emplo0 obser#e as cinco linhas a seguirG
bac#grond'color( #FF,,--)
bac#grond'image( rl1"btterfly%gif"2)
bac#grond'repeat( no'repeat)
bac#grond'attachment( fixed)
bac#grond'position( right bottom)
7sando bac#grond #oc$ consegue o mesmo resultado0 abre#iando
como mostrado abai+oG
bac#grond( #FF,,-- rl1"btterfly%gif"2 no'repeat fixed
right bottom)
( declarao abre#iada de#e seguir a seguinte ordemG
6bac#grond'color7 P 6bac#grond'image7 P 6bac#grond'repeat7 P
6bac#grond'attachment7 P 6bac#grond'position7
Se uma das propriedades no for declarada ela assume automaticamente
o seu #alor default !or e+emplo0 a propriedade bac#grond'
attachment e bac#grond'position no foram declaradas no c4digo
mostrado a seguirG
bac#grond( #FF,,-- rl1"btterfly%gif"2 no'repeat)
(s duas propriedades no declaradas assumiro o #alor default "ue como
#oc$ % sabe soG a imagem rola na tela e ser posicionada no canto
superior es"uerdo ("ue so os #alores default para as propriedades no
declaradas)
Lio -: .ontes
3esta lio estudaremos as fontes e como aplic8las usando CSS
9eremos como criar situa=es para "ue determinada fonte se%a
#isuali*ada pelo usurio mesmo no estando instalada em seu sistema
operacional 1escre#eremos as seguintes propriedades CSSG
font"family
font"style
font"variant
font"+eight
font"si&e
font
2am!lia de fontes 7font(famil*8
( propriedade font'family usada para definir uma lista de fontes e
sua prioridade para apresentao de um elemento em uma pgina Se a
primeira fonte da lista no esti#er instalada na m"uina do usurio0
de#er ser usada a segunda e assim por diante at ser encontrada uma
fonte instalada
&+istem dois tipos de nomes para definir fontesG nomes para fam;lias de
fontes e nomes para fam;lias genricas >s dois so e+plicados a seguirG
nome para famlias de fontes
,$emplos para este tipo (normalmente conhecidas como -font-)
so -%rial-, -.imes /e+ 0oman- ou -.ahoma-.
nome para famlias genricas
1amlias genricas so fontes (ue pertencem a um grupo com
apar2ncia uniforme. 3m e$emplo so as fontes sans"serif (ue
engloam a coleo de fontes (ue -no t2m p-.
( diferena est mostrada na figura a seguirG
(o listar fontes para seu website0 comece com a"uela preferida0
seguindo8se algumas alternati#as para ela ' recomend#el encerrar a
listagem das fontes com uma fonte genrica (ssim fa*endo0 em :ltimo
caso a pgina ser renderi*ada com fonte da mesma fam;lia das "ue
foram especificadas "uando todas as demais esti#erem indispon;#eis na
m"uina do usurio
( seguir mostramos um e+emplo de listagem de fontesG
h1 &font'family( arial8 "erdana8 sans'serif)*
h3 &font'family( "9imes :e; <oman"8 serif)*
#er e$emplo
Cabealhos <h1> sero renderi*ados com fonte A(rialA Se o usurio no
ti#er a font (rial instalada0 ser usada a fonte A9erdanaA Se ambas
esti#erem indispon;#eis na m"uina do usurio ser usada uma fonte da
fam;lia sans/seri"
3otar "ue para especificar a fonte A-imes 3ew IomanA foram usadas
aspas Csto necessrio para fontes com nomes compostos e "ue
contenham espaos entre os nomes
/stilo da fonte 7font(st*le8
( propriedade font'style define a escolha da fonte em normal0 italic
ou oblique 3o e+emplo a seguir todos as cabealhos <h3> sero em
itlico
h1 &font'family( arial8 "erdana8 sans'serif)*
h3 &font'family( "9imes :e; <oman"8 serif) !ont-style:
#tal#c;*
#er e$emplo
2onte 3ariante 7font(3ariant8
( propriedade font'"ariant usada para escolher as #ariantes normal
ou small/ca+s 7ma fonte small/ca+s a"uela "ue usa letras
mai:sculas de tamanhos redu*idos ConfundiuH 1$ uma olhada nos
e+emplos a seguirG
Se a propriedade font'"ariant for definida para small/ca+s e no
esti#er dispon;#el na m"uina do usurio0 ser usada fonte em
mai:scula
h1 &font'"ariant( small'caps)*
h3 &font'"ariant( normal)*
#er e$emplo
<eso da fonte 7font(wei-1t8
( propriedade font';eight define "uo negrito ou ApesadaA de#e ser
renderi*ada a fonte 7ma fonte pode ser normal ou bold (lguns
na#egadores suportam n:meros de JKK8QKK (em inter#alos de JKK em
JKK) para definir o peso da fonte
p &font'family( arial8 "erdana8 sans'serif)*
td &font'family( arial8 "erdana8 sans'serif) !ont-,e#gt:
bold;*
#er e$emplo
Taman1o da fonte 7font(size8
>n tamanho da fonte definido pela propriedade font'si=e
&+istem muitas unidades (p e+G pi+els e percentagens) "ue podem ser
usadas para definir o tamanho da fonte 3este tutorial n4s usaremos as
unidades mais comuns e apropriadas 9er e+emplos a seguirG
h1 &font'si=e( -0px)*
h3 &font'si=e( ./pt)*
h> &font'si=e( ./00)*
p &font'si=e( .e);*
#er e$emplo
&+iste uma diferena fundamental entre as "uatro unidades adotadas no
e+emplo acima (s unidades O+0O e O+tO so absolutas0 en"uanto O1O e
OemO permitem ao usurio a%ustar o tamanho das fontes ao seu gosto e
necessidade .uitos usurios t$m restri=es0 como por e+emplo0
pessoas idosas0 pessoas com #iso limitada ou as "ue usam um monitor
de bai+a "ualidade 2ara "a3er seu site acess45el a todos0 #oc$ de#er
usar unidades como O1O ou OemO
(bai+o uma figura mostrando como a%ustar o tamanho das fontes nos
na#egadores .o*illa Firefo+ e Cnternet &+plorer -ente #oc$ mesmo
este a%uste uma e+celente funcionalidade do na#egador0 no
mesmoH
Compilando 7font8
7sar font uma abre#iao "ue permite definir #rias propriedades em
uma s4
9e%a a seguir "uatro linhas de c4digo usadas para definir propriedades de
fonte para um pargrafo <p>G
p &
!ont-style: #tal#c;
!ont-,e#gt: bold;
!ont-s#1e: -0px;
!ont-!a)#ly: ar#al2 sans-ser#!;
*
7sar a abre#iao simplifica o c4digo como mostrado abai+oG
p &
!ont: #tal#c bold -0px ar#al2 sans-ser#!;
*
( ordem dos #alores para font a mostrada a seguir G
font'style P font'"ariant P font';eight P font'si=e P font'family
Lio 6: Te0tos
Formatar e estili*ar te+tos um item cha#e para "ual"uer web designer
3esta lio #oc$ ser apresentado Bs interessantes oportunidades "ue as
CSS proporcionam para adicionar layout aos te+tos Sero discutidadas
as propriedades listadas abai+oG
te$t"indent
te$t"align
te$t"decoration
letter"spacing
te$t"transform
'ndentao de te#to 7te#t(indent8
( propriedade text'indent permite "ue #oc$ apli"ue um recuo B
primeira linha de um pargrafo 3o e+emplo a seguir um recuo de %7+0
aplicado B todos os te+tos marcados com <p>G
p &
text'indent( >0px)
*
#er e$emplo
"lin1amento de te#tos 7te#t(ali-n8
( propriedade text'align corresponde ao atributo align das antigas
#ers=es do ,-./ -e+tos podem ser alinhados B es"uerda (le"t)0 B
direita (ri(ht) ou centrados (centred) & temos ainda o #alor 8usti"$ "ue
fa* com o te+to contido em uma linha se estenda tocando as margens
es"uerda e direita &ste tipo de alinhamento usado em %ornais e
re#istas
3o e+emplo a seguir o te+to contido na clula de cabealho <th>
alinhado B direita e os contidos nas clulas de dados <td> so
centrados &0 os te+tos normais em pargrafos so %ustificadosG
th &
text'align( r#gt;
*
td &
text'align( center;
*
p &
text'align( 3ust#!y;
*
#er e$emplo
:ecorao de te#tos 7te#t(decoration8
( propriedade text'decoration possibilita adicionar AefeitosA ou
AdecoraoA em te+tos 9oc$ pode por re+emplo0 sublinhar te+tos0 cortar
o te+to com uma linha0 colocar uma linha sobre o te+to0 etc 3o
e+emplo a seguir os cabealhos <h1> so sublinhados0 os cabealhos
<h3> le#am um linha em cima e os cabealhos <h>> so cortados por
uma linha
h1 &
text'decoration( underl#ne)
*
h3 &
text'decoration( o4erl#ne)
*
h> &
text'decoration( l#ne-troug)
*
#er e$emplo
/spao entre letras 7letter(spacin-8
> espaamento entre os caracteres de um te+to controlado pela
propriedade letter'spacing > #alor desta propriedade define o
espao entre os caracteres !or e+emplo0 se #oc$ dese%a um espao de
%+0 entre as letras do te+to de um pargrafo <p> e de 9+0 entre as letras
do te+to de um cabealho <h1> o c4digo a seguir de#er ser usado
h1 &
letter'spacing( %px;
*
p &
letter'spacing( -px;
*
#er e$emplo
Transformao de te#tos 7te#t(transform8
( propriedade text'transform controla a capitali*ao (tornar
mai:scula) do te+to 9oc$ pode escolher ca+itali3e0 u++ercase ou
lo,ercase independentemente de como o te+to foi escrito no c4digo
,-./
Como e+emplo tomamos a pala#ra AcabealhoA "ue pode ser apresentada
ao usurio como AC(@&R(/,>A ou ACabealhoA So "uatro os
#alores poss;#eis para text'transformG
capitali&e
4apitali&a a primeira letra de cada palavra. 5or e$emplo6 -7ohn
doe- transforma"se para -8ohn 9oe-.
uppercase
4onverte todas as letras para mai:scula. 5or e$emplo6 -7ohn
doe- transforma"se para-8;</ 9;,-.
lo+ercase
4onverte todas as letras para min:scula. 5or e$emplo6 -8;</
9;,- transforma"se para-7ohn doe-.
none
=em trasforma>es " o te$to apresentado como foi escrito no
c?digo <.@A.
!ara e+emplificar #amos usar uma lista de nomes >s nomes esto
marcados com o elemento <li> (item de lista) 9amos supor "ue
dese%amos os nomes capitali*ados e os cabealhos em letras mai:sculas
(o consultar o e+emplo sugerido para este c4digo d$ uma olhada no
,-./ da pgina e obser#e "ue os te+tos no c4digo foram escritos com
todas as letras em min:sculas
h1 &
text'transform( uppercase;
*
li &
text'transform( cap#tal#1e;
*
#er e$emplo
Lio 9: Lin:s
9oc$ pode aplicar aos linEs tudo "ue aprendeu nas li=es anteriores (ie
mudar cores0 fontes0 sublinhados0 etc) ( no#idade a"ui "ue #oc$ pode
definir as propriedades de maneira diferenciada de acordo com o estado
do linE ou se%a #isitado0 no #isitado0 ati#o ou com o ponteiro do mouse
sobre o linE Csto possibilita adicionar interessantes efeitos ao seu
website !ara estili*ar estes efeitos #oc$ usar as chamadas pseudo8
classes
O que pseudo(classe?
7ma pseudo8classe permite estili*ar le#ando em conta condi=es
diferentes ou e#entos ao definir uma propriedade de estilo para uma tag
,-./
9amos #er um e+emplo Como #oc$ % sabe0 linEs so marcados no
,-./ com tags <a> !odemos ento usar a como um seletor CSSG
a &
color( ble)
*
3m lin! pode ter diferentes estados. 5or e$emplo, pode ter sido
visitado ou no visitado. #oc2 usar pseudo"classes para
estili&ar lin!s visitados e no visitados.
a:l#nk &
color( ble)
*
a:4#s#ted &
color( red)
*
7se as pseudo8classes a(lin# e a("isited para estili*ar linEs no
#isitados e #isitados respecti#amente /inEs ati#os so estili*ados com a
pseudo8classe a(acti"e e a(ho"er0 esta :ltima a pseudo8classe para
linEs com o ponteiro do mouse sobre ele
( seguir e+plicaremos com mais detalhes e e+emplificao0 as "uatro
pseudo8classes
<seudo(classe& lin0
( pseudo8classe (lin# usada para linEs no #isitados
3o e+emplo a seguir linEs no #istados sero na cor #erde
a:l#nk &
color( green)
*
#er e$emplo
<seudo(classe& 3isited
( pseudo8clases ("isited usada para linEs #isitados 3o e+emplo a
seguir linEs #isitados sero na cor amarelaG
a:4#s#ted &
color( yello;)
*
#er e$emplo
<seudo(classe& acti3e
( pseudo8classe (acti"e usada para linEs ati#os
3o e+emplo a seguir linEs ati#os tero seu fundo na cor #ermelhaG
a:act#4e &
bac#grond'color( red)
*
#er e$emplo
<seudo(classe& 1o3er
( pseudo8classe (ho"er usada para "uando o ponteiro do mouse est
sobre o linE
Csto pode ser usado para conseguir efeitos bem interessantes !or
e+emplo0 podemos mudar a cor do linE para laran%a e o te+to para
itlico "uando o ponteiro do mouse passa sobre ele0 o c4digo CSS para
estes efeitos o mostrado a seguirG
a:o4er &
color( orange)
font'style( italic)
*
#er e$emplo
/#emplo %& /feito quando o ponteiro est$ sore
o lin0
' comum a criao de efeitos diferentes "uando o ponteiro est sobre o
linE 9eremos a seguir alguns e+emplos e+tras de estili*ao da pseudo8
classe (ho"er
/#emplo %a& /spaamento entre as letras
Como #oc$ de#e estar lembrado da lio N0 o espaamento entre as letras
de um te+to pode ser controlado pela propriedade letter'spacing
Csto pode ser aplicado aos linEs para obter um efeito interessanteG
a:o4er &
letter'spacing( 10px)
font';eight(bold)
color(red)
*
#er e$emplo
/#emplo %& =<</>C"S/ e lowercase
3a lio N #imos a propriedade text'transform0 para estili*ar com
letras mai:sculas e min:sculas Csto pode ser usado para estili*ar linEsG
a:o4er &
text'transform( ppercase)
font';eight(bold)
color(ble)
bac#grond'color(yello;)
*
#er e$emplo
>s e+emplos mostrados do uma idia das in:meras possibilidades de
combinao de diferentes propriedades 9oc$ pode criar seus pr4prios
efeitos faa uma tentati#a<
/#emplo ,& >emo3endo sulin1ado dos lin0s
7ma pergunta comumG Como remo#er o sublinhado dos linEsH
;oc< de5e estudar com muito cuidado a necessidade de retirar o
sublinhado dos lin:s= +ois isto +oder redu3ir si(ni"cati5amente a
usabilidade do ,ebsite# (s pessoas esto acostumadas com linEs na
cor a*ul e sublinhados e sabem "ue ali h um te+to a ser clicado (t
minha me sabe disto< Se #oc$ muda a cor e retira o sublinhado dos
linEs0 poder confundir seus #isitantes e em conse"S$ncia no retirar o
m+imo dos conte:dos do seu website
Feita esta ressal#a0 muito fcil retirar o sublinhado dos linEs Conforme
e+plicado na lio N0 a propriedade text'decoration pode ser usada
para definir se o te+to ou no sublinhado !ara remo#er o sublinhado0
basta definir o #alor none para a propriedade text'decoration
a &
text-decorat#on:none;
*
(lternati#amante0 #oc$ pode definir text'decoration %untamente com
outras propriedades para as "uatro pseudo8classes
a(lin# &
color( ble)
text-decorat#on:none;
*
a("isited &
color( prple)
text-decorat#on:none;
*
a(acti"e &
bac#grond'color( yello;)
text-decorat#on:none;
*
a(ho"er &
color(red)
text-decorat#on:none;
*
#er e$emplo
Lio >: Identi"icando e
a(ru+ando elementos &classes e
id)
&m alguns casos #oc$ dese%a aplicar estilos a um elemento ou grupo de
elementos em particular 3esta lio #eremos como usar class e id
para estili*ar elementos
Como definir uma cor para um determinado cabealho0 diferente da cor
usada para os demais cabealhos do websiteH Como agrupar linEs em
diferentes categorias e estili*ar cada categoria diferentementeH &stas
so algumas das "uest=es "ue iremos responder nesta lio
"-rupando elementos com uso de classe
9amos supor "ue temos duas listas de linEs para diferentes tipos de u#as
usadas na produo de #inho branco e de #inho tinto > c4digo ,-./
conforme mostrado abai+oG
<p>?"as para "inho branco(</p>
<l>
<li><a href="ri%htm"><iesling</a></li>
<li><a href="ch%htm">,hardonnay</a></li>
<li><a href="pb%htm">@inot 0lanc</a></li>
</l>
<p>?"as para "inho tinto(</p>
<l>
<li><a href="cs%htm">,abernet Aa"ignon</a></li>
<li><a href="me%htm">$erlot</a></li>
<li><a href="pn%htm">@inot :oir</a></li>
</l>
#er e$emplo
Tueremos "ue os linEs para #inho branco se%am na cor amarela0 para
#inho tinto na cor #ermelha e os demais linEs na pgina permaneam na
cor a*ul
!ara conseguir isto0 di#idimos os linEs em duas categorias Csto feito
atribuindo uma classe para cada linE0 usando o atributo class
9amos especificar esta classe no e+emplo a seguirG
<p>?"as para "inho branco(</p>
<l>
<li><a href="ri%htm" class=",#te,#ne"><iesling</a></li>
<li><a href="ch%htm" class=",#te,#ne">,hardonnay</a></li>
<li><a href="pb%htm" class=",#te,#ne">@inot 0lanc</a></li>
</l>
<p>?"as para "inho tinto(</p>
<l>
<li><a href="cs%htm" class="red,#ne">,abernet
Aa"ignon</a></li>
<li><a href="me%htm" class="red,#ne">$erlot</a></li>
<li><a href="pn%htm" class="red,#ne">@inot :oir</a></li>
</l>
(gora podemos definir propriedades espec;ficas para linEs pertencentes
as classes whitewine e redwine0 respecti#amente
a &
color( ble)
*
a%,#te,#ne &
color( #FF0000)
*
a%red,#ne &
color( #.00000)
*
#er e$emplo
Como mostrado no e+emplo acima0 pode8se definir propriedades para
estili*ao dos elementos pertencentes a uma determinada classe
usando um #nomedaclasse na folha de estilos do documento
'denti;cando um elemento com uso de id
(lm de agrupar elementos podemos "uerer atribuir identificao a um
:nico elemento Csto feito usando o atributo id
> "ue h de especial no atributo id "ue no poder e+istir dois ou mais
elementos com a mesma id0 ou se%a em um documento apenas um e
somente um elemento poder ter uma determinada id Cada id :nica
!ara casos em "ue ha%a necessidade de mais de um elemento com a
mesma identificao usamos o atributo class ( seguir um e+emplo de
poss;#el uso de idG
<h1>,apBtlo 1</h1>
%%%
<h3>,apBtlo 1%1</h3>
%%%
<h3>,apBtlo 1%3</h3>
%%%
<h1>,apBtlo 3</h1>
%%%
<h3>,apBtlo 3%1</h3>
%%%
<h>>,apBtlo 3%1%3</h>>
%%%
> e+emplo acima simula os cabealhos de um documento estruturado em
cap;tulos e pargrafos ' comum atribuir uma id para cada cap;tulo
como mostrado a seguirG
<h1 #d="c.">,apBtlo 1</h1>
%%%
<h3 #d="c.-.">,apBtlo 1%1</h3>
%%%
<h3 #d="c.-/">,apBtlo 1%3</h3>
%%%
<h1 #d="c/">,apBtlo 3</h1>
%%%
<h3 #d="c/-.">,,apBtlo 3%1</h3>
%%%
<h> #d="c/-.-/">,apBtlo 3%1%3</h>>
%%%
9amos supor "ue o cabealho do cap;tulo JM de#a ser na cor #ermelha
Csto pode ser feito conforme mostrado na folha de estilo a seguirG
#c.-/ &
color( red)
*
#er e$emplo
Como mostrado no e+emplo acima0 podemos definir propriedades para
um elemento espec;fico usando um seletor Lid na folha de estilos para o
documento
Lio ?: @(ru+ando elementos
&s+an e di5)
>s elementos Dspan6 e Ddi#6 so usados para agrupar e estruturar um
documento e so fre"Sentemente usados em con%unto com os atributos
class e id
3esta lio #eremos com detalhes o uso dos elementos ,-./ Dspan6 e
Ddi#6 no "ue se refere a sua #ital importUncia para as CSS
%grupando com <span>
%grupando com<di">
"-rupando com ?span@
> elemento <span> um elemento neutro e "ue no adiciona "ual"uer
tipo de semUntica ao documento Contudo0 <span> pode ser usado pelas
CSS para adicionar efeitos #isuais a partes espec;ficas do te+to no seu
documento
7m e+emplo deste uso mostrado na citao abai+o de autoria de
@en%amin FranElinG
<p>Cormir cedo e acordar cedo fa= o homem
sad!"el8 rico e s!bio%</p>
9amos supor "ue "ueremos enfati*ar na cor #ermelha os benef;cios
apontados por .r FranElin pelo fato de no se passar o dia dormindo
!ara isto marcamos os benef;cios com <span> ( cada span atribu;mos
uma class0 e estili*amos na folha de estilosG
<p>Cormir cedo e acordar cedo fa= o homem
<span class="bene!#t">saud54el</span>8
<span class="bene!#t">r#co</span>
e <span class="bene!#t">s5b#o</span>%</p>
( folha de estilosG
span"bene!#t &
color(red)
*
#er e$emplo
' claro "ue #oc$ pode usar id para estili*ar o elemento <span> .as0
como #oc$ de#e estar lembrado0 de#er usar uma :nica id para cada um
os tr$s elementos <span>8 conforme foi e+plicado na lio anterior
"-rupando com ?di3@
&n"uanto <span> usado dentro de um elemento n;#el de bloco como
#imos no e+emplo anterior0 <di"> usado para agrupar um ou mais
elementos n;#el de bloco
1iferenas B parte0 o agrupamento com <di"> funciona mais ou menos
da mesma maneira 9amos #er um e+emplo tomando duas listas de
presidentes dos &stados 7nidos agrupados segundo suas filia=es
pol;ticasG
<d#4 #d="de)ocrats">
<l>
<li>Fran#lin C% <oose"elt</li>
<li>Darry A% 9rman</li>
<li>Eohn F% Fennedy</li>
<li>Gyndon 0% Eohnson</li>
<li>Eimmy ,arter</li>
<li>0ill ,linton</li>
</l>
</di">
<d#4 #d="republ#cans">
<l>
<li>C;ight C% Eisenho;er</li>
<li><ichard :ixon</li>
<li>Herald Ford</li>
<li><onald <eagan</li>
<li>Heorge 0sh</li>
<li>Heorge I% 0sh</li>
</l>
</di">
& na folha de estilos0 podemos agrupar a estili*ao da mesma maneira
como fi*emos no e+emplo acimaG
#de)ocrats &
bac#grond(ble)
*
#republ#cans &
bac#grond(red)
*
#er e$emplo
3os e+emplos mostrados acima usamos somente <di"> e <span> para
simples estili*a=es0 tais como cores de te+tos e de fundos Contudos
estes dois elementos possibilitam estili*a=es bem mais a#anadas
como #eremos adiante nas li=es deste tutorial
Lio A: O bo0 model
> bo+ model (modelo das cai+as) em CSS0 descre#e os bo+es (as cai+as)
geradas pelos elementos ,-./ > bo+ model0 detalha ainda0 as op=es
de a%uste de margens0 bordas0 padding e conte:do para cada elemento
(bai+o apresentamos um diagrama representando a estrutura de
construo do bo+ modelG
O o# model em CSS
( ilustrao acima te4rica 9amos e+plic8la na prtica tomando como
base um cabealho e um te+to > ,-./ para nosso e+emplo (o te+to
foi retirado da 1eclarao 7ni#ersal dos 1ireitos ,umanos e est no
original em ingl$s) o mostrado abai+oG
<h1>Jrticle 1(</h1>
<p>Jll hman beings are born free
and eKal in dignity and rights%
9hey are endo;ed ;ith reason and conscience
and shold act to;ards one another in a
spirit of brotherhood</p>
1efinindo estilos para cores e fontes o e+emplo pode ser apresentado
como a seguirG
> e+emplo contm dois elementosG <h1> e <p> > bo+ model para os
dois elementos mostrado a seguirG
&mbora possa parecer um pouco complicado0 a ilustrao mostra como
cada um dos elementos contido em um bo+ (uma cai+a) @o+es "ue
podem ser a%ustados e controlados #ia CSS
Lio 17: Mar(in e +addin(
3a lio anterior #imos o bo+ model 3esta lio #eremos como
controlar a apresentao de um elemento definindo as propriedades
margin e padding
9efnindo margin de um elemento
9efnindo padding de um elemento
:e;nindo mar-in de um elemento
7m elemento tem "uatro ladosG right0 left0 top e bottom (direito0
es"uerdo0 superior e inferior) ( margin a distUncia entre os lados de
elementos #i*inhos (ou Bs bordas do documento) 9er o diagrama
mostrado na lio Q
9amos comear com um e+emplo mostrando como definir margins para
o documento0 ou se%a0 para o elemento <body> ( ilustrao a seguir
mostra como sero as margens da pgina
(s CSS so mostradas abai+oG
body &
margin'top( 100px)
margin'right( /0px)
margin'bottom( 10px)
margin'left( L0px)
*
>u0 adotando uma sinta+e mais eleganteG
body &
margin( 100px /0px 10px L0px)
*
#er e$emplo
(s margens para a maioria dos elementos pode ser definida conforme o
e+emplo acima !odemos ento0 por e+emplo0 definir margens para
todos os pargrafos <p>G
body &
margin( 100px /0px 10px L0px)
*
p {
)arg#n: 6px 60px 6px 60px;
}
#er e$emplo
:e;nindo paddin- de um elemento
!adding pode tambm ser entendido como AenchimentoA Csto fa*
sentido0 por"ue padding no computado na distUncia entre elementos0
padding define simplesmente a distUncia entre a borda e o conte:do do
elemento
Clustramos o uso de padding atra#s de um e+emplo onde todos os
cabealhos t$m uma cor de fundo definidaG
h1 &
background: yello,;
*
h3 &
background: orange;
*
#er e$emplo
1efinindo padding para os cabealhos0 alteramos a "uantidade de
enchimento e+istente ao redor de cada um delesG
h1 &
bac#grond( yello;)
padd#ng: /0px /0px /0px '0px;
*
h3 &
bac#grond( orange)
padd#ng-le!t:./0px;
*
#er e$emplo
Lio 11: Bordas
@ordas podem ser usadas para muitas coisas0 por e+emplo0 como
elemento decorati#o ou para ser#ir de linha de separao entre duas
coisas CSS proporciona infinitas possibilidades de uso de bordas na
pgina
order"+idth
order"color
order"style
,$emplos de defnio de ordas
order
" espessura das ordas 7order(widt18
( espessura das bordas definida pela propriedade border';idth0 "ue
pode assumir os #alores thin0 medium0 e thicE (fina0 mdia e grossa)0 ou
um #alor numrico em pi+els ( figura a seguir ilustra algumas
espessuras de bordasG
"s cores das ordas 7order(color8
( propriedade border'color define as cores para as bordas >s #alores
so e+pressos em c4digo ou nome de cores0 por e+emplo0 ALJMVWNXA0
Argb(JMV0JMV0JMV)A ouAyellowA
Tipos de ordas7order(st*le8
&+istem #rios tipos de bordas dispon;#eis para escolha ( seguir
apresentamos Y tipos diferentes de bordas e como elas so renderi*adas
Cnternet &+plorer NN -odos os e+emplos so mostrados na cor AgoldA e
com espessura AthicEA0 mas #oc$ pode usar "ual"uer cor e espessura ao
seu gosto
>s #alores none ou hidden podem ser usados "uando no se dese%a a
e+ist$ncia de bordas
/#emplos de de;nio de ordas
(s tr$s propriedades e+plicadas acima podem ser definidas %untas para
cada elemento e resultam em diferentes bordas !ara e+emplificar0
foram estili*adas diferentes bordas para os elementos <h1>0 <h3>0 <l>
e <p> > resultado pode no ser uma obra prima0 mas0 ilustra bem
algumas das in:meras possibilidades de estili*ao de bordasG
h1 &
border';idth( thic#)
border'style( dotted)
border'color( gold)
*
h3 &
border';idth( 30px)
border'style( otset)
border'color( red)
*
p &
border';idth( 1px)
border'style( dashed)
border'color( ble)
*
l &
border';idth( thin)
border'style( solid)
border'color( orange)
*
#er e$emplo
' poss;#el ainda definir propriedades especialmente para as bordas top0
bottom0 right ou left (superior0 inferior0 direita e es"uerda) 9e%a o
e+emplo a seguirG
h1 &
border'top';idth( thic#)
border'top'style( solid)
border'top'color( red)
border'bottom';idth( thic#)
border'bottom'style( solid)
border'bottom'color( ble)
border'right';idth( thic#)
border'right'style( solid)
border'right'color( green)
border'left';idth( thic#)
border'left'style( solid)
border'left'color( orange)
*
#er e$emplo
Compilando 7order8
(ssim como para muitas outras propriedades0 #oc$ pode usar uma
declarao abre#iada para bordas 9amos a um e+emploG
p &
border';idth( 1px)
border'style( solid)
border'color( ble)
*
!ode ser abre#iada assimG
p &
border( 1px solid ble)
*
Lio 1!: @ltura e lar(ura
(t agora ainda no fi*emos "ual"uer considerao sobre as dimens=es
dos elementos com "ue trabalhamos 3esta lio #eremos como fcil
atribuir uma altura e uma largura para um elemento
+idth
height
"triuindo lar-ura 7widt18
( propriedade ;idth destina8se a definir a largura de um elemento
> e+emplo a seguir constr4i um bo+ dentro do "ual podemos digitar um
te+toG
di"%box &
;idth( 300px)
border( 1px solid blac#)
bac#grond( orange)
*
#er e$emplo
"triuindo altura 71ei-1t8
3o e+emplo acima a altura ser determinada pelo conte:do inserido no
bo+ 9oc$ pode definir a altura de um elemento com a propriedade
height Como e+emplo0 #amos fa*er a altura do bo+ anterior igual a
NKKp+G
di"%box &
height( 400px)
;idth( 300px)
border( 1px solid blac#)
bac#grond( orange)
*
#er e$emplo
Lio 1%: .lutuando elementos
&"loats)
7m elemento pode ser OflutuadoO B es"uerda ou B direita com uso da
propriedade float Csto significa "ue o bo+ e seu conte:do so
deslocados para a direita ou para a es"uerda do documento (ou do bloco
container) (#er lio Q para descrio do @o+ model) ( figura a seguir
ilustra o princ;pio de floatG
Se dese%amos "ue um te+to se%a posicionado em #olta de uma figura
como mostrado abai+o0 basta flutuarmos a imagemG
Como isto feito ?
> ,-./ para o e+emplo acima mostrado a seguirG
<di" id="pictre">
<img src="bill%Mpg" alt="0ill Hates">
</di">
<p>casas natrales et antecedentes8
idciro etiam nostrarm "olntatm%%%</p>
!ara conseguir o efeito mostrado0 basta definir uma largura para o bo+
"ue o contm e declarar para ele float( left)
#pictre &
!loat:le!t;
,#dt: .00px;
*
#er e$emplo
Outro e#emplo & colunas
Floats podem ser usados para construir colunas em um documento !ara
criar as colunas estruturamos as colunas no c4digo ,-./ usando
<di"> como mostrado a seguirG
<di" id="colmn1">
<p>Daec disserens Ka de re agatr
et in Ko casa consistat non "idet%%%</p>
</di">
<di" id="colmn3">
<p>casas natrales et antecedentes8
idciro etiam nostrarm "olntatm%%%</p>
</di">
<di" id="colmn>">
<p>nam nihil esset in nostra
potestate si res ita se haberet%%%</p>
</di">
( seguir definimos a largura de cada coluna0 por e+emplo VVZ0 e
declaramos float( left) para cada uma das colunasG
#colmn1 &
!loat:le!t;
,#dt: --0;
*
#colmn3 &
!loat:le!t;
,#dt: --0;
*
#colmn> &
!loat:le!t;
,#dt: --0;
*
#er e$emplo
float pode ser declarado le"t0 ri(ht ou none
" propriedade clear
( propriedade clear usada para controlar o comportamento dos
elementos "ue se seguem aos elementos floats no documento
!or padro0 o elemento subse"uente a um float0 ocupa o espao li#re ao
lado do elemento flutuado 9e%a no e+emplo acima "ue o te+to
deslocou8se automaticamente para o lado da foto de @ill [ates
( propriedade clear pode assumir os #alores le"t0 ri(ht0 both ou none
( regra geral G se clear0 for por e+emplo definido both para um bo+0 a
margem superior deste bo+ ser posicionada sempre abai+o da margem
inferior dos bo+es flutuados "ue este%am antes dele no c4digo
<di" id="pictre">
<img src="bill%Mpg" alt="0ill Hates">
</di">
<h1>0ill Hates</h1>
<p class="!loatstop">casas natrales et antecedentes8
idciro etiam nostrarm "olntatm%%%</p>
!ara e#itar "ue o te+to se posicione no espao li#re dei+ado pela foto do
@ill [ates basta adicionar a seguinte regra CSSG
#pictre &
float(left)
;idth( 100px)
*
%floatstop &
clear:bot;
*
#er e$emplo
Lio 1-: 2osicionando elementos
Com posicionamento CSS podemos colocar um elemento em uma
posio e+ata na pgina Combinado com floats (#er lio JV)0 o
posicionamento abre muitas possibilidades para criao de layouts
precisos e a#anados
3esta lio #eremos os seguintes itensG
; princpio de posicionamento 4==
5osicionamento asoluto
5osicionamento relativo
O princ!pio de posicionamento CSS
Considere a %anela do na#egador como um sistema de coordenadasG
> princ;pio de posicionamento CSS estabelece "ue #oc$ pode posicionar
um elemento em "ual"uer lugar na tela usando um sistema de
coordenadas
9amos supor "ue "ueremos posicionar um cabealho 7sando o bo+
model (#er lio Q) o cabealho pode ser estili*ado para ser apresentado
como mostrado abai+oG
Se "uisermos o cabealho posicionado a JKKp+ do topo do documento e a
MKKp+ B es"uerda0 podemos usar o seguinte CSSG
h1 &
position(absolte)
top: .00px;
le!t: /00px;
*
; resultado mostrado a seguir6
Como #oc$ pode #er0 posicionar com CSS uma tcnica precisa para
colocar elementos ' muito mais fcil do "ue usar tabelas0 imagens
transparentes e tudo mais
<osicionamento asoluto
7m elemento posicionado absolutamente no cria nenhum espao no
documento Csto significa "ue no dei+a nenhum espao #a*io ap4s ser
posicionado
!ara posicionar um elemento de forma absoluta a propriedade position
de#e ser definida para absolute 9oc$ pode ento usar as propriedades
le"t0 ri(ht0 to+0 e bottom para definir as coordenadas e posicionar o
elemento
!ara e+emplificar o posicionamento absoluto escolhemos colocar "uatro
bo+es nos "uatro cantos da pginaG
#box1 &
pos#t#on:absolute;
top( 40px)
left( 40px)
*
#box3 &
pos#t#on:absolute;
top( 40px)
right( 40px)
*
#box> &
pos#t#on:absolute;
bottom( 40px)
right( 40px)
*
#box/ &
pos#t#on:absolute;
bottom( 40px)
left( 40px)
*
#er e$emplo
<osicionamento relati3o
!ara posicionar um elemento de forma relati#a a propriedade position
de#e ser definida para relati5e ( diferena entre os dois tipos de
posicionamento a maneira como o posicionamento calculado
> posicionamento para posio relati#a calculado com base na
+osio ori(inal do elemento no documento Csto significa uma
mo#imentao do elemento para a es"uerda0 para a direita0 para cima ou
para bai+o (ssim fa*endo o elemento ocupa um espao ap4s ser
posicionado
Como e+emplo de posicionamento relati#o #amos tentar posicionar tr$s
imagens relati#amente as suas posi=es originais na pgina 3otar como
as imagens dei+am um espao #a*io nas suas posi=es originais no
documentoG
#dog1 &
position(relati"e)
left( >40px)
bottom( 140px)
*
#dog3 &
position(relati"e)
left( 140px)
bottom( 400px)
*
#dog> &
position(relati"e)
left( 40px)
bottom( L00px)
*
#er e$emplo
Lio 16: Csando 3/inde0 &La$ers)
CSS usa o espao tri8dimensional 8 altura0 largura e profundidade 3as
li=es anteriores #imos as duas primeiras dimens=es 3esta lio
aprenderemos como colocar elementos em layers (camadas)
Iesumindo0 camadas significam como os elementos se sobrep=em uns
aos outros
!ara fa*er isto definimos para cada elemento um n:mero ;ndice (='
index) > comportamento "ue elementos com n:mero ;ndice maior se
sobrep=em B"ueles com menor n:mero
9amos supor um royal flush no %ogo de poEer (s cartas podem ser
apresentadas como se cada uma delas ti#esse um ='indexG
3o caso mostrado0 os n:meros ;ndice esto em uma se"S$ncia direta (de
J8N)0 contudo o mesmo resultado poderia ser obtido com uso de N
diferentes n:meros0 no em se"S$ncia > "ue conta a cronologia dos
n:meros (a ordem)
> c4digo para a ilustrao das cartas mostrado a seguirG
#tenNofNdiamonds &
position( absolte)
left( 100px)
top( 100px)
1-#ndex: .;
*
#Mac#NofNdiamonds &
position( absolte)
left( 114px)
top( 114px)
1-#ndex: /;
*
#KeenNofNdiamonds &
position( absolte)
left( 1>0px)
top( 1>0px)
1-#ndex: -;
*
##ingNofNdiamonds &
position( absolte)
left( 1/4px)
top( 1/4px)
1-#ndex: (;
*
#aceNofNdiamonds &
position( absolte)
left( 1-0px)
top( 1-0px)
1-#ndex: 6;
*
9er e+emplo
> mtodo simples0 mas as possibilidades so muitas 9oc$ pode colocar
imagens sobre te+tos0 te+to sobre te+to0 etc
Lio 19: Deb/standards e
5alidao
2VC a sigla para 2orld 2ide 2eb Consortium0 uma organi*ao
independente "ue gerencia as normas para codificao na Cnternet (isto
0 ,-./0 CSS0 F./ e outros) .icrosoft0 Fundao .o*illa e muitas
outras organi*a=es so membros do 2VC e formam um consenso
sobre o futuro desen#ol#imento de normas
Se #oc$ tem alguma e+peri$ncia com web design0 pro#a#elmente sabe
"ue h uma grande diferena na maneira como diferentes na#egadores
renderi*am uma pgina ' frustante e re"uer um consumo de muito
tempo0 criar uma pgina "ue possa ser #isuali*ada consistentemente no
.o*illa0 Cnternet &+plorer0 >pera e no restante dos na#egadores
e+istentes
( idia da normati*ao criar um consenso e encontrar um
denominador comum para uso de tecnologias para a 2eb Csto significa
"ue seguindo as normas0 um desen#ol#edor ter a certe*a de "ue sua
criao ser tratada de maneira apropriada em diferentes plataformas
@ssim= nEs recomendamos que 5oc< se bene"icie do trabalho
desen5ol5ido +elo D%C e 5alide sua CSS +ara estar em
con"ormidade com as normas#
9alidador CSS
!ara facilitar a #erificao aos preceitos das normas CSS0 o 2VC
desen#ol#eu um #alidador "ue fa* uma #erificao da folha de estilos e
retorna um relat4rio com os e#entuais erros e a#isos caso sua CSS no
#alide
!ara facilitar a #alidao da sua folha de estilos #oc$ poder submet$8la
ao #alidador a"ui mesmo nesta pgina 3a cai+a de te+to abai+o0
substitua a 7I/ e+istente pela 7I/ da sua folha de estilos e cli"ue no
boto para #alidar 9oc$ ser informado pelo site do 2VC se h erros na
sua folha de estilos
http://www.ht
Validar folha de estilos
Se o #alidador no encontrar erros\ ser mostrada uma imagem como a
abai+o0 "ue #oc$ poder usar na sua pgina para anunciar "ue est
usando um c4digo #lidoG
> #alidador pode tambm ser encontrado neste linEG
httpG]]%igsawwVorg]css8#alidator]