Você está na página 1de 32

EstiloemAplicaesHipermdiana Web

Giampaolo Luiz Libralon

Slides baseados nos originais da profa. Renata P. M. Fortes

CascadingStyleSheets(CSS)
1996 - a especificao CSS-1 foi criada pela
Microsoft; A W3C aprovou, formalizou e recomendou a especificao; 1998 surge o CSS-2, como extenso da CSS-1 e resolvendo algumas limitaes desta.
Definio:

Styles (ESTILOS) descrevem como os documentos dever ser apresentados; Estilos so normalmente armazenados em Style Sheets ; Mltiplas definies de estilo vo cascatear em uma.

CascadingStyleSheets(CSS)
s
s

Separaocontedodaapresentao;
Assim,osautoresdecontedonoprecisamsepreocupar comaapresentao; Reusodedados:omesmocontedopodeservisualizado deformasdiferentesemvrioscontextos; Estilocustomizadosprefernciasdousurio (acessibilidade):tamanhodeimpresso,cor,layout simplificadoparaleitoresauditivos. Umanicafolhadeestilopodedefiniremantera consistnciadeumacoleodedocumentos,porexemplo: casoumusurioqueiraalteraracordefundodeumsite bastaatualizarcdigofontedoESTILO.
4

CascadingStyleSheets(CSS)
CSS introduziu a utilizao de layers (camadas),

permitindo a sobreposio de texto, imagens, etc.


ser que sua especificao no seja completamente implementada.

CSSs no funcionam em todos os web sites pois, pode

Internet Explorer: a partir da verso 3, implementa 40% da especificao, com muitas falhas; a partir da verso 4, IE oferece pelo menos 75% de fidelidade especificao; Verso 6 suporte completo a CSS-1
Firefox - suporte completo. Releases podem conter bugs.
5

SintaxedaDeclarao
seletor{ propriedade1:valor; propriedade2:valor} Seletor:oelementoaoqualoestiloseraplicado. Propriedade:refereseaotipodeestiloqueserusado. Porexemplo,apropriedadefontsizeserefereao tamanhodafonte. Valor:aconfiguraoaplicadapropriedade.
Seovalortemmaisdeumapalavra:usaraspasduplas.

SintaxeBsica
selector{property:value} body{color:black} p{fontfamily:"sansserif"} p{textalign:center;color:red} h1,h2,h3,h4,h5,h6 {color:green}

ClassedeSeletor
Dois pargrafos em um documento: p.right{textalign:right} p.center{textalign:center} <pclass="right">Esteparagrafoser alinhadoadireita.</p> <pclass="center">Esteparagrafoser alinhadoaesquerda.</p>
8

Exemplo1

Exemplo2

10

ComoinserirumafolhadeEstilo

Sotrsasformasdeinserodeestilo: s ExternalStyleSheet s InternalStyleSheet s InlineStyle

11

ExternalStyleSheet

Normalmentedefineseumarquivotextopartecom extenso.css.Aspginasdositedevemfazer refernciaaessearquivo.Issosechamadeclarao Externa.

Exemplo:
(1) Criarumarquivoestilo1.cssemumeditor(qualquer,notepad, p.e.). (2) CriarumHTMLereferenciaroarquivo.cssusandooelemento <link>ouoatributo@import.

12

ExternalStyleSheet

Idealparaaplicaremvriaspginas; Cadapginadevelinkarpginadeestilousandoa tag<link>; Atag<link>devevirnocabealho:


<head> <linkrel="stylesheet"type="text/css" href="mystyle.css"/> </head>

Obrowserirlerasdefiniesdoarquivo mystyle.css
13

DeclaraoExterna

Utilizandoapropriedade@import
<html>

<head> <styletype="text/css"> @importurl(mystyle.css); </style> </head> <body> <h1>Cabealhonvel1...</h1> <p>Pargrafo...</p> </body> </html>
14

DeclaraoIncorporada

SodefinidasnocabealhododocumentoHTMLe afetamapenasapginaatual.
<HTML> <HEAD> <STYLETYPE="text/css"> H1{ fontfamily:"ComicSansMS"; fontsize:36pt; color:blue} </STYLE> </HEAD> <BODY> <H1>Cabealhonvel1...</H1> </BODY> </HTML>

15

DeclaraoInline
definidodentrodaprpriatag. Afetasomenteatagatual,prevalecendosobrequalquer outradeclarao. Misturaoestilocomocontedo!!!!

16

DeclaraoInline
<HTML> <HEAD> <STYLETYPE="text/css"> H1{ fontfamily:"ComicSansMS"; fontsize:36pt; color:blue} </STYLE> <HEAD> <BODY> <H1>Cabealhonvel1...</H1>

<H1STYLE="color:green;fontsize:24pt"> Cabealhodiferente</H1>
</BODY> </HTML>
17

Cascata

Prioridade(maisbaixaparamaisalta):

(1)Browser(default) (2)Stylesheetexterna (3)Stylesheetinterna(declarao incorporada) (4)Inline


Essas prioridades que possibilitam a analogia com a cascata

18

Mltiplosestilosparaummesmoseletor
Externa
h3{color:red;textalign:left;fontsize:8pt}
s

Interna

h3{textalign:right;fontsize:20pt}
s Sepginacomestilointernotambmlinkaestilo

externo:

color:red;textalign:right;fontsize:20pt

colorherdadadoestiloexterno!!

19

PropriedadesdasFontes
fontstyle

Pode ser: normal (padro), oblique ou italic. Exemplo:


H3{fontstyle:italic}

20

PropriedadesdasFontes
fontfamily
Defineumafamliadefontes,poisnemtodasasfontespodemestar disponveisnocomputadorcliente. Paranomedafontecommaisdeumapalavra,usaseaspas. Exemplo: P{fontfamily:gill,helvetica,TimesNewRoman} Osvalorespossveissoasdiversasfontesexistentes.
Exemplos:Verdana,Arial,TimesNewRoman,Courier,Sans serif,etc.

21

PropriedadesdasFontes
fontvariant

Usadaparaavariaodefontesmallcaps. Valores:normalousmallcaps Exemplo:H3{fontvariant:smallcaps}

22

PropriedadesdasFontes
fontweight

Defineaespessuradafonte

Valores bold bolder lighter 100,200, 300,..., 900 Descrio Negrito Fontemaisgrossaqueafontedoelementopai. Fontemaisfinaqueafontedoelementopai. Valoresquedefinemaespessuradafonte.Negrito equivalea700enormala400.

23

PropriedadesdasFontes
fontsize

Defineotamanhodafonte.
Valores Descrio

xxsmall,xsmall,small, Valoresabsolutos.Podemmudar medium,large,xlarge, dependendodobrowser. xxlarge smaller,larger Valoresrelativos.Dependemdovalor dopai.

Numricos Unidadesusadas:pt(pontos),px Exemplo:P{fontsize:14pt} (pixels),in(polegadas),cm (centmetros),mm(milmetros).

24

PropriedadesdasFontes
font

Permitedefinirtodasaspropriedadesdasfontes (fontstyle,fontvariant,fontweight,fontsize,fontfamily). Exemplo: P{font:italic,12pt,sansserif}

25

PropriedadesdoTexto
wordspacing
Defineoespaoentreaspalavras. Assumevalornumricoseguidodamedidaouovalornormal. Exemplo:p{wordspacing:5pt}

s letterspacing
Defineoespaoentreasletras. Exemplo:p{letterspacing:5pt}

26

PropriedadesdoTexto
s

textdecoration
s

Indicacaractersticasadicionaisaotexto.

Valores none underline overline linethrough blink

Descrio Textonormal Sublinhado Textocomtraoporcima Textoriscado Textopiscante

PropriedadesdoTexto
s

textalign
s s

Defineoalinhamentodotexto. Valorespossveis:left,right,center,justify. Especificaorecuodaprimeiralinha. Valoresnumricosemvriasunidadesdemedida. Defineadistnciaentreduaslinhas. Valoresnumricosemvriasunidadesdemedida.

textindent
s s

lineheight
s s

PropriedadesdeCoreFundo
s

color
s defineacordoselementosdoprimeiro

plano. s Exemplos:
s

LI{color:blue} s P{color:rgb(0,255,0) s H1{color:#ff0000}

PropriedadesdeCoreFundo
Valor Aqua Black Blue Fuchsia Gray Maroon Lime Navy Olive Purple Significado Verdemar Preto Azul Rosa Cinza Marrom Verdelimo Azulmarinho Oliva Prpura Exemplo Significado #rgb #rrggbb RGBcominteirosde0 at255 Valor Red Silver Teal Yellow Significado Vermelho Prateado Verdeescuro amarelo

#f00 #ff0000 rgb(255,0,0)

PropriedadesdeCoreFundo
s

backgroundcolor
s Especificaacordefundodeumelemento

<HTML> <HEAD> <STYLETYPE="text/css"> H1{backgroundcolor:yellow;color:blue} BODY{backgroundcolor:black} </STYLE> <HEAD> <BODY> <H1>Fundodocabealhoamarelo,letraazulefundo dapginapreto</H1> </BODY> </HTML>

PropriedadesdeCoreFundo
s

backgroundimage
Defineumaimagemparaofundodoelemento. s Exemplo:
s
s

BODY{backgroundimage:url(bola.gif)}

background-attachment
s

Imagem de fundo fixa (fixed) ou no (scroll) na tela. Posio da imagem de fundo na tela (top left, etc.).

background-position
s

PropriedadesdaMargem
s

Aspropriedadesdamargemso: s margintop,marginright, marginbotton,marginleft.


s

Podeseusarvaloresnumricoscomvrias unidades de medida, % ou a palavra chave auto. s Margin:propriedadeatalho