Curso de Gestão da Informação Prof. Dr. Daniel A. Furtado Módulo 3 – Continuação CSS e Introdução ao JavaScript Universidade Federal de Uberlândia Faculdade

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">...


Exemplo:


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> ...


Resultado:



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


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>...

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


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


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.


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


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;}


É 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>


Resultado:

CSS – Seletor de ID


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


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


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>



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


É 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>



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


O tipo de apresentação block ou inline pode ser alterado com a propriedade display:

CSS – Elementos Block vs Inline

li { display: inline;}


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


Introdução ao 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#;

Linguagem JavaScript


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


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>


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>



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

http://www.w3schools.com/css/

http://www.w3schools.com/css/

http://www.active-domain.com/

http://www.freewebhostingarea.com/

http://www.web.com/

http://www.ipage.com/


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

http://www.w3.org/Style/Examples/011/firstcss



http://www.w3.org/Style/LieBos2e/enter/

http://www.w3.org/MarkUp/Guide/Style

http://www.w3.org/Style/CSS/learning

Documents

Curso de Gestão da Informação Prof. Dr. Daniel A. Furtado Módulo 3 – Continuação CSS e Introdução ao JavaScript Universidade Federal de Uberlândia Faculdade