CSS + jQuery

Rodrigo Aguas

Projeto Capacitar – GPENovembro 2011

Visão Geral

CSS

Define a forma como o documento XHTML é exibido.

Ganhou força com o surgimento do XHTML e Tableless.

Apresenta alguns benefícios:• Manutenção• Desempenho• Reutilização

Declaração na página

• Externa:  <link rel="stylesheet" type="text/css" href="mystyle.css" />   • Interna:

  <style type="text/css">    ... </style>

Sintaxe

/* Essa é a sintaxe do CSS */

seletor {    propriedade: valor;}

Seletores

• Tag: p { ... } a { ... } table { ... } input { ... } body { ... }

• Id: #topo { ... }#rodape { ... }

#logo { ... }

#lateral { ... }

• Classe: .foto { ... }.comentario { ... }

.linhaImpar { ... }

.linhaPar { ... }

.container { ... }

Estilos de Fundo

• background-color• background-image• background-repeat• background-position

  #topo {background-color: black;background-image: url("../imagens/fundo_topo.png");background-repeat: repeat-x;background-position: center top;}

Mão na massa 1

Extraia no seu computador o seguinte arquivo: \\olimpo\gpe\Curso CSS e jQuery\Exercícios.rar

1. Aplique uma cor ao fundo da página. 2. Escolha e aplique uma imagem no fundo da página.

Mão na massa 2

1. Aplique repetição na imagem de fundo da página.

Estilos de Texto

• color• text-align• text-decoration• text-transform• font-family• font-style• font-size• font-weight

 .citacao {font-style: italic;text-decoration: underline;font-weight: bold;}

Mão na massa 3

1. Estilize o título.

2. Estilize os textos.

3. Estilize os links.

4. Clique em um link.

O que aconteceu?

Links (pseudo-classes)

• a:link• a:visited• a:hover• a:active

 A ordem das declarações importa!

Mão na massa 4

1. Estilize novamente os links

Box Model

• Todos os elementos do HTML são "caixas";• Podem conter ou estar contidas dentro de outras "caixas";• Possuem: espaço do conteúdo, padding, borda e margem;

Plugin Firebug para Firefox

https://addons.mozilla.org/pt-br/firefox/addon/firebug/

Propriedades das Caixas

• width• height• margin (-top, -right, -bottom, -left)• padding (-top, -right, -bottom, -left)• border (-top, -right, -bottom, -left) (-color, -width, -style)

Mão na massa 5

1. Defina uma cor de fundo e outra da borda para os elementos com os seguintes identificadores:containertopoconteudorodape

2. Caracterize os elementos conforme as seguintes classes já declaradas neles:com_paddingcom_margin

3. Limite a largura do container e centralize o site na tela.

Posicionamento de Elementos

Utiliza-se a propriedade position para definir a forma como o elemento se posicionará na página: • static (padrão, posição no fluxo normal dos elementos)

• relative (relativa ao posicionamento original dele) • absolute (posição fixa na página)

 • fixed (posição fixa na tela)

Mão na massa 6

1. Posicione o botão Voltar no canto inferior direito da tela.

2. Posicione o indice no canto superior direito da página.

Visualização dos Elementos

Utiliza-se a propriedade display para definir a forma como o elemento se comportará na página: • inline

• block  • none (!= visibility)

Flutuação

• float: (left, right) • clear: (left, right, both)

Mais um pouco sobre Seletores

• União (vírgula) h1, h2, h3, p, a, span { ... }

• Interseção div.comentario { ... } p#inicial { ... }

• Aninhamento (espaço) #topo h1 { ... }.comentario p { ... }

Especificidade e/ou Prioridades

1. Atributos style dos elementos2. Maior quantidade de identificadores no seletor3. Maior quantidade de classes no seletor4. Maior quantidade de nomes de tags no seletor

Mão na massa 7

1. Desapareça com a caixa com identificador invisivel.

2. Faça as demais caixas ficarem uma ao lado da outra.

3. Coloque a caixa com identificador abaixo para não ficar ao lado das demais.

Pausa...

para o banheiro?

Javascript

Adiciona comportamento aos elementos e os manipula dinâmicamente.

Declaração na página

• Interna: <script type="text/javascript">... </script>  • Externa:

 <script type="text/javascript" src="myScript.js"></script>

Declaração de Função

function nome(var1,var2,...,varX) {// Algum código}

Variáveis

• Globais (escopo da página)

• Locais (escopo da função)

Document Object Model (DOM)

• Objetos representam recursos do navegador ou elementos do HTML;

• Objetos possuem atributos, métodos e tratadores de eventos (event handlers);

Objeto window

• status (texto na barra de status)• alert()• confirm()• print()• close()• Etc...

 Dá acesso aos objetos document, history e outros.

Objeto history

• back()• foward()• go()

Objeto document

• readyState• title• getElementById()• getElementsByTagName()• Etc...

Objeto HTMLElement

• childNodes[]• innerHTML• parentNode• nextSibling• getElementsByTagName()• removeAttribute()• setAttribute()• Etc...

Eventos

• onblur• onchange• onclick• ondblclick• onerror• onfocus• onkeydown• onkeypress• onkeyup• onload• onmousedown• onmousemove 

• onmouseout• onmouseover• onmouseup• onresize• onselect• onunload

Mão na massa 8

1. Defina uma função que imprime um texto numa janela de alerta.

2. Utilize a função para avisar o fim da carga da página;

3. Utilize a função para avisar há quanto tempo a página foi carregada a cada vez que o mouse passa pelo bloco.

jQuery      ( != jQuery UI )

"jQuery é uma biblioteca JavaScript rápida e concisa que simplifica a varredura de documentos HTML, a manipulação de eventos, animação e interações Ajax para um desenvolvimento web rápido. jQuery é projetado para mudar a maneira que você escreve JavaScript."  http://jquery.com/

http://docs.jquery.com/Main_Page

Alternativas existem

• MooTools• ExtJS• Prototype• YUI• Dojo

Declaração na Página

<script type="text/javascript" src="jquery.js"></script>

Sintaxe

$( selector ).action();

$( selector ).action1().action2().action3();

Seletores

• CSS• XPATH

http://api.jquery.com/category/selectors/

Manipulação de CSS

• addClass• removeClass• css   

Mão na massa 9

1. Defina cores alternadas nas linhas da tabela.

O que houve?

Tentamos manipular elementos que ainda não haviam sido carregados na tela.

Tem Solução?

Claro! Utilizar o evento document.ready para executar o processamento. 

$(document).ready( function() {    // Algum código});

Mão na massa 10

1. Copie os arquivos do exercício anterior. 2. Defina cores alternadas nas linhas da tabela.

Efeitos

• show / hide / toggle• fadeIn / fadeOut• slideUp / slideDown

Mão na massa 11

1. Fazer com que o corpo da tabela desapareça/apareça a cada clique no cabeçalho.

Manipulação

• before / after• preppend / append• remove• html• text• val

Mão na massa 12

1. Ao clicar no botão Adicionar inserir o conteúdo do textarea no fim da área de texto.

2. Ao clicar em um parágrafo, removê-lo do texto.

3. Ao clicar no botão Imprimir, abrir a janela de impressão.

Fim!

Já chega né?

www.myscrumhalf.com

www.gpetec.com.br

Obrigado!Rodrigo Aguas@rodrigoaguaswww.rodrigoaguas.comrodrigoaguas@gmail.com