Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
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>
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
<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.
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
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);
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
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:
20
CSS - Agrupamento
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
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
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
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
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
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
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
32
Exerccio 1
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
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>
37
Tipos de Classes
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 }
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 }
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
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
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)
none underline overline line-through normal bold bolder lighter normal italic
{font-decoration: overline}
font-weight (herdado)
{ 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)
{ text-indent: 0.5in }
line-height (herdado)
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: 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}
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; }
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).
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=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.
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
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.
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