HTML e CSS

Programao para Internet Prof Vera Etec Jacinto Ferreira de S

HTML

No incio o HTML era utilizado para construir pginas apenas para exibir informaes. Com a evoluo da Internet (imagem, audio, video, aplicativos...) a simples linguagem de marcao destinada a apresentar contedos carecia de uma maior flexibilidade no sentido de manipular visualmente os contedos.
2

HTML Histria

Novas tags e atributos foram inventados, tais como a tag font e o atributo color que permitiam alterar a aparncia de textos. Assim nasceu a estilizao dos contedos. Novas tags e novos atributos de estilo foram introduzidos no HTML. A linguagem de marcao passou a exercer uma dupla funo: estruturar o contedo atravs da marcao e apresent-lo, ou seja, dar a aparncia final.

HTML - Problemas

Documentos cada vez mais sofisticados e extensos, fugindo ao controle de seus criadores. Imagine o site de uma empresa com 180 pginas. Se voc precisasse alterar a cor dos ttulos de todas as pginas?

<h1><font color="#00FF00">Ttulo</font></h1>
4

Fazendo contas...

Supondo uma mdia de 3 ttulos por pgina, voc tem um total de 540 tags font para editar e mudar o atributo color. E se o seu cliente tivesse pedido para mudar a cor dos textos, e do fundo? Este exemplo simples d uma dimenso de um dos problemas criados com a mistura de marcao com apresentao - estilizao!
5

Soluo

Dissociar linguagem de marcao da estilizao. Surge a CSS Cascade Style Sheet ou Folha de Estilo em Cascata.

Algumas explicaes...

Elemento HTML Elemento = tag de abertura + contedo + tag de fechamento <p>Este um pargrafo</p>

Existem elementos de bloco e elementos em linha. QUAL A DIFERENA?

Elementos de bloco e em linha

Os elementos de bloco so exibidos como se tivessem uma quebra de linha antes e depois deles e ocupam toda a largura disponvel. Os elementos em linha aparecem "em linha" dentro do fluxo de texto de sua pgina, ocupando somente a largura necessria ao contedo.
8

Estrutura do documento HTML

<B>texto</B>

Em outras palavras...

Os elementos de bloco so utilizados como marcao de grandes blocos de contedo de uma pgina, enquanto que os elementos em linha marcam pequeno pedaos de contedo.

Pra qu saber isso???

CSS...
10

O efeito cascata

o estabelecimento de uma prioridade para aplicao da regra de estilo ao elemento. Para determinar a prioridade so considerados diversos fatores, entre eles:

o tipo de folha de estilo, o local fsico da folha de estilo no seu todo, o local fsico da regra de estilo na folha de estilo e a especificidade da regra de estilo.
11

A prioridade para o efeito cascata em ordem crescente:

folha de estilo padro do navegador do usurio; folha de estilo do usurio; folha de estilo do desenvolvedor;

estilo externo (importado ou linkado). estilo incorporado (definido na seo head do documento); estilo inline (dentro de um elemento HTML);

declaraes do desenvolvedor com !important; declaraes do usurio com !important;

12

CSS Cascade Style Sheets

13

CSS

So folhas de estilo que permitem controlar a aparncia dos elementos HTML Vantagens: Grande liberdade de formatao Maior produtividade Maior facilidade de atualizao

14

Princpios

Utilizar os elementos (tags) HTML, exclusivamente para marcar e estruturar o contedo do documento. Nenhum elemento HTML ser usado para alterar a apresentao, ou seja estilizar o contedo. A tarefa de estilizao ficar a cargo das CSS que pode ser, inclusive, um arquivo independente do arquivo HTML no qual so declaradas propriedades e valores de estilizao para os elementos do HTML.
15

CSS - Sintaxe

A sintaxe CSS constituida de trs partes:

um seletor (selector) um propriedade (property) um valor (value)

seletor { propriedade: valor; }

16

Sintaxe

Seletor: genericamente, o elemento HTML identificado por sua tag, ou por uma classe, ou por uma ID, ou etc., e para o qual a regra ser vlida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...); Propriedade: o atributo do elemento HTML ao qual ser aplicada a regra (por exemplo: font, color, background, etc...). Valor: a caracterstica especfica a ser assumida pela propriedade (por exemplo: letra tipo arial, cor azul, fundo verde, etc...)

17

Sintaxe

Escreve-se o seletor e a seguir a propriedade e valor separados por dois pontos e entre chaves { }. Quando mais de uma propriedade for definida na regra, deve-se usar ponto-evrgula para separ-las. O ponto-e-vrgula facultativo no caso de propriedade nica e tambm aps a declarao da ltima propriedade no caso de mais de uma.

18

Exemplos
body {background: #FFFFFF; /* (;) opcional */}

Seletor o "documento todo" (body), a propriedade o fundo do documento e o valor a cor branca. Se o valor for uma palavra composta, dever estar entre aspas duplas " ", ou simples ': h3 { font-family: "Comic Sans MS" }
19

Sintaxe

Para maior legibilidade das folhas de estilo, de boa prtica usar linhas distintas para escrever cada uma das declaraes propriedade e seu valor:

p{ text-align: right; color: #FF0000; }

20

CSS - Agrupamento

Os elementos podem ser agrupados: h1,h2,h3,h4,h5,h6 { color: green }

21

Sintaxes
Sintaxe seletor { propriedade:valor} seletor { propriedade:valor; propriedade:valor} seletor { propriedade:valor; propriedade:valor; Propriedade:valor } seletor,seletor,seletor { propriedade:valor } Exemplo body { background-color: #FFFFFF } p { text-align:center; color:red} p { text-align: center; Color: black; Font-family:arial } h1,h2,h3 { color: green }

22

Comentrios em CSS

comentrio em CSS comea com "/*", e termina com "*/"

/* Este um comentrio */ p { text-align: center; /* Este outro comentrio */ color: black; font-family: arial }
23

Implementao
Os estilos podem ser inseridos nos documentos de trs maneiras diferentes:

Externas Por meio de um link direcionado para um arquivo de style sheet em separado, funcionando para uma ou mais pginas web. Tambm chamadas importadas ou lincadas. Internas - Por meio de uma insero de um style sheet numa nica pgina web. Tambm chamadas incorporadas. Em linha (ou inline) - Pelo acrscimo de atributos de estilo inline em algumas tags

24

Folha de estilo externa

quando as regras CSS esto declaradas em um documento parte do documento HTML. A folha de estilo um arquivo separado do arquivo html e que tem a extenso .css ideal para ser aplicada a vrias pginas. Pode-se mudar a aparncia de um site inteiro alterando apenas um arquivo (o arquivo da folha de estilo). No deve conter qualquer tag html
25

Como Inserir um CSS externo

O arquivo css da folha de estilo externa dever ser lincado ou importado ao documento HTML, dentro da tag <head> .
<head> <link rel="stylesheet" type="text/css" href="meuestilo.css" /> </head>

26

Externo com import

Sintaxe geral para importar folha de estilo chamada estilo.css:

<head> ...... <style type="text/css"> @import url("estilo.css"); </style> ...... </head>
27

CSS Interno

deve ser usada quando um nico documento tem um estilo particular define-se estilos internos na seo head usando a tag <style>

28

Folha de estilo interna

quando as regras CSS esto declaradas no prprio documento HTML. Uma folha de estilo incorporada ou interna, ideal para ser aplicada a uma nica pgina. As regras de estilo, vlidas para o documento, so declaradas na seo <head> do documento com a tag de estilo <style>
29

CSS Interno - Exemplo

. <head> <style type="text/css"> hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} </style> </head> .
30

Folha de Estilo Inline

Quando as regras CSS esto declaradas dentro da tag do elemento HTML. Um estilo inline s se aplica a um elemento HTML. Perde muitas das vantagens das folhas de estilo pela mistura de contedo usar quando h uma nica ocorrncia de um elemento
31

<p style="color: sienna; margin-left: 20px"> Este um pargrafo </p>

CSS inline - Exemplo

<HTML> <HEAD> </HEAD> <BODY style="background-color: yellow"> <h1 style="font-size:36pt; color=red">Este cabealho tem 36 pt e agora vermelho</h1> <h2 style="color: blue">Este cabealho azul</h2> <p style="margin-left: 50px">A margem deste pargrafo de 50 pixels</p> <a style="color:green" href=www.microsoft.com>E este um link, verde</a> </BODY> </HTML>

32

Exerccio 1

Criar uma pagina HTML com:

Corpo - fundo amarelo Ttulo 1- fundo verde Sub ttulo - transparente 1 pargrafo fundo preto, texto branco

33

Resultado
<html> <head> <style type="text/css"> body {background-color: yellow} h1 {background-color: #00ff00} h2 {background-color: transparent} p {background-color: black; color:white} </style> </head> <body> <h1>Este o ttulo 1</h1> <h2>Este sub ttulo</h2> <p>Este um pargrafo</p> </body> </html>

34

Exerccio 2

Separar a folha de estilos do exerccio anterior para um arquivo com o nome aula.css

35

Resultado
<HTML> <HEAD> <TITLE>Aula teste</TITLE> <LINK rel="stylesheet" type="text/css" href=aula.css"> </HEAD> <BODY> ... corpo do documento... </BODY> </HTML> Arquivo aula.css body {background-color: yellow} h1 {background-color: #00ff00} h2 {background-color: transparent} p {background-color: black; color:white}

36

O Seletor class (classe)

Pode-se definir diferentes estilos para o mesmo tipo de elemento HTML. Sintaxe:
elemento.nomeclasse { propriedade: valor;}

Exemplo:
p.right {text-align: right} p.center {text-align: center}
<p class="right"> Este pargrafo ser alinhado direita. </p>

<p class="center"> Este pargrafo ser centralizado. </p>

37

Tipos de Classes

A classe pode ser :

associada a um tipo de elemento:

p.p1 { color: red } <p class=p1>texto em vermelho</p>

genrica:
.rd{ color:blue} <p class=rd>texto em azul</p> <h1 class=rd>texto tambem em azul</h1>

38

Seletores de ID

Um selector de ID permite identificar uma nica ocorrncia de um elemento HTML. Os selectores ID so criados pelo carcter # seguido do nome.
#nome { color:blue; background: black }

<p id=nome>S este elemento que identificado como nome</p>

39

DIV e SPAN
Existem dois elementos genricos que no tm significado semntico nem produzem nenhum efeito, mas permitem definir sees/blocos e so muito usados com CSS. Permitem agrupar contedo em unidades lgicas: <div>: quebra o fluxo normal do documento <span>:mantm o fluxo normal do contedo <div class="zonaesquerda"> <p>texto, texto, texto</p> </div> <div class="zonacentral"> <h1>Ttulo</h1> <p> texto, texto, texto, <span class="nota">texto, texto</span>, texto</p> <p> texto, texto, texto, texto, texto, texto</p> </div>
40

DIV e SPAN
Css .Zonaesquerda { color: green } .zonacentral { color: blue} .nota { color: red }

Resultado: texto, texto, texto

Ttulo
texto, texto, texto, texto, texto texto texto, texto, texto, texto, texto, texto
41

Unidades de medida
Unidade % em Descrio Percentagem de qualquer unidade 1 em igual ao tamanho da fonte do elemento corrente

ex
px

1 ex aproximadamente metade da altura da fonte

pixels Unidade cm in mm pt Centmetros Polegadas Milmetros Ponto (1 pt 1/72 polegadas ) Descrio

42

Unidades de cor
Unidade Nome da cor Descrio O nome da cor Exemplo do vermelho red

rgb(x,y,z)
#rrggbb

Um valor rgb
Um nmero hexadecimal

rgb(255,0,0)
rgb(100%,0%,0%) #ff0000

rgb(x%,y%,z%) Uma percentagem rgb

43

Texto
Propriedade
font-size (herdado)

Descrio
Ajusta o tamanho do texto Ajusta os tipos de letra e as alternativas (em ordem de preferncia) Efeitos sobre o texto

Valores
tamanho (pt, in, cm, px) percentagem nome do tipo de letranome da famlia da fonte

Exemplo
{ font-size: 12pt } { font-size: 200% } { font-family: Trebuchet MS, Sansserif }

font-family (herdado)

text-decoration (no herdado)

none underline overline line-through normal bold bolder lighter normal italic

{font-decoration: overline}

font-weight (herdado)

Ajusta o peso do tipo

{ font-weight: bold }

font-style (herdado)

Texto em itlico

{font-style: italic}
44

Texto
Propriedade
text-align (herdado)

Descrio
Alinhamento do texto

Valores
left Center right justify

Exemplo
{ text-align: center }

text-indent (herdado)

indentao da primeira linha do texto

Altura das linhas de um bloco de texto.

tamanho (pt, in, cm, px)

tamanho (pt, in, cm, px) percentagem baseline sub super top text-top middle bottom

{ text-indent: 0.5in }

line-height (herdado)

{line-height: 18p t} { line-height: 200% } { vertical-align: top }

vertical-align (no herdado)

Alinha o texto verticalmente dentro do elemento

45

Padding (espaamento)
Propriedade
padding (herdado)

Descrio
Espao entre a borda do elemento e o conteudo do elemento
Em relao a cada um dos lados

Valores
tamanho (pt, in, cm, px)

Exemplo
{ padding: 20px }

padding-top padding -left padding -bottom padding -right (herdado)

tamanho (pt, in, cm, px)

{padding-top: 0.5in }

46

Cor e background
Propriedade
color (herdado) background-color (no herdado)

Descrio
Cor do texto Cor de fundo de um elemento

Valores
Unidades da cor Unidades da cor

Exemplo
{ color: red } { background-color: black}

Background-image (no herdado)

Ajusta as imagens do fundo

url

{background-image: url(imagem1.jpg)}

47

Margens
Propriedade
margin (no herdado) margin-top margin-left margin-bottom margin-right (no herdado)

Descrio
Permite especificar a margem do elemento Permite especifar cada uma das margens

Valores
tamanho (pt, in, cm, px) tamanho (pt, in, cm, px)

Exemplo
{ margin: 8px }

{ margin-top: 12pt }

48

Contornos
Propriedade
border (herdado)

Descrio
Ajusta o contorno do elemento

Valores
grossura: em pixels. estilo: none, dotted, dashed, solid, double. cor: valor da cor. grossura: em pixels. estilo: none, dotted, dashed, solid, double. cor: valor da cor.

Exemplo
{ border: 4px double green; }

border-top border-left border-bottom border-right (no herdado)

Ajusta cada um dos contornos

{ border-top: 2px dotted red; }

49

Listas
Propriedade
list-style-type (herdado)

Descrio
define a aparncia do marcador de cada item de uma lista.

Valores
No numricos: disc circle square Numricos: decimal decimal-leading-zero lower-roman upper-roman Lower-latin upper-latin

Exemplo
{ list-style-type: disc; }

{ list-style-type: upper-roman; }

50

Posicionamento
Com CSS possvel alterar o fluxo normal de uma pgina e definir o posicionamento de cada elemento

51

Posicionamento
Todos os elementos tm a propriedade position que estabelece a forma de "clculo" da posio de um elemento. 4 alternativas: static: o elemento posicionado segundo o fluxo normal. O valor por defeito. relative: a posio da "caixa" calculada em relao posio normal (static).

absolute: permite posicionar relativamente ao elemento pai.

fixed: o clculo da posio igual ao mtodo absoluto, mas o elemento pai a "janela de visualizao" (viewport).

52

Posicionamento
A propriedade position, usada juntamente com: top: deslocamento do lado superior do elemento. left: deslocamento do lado esquerdo do elemento. bottom: deslocamento do lado inferior do elemento. right: delocamento do lado direito do elemento. e: width: largura do elemento. height: altura do elemento. As unidades podem ser: Fixas: pixels (px), points (pt), centmetros (cm), milmetros (mm). Relativas: em, percentagem (%)
53

Posicionamento
Exemplo:
<div class=parte1>1 bloco de informao</div> <div class=parte2> 2 bloco de informao <br><br> <div class=parte2a> 1 sub bloco de informao <br> Este bloco est inserido no 2 bloco. </div><br> <div class=parte2b> 2 sub bloco de informao <br> Este bloco tambm est inserido no 2 bloco, aps o bloco anterior. </div><br> <div class=parte2c> 3 sub bloco de informao <br> Este bloco tambm est inserido no 2 bloco, aps o bloco anterior. </div> </div> <div class=parte3>3 bloco de informao </div>

Div=parte1 Div=parte2 Div=parte2a Div=parte2b

Div=parte2c

Div=parte3
54

Posicionamento
Continuao do exemplo parte CSS:
.parte1 { background-color:#cccccc; font-family:arial; font-size:14pt; width:460px; padding:20px; } .parte2 { background-color:#222222; font-family:arial; font-size:14pt; color:#ffffff; width:460px; padding:20px; } .parte2a { background-color:#666666; font-family:arial; font-size:12pt; width:400px; margin-left:30px; } .parte2b { background-color:#999999; font-family:arial; font-size:12pt; width:400px; margin-left:30px; } .parte2c { background-color:#666666; font-family:arial; font-size:12pt; width:400px; margin-left:30px; } .parte3 { background-color:#cccccc; font-family:arial; font-size:14pt; width:460px; padding:20px; }

55

Resultado

56

Posicionamento Relativo
A posio calculada em relao localizao natural do elemento.

p{ position: relative; top: 10px; right: 50px; }

57

Posicionamento
.parte1 { background-color:#cccccc; font-family:arial; font-size:14pt; width:460px; padding:20px; } .parte2 { background-color:#222222; font-family:arial; font-size:14pt; color:#ffffff; width:460px; padding:20px; position:relative; top:20px; left:40px; } .parte2a { background-color:#666666; font-family:arial; font-size:12pt; width:400px; margin-left:30px; } .parte2b { background-color:#999999; font-family:arial; font-size:12pt; width:400px; margin-left:30px; } .parte2c { background-color:#666666; font-family:arial; font-size:12pt; width:400px; margin-left:30px; } .parte3 { background-color:#cccccc; font-family:arial; font-size:14pt; width:460px; padding:20px; }
58

Resultado

59

Posicionamento Absoluto
A posio do elemento calculada em relao ao "pai". Temos a questo de saber qual o pai?
Exemplo 1: Uso isolado do position absolute Exemplo 2: Uso do position absolute com position relative Neste caso o pai deste elemento passa a ser o elemento que tem a position relative. Nota o elemento que usa o absolute tem de estar dentro do elemento que usa o relative

Neste caso o pai deste elemento passa a ser o body, por isso o elemento foi l para cima

p{ position: absolute; top: 10px; left: 50px; }

div { position: relative; p{ position: absolute; top: 10px; left: 50px; }

60

Posicionamento
.parte1 { background-color:#cccccc; font-family:arial; font-size:14pt; width:460px; padding:20px; } .parte2 { background-color:#222222; font-family:arial; font-size:14pt; color:#ffffff; width:460px; padding:20px; } .parte2a { background-color:#666666; font-family:arial; font-size:12pt; width:400px; margin-left:30px; position:absolute; top:0; right:0; } .parte2b { background-color:#999999; font-family:arial; font-size:12pt; width:400px; margin-left:30px; } .parte2c { background-color:#666666; font-family:arial; font-size:12pt; width:400px; margin-left:30px; } .parte3 { background-color:#cccccc; font-family:arial; font-size:14pt; width:460px; padding:20px; }
61

Resultado

62

Posicionamento
.parte1 { background-color:#cccccc; font-family:arial; font-size:14pt; width:460px; padding:20px; } .parte2 { background-color:#222222; font-family:arial; font-size:14pt; color:#ffffff; width:460px; padding:20px; position:relative; } .parte2a { background-color:#666666; font-family:arial; font-size:12pt; width:400px; margin-left:30px; position:absolute; top:0; right:0; } .parte2b { background-color:#999999; font-family:arial; font-size:12pt; width:400px; margin-left:30px; } .parte2c { background-color:#666666; font-family:arial; font-size:12pt; width:400px; margin-left:30px; } .parte3 { background-color:#cccccc; font-family:arial; font-size:14pt; width:460px; padding:20px; }
63

Resultado

64

Posicionamento Fixo
Igual ao posicionamento absoluto, mas relativamente janela.

p{ position: fixed; top: 50px; left: 10px; }

65

Posicionamento Float
A propriedade float permite desligar o elemento do fluxo normal e desloc-lo para a esquerda ou direita da linha. O mais interessante que o restante contedo pode fluir paralelamente ao elemento. Valores possveis: none, left, right;
img { float: left; }

66

Referncias

Tutorial de CSS. Disponvel em: http://maujor.com/tutorial/intrtut.php COSTA, Pedro. Introduo ao Css. Disponvel em: www.icicom.up.pt/~pedrogc/tm/css.ppt

67