Carregar apresentação
A apresentação está carregando. Por favor, espere
1
Programação para Internet
Universidade Federal de Uberlândia Faculdade de Computação Programação para Internet Curso de Gestão da Informação Prof. Dr. Daniel A. Furtado Módulo 3 – Continuação CSS e Introdução ao JavaScript
2
CSS – Classe de Estilo Uma classe de estilo é utilizada para definir estilos que poderão ser aplicados a elementos que você especificar; Uma classe de estilo pode ser definida com o caractere “.” seguido do nome da classe: Para utilizar a classe: /* definição da classe */ .nome_classe { /* propriedades e valores */ } /* utilizando a classe */ ... <tag_html class="nome_classe"> Programação para Internet - Prof. Dr. Daniel A. Furtado
3
CSS – Classe de Estilo Exemplo: <style type="text/css"> body {
color: white; font-size: 16pt; background-color: #3D3F40 } /* Definição da classe de estilo special. Atenção: este é um comentário em CSS e não em HTML */ .special { color: blue; font-family: "Times New Roman", serif; } </style> ... <body> <h1 class="special">Título utilizando a classe <em>special</em></h1> <p>Primeiro parágrafo do documento. Fonte herdada do elemento <em>body</em></p> <p class="special">Segundo parágrafo do documento. Este parágrafo utiliza a classe <em>special</em></p> </body> ... Programação para Internet - Prof. Dr. Daniel A. Furtado
4
CSS – Classe de Estilo Resultado:
Programação para Internet - Prof. Dr. Daniel A. Furtado
5
CSS – Herança de Estilos
No exemplo anterior, observe que os elementos <em> herdaram a cor de seus respectivos elementos-pai; Na maioria dos casos, os estilos aplicados a um elemento-pai se aplicam também aos seus elementos-filhos, isto é, aos elementos aninhados no pai; Entretanto, algumas propriedades não são herdadas, como a propriedade background-image do elemento body. Neste caso, todos os elementos-filhos de body manterão o valor padrão none para tal propriedade. Os estilos definidos especificamente para um elemento-filho terão sempre maior prioridade que os estilos herdados de um elemento-pai. Programação para Internet - Prof. Dr. Daniel A. Furtado
6
CSS – Classe de Estilo Também é possível especificar que apenas elementos HTML específicos serão afetados por uma classe; Exemplo: Neste caso, apenas os elementos <p> com o atributo class igual a center serão afetados: Para utilizar a classe: p.center { text-align: center; color: red; } /* utilizando a classe */ ... <p class="center">Este é um parágrafo centralizado</p> Programação para Internet - Prof. Dr. Daniel A. Furtado
7
CSS – Classe de Estilo <!DOCTYPE html> <html> <head>
<meta charset="UTF-8"> <title> Cascading Style Sheets </title> <style type="text/css"> body { color: black; font-size: 14pt; background-color: #EEFFFF; font-family: Verdana, "Times New Roman", Times, serif; } p.center { text-align: center; </style> </head> <body> <h1 class="center">Este cabeçalho não é alterado pela classe</h1> <p>Este é um parágrafo normal.</p> <p class="center">Este é um parágrafo utilizando a classe <em>p.center</em></p> </body> </html> Programação para Internet - Prof. Dr. Daniel A. Furtado
8
CSS – Text Properties Propriedade Alguns valores Descrição text-color
nome da cor, rgb(r,g,b), #HHHHHH, #HHH Define a cor do texto text-align center, right, justify Define o alinhamento horizontal do texto text-decoration none, underline, overline, line-through Define decorações adicionais do texto, como sublinado. text-indent distancia em pixels Define a indentação do texto (recuo de 1ª linha) text-transform uppercase, lowercase, capitalize Controle de letras maiúsculas e minúsculas vertical-align top, middle, bottom, sub, supper Alinhamento vertical line-height valor em pixel; número multiplicador Altura ocupada por uma linha de texto Programação para Internet - Prof. Dr. Daniel A. Furtado
9
CSS – Text Fonts Propriedade Alguns valores Descrição font-family
"Times New Roman", Times, serif; Define a fonte (estilo da letra) font-style normal, italic, oblique Comumente usado para colocar o texto em itálico. font-size 12pt, 30px, 1.3em Define o tamanho da fonte. font-weight normal, bold, bolder, lighter; ou valor entre 100 e 900 Define a espessura da letra. Programação para Internet - Prof. Dr. Daniel A. Furtado
10
CSS – Font Size Tamanho absoluto: Tamanho relativo:
Utiliza um tamanho específico; porém eventuais mudanças nas configurações de fonte do navegador poderão não ter efeito sobre o texto da página; (ver configurações no Google Chrome) Tamanho relativo: O tamanho é definido de maneira relativa aos outros elementos; O usuário poderá alterar o tamanho do texto no navegador; O tamanho padrão é 16px (16px=1em); 1em é o tamanho normal da fonte corrente; Exemplos p { font-size: 30px;} /* tamanho absoluto de 30 pixels */ p { font-size: 14pt;} /* tamanho absoluto de 14 pontos */ p { font-size: 1.8em;} /* tam. relativo: 1.8 x tam. corrente */ Programação para Internet - Prof. Dr. Daniel A. Furtado
11
CSS – Agrupando Seletores
A definição de vários elementos com os mesmos estilos pode ser feita de maneira agrupada; Exemplo: h1 { text-align: center; color: red; } h2 { text-align: center; color: red; } p { text-align: center; color: red; } h1, h2, p { text-align: center; color: red; } Programação para Internet - Prof. Dr. Daniel A. Furtado
12
CSS – Seletor de ID É possível selecionar o elemento HTML que sofrerá as alterações de estilo indicando o seu ID; veja o exemplo: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> #para1 { text-align: center; color: red; } </style> </head> <body> <p id="para1">Hello World!</p> <p>Este parágrafo não é afetado pelo estilo!</p> </body> </html> Programação para Internet - Prof. Dr. Daniel A. Furtado
13
CSS – Seletor de ID Resultado:
Programação para Internet - Prof. Dr. Daniel A. Furtado
14
CSS – Pseudo-Classes Uma pseudo-classe é utilizada para definir um estado especial de um elemento; A sintaxe é: Exemplos: a:link – define o estilo do link no estado inicial; a:visited – define o estilo do link visitado; a:hover – define o estilo do link quando passa-se o mouse sobre ele; a:active – define o estilo do link no momento em que é ativado (por exemplo, quando o usuário estiver com o botão do mouse pressionado sobre ele); seletor:pseudo-classe { propriedade: valor; } Programação para Internet - Prof. Dr. Daniel A. Furtado
15
CSS – Pseudo-Classes Ver no browser <!DOCTYPE html> <html>
<head> <style> a:link { color: blue; } a:visited { color: green; a:hover { font-weight: bold; a:active { color: red; </style> </head> <body> <ul> <li><a href="#5">HTML </a></li> <li><a href="#6">Cascading Style Sheets</a></li> <li><a href="#7">JavaScript</a></li> </ul> </body> </html>
16
CSS – Background As propriedades background da CSS são utilizadas para definir efeitos de fundo de um elemento; São elas: background-color: define cor de fundo do elemento; background-image: define uma imagem para ser utilizada como plano de fundo do elemento. No modo padrão, a imagem é repetida para preencher todo o elemento; background-repeat: define o modo em que a imagem será repetida no plano de fundo. Alguns valores: no-repeat, repeat-x (horizontamente), repeat-y (verticalmente) e repeat (tanto horizontal quando verticalmente); background-attachment: indica se o plano de fundo é fixo ou rola com o restante do elemento; Alguns valores: fixed, scroll. background-position: define a posição inicial da imagem de fundo. Possíveis valores: [left | right | center] [ top | center | bottom ] Programação para Internet - Prof. Dr. Daniel A. Furtado
17
CSS – Background – Exemplo 1
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> body { background-color: #eeeeee; } h1 { background-color: lightblue; p { background-color: #e0ffff; div { background-color: #b0c4de; </style> </head> <body> <h1>Definindo a cor de fundo de um elemento com CSS</h1> <div> Este texto está dentro de um elemento <em>div</em>. <p>Este parágrafo tem a sua própria cor de fundo.</p> Este texto continua dentro do elemento <em>div</em>. </div> </body></html>
18
CSS – Background – Exemplo 1 (resultado)
19
CSS – Background – Exemplo 2
Ver no browser <!DOCTYPE html> <html> <head> <style> body { background-image: url("images/bg4.png"); background-repeat: no-repeat; } </style> </head> <body> <h1>Hello World!</h1> </body> </html>
20
CSS – Margin A margem é a área ao redor (fora da borda) do elemento HTML; A margem não tem cor de fundo (é transparente); É possível especificar, individualmente, a margem superior, inferior, esquerda e direita; Exemplo: p { margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 50px; } Programação para Internet - Prof. Dr. Daniel A. Furtado
21
CSS – Margin <!DOCTYPE html> <html> <head>
<meta charset="UTF-8"> <style> p { background-color: lightgreen; } p.deslocado { margin-left: 100px; margin-top: 50px; </style> </head> <body> <p>Parágrafo sem margens.</p> <p class="deslocado">Parágrafo com margens definidas</p> </body> </html> Programação para Internet - Prof. Dr. Daniel A. Furtado
22
CSS – Margin Também é possível definir valores de margem utilizando a propriedade abreviada margin: Exemplos: margin: 25px 50px 75px 100px; Superior: 25px Direita: 50px Inferior: 75px Esquerda: 100px margin: 25px 50px 75px; Esquerda e direita: 50px margin: 25px 50px; Superior e inferior: 25px Direita e esquerda: 50px margin: 25px; Todas as margins: 25px Programação para Internet - Prof. Dr. Daniel A. Furtado
23
CSS – Padding É a área em volta do conteúdo do elemento (dentro da borda); O padding é afetado pela cor de fundo (background-color) do elemento; Assim como a margem, é possível especificar, individualmente, o padding superior, inferior, esquerdo e direito do elemento; Exemplo: p { padding-top: 100px; padding-bottom: 100px; padding-right: 150px; padding-left: 50px; } Programação para Internet - Prof. Dr. Daniel A. Furtado
24
CSS – Padding <!DOCTYPE html> <html> <head>
<meta charset="UTF-8"> <style> p { background-color: lightgreen; } p.deslocado { padding: 100px 50px; </style> </head> <body> <p>Parágrafo sem padding.</p> <p class="deslocado">Parágrafo com paddings definidos</p> </body> </html> Programação para Internet - Prof. Dr. Daniel A. Furtado
25
CSS – Elementos Block vs Inline
Um elemento com apresentação em bloco (block) toma toda a largura disponível, com quebra de linha antes e depois. Exemplos: <h1> <p> <li> <div> Um elemento com apresentação em linha (inline) toma apenas o espaço necessário para a sua exibição (e sem quebra de linha); Exemplos: <span> <a> Programação para Internet - Prof. Dr. Daniel A. Furtado
26
CSS – Elementos Block vs Inline
O tipo de apresentação block ou inline pode ser alterado com a propriedade display: li { display: inline; } Programação para Internet - Prof. Dr. Daniel A. Furtado
27
Exemplo de Menu Utilizando CSS
Verificar o menu apresentado em: ate-niveis-utilizando-css.html Programação para Internet - Prof. Dr. Daniel A. Furtado
28
Introdução ao JavaScript
Programação para Internet - Prof. Dr. Daniel A. Furtado
29
Linguagem JavaScript JavaScript é uma linguagem de script orientada a objetos utilizada para desenvolvimento de aplicações Web; Desenvolvida pela Netscape; Não é Java! Muitos recursos são semelhantes aos de outras linguagens, como Java e C#; Programação para Internet - Prof. Dr. Daniel A. Furtado
30
Código JavaScript e HTML
Na página HTML, o código em JavaScript pode ser inserido em qualquer lugar, desde que esteja dentro do elemento <html></html> Pode-se utilizar a tag <script> <script language=“JavaScript”> ... código </script> Mas também é possível a inserção em arquivo separado com a extensão .js. Programação para Internet - Prof. Dr. Daniel A. Furtado
31
JavaScript – Exemplo 1 - Hello World!
window.alert(“mensagem”); ou alert(“mensagem”); Função que exibe uma caixa de diálogo contendo uma mensagem; window é um objeto; alert é um método; <html> <head> <title>Exemplo JavaScript</title> <script type="text/javascript"> alert("Hello World!"); </script> </head> <body> JavaScript: Exemplo 1 </body> </html> Programação para Internet - Prof. Dr. Daniel A. Furtado
32
JavaScript – Exemplo 2 Escrevendo no documento com o método write
Variáveis podem ser declaradas com ou sem a palavra var Porém, o seu tipo é determinado automaticamente <html> <body> <h1>Outro exemplo simples</h1> <script> for(var i=1; i<30; i++) { document.write("Valor da variavel: " + i + "<br>"); } </script> </body> </html> Programação para Internet - Prof. Dr. Daniel A. Furtado
33
JavaScript – Exemplo 3 <!DOCTYPE html> <html> <head>
<meta charset="UTF-8"> <title>Cabeçalhos</title> <script type="text/javascript"> function fatorial(n) { var total = 1; for (var i = 1; i <= n; i++) total = total * i; } return total; function calculaFatorial() var num = window.prompt("Informe um numero inteiro positivo: "); var numInt = parseInt(num); var res = fatorial(numInt); document.write("O fatorial eh: " + res); </script> </head> <body> <input type="button" onclick="calculaFatorial()" value="Informar numero"> </body> </html> Programação para Internet - Prof. Dr. Daniel A. Furtado
34
Materiais Recomendados
Excelente tutorial introdutório de CSS: YouTube HTML5 Tutorial For Beginners Exemplo de Menu Suspenso com CSS: ate-niveis-utilizando-css.html Registro de Domínios e Hospedagem Programação para Internet - Prof. Dr. Daniel A. Furtado
35
Referências www.w3schools.com/css/ www.w3.org/Style/CSS/
Programação para Internet - Prof. Dr. Daniel A. Furtado
Apresentações semelhantes
