CSS & JQquery
-
Upload
scrumhalf-gpe -
Category
Technology
-
view
206 -
download
1
description
Transcript of CSS & JQquery
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é?