Curso de Gestão da Informação Prof. Dr. Daniel A. Furtado Módulo 3 – Continuação CSS e...
-
Upload
isaque-almas -
Category
Documents
-
view
218 -
download
3
Transcript of Curso de Gestão da Informação Prof. Dr. Daniel A. Furtado Módulo 3 – Continuação CSS e...
Programação para InternetCurso de Gestão da Informação
Prof. Dr. Daniel A. FurtadoMódulo 3 – Continuação CSS e Introdução ao JavaScript
Universidade Federal de UberlândiaFaculdade de Computação
Programação para Internet - Prof. Dr. Daniel A. Furtado 2
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:
CSS – Classe de Estilo
/* 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
Exemplo:
CSS – Classe de Estilo
1. <style type="text/css">
2. body {3. color: white;4. font-size: 16pt;5. background-color: #3D3F40 6. }
7. /* Definição da classe de estilo special. 8. Atenção: este é um comentário em CSS e não em HTML */ 9. .special { color: blue; font-family: "Times New Roman", serif; }
10. </style>11. ...12. <body>13. <h1 class="special">Título utilizando a classe <em>special</em></h1>14. <p>Primeiro parágrafo do documento. Fonte herdada do elemento
<em>body</em></p>15. <p class="special">Segundo parágrafo do documento. Este parágrafo
utiliza a classe <em>special</em></p>16. </body> ...
Programação para Internet - Prof. Dr. Daniel A. Furtado 4
Resultado:
CSS – Classe de Estilo
Programação para Internet - Prof. Dr. Daniel A. Furtado 5
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.
CSS – Herança de Estilos
Programação para Internet - Prof. Dr. Daniel A. Furtado 6
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:
CSS – Classe de Estilo
p.center { text-align: center; color: red;}
/* utilizando a classe */...<p class="center">Este é um parágrafo centralizado</p>...
CSS – Classe de Estilo1. <!DOCTYPE html>2. <html>3. <head> 4. <meta charset="UTF-8">5. <title> Cascading Style Sheets </title>6.7. <style type="text/css">8. body {9. color: black;10. font-size: 14pt;11. background-color: #EEFFFF;12. font-family: Verdana, "Times New Roman", Times, serif;13. }14.15. p.center {16. text-align: center;17. }18. </style>19. </head>20. <body>21. <h1 class="center">Este cabeçalho não é alterado pela classe</h1>22. <p>Este é um parágrafo normal.</p>23. <p class="center">Este é um parágrafo utilizando a classe
<em>p.center</em></p>24. <p>Este é um parágrafo normal.</p>25. </body>26. </html>
Programação para Internet - Prof. Dr. Daniel A. Furtado7
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
Tamanho absoluto: 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 */
CSS – Font Size
Programação para Internet - Prof. Dr. Daniel A. Furtado 11
A definição de vários elementos com os mesmos estilos pode ser feita de maneira agrupada;
Exemplo:
CSS – Agrupando Seletores
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
É possível selecionar o elemento HTML que sofrerá as alterações de estilo indicando o seu ID; veja o exemplo:
CSS – Seletor de ID
1. <!DOCTYPE html>2. <html>3. <head>4. <meta charset="UTF-8">5. <style>6. #para1 {7. text-align: center;8. color: red;9. }10. </style>11. </head>12. <body>
13. <p id="para1">Hello World!</p>14. <p>Este parágrafo não é afetado pelo
estilo!</p>
15. </body>16. </html>
Programação para Internet - Prof. Dr. Daniel A. Furtado 13
Resultado:
CSS – Seletor de ID
Programação para Internet - Prof. Dr. Daniel A. Furtado 14
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);
CSS – Pseudo-Classes
seletor:pseudo-classe { propriedade: valor;}
CSS – Pseudo-Classes1. <!DOCTYPE html>2. <html>3. <head>4. <style> 5. a:link {6. color: blue;7. }
8. a:visited {9. color: green;10. }
11. a:hover {12. font-weight: bold;13. }
14. a:active {15. color: red;16. }17. </style>18. </head>19. <body>20. <ul>21. <li><a href="#5">HTML </a></li>22. <li><a href="#6">Cascading Style Sheets</a></li>23. <li><a href="#7">JavaScript</a></li>24. </ul>25. </body>26. </html>
15
Ver no browser
Programação para Internet - Prof. Dr. Daniel A. Furtado 16
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 ]
CSS – Background
CSS – Background – Exemplo 11. <!DOCTYPE html>2. <html>3. <head>4. <meta charset="UTF-8">5. <style>6. body {7. background-color: #eeeeee;8. }
9. h1 {10. background-color: lightblue;11. }
12. p {13. background-color: #e0ffff;14. }
15. div {16. background-color: #b0c4de;17. }18. </style>19. </head>20. <body>21. <h1>Definindo a cor de fundo de um elemento com CSS</h1>22. <div>23. Este texto está dentro de um elemento <em>div</em>.24. <p>Este parágrafo tem a sua própria cor de fundo.</p>25. Este texto continua dentro do elemento <em>div</em>.26. </div>27. </body></html>
CSS – Background – Exemplo 1 (resultado)
CSS – Background – Exemplo 21. <!DOCTYPE html>2. <html>3. <head>4. <style>5. body {6. background-image: url("images/bg4.png"); 7. background-repeat: no-repeat;8. }9. </style>10.</head>11.<body>12.<h1>Hello World!</h1>13.</body>14.</html>
Ver no browser
Programação para Internet - Prof. Dr. Daniel A. Furtado 20
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:
CSS – Margin
p { margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 50px;}
CSS – Margin1. <!DOCTYPE html>2. <html>3. <head>4. <meta charset="UTF-8">5. <style>6. p {7. background-color: lightgreen;8. }9. p.deslocado {10. margin-left: 100px; 11. margin-top: 50px; 12.}13.</style>14.</head>15.<body>
16.<p>Parágrafo sem margens.</p>17.<p class="deslocado">Parágrafo com margens definidas</p>
18.</body>19.</html>
Programação para Internet - Prof. Dr. Daniel A. Furtado21
Programação para Internet - Prof. Dr. Daniel A. Furtado 22
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; Superior: 25px Esquerda e direita: 50px Inferior: 75px
margin: 25px 50px; Superior e inferior: 25px Direita e esquerda: 50px
margin: 25px; Todas as margins: 25px
CSS – Margin
Programação para Internet - Prof. Dr. Daniel A. Furtado 23
É 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:
CSS – Padding
p { padding-top: 100px; padding-bottom: 100px; padding-right: 150px; padding-left: 50px;}
CSS – Padding1. <!DOCTYPE html>2. <html>3. <head>4. <meta charset="UTF-8">5. <style>6. p {7. background-color: lightgreen;8. }9. p.deslocado {10. padding: 100px 50px;11.}12.</style>13.</head>14.<body>
15.<p>Parágrafo sem padding.</p>16.<p class="deslocado">Parágrafo com paddings definidos</p>
17.</body>18.</html>
Programação para Internet - Prof. Dr. Daniel A. Furtado24
Programação para Internet - Prof. Dr. Daniel A. Furtado 25
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>
CSS – Elementos Block vs Inline
Programação para Internet - Prof. Dr. Daniel A. Furtado 26
O tipo de apresentação block ou inline pode ser alterado com a propriedade display:
CSS – Elementos Block vs Inline
li { display: inline;}
Programação para Internet - Prof. Dr. Daniel A. Furtado 27
Verificar o menu apresentado em: www.webcis.com.br/como-criar-um-menu-horizontal-drop-down-com-4-
ate-niveis-utilizando-css.html
Exemplo de Menu Utilizando CSS
Programação para Internet - Prof. Dr. Daniel A. Furtado 28
Introdução ao JavaScript
Programação para Internet - Prof. Dr. Daniel A. Furtado 29
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#;
Linguagem JavaScript
Programação para Internet - Prof. Dr. Daniel A. Furtado 30
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.
Código JavaScript e HTML
Programação para Internet - Prof. Dr. Daniel A. Furtado 31
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;
JavaScript – Exemplo 1 - Hello World!
1. <html>2. <head>3. <title>Exemplo JavaScript</title>4. <script type="text/javascript">5. alert("Hello World!");6. </script>7. </head>8. <body>9. JavaScript: Exemplo 110. </body>11. </html>
Programação para Internet - Prof. Dr. Daniel A. Furtado 32
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
JavaScript – Exemplo 2
1. <html>2. <body>
3. <h1>Outro exemplo simples</h1>
4. <script>5. for(var i=1; i<30; i++) {6. document.write("Valor da variavel: " + i + "<br>");7. }8. </script>
9. </body>10. </html>
JavaScript – Exemplo 31. <!DOCTYPE html>2. <html>3. <head>4. <meta charset="UTF-8">5. <title>Cabeçalhos</title>6. <script type="text/javascript">7. function fatorial(n)8. {9. var total = 1;10. for (var i = 1; i <= n; i++)11. {12. total = total * i;13. }14. 15. return total;16. }17.18. function calculaFatorial()19. {20. var num = window.prompt("Informe um numero inteiro positivo:
");21. var numInt = parseInt(num);22. var res = fatorial(numInt);23. document.write("O fatorial eh: " + res);24. }25. </script>26. </head>
27. <body>28. <input type="button" onclick="calculaFatorial()" value="Informar numero">29. </body>30. </html>
Programação para Internet - Prof. Dr. Daniel A. Furtado33
Programação para Internet - Prof. Dr. Daniel A. Furtado 34
Excelente tutorial introdutório de CSS: http://www.w3schools.com/css/
YouTube HTML5 Tutorial For Beginners
Exemplo de Menu Suspenso com CSS: www.webcis.com.br/como-criar-um-menu-horizontal-drop-down-com-4-
ate-niveis-utilizando-css.html
Registro de Domínios e Hospedagem www.active-domain.com www.freewebhostingarea.com www.web.com www.ipage.com
Materiais Recomendados
Programação para Internet - Prof. Dr. Daniel A. Furtado 35
www.w3schools.com/css/
www.w3.org/Style/CSS/
www.w3.org/Style/Examples/011/firstcss
www.w3.org/Style/LieBos2e/enter/
www.w3.org/MarkUp/Guide/Style
www.w3.org/Style/CSS/learning
Referências